AngularJS中的Provider们:Service和Factory等的区别

引言

看了很多文章可能还是不太说得出 AngularJS 中的几个创建供应商( provider )的方法( factory() , service() , provider() )到底有啥区别,啥时候该用啥,之前一直傻傻分不清楚,现在来总结一下。

下文中泛指统一用中文,英文即为特指 $provide 方法中对应方法创建出的东东

供应商==>泛指provider 服务==>泛指service  provider==>provider()方法创建的东东 service==>service()方法创建的东东

先说说供应商($provide)

$provide 服务负责告诉 Angular 如何创造一个新的可注入的东西:即服务。服务会被叫做供应商的东西来定义,你可以使用 $provide 来创建一个供应商。你需要使用 $provide 中的 provider() 方法来定义一个供应商,同时你也可以通过要求 $provide 被注入到一个应用的 config 函数中来获得 $provide 服务。

上面的描述是官方wiki的翻译版,如果有些绕的话,看下这张图:

AngularJS中的Provider们:Service和Factory等的区别

  • $provide 是一个服务,在 Auto 模块中

  • 这个服务下面有好多方法,是用来定义供应商

  • 而供应商是用来提供服务的,被注入来注入去的东西就是供应商们提供的服务了

下面是一个例子:

myMod.config(function($provide) {   $provide.provider('greeting', function() {     this.$get = function() {       return function(name) {         alert("Hello, " + name);       };     };   }); });

这个例子可以说是最终形态,先大概看下

定义供应商的方法们

AngularJS$provide 去定义一个供应商,这个 $provide 有5个用来创建供应商的方法:

  • constant

  • value

  • service

  • factory

  • provider

  • decorator 我没有说我也是,我只是路过o(╯□╰)o

Constant

定义常量用的,这货定义的值当然就不能被改变,它可以被注入到任何地方,但是不能被装饰器( decorator )装饰

var app = angular.module('app', []);   app.config(function ($provide) {   $provide.constant('movieTitle', 'The Matrix'); });   app.controller('ctrl', function (movieTitle) {   expect(movieTitle).toEqual('The Matrix'); });

语法糖:

app.constant('movieTitle', 'The Matrix');

Value

这货可以是 string , number 甚至 function ,它和 constant 的不同之处在于,它可以被修改,不能被注入到 config 中,但是它可以被 decorator 装饰

var app = angular.module('app', []);   app.config(function ($provide) {   $provide.value('movieTitle', 'The Matrix') });   app.controller('ctrl', function (movieTitle) {   expect(movieTitle).toEqual('The Matrix'); })

语法糖:

app.value('movieTitle', 'The Matrix');

Service

它是一个可注入的构造器,在 AngularJS 中它是单例的,用它在 Controller 中通信或者共享数据都很合适

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'); });

语法糖:

app.service('movie', function () {   this.title = 'The Matrix'; });

service 里面可以不用返回东西,因为 AngularJS 会调用 new 关键字来创建对象。但是返回一个自定义对象好像也不会出错。

Factory

它是一个可注入的 function ,它和 service 的区别就是: factory 是普通 function ,而 service 是一个构造器( constructor ),这样 Angular 在调用 service 时会用 new 关键字,而调用 factory 时只是调用普通的 function ,所以 factory 可以返回任何东西,而 service 可以不返回(可查阅new关键字的作用)

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'); });

语法糖:

app.factory('movie', function () {   return {     title: 'The Matrix';   } });

factory 可以返回任何东西,它实际上是一个只有 $get 方法的 provider

Provider

provider 是他们的老大,上面的几乎(除了 constant )都是 provider 的封装, provider 必须有一个 $get 方法,当然也可以说 provider 是一个可配置factory

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'); });

注意这里 config 方法注入的是 movieProvider ,上面定义了一个供应商叫 movie ,但是注入到 config 中不能直接写 movie ,因为前文讲了注入的那个东西就是服务,是供应商提供出来的,而 config 中又只能注入供应商(两个例外是 $provide$injector ),所以用驼峰命名法写成 movieProviderAngular 就会帮你注入它的供应商。(更详细可参考文末 官方wiki翻译版 中的 配置provider

Decorator

这个比较特殊,它不是 provider ,它是用来装饰其他 provider 的,而前面也说过,他不能装饰 Constant ,因为实际上 Constant 不是通过 provider() 方法创建的。

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'); });

总结

  • 所有的供应商都只被实例化一次,也就说他们都是单例的

  • 除了 constant ,所有的供应商都可以被装饰器( decorator )装饰

  • value 就是一个简单的可注入的值

  • service 是一个可注入的构造器

  • factory 是一个可注入的方法

  • decorator 可以修改或封装其他的供应商,当然除了 constant

  • provider 是一个可配置的 factory

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » AngularJS中的Provider们:Service和Factory等的区别

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址