AngularJS（二）——使用AngularJS自定义service

与 Java 相似， AngularJS 中的 controller 应该尽可能保持短小精悍，不提倡在 controller 中进行 DOM 操作和数据操作。先来看一个臃肿、难以维护的 controller ：

var app = angular.module('APPModule', []);app.controller('MainController', function($scope) {  $scope.shouldShowLogin = true;  $scope.showLogin = function() {    $scope.shouldShowLogin =!$scope.shouldShowLogin;};$scope.clickButton = function() {  $('#btnspan').html('Clicked');};$scope.onLogin = function(user) {  $http({    method: 'POST',    url: '/login',    data: {      user: user  }  }).success(function(data) {    //Some Actions  });};});

coding 初学者总是倾向于写这种代码。更加优雅的方法是通过使用 service 和 directive 使 controller 更轻量，更易于维护。下面来看看如何自定义并使用service 。

 

1.通过 factory() 创建自定义 service：

var app =angular.module('APPModule', []);app.factory('UserService', [  '$http',  function($http) {    var runLogin = function(user) {      $http({        method: 'POST',     url: '/login',     data: {       user: user     }    }).success(function(data) {      //Some Actions    });    };       return {      runLogin: runLogin    };  }]);

不难发现，如此声明自定义的 service 后，我们将之前臃肿的 controller 中的登录逻辑放到了 UserService 中，代码马上变得逼格十足。

 

2.使用自定义 service：

app.controller('MainController', [ '$scope',  'UserService',  function($scope, UserService) {    $scope.onLogin = function(user) {      UserService.runLogin(user);    };  }]);

这里的 UserService就是我们自定义的 service ，在 controller 初始化时注入，即可使用其中的值和方法了。注意一点，在自定义服务之前注入所有的 AngularJS 内置服务，是约定俗称的规则。

如果自定义的service 和使用它的 controller 不在一个 module中，需要在 controller 所在 module 初始化时注入 service 所在的 module：

var serviceModule = angular.module('ServiceModule', []);serviceModule.factory('UserService', [  '$http',  function($http) {    … //与之前UserService相同  }]);//在controller所在的module中注入service所在的modulevar app =angular.module('APPModule', ['ServiceModule']);app.controller(‘MainController’, [  '$scope',  'UserService',  function($scope, UserService) {   … //与之前controller相同  }]);

 

3.创建自定义 service 的其他方式：

factory() 方法是用来创建服务的最常规方式，除此之外，还有其他方式可以创建服务。

3.1 provider()：

app.provider('UserService', {  self: this,  setName:function(name) {    self.name = name;  },  $get: function() {    return {      getName: function() {        return self.name;      }    };  }});

使用provider() 创建时，返回的对象中必须有 $get() 函数对象，否则会创建失败。用 provider() 创建服务可以在多个应用使用同一个服务时获得更强的扩展性，通过如下方式进行扩展：

app.config(function(UserServiceProvider) {  NameServiceProvider.setName('Lucy');});

其中，UserServiceProvider为对应的服务名 + Provider组成，通过这一对象可以调用 UserService中的方法。

3.2 constant()：

该方法可以将变量值注册为服务，可以使该变量被其他 module 或 controller 共享：

app.constant('ASToken', '12345');app.controller('MainController', [  '$scope', 'ASToken', //注入constant function($scope, ASToken) {   //Some Actions }]);

将 constant 注入后就可以直接使用了。

3.3 value()：

与 constant()用法相同。与 constant() 的区别是，constant() 可以注入到 config 中，而 value() 不行：

app.constant('ASToken', '12345').config(function(ASToken) {  //正常使用});app.constant(‘ASValue’, '12345').config(function(ASValue) {  //ASValue在config中无法访问});

 

4.AngularJS中的拦截器$provide.decorator()：

AngularJS 中的 $provide 服务提供了在服务实例创建时对其进行拦截的功能，可以对服务进行扩展和修改。不仅可以使用在自定义服务上，也可以对AngularJS 的内置服务进行拦截。以拦截 3.1 中 provider() 创建的 UserService 为例：

app.config([  '$provide’,  function($provide) {    $provide.decorator('UserService', [      '$delegate',      function($delegate) {        return{          getName: function() {            return $delegate.getName() + ' <-- TheFunction Has Been Decorated.'          },          getAge: function() {            return 18;          }        };      }    ]);  }]);

如上所示，在 config 中，通过 $provide.decorate() 方法拦截 UserService ，注入的 $delegate 可以调用要拦截的 service 中原本的方法。这里我们通过对UserService 进行拦截，修改了 UserService 中的 getName() 方法，并为 UserService 添加了 getAge() 方法。

完。

 

参考资料：

《AngularJS 权威教程》作者：Ari Lerner  译者：赵望野 徐飞 何鹏飞

本文出自 “细桶假狗屎” 博客，请务必保留此出处http://xitongjiagoushi.blog.51cto.com/9975742/1659620