Angularjs 服务

1.定义服务

简单来说, provider 是被“注入控制器”使用的一个对象,注入机制通过调用一个 provider 的 $get()方法,把得到的东西作为参数进行相关调用(比如把得到的服务作为一个 Controller 的参数)。


//这是一个provider
  var pp = function(){
    this.$get = function(){
      return {'haha': '123'};
    }
  }
  
  //我在模块的初始化过程当中, 定义了一个叫 PP 的服务
  var app = angular.module('Demo', [], function($provide){
    $provide.provider('PP', pp);
  });
  
  //PP服务实际上就是 pp 这个 provider 的 $get() 方法返回的东西
  app.controller('TestCtrl',
    function($scope, PP){
      console.log(PP);
    }
  );
两种定义service的两种简略方法,


第一个是 factory 方法,由 $provide 提供, module 的 factory 是一个引用,作用一样。这个方法直接把一个函数当成是一个对象的 $get() 方法,这样你就不用显式地定义一个 provider 了:

var app = angular.module('Demo', [], function(){ });
app.factory('PP', function(){return {'abc': '123'}});
app.controller('TestCtrl', function($scope, PP){ console.log(PP) });
第二个是  service  方法,也是由  $provide  提供,  module  中有对它的同名引用。  service  和 factory  的区别在于,前者是要求提供一个“构造方法”,后者是要求提供  $get()  方法。意思就是,前者一定是得到一个 object  ,后者可以是一个数字或字符串。

var app = angular.module('Demo', [], function(){ });
  app.service('PP', function(){
    this.abc = '123';
  });
  app.controller('TestCtrl', function($scope, PP){ console.log(PP) });


完整的例子如下:

<html ng-app="app">
    <head>
        <script src="jquery-2.0.3.js"></script>
        <script src="angular.js"></script>
    </head>
    <body ng-controller="ctrl">
    </body>
    <script>


        var app = angular.module('app', []);

        app.factory('PP1', ['$filter', function($filter) {
            return {
                'name': 'jarred'
            };
        }]);

        app.service('PP2', ['$filter', function(filter) {
            this.name = 'jarred2';
        }]);

        app.controller('ctrl', ['$scope', 'PP1', 'PP2', function($scope, pp1, pp2) {
            console.log(pp1);
            console.log(pp2);
        }]);
    </script>
</html>





你可能感兴趣的:(Angularjs 服务)