我们不要试图去复用Controller,当我们发现两个或多个Controller有相同的代码时,我们应该抽取一个服务。
一.使用$http服务
HTTPBasic.html
<html ng-app="MyModule"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="framework/angular-1.3.0.14/angular.js"></script> <script src="HTTPBasic.js"></script> </head> <body> <div ng-controller="LoadDataCtrl"> <ul> <li ng-repeat="user in users"> {{user.name}} </li> </ul> </div> </body> </html>
HTTPBasic.js
var myModule=angular.module("MyModule",[]); myModule.controller('LoadDataCtrl', ['$scope','$http', function($scope,$http){ $http({ method: 'GET', url: 'data.json' }).success(function(data, status, headers, config) { console.log("success..."); console.log(data); $scope.users=data; }).error(function(data, status, headers, config) { console.log("error..."); }); }]);
data.json
[{ "name": "《用AngularJS开发下一代WEB应用》" },{ "name": "《Ext江湖》" },{ "name": "《ActionScript3.0游戏设计基础(第二版)》" }]
运行结果:
大家看到我是将其放到Tomcat容器中运行的,其实新版的FireFox支持本地Ajax请求,因此,可以直接在FireFox中运行。
二.创建自已的Service
MyService1.html
<html ng-app="MyServiceApp"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="framework/bootstrap-3.0.0/css/bootstrap.css"> <script src="framework/angular-1.3.0.14/angular.js"></script> <script src="MyService1.js"></script> </head> <body> <div ng-controller="ServiceController"> <label>用户名</label> <input type="text" ng-model="username" placeholder="请输入用户名" /> <pre ng-show="username">{{users}}</pre> </div> </body> </html>
MyService1.js
var myServiceApp = angular.module("MyServiceApp", []); myServiceApp.factory('userListService', ['$http', function($http) { var doRequest = function(username, path) { return $http({ method: 'GET', url: 'users.json' }); } return { userList: function(username) { return doRequest(username, 'userList'); } }; } ]); myServiceApp.controller('ServiceController', ['$scope', '$timeout', 'userListService', function($scope, $timeout, userListService) { var timeout; $scope.$watch('username', function(newUserName) { if (newUserName) { if (timeout) { $timeout.cancel(timeout); } timeout = $timeout(function() { userListService.userList(newUserName) .success(function(data, status) { $scope.users = data; }); }, 350); } }); } ]); //...
users.json
《Ext江湖》 《ActionScript3.0游戏设计基础(第二版)》 《用AngularJS开发下一代WEB应用》
运行效果:
当在用户名这个输入框中输入内容后过一小小会,页面就会发请求获取数据在下面展示出来,如下所示:
特别说明:正常我们每按下一个键就会向后台发送一次请求,页面会不断重刷,timeout表示当我们在页面上输入时,延迟指定的时间(这里是350毫秒)才向后台发送请求。
三.Service的特性
1.Service都是单例的
2.Service由$injector负责实例化(也就是说,不要去new一个Service)
3.Service在整个应用的生命周期中存在,可以用来共享数据
4.在需要使用的地方利用依赖注入机制注入Service
5.自定义的Service需要密致的内置的Service后面
6.内置Service的命名以$符号开头,自定义Service应该避免
四.Service、Factory、Provider本质都是Provider
function provider(name, provider_) { assertNotHasOwnProperty(name, 'service'); //如果provider_是函数或是数组,就创建实例 if (isFunction(provider_) || isArray(provider_)) { provider_ = providerInjector.instantiate(provider_); } //如果是Provider,必须定义一个$get的factory方法 if (!provider_.$get) { throw $injectorMinErr('pget', "Provider '{0}' must define $get factory method.", name); } //如果命名和前缀在providerCache中能找到,就会将其返回出去 return providerCache[name + providerSuffix] = provider_; }
Service、Provider、Factory本质上都是Provider,只是后面的顺序和格式不同
Provider模式是“策略模式”+“抽象工厂模式“的混合体
五.使用$filter服务
1.$filter是用来进行数据格式化的专用服务
2.AngularJS内置了9个filter:currency,date,filter,json,limitTo,lowercase,number,orderBy,uppercase
3.filter可以嵌套使用(用管道符号|分隔)
4.filter是可以传递参数的
5.用户可以定义自已的filter
date使用实例:
Filter.html
<html ng-app="MyModule"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="framework/angular-1.3.0.14/angular.js"></script> <script src="Filter.js"></script> </head> <body> {{ 1304375948024 | date }} <br> {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }} <br> {{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }} <br> </body> </html>
Filter.js
var myModule=angular.module("MyModule",[]);
运行结果:
定义自已的filter实例:
MyFilter.html
<html ng-app="MyModule"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="framework/angular-1.3.0.14/angular.js"></script> <script src="MyFilter.js"></script> </head> <body> {{'Hello Angular!'|filter1 }} </body> </html>
MyFilter.js
var myModule=angular.module("MyModule",[]); myModule.filter('filter1',function(){ return function(item){ return item + 'o(∩_∩)o'; } });
运行结果:
六.其它内置的Service介绍
1.$compile:编译服务
2.$filter:数据格式化工具,内置了8个
3.$interval:用来做一些定时器之类的
4.$timeout:用来做一些定时器之类的
5.$locale:用于国际化
6.$location:监控浏览器地址变化的
7.$log:提供日志
8.$parse
9.$http:封装了Ajax
特别说明:这里是我在慕课网的学习笔记,仅用于加深映像以及后续的回顾。
相关推荐
Laravel的服务容器是一个强大的依赖注入工具,Service Provider是与容器交互的桥梁。通过服务容器,我们可以实现依赖的自动解析,提高代码的可测试性和可维护性。 3. **门面(Facades)** Laravel的门面提供了一...
**文件系统服务提供者(File System Service Provider)** 在Java Standard Edition (Java SE) 平台中,Java Naming and Directory Interface (JNDI) 是一个关键的API,它为应用程序提供了统一的方式来查找和管理命名...
### 四大组件详解:Activity、Service、Content Provider与Broadcast Receiver #### 一、Activity **定义:** Activity是Android应用程序中的四大基本组件之一,它代表一个屏幕界面,用户可以直接与其进行交互。每...
File System Service Provider for JNDI。This is the Early Access 4 release of the JNDI/File system service provider. It contains two jars,they are fscontext.jar and providerutil.jar. The doc is ...
### Net SAML2 Service Provider Framework:深度解析与应用 #### 引言 《Net SAML2 Service Provider Framework》是一份详尽的文档,旨在介绍和解释.NET环境下的SAML2服务提供者框架的各个方面。该框架是为实现...
【CLC-CCIE Service Provider v5.0 实践实验室 v1.0】是一个专为备考CCIE Service Provider认证的高级实践课程。该课程由CCIE Lab Center (CLC) 创建,旨在帮助考生提升在服务提供商网络领域的专业技能。课程发布于...
**Spring Cloud Eureka Service Provider** 是一个基于Spring Cloud框架的组件,用于实现服务发现功能。在微服务架构中,服务发现是至关重要的,它允许服务消费者找到并与其所需的服务进行通信。Eureka是Netflix开发...
Service Provider通过`register`和`boot`两个方法与应用进行交互。 1. **注册(Register)**:在`register`方法中,我们主要进行服务绑定。这是将类与接口关联,或者直接注册类实例到服务容器的过程。例如,我们...
在Laravel框架中,Service Provider是核心的组件之一,它扮演着连接应用和其依赖的服务的角色。Service Provider是实现依赖注入、服务绑定和服务容器的主要工具,使得代码更加可测试、可维护和解耦。本教程将深入...
在Java平台上,Service Provider Interface (SPI) 是一种允许第三方开发者扩展Java应用程序的机制。它使得开发者可以为已存在的服务提供自定义实现,而无需修改原始的代码。在Java的类库中,许多接口都利用了SPI,...
由于没有具体的库文档,我们只能根据名称进行推测——"Fragment"可能涉及到部分数据或组件的管理,而"Service"和"Provider"则可能与服务的创建、注册和提供有关,可能是为了方便开发者构建分布式系统或者组件化应用...
GitLab API Service Provider 是一个用于与GitLab API进行交互的服务提供者,它允许开发者通过编程的方式便捷地访问GitLab的各种功能,如仓库管理、用户管理、项目管理等。这个源码库可能是用Java或其他支持HTTP请求...
Angular中的自定义服务Service、Provider以及Factory详解 在Angular中的自定义服务中,有三种方式可以实现服务的复用性,即Service、Provider和Factory。这些方法可以提高Angular代码的复用性和可维护性。 Factory...
与Factory相比,Service更强调面向对象的编程风格。以下是一个Service的例子: ```javascript app.service('myService', function() { this.data = null; this.fetchData = function() { // ...同上... }; });...
在实际开发过程中,理解和利用好logger与service provider,可以极大地提高Smallworld应用的健壮性和可维护性。例如,通过logger监控系统状态,快速定位故障;通过service provider实现模块化,增强系统的可扩展性。...
在标题“winsock service provider interface.rar_WINSOCK SPI_spi_spi lsp_w”中,我们看到关键词“WINSOCK SPI”、“SPI”和“LSP”,这些都是与Winsock SPI相关的术语。WINSOCK SPI 是 Winsock 的服务提供者接口...
dflydev-doctrine-orm-service-provider, Doctrine ORM服务提供商 Doctrine ORM服务提供程序为Pimple应用程序提供 Doctrine ORM实体管理器服务。特性利用核心 Doctrine 服务提供商( Silex ) 。默认的实体管理器可以...