angular学习（四）—— Services

最新推荐文章于 2024-02-22 00:35:34 发布

Servenity

最新推荐文章于 2024-02-22 00:35:34 发布

阅读量323

点赞数

分类专栏： Angular 文章标签： angular

Angular 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

来源地址：http://blog.csdn.net/lastsweetop/article/details/51244041

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>
 
 1
2
3
4
5
6
7
8
9
10
 
 1
2
3
4
5
6
7
8
9
10

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);
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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;
});
 
 1
2
3
4
5
6
 
 1
2
3
4
5
6

注意你注册的不是一个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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

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;
  });
}]);
 
 1
2
3
4
5
6
7
 
 1
2
3
4
5
6
7

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

Servenity

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angular学习（四）—— Services

来源地址：http://blog.csdn.net/lastsweetop/article/details/51244041Services简介angular的services非常适合用依赖注入的方式将对象组合在一起，你能用services跨app去组合和分享你的代码。 angular services有以下两个特点： 1.延迟实例化——当有app的组件依赖它的时候才会去实
复制链接

扫一扫