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

我们可以通过factory，service，value这三种方式来自定义服务。

自定义服务与我们之前学的自定义指令和自定义过滤器是一样的，都是通过调用不同的方法进行自定义服务的。下面通过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));
    }]);

Paste_Image.png

• service自定义服务

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

<script>
        var App = angular.module('App', []);
        // 自定义服务显示日期
        App.service('showTime', ['$filter', function($filter) {
            var now = new Date();
            var date = $filter('date');
        //向对象上添加具体的方法
            this.now = date(now, 'y-M-d H:mm:ss');
        //向对象上添加具体的方法
            this.sayHello = function(){
                alert("你好");
            }
        }]);
        App.controller('DemoController', ['$scope', 'showTime', function($scope, showTime) {
            $scope.now = showTime.now;
            showTime.sayHello();
        }])

    </script>

Paste_Image.png 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;
    }]);

  <div ng-controller="DemoController">
            <li>{{author}}</li>
  </div>

Paste_Image.png

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