angularJS Provider、factory、service详解及实例代码


Posted in Javascript onSeptember 21, 2016

factory

用 Factory 就是创建一个对象,为它添加属性,然后把这个对象返回出来。你把 service 传进 controller 之后,在 controller 里这个对象里的属性就可以通过 factory 使用了。

app.controller('myFactoryCtrl', function($scope, myFactory){
  $scope.artist = myFactory.getArtis();
});
app.factory('myFactory', function(){
  var _artist = '';
  var service = {};

  service.getArtist = function(){
    return _artist;
  }
  return service;
});

service

Service 是用"new"关键字实例化的。因此,你应该给"this"添加属性,然后 service 返回"this"。你把 service 传进 controller 之后,在controller里 "this" 上的属性就可以通过 service 来使用了。

app.controller('myFactoryCtrl', function($scope, myService){
  $scope.artist = myService.getArtis();
});
app.service('myService', function(){
  var _artist ='';
  this.getArtist = function(){
    return _artist;
  }
});

provider

Providers 是唯一一种你可以传进 .config() 函数的 service。当你想要在 service 对象启用之前,先进行模块范围的配置,那就应该用 provider。

app.controller('myProviderCtrl', function($scope, myProvider){
  $scope.artist = myProvider.getArtist();
  $scope.data.thingFromConfig = myProvider.thingOnConfig;
});
app.provider('myProvider', function(){
  this._artist = '';
  this.thingFromConfig = '';

  this.$get = function(){
    var that = this;
    return {
       getArtist: function(){
         return that._artist;
       },
       thingOnConfig: that.thingFromConfig
    }
  }
});
app.config(function(myProviderProvider){
  myProviderProvider.thingFromConfig = 'This was set in config()';
});

value和constant

$provide.value('myValue', 10);
$provide.constant('myConstant', 10);
/*


二者的区别:
1. value可以被修改,constant一旦声明就无法修改
2. value不可以在config中注入,constant可以。
*/

provider、factory、service三者的关系

app.provider('myDate', { 
  $get: function() { 
   return new Date(); 
  }
});
//可以写成
app.factory('myDate', function(){ 
 return new Date();
});
//可以写成
app.service('myDate', Date);

总结

  1. 所有的供应商都只被实例化一次,也就说他们都是单例的
  2. 除了constant,所有的供应商都可以被装饰器(decorator)装饰
  3. value就是一个简单的可注入的值
  4. service是一个可注入的构造器
  5. factory是一个可注入的方法
  6. decorator可以修改或封装其他的供应商,当然除了constant
  7. provider是一个可配置的factory

以上就是对angularJS Provider、factory、service的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript Perfection kill 测试及答案
Mar 23 Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
图解JavaScript中的this关键字
May 28 Javascript
jquery实现倒计时功能
Dec 28 Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
关于vue中如何监听数组变化
Apr 28 Vue.js
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 #Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 #Javascript
D3.js实现折线图的方法详解
Sep 21 #Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 #Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 #Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 #Javascript
D3.js实现柱状图的方法详解
Sep 21 #Javascript
You might like
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
jQuery的框架介绍
2016/05/11 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
2016/07/05 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
keras多显卡训练方式
2020/06/10 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
文秘专业毕业生就业推荐信
2013/11/08 职场文书
创业者是否需要商业计划书?
2014/02/07 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
Python深度学习之实现卷积神经网络
2021/06/05 Python
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server