angular服务

angular创建服务的五种方式:

? factory()

factory()方法是创建和配置服务的最快捷方式。factory()函数可以接受两个参数。
? name(字符串)
需要注册的服务名。
? getFn(函数)
这个函数会在AngularJS创建服务实例时被调用。

angular.module(‘myApp‘)
.factory(‘myService‘, function() {
return {
‘username‘: ‘auser‘
};
});

因为服务是单例对象,getFn在应用的生命周期内只会被调用一次。同其他AngularJS的服务
一样,在定义服务时,getFn可以接受一个包含可被注入对象的数组或函数。
getFn函数可以返回简单类型、函数乃至对象等任意类型的数据(同value()函数类似)。

angular.module(‘myApp‘)
.factory(‘githubService‘, [‘$http‘, function($http) {
return {
getUserEvents: function(username) {
// ...
}
};
}]);

? service()

使用service()可以注册一个支持构造函数的服务,它允许我们为服务对象注册一个构造
函数。
service()方法接受两个参数。
? name(字符串)
要注册的服务名称。
? constructor(函数)
构造函数,我们调用它来实例化服务对象。
service()函数会在创建实例时通过new关键字来实例化服务对象。

var Person = function($http) {
this.getName = function() {
return $http({ method: ‘GET‘, url: ‘/api/user‘});
};
};
angular.service(‘personService‘, Person);

? constant()

可以将一个已经存在的变量值注册为服务,并将其注入到应用的其他部分当中。例如,假设
我们需要给后端服务一个apiKey,可以用constant()将其当作常量保存下来。
constant()函数可以接受两个参数。
? name(字符串)
需要注册的常量的名字。
? value(常量)
需要注册的常量的值(值或者对象)。
constant()方法返回一个注册后的服务实例。

angular.module(‘myApp‘) .constant(‘apiKey‘,‘123123123‘)

这个常量服务可以像其他服务一样被注入到配置函数中:

angular.module(‘myApp‘)
.controller(‘MyController‘, function($scope, apiKey) {
// 可以像上面一样用apiKey作为常量
// 用123123123作为字符串的值
$scope.apiKey = apiKey;
});

? value()

如果服务的$get方法返回的是一个常量,那就没要必要定义一个包含复杂功能的完整服务,
可以通过value()函数方便地注册服务。
value()方法可以接受两个参数。
? name(字符串)
同样是需要注册的服务名。

? value(值)
将这个值将作为可以注入的实例返回。
value()方法返回以name参数的值为名称的注册后的服务实例。

angular.module(‘myApp‘)
.value(‘apiKey‘,‘123123123‘);

? provider()

所有服务工厂都是由$provide服务创建的,$provide服务负责在运行时初始化这些提供者。
提供者是一个具有$get()方法的对象,$injector通过调用$get方法创建服务实例。
$provider提供了数个不同的API用于创建服务,每个方法都有各自的特殊用途。
所有创建服务的方法都构建在provider方法之上。provider()方法负责在$providerCache
中注册服务。
从技术上说,当我们假定传入的函数就是$get()时,factory()函数就是用provider()方法
注册服务的简略形式。
下面两种方法的作用完全一样,并且会创建同一个服务。

angular.module(‘myApp‘)
.factory(‘myService‘, function() {
return {
‘username‘: ‘auser‘
};
})
// 这与上面工厂的用法等价
.provider(‘myService‘, {
$get: function() {
return {
‘username‘: ‘auser‘
};
}
});

是否可以一直使用.factory()方法来代替.provider()呢?
答案取决于是否需要用AngularJS的.config()函数来对.provider()方法返回的服务进行额
外的扩展配置。同其他创建服务的方法不同,config()方法可以被注入特殊的参数。
比如我们希望在应用启动前配置githubService的URL:

// 使用`.provider`注册该服务
angular.module(‘myApp‘, [])
.provider(‘githubService‘, function($http) {
// 默认的,私有状态
var githubUrl = ‘https://github.com‘
setGithubUrl: function(url) {
// 通过.config改变默认属性
if (url) { githubUrl = url }
},
method: JSONP, // 如果需要,可以重写
$get: function($http) {
self = this;
return $http({ method: self.method, url: githubUrl + ‘/events‘});
}
});

通过使用.provider()方法,可以在多个应用使用同一个服务时获得更强的扩展性,特别是
在不同应用或开源社区之间共享服务时。

在上面的例子中,provider()方法在文本githubService后添加Provider生成了一个新的提
供者,githubServiceProvider可以被注入到config()函数中。

angular.module(‘myApp‘, [])
.config(function(githubServiceProvider) {
githubServiceProvider.setGithubUrl("[email protected]");
});

如果希望在config()函数中可以对服务进行配置,必须用provider()来定义服务。
provider()方法为服务注册提供者。可以接受两个参数。
? name(字符串)
name参数在providerCache中是注册的名字。name+Provider会成为服务的提供者。同时name
也是服务实例的名字。
例如,如果定义了一个githubService,那它的提供者就是githubServiceProvider。
? aProvider(对象/函数/数组)
aProvider可以是多种形式。
如果aProvider是函数,那么它会通过依赖注入被调用,并且负责通过$get方法返回一个
对象。
如果aProvider是数组,会被当做一个带有行内依赖注入声明的函数来处理。数组的最后一
个元素应该是函数,可以返回一个带有$get方法的对象。
如果aProvider是对象,它应该带有$get方法。
provider()函数返回一个已经注册的提供者实例。
直接使用provider() API是最原始的创建服务的方法:

