3种方法实现AngularJs自定义服务

我们可以通过factoryservicevalue这三种方式来自定义服务。

自定义服务与我们之前学的自定义指令和自定义过滤器是一样的,都是通过调用不同的方法进行自定义服务的。下面通过factory来自定义一个格式化字符串的例子,来看一下具体的过程。

  • factory自定义服务

首先先初始化定义一个模块:
var service = angular.module('service',[]);
接下来通过service来调用factory方法实现自定义服务,里面有两个参数,第一个参数为自定义服务的名称,第二个参数为一个数组,回掉函数,在这里需要return一个函数或对象:

service.factory('format',['$filter',function ($filter) {
//自定义服务,单依赖于$filter

//自定义服务的具体功能
          return function (arg) {
              var str = '';
              for(var key in arg){
                  str += key + '='+arg[key] +'&';
              }
              str = str.slice(0,-1);
              return str;
          }
    }]);

定义好服务之后就可以在控制器中调用了,调用的方法还是和内置服务一样,需要参数,只不过自定义的服务在调用的时候不需要加“$”符号:

service.controller('DemoController',['$scope','$http','format',function ($scope,$http,format) {
        var data = {
            name:"张三",
            age:10
        };
//      将格式化后的字符串打印出来
        console.log(format(data));
    }]);
3种方法实现AngularJs自定义服务_第1张图片
Paste_Image.png
  • service自定义服务

同样的,在这用一个demo来演示service自定义的服务,同样的先定义一个模块,然后调用service方法,定义好具体功能后,在控制器中调用,下面用service来定义一个格式化时间的服务,里面有两个参数,第一个参数为自定义服务的名称,第二个参数为一个数组,回掉函数:




3种方法实现AngularJs自定义服务_第2张图片
Paste_Image.png

3种方法实现AngularJs自定义服务_第3张图片
Paste_Image.png

这个跟我们之前那就不一样了,之前要么返回一个函数或者一个对象,我们在使用 factory的 时候需要显示的去return一个函数或对象,在service这我们不用返回对象,只要一个this就可以了,我们知道this也是一个对象,我们return回去的也是一个对象,我们需要增加函数功能的时候只需要在后面你添加this.函数名和方法体就可以了,比如上面格式化时间的哪个demo,就有两个功能:格式化时间和弹出“你好”。

  • value自定义服务

value来定义服务的时候,特别简单,没有factory,service那么复杂,它只能定义单一的服务,不像factory,service既可以定义函数又可以定义对象,而value是自定义常量的服务,类似于(key,value)这种形式,同样的有两个参数,第一个服务的名称,第二个就是所对应的值(只对于value服务来说)。

  service.value("author",'张三');
   service.controller('DemoController',['$scope','$http','format','author',function ($scope,$http,format,author) {
        $scope.author = author;
    }]);
  
  • {{author}}
  • 3种方法实现AngularJs自定义服务_第4张图片
    Paste_Image.png

    value本质上是一个服务,但是从表现形式上看是一个常量。

    你可能感兴趣的:(3种方法实现AngularJs自定义服务)