angularjs中factory, service和provider


 

在Angular里面,services作為單例對象在需要到的時候被創建,只有在應用生命周期結束的時候(關閉瀏覽器)才會被清除。而controllers在不需要的時候就會被銷毀了(因為service的底層機制是通過閉包實現,如果過分使用會導致內存泄露從而導致性能問題)

如何創建一個service
每個service方法中,我們都會看到兩個參數:
1.name------service的名字
2.function------service中包含的代碼

angularjs中有3種創建service的方法:service(),factory()和provider()。

(1) factory()
Angular里面創建service最簡單的方式是使用factory()方法
factory()讓我們通過返回一個包含service方法和數據的對象來定義一個service
在service方法里面我們可以注入services,比如 $http 和 $q等
factory()的示例代碼:

angular.module('myApp.services')
.factory('User', function($http) { // factory的名字和注入的方法
   var backendUrl = "http://localhost:3000"; 
   var service = {    //把我們定義的方法和數據都放到一個對象中,並且返回這個對象,這就是factory
       user: {},   //數據
       setName: function(newName) {  //方法
           service.user['name'] = newName; 
       },
       setEmail: function(newEmail) {
           service.user['email'] = newEmail;
       },
       save: function() {
           return $http.post(backendUrl + '/users', {user: service.user });
       }
   };  
   return service;
});

在controller中使用factory(),將factory的名字注入即可

angular.module('myApp')
.controller('MainCtrl', function($scope, User) { //User就是factory()的名字
    $scope.saveUser = User.save;   //我們將User這個factory中的一個叫做save()的function賦給我們controller中的變量
});

 

什么時候使用factory()?
在service里面當我們僅僅需要的是一個方法和數據的集合且不需要處理復雜的邏輯的時候,factory()是一個非常不錯的選擇
也就是說,我們可以用factory()來當做一個倉庫,存儲着我們的function和data
注意:需要使用.config()來配置service的時候不能使用factory()方法

(2) service()
service()通過構造函數的方式讓我們創建service,和factory()方法一樣我們也可以在函數的定義里面看到服務的注入

service()示例代碼:

angular.module('myApp.services')
.service('User', function($http) { // 在這里注入我們需要的服務
    var self = this;  //由於service()是通過構造函數創建的,那么service()中的function和data都要以this.data和this.function的方式進行聲明
                           //service()方法會持有構造函數創建的對象
    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 });
    }
});

在controller中使用service(),和factory()一樣,將service的名字注入到controller中即可

angular.module('myApp')
.controller('MainCtrl', function($scope, User) {//注入名字為User的service
      $scope.saveUser = User.save;   //用User中名字叫做的save的function給本地變量賦值
 });

什么時候使用service()?
與factory()相比,由於service是通過構造函數的方式創造的,且持有創造對象本身,所以當我們在功能比較復雜的情況下,可以
通過service()中的方法和數據對controller中的變量進行賦值,從某種角度來說,service()和factory()的實現方式不同,但是二者在使用場景上卻很接近
注意:需要使用.config()來配置service的時候不能使用service()方法

(3)provider
provider()是創建service最底層的方式,這也是唯一一個可以使用.config()方法配置創建service的方法
provider()不同於service()和factory(),在注入其他的服務的時候不能在function()中注入

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) { // 在這里注入其他服務,不同於factory()與service()中的在//function()中引入
       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; });

provider()是唯一一個可以在config()中進行配置的service

angular.module('myApp')
.config(function(UserProvider) {  //在.config()中配置provider
   UserProvider.setBackendUrl("http://myApiBackend.com/api");
 })

配置之后,我們才可以在controller中正常使用provider()

angular.module('myApp')
.controller('MainCtrl', function($scope, User) { //注入名字為User的provider()
  $scope.saveUser = User.save;
});

什么時候使用.provider()?
1.當我們希望在應用開始前對service進行配置的時候就需要使用到provider()。比如,比如我們開發時要用到多個環境,測試環境,正式環境等,我們在應用初始化時,可以對provider()進行初始化

2.當我們打包發布時,如果我們要用到可配置的service時,我們必須選擇provider()

總結:
1.factory()就像一個倉庫一樣,存儲着我們的方法和數據
2.service()在創建時會持有當前對象,調用了這個service()的對象就會被賦值(方法或者數據)
3.provider()是唯一一個可以在config()中進行配置的service,它在設計上和用處上與以上二者區別明顯

 

轉自:https://blog.csdn.net/sourcecode_poet/article/details/53509851


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM