原文:https://xebia.com/blog/differ...angularjs
什么是Provider?
AngularJS文档对provider的定义:
provider是一个带有$get()
方法的对象。injector调用$get
方法建立一个新的service的实例。provider还有一些其余的方法,能够用来配置provider。app
AngularJS使用$provide
注册新的providers。providers基本上都会建立一个新实例, 但每一个provider只建立一次。$provide
提供了6种方法建立自定义provider, 我会用简单的代码示例分别解释他们。
6种方法以下:
constant
value
service
factory
decorator
provideride
Constant
constant能被injected到任何地方。constant不能被decorator拦截, 意味着constant的值永远不能被改变。函数
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行的代码重写为:this
app.constant('movieTitle', 'The Matrix');
Value
value是一个简单的可被注入的值,能够是string, number, 也能够是function。
与constant不一样的是:value不能被注入到configurations, 但value能被decorators拦截。code
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的简单方法:对象
app.value('movieTitle', 'The Matrix');
Service
service是一个能够注入的构造函数。若是你想,你能够在函数中指定须要的依赖。
service是一个单例, 只被建立一次。services是一个很好的方式,用于控制器之间传递数据,如共享数据。blog
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简单方式:文档
app.service('movie', function () { this.title = 'The Matrix'; });
Factory
factory是一个可注入的函数。
与service的相同点:factory也是一个单例,也能够在此函数中指定依赖。
区别是:factory注入一个普通函数,AngularJs将调用此函数,而service注入一个构造函数。
service是一个构造函数,要调用new建立一个新对象。而用factory,你能够让这个函数返回你想要的任何东西。
你将会看到,factory是一个只有$get方法的provider。get
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的简单方式:
app.factory('movie', function () { return { title: 'The Matrix'; } });
Decorator
decorator能够修改或封装其它的providers,但constant不能被装饰。
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接受一个对象或构造函数。
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。