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

 更新时间:2016年09月21日 09:52:36   作者:在路上_W  
这篇文章主要介绍了angularJS Provider详解及实例代码的相关资料,需要的朋友可以参考下

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的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

相关文章

  • AngularJS中的Directive自定义一个表格

    AngularJS中的Directive自定义一个表格

    本篇文章给大家介绍在angularjs中自定义一个有关表格的directive,涉及到angularjs directive相关知识,对本文感兴趣的朋友一起学习吧
    2016-01-01
  • angularjs $http调用接口的方式详解

    angularjs $http调用接口的方式详解

    今天小编就为大家分享一篇angularjs $http调用接口的方式详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • AngularJS 仿微信图片手势缩放的实例

    AngularJS 仿微信图片手势缩放的实例

    这篇文章主要介绍了AngularJS 仿微信图片手势缩放的实例的相关资料,希望大家通过本文实现这样的功能,需要的朋友可以参考下
    2017-09-09
  • Angular获取ngIf渲染的Dom元素示例

    Angular获取ngIf渲染的Dom元素示例

    这篇文章主要为大家介绍了Angular获取ngIf渲染的Dom元素示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 用Angular实现一个扫雷的游戏示例

    用Angular实现一个扫雷的游戏示例

    这篇文章主要介绍了用Angular实现一个扫雷的游戏示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • Angularjs上传文件组件flowjs功能

    Angularjs上传文件组件flowjs功能

    现在的项目,无论代销,几乎不会缺省的一个功能就是上传下载功能,今天谈一谈使用AngularJS+bootsrtap下的上传下载功能,需要的朋友参考下吧
    2017-08-08
  • AngularJS实现的生成随机数与猜数字大小功能示例

    AngularJS实现的生成随机数与猜数字大小功能示例

    这篇文章主要介绍了AngularJS实现的生成随机数与猜数字大小功能,结合完整实例形式分析了AngularJS随机数生成与数值判定相关操作技巧,需要的朋友可以参考下
    2017-12-12
  • angular.JS实现网页禁用调试、复制和剪切

    angular.JS实现网页禁用调试、复制和剪切

    这篇文章主要给大家介绍了angular.JS实现网页禁用调试、复制和剪切的相关资料,文中介绍的非常详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-03-03
  • 浅谈angular表单提交中ng-submit的默认使用方法

    浅谈angular表单提交中ng-submit的默认使用方法

    今天小编就为大家分享一篇浅谈angular表单提交中ng-submit的默认使用方法。具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • AngularJS 2.0入门权威指南

    AngularJS 2.0入门权威指南

    这篇文章主要介绍了AngularJS 2.0入门权威指南的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-10-10

最新评论