zoukankan      html  css  js  c++  java
  • angularJs自定义服务

    在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中只有artistthingFromConfig两个变量可以被访问到,而getArtistgetThingFromConfig两个方法是不能被在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 = 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进行扩展。

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

     

  • 相关阅读:
    微博粉丝服务---“公众号”开发
    springboot --- 之SSM框架整合
    Android 接收短信
    数字币开发相关
    boot camp要求独立的fat分区
    u盘安装 osx 出现 “不能验证”
    微软驱动签名
    centos7 安装 isign
    用windbg查看dmp文件,定位bug位置
    H5移动端,ios从后台返回到app,页面会白一下
  • 原文地址:https://www.cnblogs.com/yoissee/p/5900831.html
Copyright © 2011-2022 走看看