本文摘自PHP中文网,作者青灯夜游,侵删。

相关教程推荐:《angular教程》
什么是Provider?
angularjs文档对provider的定义:
provider是一个带有$get()
方法的对象。injector调用$get
方法创建一个新的service的实例。provider还有一些其他的方法,可以用来配置provider。
AngularJS使用$provide
注册新的providers。providers基本上都会创建一个新实例, 但每个provider只创建一次。$provide
提供了6种方法创建自定义provider, 我会用简单的代码示例分别解释他们。
6种方法如下:
constant
value
service
factory
decorator
provider
Constant
constant能被injected到任何地方。constant不能被decorator拦截, 意味着constant的值永远不能被改变。
1 2 3 4 5 6 7 8 | var app = angular.module( 'app' , []);
app.config( function ($provide) {
$provide.constant( 'movieTitle' , 'The Matrix' );
});
app.controller( 'ctrl' , function (movieTitle) {
expect(movieTitle).toEqual( 'The Matrix' );
});
|
AngularJS提供了一种更简便的方式创建constant. 你可以将上面3至5行的代码重写为:
1 | app.constant( 'movieTitle' , 'The Matrix' );
|
Value
value是一个简单的可被注入的值,可以是string, number, 也可以是function。
与constant不同的是:value不能被注入到configurations, 但value能被decorators拦截。
1 2 3 4 5 6 7 8 | var app = angular.module( 'app' , []);
app.config( function ($provide) {
$provide.value( 'movieTitle' , 'The Matrix' )
});
app.controller( 'ctrl' , function (movieTitle) {
expect(movieTitle).toEqual( 'The Matrix' );
})
|
创建value的简单方法:
1 | app.value( 'movieTitle' , 'The Matrix' );
|
Service
service是一个可以注入的构造函数。如果你想,你可以在函数中指定需要的依赖。
service是一个单例, 只被创建一次。services是一个很好的方式,用于控制器之间传递数据,如共享数据。
1 2 3 4 5 6 7 8 9 10 | var app = angular.module( 'app' ,\[\]);
app.config( function ($provide) {
$provide.service( 'movie' , function () {
this .title = 'The Matrix' ;
});
});
app.controller( 'ctrl' , function (movie) {
expect(movie.title).toEqual( 'The Matrix' );
});
|
创建service简单方式:
1 2 3 | app.service( 'movie' , function () {
this .title = 'The Matrix' ;
});
|
Factory
factory是一个可注入的函数。
与service的相同点:factory也是一个单例,也可以在此函数中指定依赖。
区别是:factory注入一个普通函数,AngularJs将调用此函数,而service注入一个构造函数。
service是一个构造函数,要调用new创建一个新对象。而用factory,你可以让这个函数返回你想要的任何东西。
你将会看到,factory是一个只有$get方法的provider。
1 2 3 4 5 6 7 8 9 10 11 12 | var app = angular.module( 'app' , []);
app.config( function ($provide) {
$provide.factory( 'movie' , function () {
return {
title: 'The Matrix' ;
}
});
});
app.controller( 'ctrl' , function (movie) {
expect(movie.title).toEqual( 'The Matrix' );
});
|
创建factory的简单方式:
1 2 3 4 5 | app.factory( 'movie' , function () {
return {
title: 'The Matrix' ;
}
});
|
Decorator
decorator可以修改或封装其它的providers,但constant不能被装饰。
1 2 3 4 5 6 7 8 9 10 11 | var app = angular.module( 'app' , []);
app.value( 'movieTitle' , 'The Matrix' );
app.config( function ($provide) {
$provide.decorator( 'movieTitle' , function ($delegate) {
return $delegate + ' - starring Keanu Reeves' ;
});
});
app.controller( 'myController' , function (movieTitle) {
expect(movieTitle).toEqual( 'The Matrix - starring Keanu Reeves' );
});
|
Provider
provider是所有providers中最复杂的,可以有复杂的creation函数和配置选项。
provider实际是一个可配置的factory。 provider接受一个对象或构造函数。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | var app = angular.module( 'app' , []);
app.provider( 'movie' , function () {
var version;
return {
setVersion: function (value) {
version = value;
},
$get: function () {
return {
title: 'The Matrix' + ' ' + version
}
}
}
});
app.config( function (movieProvider) {
movieProvider.setVersion( 'Reloaded' );
});
app.controller( 'ctrl' , function (movie) {
expect(movie.title).toEqual( 'The Matrix Reloaded' );
});
|
总结
所有的providers只会被实例化一次,因此他们都是单例的。
除了constant,其他的providers都可以被decorated。
constant是一个值, 可以被注入到任何地方,它的值不能被改变。
value是一个简单的可注入的值。
service是一个可注入的构造函数。
factory是以个可注入的函数。
decorator可以修改或封装其它的providers,除了constant。
provider是一个可配置的factory。
英文原文地址:https://xebia.com/blog/differences-between-providers-in-angularjs/
相关推荐:编程教学
以上就是谈谈AngularJS中Providers之间的差异的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
bootstrap与angularjs区别
angularjs是什么?为什么用angularjs?
11 个对web开发者非常有用的angularjs工具
angularjs数据绑定失效的解决方法
angular与angularjs、react和vue的简单对比
谈谈angularjs中providers之间的差异
angularjs的ng-bind-html指令详解
angular2 ngmodel模块的详细介绍
angularjs“路由”的简介及用法介绍
angular和angularjs间有什么关系
更多相关阅读请进入《angularjs》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 谈谈AngularJS中Providers之间的差异