angular学习（四）—— Services

发布时间：2020-12-17 10:04:42 所属栏目：安全来源：网络整理

导读：Services简介 angular的services非常适合用依赖注入的方式将对象组合在一起，你能用services跨app去组合和分享你的代码。 angular services有以下两个特点： 1.延迟实例化——当有app的组件依赖它的时候才会去实例化。 2.单例模式——app的组件调用services

Services简介

angular的services非常适合用依赖注入的方式将对象组合在一起，你能用services跨app去组合和分享你的代码。
angular services有以下两个特点：
1.延迟实例化——当有app的组件依赖它的时候才会去实例化。
2.单例模式——app的组件调用services时，只会获得一个services工厂实例化后的引用。

Services使用

使用services很简单，你只需为app的组件增加依赖即可，angular的DI系统为了做剩下的事情。

useservices.html

<script src="../script/angular.min.js"></script>
<script src="script.js"></script>
<body ng-app="myServiceModule">
<div id="simple" ng-controller="MyController">
    <p>Let's try this simple notify service,injected into the controller...</p>
    <input ng-init="message='test'" ng-model="message" >
    <button ng-click="callNotify(message);">NOTIFY</button>
    <p>(you have to click 3 times to see an alert)</p>
</div>
</body>

script.js

(function(angular) { 'use strict'; angular. module('myServiceModule',[]). controller('MyController',['$scope','notify',function ($scope,notify) { $scope.callNotify = function(msg) { notify(msg); }; }]). factory('notify',['$window',function(win) { var msgs = []; return function(msg) { msgs.push(msg); if (msgs.length == 3) { win.alert(msgs.join("n")); msgs = []; } }; }]); })(window.angular);

Services创建

开发者可以通过使用module注册services名称和services的工厂方法来定义services。
services的工厂方法可以返回一个单例对象或者函数。该对象或函数可以任意注入到依赖于该services的组件中。

Services注册

services可以使用module API来注册，通常使用module 工厂 api来注册。

var myModule = angular.module('myModule',[]);
myModule.factory('serviceId',function() {
  var shinyNewServiceInstance;
  // factory function body that constructs shinyNewServiceInstance
  return shinyNewServiceInstance;
});

注意你注册的不是一个services实例，仅仅是一个services的工厂方法，只有当被调用时才会进行实例化。

Dependencies

services也可以有自己的依赖，就像在controller中声明依赖一样，services可以在他的工厂方法中声明依赖。
下面的示例module有两个services，每个services有不同的依赖。

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

/** * The `batchLog` service allows for messages to be queued in memory and flushed * to the console.log every 50 seconds. * * @param {*} message Message to be logged. */
batchModule.factory('batchLog',['$interval','$log',function($interval,$log) {
  var messageQueue = [];

  function log() {
    if (messageQueue.length) {
      $log.log('batchLog messages: ',messageQueue);
      messageQueue = [];
    }
  }

  // start periodic checking
  $interval(log,50000);

  return function(message) {
    messageQueue.push(message);
  }
}]);

/** * `routeTemplateMonitor` monitors each `$route` change and logs the current * template via the `batchLog` service. */
batchModule.factory('routeTemplateMonitor',['$route','batchLog','$rootScope',function($route,batchLog,$rootScope) {
    return {
      startMonitoring: function() {
        $rootScope.$on('$routeChangeSuccess',function() {
          batchLog($route.current ? $route.current.template : null);
        });
      }
    };
  }]);

1.batchLog services依赖于内置的$interval service和$log services。
2.routeTemplateMonitor services依赖于内置的$route service和自定义的batchLog services。
3.两个services都用数组来声明他们的依赖
4.数据的标识符的顺序和工厂方法中的顺序是一致的。

用$provide注册Services

你可以通过module的config函数中的$provide对象来注册services

angular.module('myModule',[]).config(['$provide',function($provide) {
  $provide.factory('serviceId',function() {
    var shinyNewServiceInstance;
    // factory function body that constructs shinyNewServiceInstance
    return shinyNewServiceInstance;
  });
}]);

这种技术常用来在单元测试中模拟services的依赖关系

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!