angularJs自定義服務

時間 2019-12-01

原文原文鏈接

在AngularJS中，系統內置的服務都是以$開頭，因此咱們的自定義服務儘可能避免以$開頭。自定義服務的方式有以下幾種：html

使用Module的provider方法
使用Module的factory方法
使用Module的service方法

使用provider方法 ajax

app.provider('myProvider', function () {
    this.$get = function () {
            //do somthing
    };
});

經過provider方法建立的服務必定要包含$get方法，provider注入的結果就是$get方法返回的結果，若是不包含$get方法，則程序會報錯。app

在三種建立服務的方法中，只有使用provider方法建立的服務才能夠傳進config函數，以用於在對象啓用以前，對模塊進行配置。可是在config中進行配置的只能是在$get函數以外定義的變量，在下面定義的provider中只有artist與thingFromConfig兩個變量能夠被訪問到，而getArtist與getThingFromConfig兩個方法是不能被在config函數中訪問到的。ide

並且在注入config函數中時，參數名必須由服務名+Provider組成，例以下面的例子注入到config函數中的就是myProviderProvider函數

app.controller('myCtrl', ['$scope', 'myProvider', function ($scope, myProvider) {
     console.log(myProvider.getThingFromConfig());  //kingx name
 }]);

 app.provider('myProvider', function () {
     this.artist = '';
     this.thingFromConfig = '';

     this.$get = function () {
         var that = this;
         return {
             getArtist: function () {
                 return that.artist;
             },
             getThingFromConfig: function () {
                 return that.thingFromConfig;
             }
         }
     };
 });

 app.config(function (myProviderProvider) { //注意這裏參數的名字
     myProviderProvider.thingFromConfig = 'kingx name';
 });

使用provider方法

app.factory('myFactory', function ($http) {
       //不必定是要對象類型，實際爲任意類型
       var factory = {};
       return factory;
   });

經過factory方法建立的服務必須有返回值，即必須有return函數，它能夠返回任意類型的值，包括基本數據類型或者對象類型。若是沒有return函數，則會報錯。this

factory注入的結果就是return返回的結果，能夠在被注入的對象中使用注入的結果定義的各類方法.url

 1 app.controller('myCtrl', ['$scope', 'myFactory', function ($scope, myFactory) {
 2      console.log(myFactory.getName());  //foo
 3      //請求當前文件夾下的test.html
 4      myFactory.getData('./test.html').then(function (response) {
 5          console.log(response);  //返回test.html的字符串形式
 6      });
 7  }]);
 8 
 9  /**------------ 使用factory方法 -----------------*/
10  app.factory('myFactory', function ($http) {
11      var factory = {};
12      var _name = 'foo';
13      //模仿ajax請求
14      factory.getData = function (url) {
15          return $http({
16              method: 'get',
17              url: url
18          });
19      };
20 
21      factory.getName = function () {
22          return _name;
23      };
24 
25      return factory; //這裏返回的是factory 包含2個方法
26  });

使用service方法

經過service方法建立的服務，能夠不用返回任何值，由於service方法自己返回一個構造器，系統會用new關鍵字來建立一個對象，因此咱們能夠在service內部使用this關鍵字，對service進行擴展。spa

 1 app.controller('myCtrl', ['$scope', 'myService', function ($scope, myService) {
 2         console.log(myService);
 3         myService.setName('foo');
 4         console.log(myService.getName());
 5     }]);
 6 
 7     /**------------ 使用service方法 -----------------*/
 8     app.service('myService', function () {
 9         this._name = '';
10 
11         this.getName = function () {
12             return this._name;
13         };
14 
15         this.setName = function (name) {
16             this._name = name;
17         };
18 
19     });

若是使用具備返回值的寫法，返回的值必須是一個對象，若是隻返回基本類型，則實際返回的仍是至關於thiscode

 1 app.service('myService', function () {
 2      var obj = {};
 3      this._name = '';
 4 
 5      obj.getName = function () {
 6          return this._name;
 7      };
 8 
 9      obj.setName = function (name) {
10          this._name = name;
11      };
12      return obj;
13  });

三種方法的比較

須要在config中進行全局配置的話，只能選擇provider方法
factory和service是使用比較頻繁的建立服務的方法。他們之間的惟一區別是：service方法用於注入的結果一般是new出來的對象，factory方法注入的結果一般是一系列的functions
provider是建立服務最爲複雜的方法，除非你須要建立一個能夠複用的代碼段而且須要進行全局配置，才須要使用provider建立
全部具備特定性目的的對象都是經過factory方法去建立htm