关于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 相关文章推荐
用jscript实现新建和保存一个word文档
Jun 15 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
JS中怎样判断undefined(比较不错的方法)
Mar 27 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
vue组件库的在线主题编辑器的实现思路
Apr 03 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 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框架Laravel的小技巧两则
2015/02/10 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
python opencv实现图像边缘检测
2019/04/29 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
Django操作session 的方法
2020/03/09 Python
Python 如何对文件目录操作
2020/07/10 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
美国宠物商店:Wag.com
2016/10/25 全球购物
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
建筑工程专业大学生求职信
2014/04/23 职场文书
小小商店教学反思
2014/04/27 职场文书
语文教研活动总结
2014/07/02 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
爱国主题班会教案
2015/08/14 职场文书
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
利用Python实现Picgo图床工具
2021/11/23 Python