angularJs自定义服务

在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中只有artistthingFromConfig两个变量能够被访问到,而getArtistgetThingFromConfig两个方法是不能被在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

相关文章
相关标签/搜索