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 相关文章推荐
如何使用jQuery来处理图片坏链具体实现步骤
May 02 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
vue-loader教程介绍
Jun 14 Javascript
Vue.directive使用注意(小结)
Aug 31 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 21 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 Javascript
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
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
python处理cookie详解
2014/02/07 Python
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
Python Logging 日志记录入门学习
2018/06/02 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
新闻专业推荐信范文
2013/11/20 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
自荐信格式范文
2015/03/04 职场文书
教师岗位职责范本
2015/04/02 职场文书