首页 > 代码库 > angularJs自定义服务

angularJs自定义服务

2024-08-14 11:24:42   222人阅读

在AngularJS中，系统内置的服务都是以$开头，所以我们的自定义服务尽量避免以$开头。自定义服务的方式有如下几种：

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

使用provider方法  

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

通过provider方法创建的服务一定要包含$get方法，provider注入的结果就是$get方法返回的结果，如果不包含$get方法，则程序会报错。

在三种创建服务的方法中，只有使用provider方法创建的服务才可以传进config函数，以用于在对象启用之前，对模块进行配置。但是在config中进行配置的只能是在$get函数之外定义的变量，在下面定义的provider中只有artist与thingFromConfig两个变量可以被访问到，而getArtist与getThingFromConfig两个方法是不能被在config函数中访问到的。

而且在注入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函数，则会报错。

factory注入的结果就是return返回的结果，可以在被注入的对象中使用注入的结果定义的各种方法.

 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 = http://www.mamicode.com/function (url) {15          return $http({16              method: ‘get‘,17              url: url18          });19      };20 21      factory.getName = function () {22          return _name;23      };24 25      return factory; //这里返回的是factory 包含2个方法26  });

 

使用service方法  

通过service方法创建的服务，可以不用返回任何值，因为service方法本身返回一个构造器，系统会用new关键字来创建一个对象，所以我们可以在service内部使用this关键字，对service进行扩展。

 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     });

如果使用具有返回值的写法，返回的值必须是一个对象，如果只返回基本类型，则实际返回的还是相当于this

 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方法去创建

 

angularJs自定义服务


联系
我们