美文网首页
3种方法实现AngularJs自定义服务

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

作者: 不要和我名字一样 | 来源:发表于2017-03-23 15:57 被阅读202次

    我们可以通过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));
        }]);
    
    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本质上是一个服务,但是从表现形式上看是一个常量。

    相关文章

      网友评论

          本文标题:3种方法实现AngularJs自定义服务

          本文链接:https://www.haomeiwen.com/subject/ujyznttx.html