关于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 相关文章推荐
js模拟select下拉菜单控件的代码
May 08 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
微信小程序转发事件实现解析
Oct 22 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 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 header功能的使用
2013/10/28 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
smarty简单入门实例
2014/11/28 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
2019/09/14 Javascript
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
Python logging模块学习笔记
2014/05/24 Python
Django框架中方法的访问和查找
2015/07/15 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
关于打架的检讨书
2014/01/17 职场文书
会计毕业自我鉴定
2014/02/05 职场文书
厨师长岗位职责
2014/03/02 职场文书
社团活动总结怎么写
2014/06/30 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
2019经典广告词集锦!
2019/07/02 职场文书