关于AngularJS中几种Providers的区别总结


Posted in Javascript onMay 17, 2020

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

什么是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的值永远不能被改变。

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。

到此这篇关于关于AngularJS中几种Providers的区别总结的文章就介绍到这了,更多相关AngularJS中Providers区别内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
js继承实现方法详解
Dec 16 Javascript
angularjs中的$eval方法详解
Apr 24 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
JavaScript实现世界各地时间显示
Sep 07 Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 #Javascript
JavaScript链式调用原理与实现方法详解
May 16 #Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 #Javascript
JavaScript接口实现方法实例分析
May 16 #Javascript
JavaScript 类的封装操作示例详解
May 16 #Javascript
jquery+css3实现的经典弹出层效果示例
May 16 #jQuery
js抽奖转盘实现方法分析
May 16 #Javascript
You might like
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
PHP实现的购物车类实例
2015/06/17 PHP
javascript中的几个运算符
2007/06/29 Javascript
jquery插件之easing使用
2010/08/19 Javascript
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
javascript继承的六大模式小结
2015/04/13 Javascript
JavaScript表格常用操作方法汇总
2015/04/15 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
Python中转换角度为弧度的radians()方法
2015/05/18 Python
Python实现快速多线程ping的方法
2015/07/15 Python
python相似模块用例
2016/03/04 Python
python脚本监控docker容器
2016/04/27 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
2013年高中生自我评价
2013/10/23 职场文书
一份婚庆公司创业计划书
2014/01/11 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
质量负责人任命书
2014/06/06 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
聚会通知怎么写
2015/04/23 职场文书
报案材料怎么写
2015/05/25 职场文书
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers
vue修饰符.capture和.self的区别
2022/04/22 Vue.js
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers