AngularJS中service,factory,provider的区别

  1. angular原理 :运行在JavaScript context环境下
    通过队列watch列表 监听变量 ,APPLY 放入事件队列中,digest去轮训列表
  2. .control 初始化scope和增加方法
  3. .service 理解为MVC结构中的M层,来处理具体的业务逻辑,
    特点:

    1. 懒加载(lazy loading):只有在需要用的时候(也就是在其他service,filter,directive或者controller里面依赖注入的时候才会生成这个service实例)
    2. 单例模式(singleton):第一次被注入就创建实例,然后在cache中,直到app退出,只有在应用生命周期结束的时候(关闭浏览器)才会被清除
      服务三种实现方式:

    3.1factory()模式:常用,注册function ,函数返回service实例(含return),实例时调用,
    实现步骤:1.定义一个obj var service={}
    2. obj中含有方法和值 var service={ user:{},setName:function(){ 具体实现逻辑 } }
    3. return obj return service;
    不需要处理复杂的逻辑,且不需要使用config配置服务
    代码显示:

     app.factory('User', function ($http) { // injectables go here
         var backendUrl = "http://localhost:3000";
         //1.定义对象
         var service = {    // our factory definition
             //2.对象中含有方法和属性
             user: {},
             setName: function (newName) {
                 service.user['name'] = newName;
                 return newName;
             },
             save: function () {
                 return $http.post(backendUrl + '/users', {
                     user: service.user
                 });
             }
         };
         //3.返回对象
         return service;
     });

//在应用里面使用service()方法
app.controller('MainCtrl', function ($scope, User) {
   $scope.saveUser = User.setName("2222");
}); 

3.2service模式 :相当于对factory做了一层封装, 写factory中的方法和值 ,通过构造函数,调用方法一样
service()方法很适合使用在功能控制比较多的service里面

angular.module('myApp.services')
.service('User', function($http) { // injectables go here
  var self = this; // Save reference
  this.user = {};
  this.backendUrl = "http://localhost:3000";
  this.setName = function(newName) {
    self.user['name'] = newName;
  }
  this.setEmail = function(newEmail) {
    self.user['email'] = newEmail;
  }
  this.save = function() {
    return $http.post(self.backendUrl + '/users', {
      user: self.user
    })
  }
});

angular.module('myApp')
.controller('MainCtrl', function($scope, User) {
  $scope.saveUser = User.save;
});

3.3provider模式 : factory和service的底层均是provider, 里面含有 get g e t 属 性 ( 函 数 ) , 进 行 注 入 , get的函数也就是 factory中的function, 直接new一个对象给$get,通过注入的时候获取这个函数

angular.module('myApp.services')
.provider('User', function() {
  this.backendUrl = "http://localhost:3000";
  this.setBackendUrl = function(newUrl) {
    if (url) this.backendUrl = newUrl;
  }
  this.$get = function($http) { // injectables go here
    var self = this;
    var service = {
      user: {},
      setName: function(newName) {
        service.user['name'] = newName;
      },
      setEmail: function(newEmail) {
        service.user['email'] = newEmail;
      },
      save: function() {
        return $http.post(self.backendUrl + '/users', {
          user: service.user
        })
      }
    };
    return service;
  }
});

//为了给service进行配置,我们可以将provider注入到.config()方法里面
angular.module('myApp')
.config(function(UserProvider) {
  UserProvider.setBackendUrl("http://myApiBackend.com/api");
})

//这样我们就可以和其他方式一样在应用里面使用这个service了
angular.module('myApp')
.controller('MainCtrl', function($scope, User) {
  $scope.saveUser = User.save;
});

4.constant(name,value)可以将一个已经存在的变量值注册为服务,并将其注入到应用的其他部分中。其中,name为注册的常量的名字,value为注册的常量的值或对象。

angular.module('myApp') .constant('apiKey','123123123')
.controller('MyController', function($scope, apiKey) {
// 可以像上面一样用apiKey作为常量
// 用123123123作为字符串的值
$scope.apiKey = apiKey;
});

5.value(name,value)的name同样是需要注册的服务名,value将这个值将作为可以注入的实例返回。

ngular.module('myApp')
.value('apiKey','123123123');

它们最大的区别是:常量可以注入到配置函数中,而值不行。
通常情况下,可以通过value()来注册服务对象或函数,用constant()来配置数据。
当我们想要创建一个服务,并且这个服务只需要返回数据时,就可以使用constant(name,value)和value(name,value),不过,它们有两个显著的区别:

  1. value不可以在config里注入,但是constant可
  2. value可以修改,但是constant不可以修改,一般直接用constant配置一些需要经常使用的数据。

https://my.oschina.net/tanweijie/blog/295067
https://blog.csdn.net/u011579138/article/details/53290810

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值