angular学习（四）—

Services简介

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

Services使用

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

useservices.html

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

script.js

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

Services创建

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

Services注册

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

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

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

Dependencies

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

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

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

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

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

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

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

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

用$@H_403_21@provide注册Services

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

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

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

angular学习（四）—— Services

猜你在找的Angularjs相关文章