蝙蝠岛资源网

关于AngularJS中几种Providers的区别总结
网络编程 2024/12/23 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

原文：https://xebia.com/blog/differ...

什么是Provider"color: #ff0000">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行的代码重写为:

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

Value

value是一个简单的可被注入的值，可以是string, number, 也可以是function。

与constant不同的是：value不能被注入到configurations, 但value能被decorators拦截。

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是一个很好的方式，用于控制器之间传递数据，如共享数据。

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。

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。

标签：
angular,providers,angularjs的providers,自定义provider
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“关于AngularJS中几种Providers的区别总结”

暂无关于AngularJS中几种Providers的区别总结的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com