// 在模块对象上直接创建provider的例子
angular.module(‘myApp‘, [])
.provider(‘UserService‘, {
favoriteColor: null,
setFavoriteColor: function(newColor) {
this.favoriteColor = newColor;
},
// $get函数可以接受injectables
$get: function($http) {
return {
‘name‘: ‘Ari‘,
getFavoriteColor: function() {
return this.favoriteColor || ‘unknown‘;
}
};
}
});

用这个方法创建服务,必须返回一个定义有$get()函数的对象,否则会导致错误。

// Get the injector
var injector = angular.injector([‘myApp‘]); // Invoke our service
injector.invoke(
[‘UserService‘, function(UserService) {
// UserService returns
// {
// ‘name‘: ‘Ari‘,
// getFavoriteColor: function() {}
// }
}]);

.provider()是非常强大的,可以让我们在不同的应用中共享服务。
了解constant()和value()方法对于创建服务也是非常重要的。

时间: 2024-10-12 10:35:29

angular服务的相关文章

自定义Angular服务

Angular内置了很多服务,比如和浏览器地址栏交互的$location服务,和服务器进行交互的$http服务 自然自己也可以自定义服务. 使用服务可以很好的在多个Angular控制器之间进行交互和共享状态,因此自己创建符合当前需要的服务往往可以使效率事半功倍. 如何创建Angular服务? Angular提供了模型对象的API来定义服务,一下三个函数可以用来创建一般的服务 函数 定义 provider(name,Object or constructor()) 一个可配置的服务,创建的逻辑比较

angular 服务 service factory provider constant value

angular服务 服务是对公共代码的抽象,由于依赖注入的要求,服务都是单例的,这样我们才能到处注入它们,而不用去管理它们的生命周期. angular的服务有以下几种类型: 常量(Constant): 用于声明不会被修改的值. 变量(Value): 用于声明会被修改的值. 服务(Service): 这个名称跟服务这个大概念同名,就种行为就像是给自己孩子取名为"孩子".只需要创建这个服务,然后等angular把它new出来,保存这个服务,然后就可以到处注入了. 工厂(Factory): 

angular 服务

在Angular里面,services作为单例对象在需要到的时候被创建,只有在应用生命周期结束的时候(关闭浏览器)才会被清除.而controllers在不需要的时候就会被销毁了.服务用于在控制器之间进行共享,用的时候只要把服务注入到控制器就可以了. provider(name,object) provider(name,constroctor) factory(name,$getFunction) service(name,constroctor()) 例子: 用factory创建服务 在ser

angular服务插件1——对话框&提示框

对话框服务: ( 需要调用amazeui的modal样式 ) const angular = require("angular"); const jqLite = angular.element; /** * @ngdoc service * @name commonModal * @module common.modal.service * @usage commonModal.fromTemplateUrl('./modal.html',{ scope: $scope, }).th

IndexedDB通用功能封装成angular服务

代码来源于传智播客 1 angular.module('indexdb', []) 2 .factory('IndexdbJs', ['$ionicPopup',function ($ionicPopup) { 3 4 window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; 5 window.IDBTransaction = window

高效利用Angular中内置服务

AngularJS中为我们提供了众多的内置服务,通过这些内置服务可以轻松的实现一些常用功能.下面对Angular中常用的内置服务进行一下总结. 1.$location服务 $location服务用于返回当前页面的URL地址,示例代码如下: var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $location) { $scope.myUrl = $location.absU

Angular模块/服务/MVVM

angular 与 jquery 共同点 都是一个前端的JS文件而已 不同点: angular 是一个框架 我们写的代码由框架调用,我们必须要按照特定的规则编写代码 jquery是一个库 我们调用库预制的方法或对象实现我们想要功能 在思想上:+jquery提高了操作DOM的开发效率 angular 几乎没有任何DOM操作(不是没有,只是不用我们自己操作) angular 内置一个类似jqLite的东西angular.element() angular 不提倡DOM操作 什么是AngularJS

基于Karma 和 Jasmine 的Angular 测试(持续更新中)

最近对前端测试较感兴趣,尤其是Nodejs + Karma + Jasmine 对Angular 的测试.到处看看,做个记录吧,断断续续的更新. <一> 用Jasmine 测试 Angular 的service 1. 先扔代码吧: var app = angular.module('Application', []); app.factory('myService', function(){     var service  = {};     service.one  = 1;     se

Services (服务)

*/ .hljs { display: block; padding: 0.5em; background: #F0F0F0; } .hljs, .hljs-subst, .hljs-tag .hljs-title, .lisp .hljs-title, .clojure .hljs-built_in, .nginx .hljs-title { color: black; } .hljs-string, .hljs-title, .hljs-constant, .hljs-parent, .hl