AngularJs Managing Service Dependencies详解

  angular允许service将其他service声明为依赖,使用在自身实例化时使用的构造函数中。

  为了声明依赖,我们需要在工厂方法声明中指定它们,并且在工厂方法中通过$inject属性(字符串标识数组)或者使用array notation。

  通常$inject属性声明可以被丢弃(即http://www.jb51.net/article/91815.htm中提到的隐式依赖注入,但这个是实验属性,在而且在压缩混淆后会失效,慎用!)。

使用array notation

function myModuleCfgFn ($provide) {
  $provide.factory(‘myService',[‘dep1','dep2',function(dep1,dep2){}]);
}

使用$inject属性

function myModuleCfgFn($provide) {
   var myServiceFactory = function(dep1, dep2) {};
   myServiceFactory.$inject = ['dep1', 'dep2'];
   $provide.factory('myService', myServiceFactory);
 }

使用隐式DI(不兼容压缩混淆的代码)

function myModuleCfgFn($provide) {
  $provide.factory('myService', function(dep1, dep2) {});
}

下面有一个例子,里面有两个service,它们之间存在依赖关系,以及其他一些angular提供的service。

 /**
 * batchLog service 允许消息在内存中形成队列,50秒flush一次。
 *
 * @param {*} message Message to be logged.
 */
 function batchLogModule($provide){
   $provide.factory('batchLog', ['$timeout', '$log', function($timeout, $log) {
     var messageQueue = [];
     function log() {
       if (messageQueue.length) {
         $log('batchLog messages: ', messageQueue);
         messageQueue = [];
       }
       $timeout(log, 50000);
     }
     log();
     return function(message) {
       messageQueue.push(message);
     }
   }]);
   /**
   * routeTemplateMonitor监控每一个route的变化,每个比阿奴啊都会通过batchLog service记录下来
   */
   $provide.factory('routeTemplateMonitor',
     ['$route', 'batchLog', '$rootScope',
     function($route, batchLog, $rootScope) {
       $rootScope.$on('$routeChangeSuccess', function() {
         batchLog($route.current ? $route.current.template : null);
       });
   }]);
 }
 // 获得主service,运行应用(监听事件)
  angular.injector([batchLogModule]).get('routeTemplateMonitor');

例子中需要注意的事项:

  1. batchLog service依赖angular内置的$timeout(http://docs.angularjs.org/api/ng.$timeout)与$log services(http://docs.angularjs.org/api/ng.$log),实现通过console.log批量log消息。
  2. routeTemplateMonitor service依赖内置的$route(http://docs.angularjs.org/api/ng.$route) service与我们自定义的batchLog service。
  3. 我们两个service都使用工厂方法签名以及array notation来注释inject,声明它们的依赖。array中的字符串标识的顺序与工厂方法签名(参数)中的顺序必须一致,这十分重要。除非在工厂方法参数中使用隐式依赖声明,否则,injector将根据array中字符串的顺序决定inject哪一个服务。

以上就是关于AngularJs Managing Service Dependencies 资料的整理,后续继续添加相关资料,谢谢大家对本站的支持!

(0)

相关推荐

  • AngularGauge 属性解析详解

    <Chart bgColor='FFFFFF' upperLimit='120' lowerLimit='0' baseFontColor='666666' majorTMNumber='10' majorTMColor='666666' majorTMHeight='8' minorTMNumber='5' minorTMColor='666666' minorTMHeight='3' pivotRadius='10' showGaugeBorder='0' gaugeOuterRadius=

  • AngularJs unit-testing(单元测试)详解

    javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编译器几乎不能给开发者提供任何帮助.因为这个原因,我们感受到编写任何javascript代码都必须有一套强大完整的测试.angular拥有许多功能,让我们更加容易地测试我们的应用.我们应该没有借口不去写测试(这个嘛--). 一. It is all about NOT mixing concerns(全部都关于避免代码关系变得复杂--) 单元测试,正如名称那样,是关于测试单个"单元"的代码.单元测试努力解答这

  • AngularJs Understanding the Controller Component

    在angular中,controller是一个javascript 函数(type/class),被用作扩展除了root scope在外的angular scope(http://www.jb51.net/article/91749.htm)的实例.当我们或者angular通过scope.$new API(http://docs.angularjs.org/api/ng.$rootScope.Scope#$new)创建新的child scope时,有一个选项作为方法的参数传入controller

  • AngularJS实现标签页的两种方式

    一.通过普通指令实现标签页 <link rel="stylesheet" href="views/show/tab.css"/> <div> <ul class="nav nav-tabs" ng-init="vm.activeTab=1"> <li ng-class="{active: vm.activeTab == 1}"><a href="

  • AngularJS $on、$emit和$broadcast的使用

    AngularJS中的作用域有一个非常有层次和嵌套分明的结构.其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承自这个$rootScope的,或者说都是嵌套在主作用域下面的.很多时候,你会发现这些作用域不会共享变量或者说都不会从另一个原型继承什么. 那么在这种情况下,如何在作用域之间通信呢?其中一个选择就是在应用程序作用域之中创建一个单例服务,然后通过这个服务处理所有子作用域的通信. 在AngularJS中还有另外一个选

  • AngularJs Using $location详解及示例代码

    一.What does it do? $location服务分析浏览器地址栏中的URL(基于window.location),让我们可以在应用中较为方便地使用URL里面的东东.在地址栏中更改URL,会响应到$location服务中,而在$location中修改URL,也会响应到地址栏中. $location服务: 暴露当前浏览器地址栏的URL,所以我们可以 1.注意和观察URL 2.改变URL 当用户做以下操作时,与浏览器一起同步URL: 1.改变地址栏 2.单击后退或者前进按钮(或者点击一个历

  • AngularJS 面试题集锦

    ng-if 跟 ng-show/hide 的区别有哪些? 第一点区别是, ng-if 在后面表达式为 true 的时候才创建这个 dom 节点, ng-show 是初始时就创建了,用 display:block 和 display:none 来控制显示和不显示. 第二点区别是, ng-if 会(隐式地)产生新作用域, ng-switch . ng-include 等会动态创建一块界面的也是如此. 这样会导致,在 ng-if 中用基本变量绑定 ng-model ,并在外层 div 中把此 mode

  • AngularJs E2E Testing 详解

    当一个应用的复杂度.大小在增加时,使得依靠人工去测试新特性的可靠性.抓Bug和回归测试是不切实际的. 为了解决这个问题,我们建立了Angular Scenario Runner,模仿用户的操作,帮助我们去验证angular应用的健壮性. 一.   总括 我们可以在javascript中写情景测试(scenario test),描述我们的应用发生的行为,在某个状态下给与某些互动.一个情景包含一个或者多个"it"块(我们可以将这些当作对我们应用的要求),依次由命令(command)和期望(

  • AngularJs Dependency Injection(DI,依赖注入)

    一.Dependency Injection(依赖注入) 依赖注入(DI)是一个软件设计模式,处理代码如何得到它所依赖的资源. 关于DI更深层次的讨论,可以参观Dependency Injection(http://en.wikipedia.org/wiki/Dependency_injection),Inversion of Control(http://martinfowler.com/articles/injection.html),也可以参观软件设计模式的书. 1. DI in a nu

  • AngularJs Understanding the Model Component

    在angular文档讨论的上下文中,术语"model"可以适用于单一对象代表一个实体(例如,一个叫" phones"的model,它的值是一个电话数组.)或者作为应用的全部数据Model(所有实体). 在angular中,model可以是任意数据,可以通过angular的scope对象的属性来获取model.属性的名称是model的标识,值可以是任意javascript对象(包括数组和原始数据). javascript想成为model的唯一的条件是对象必须作为一个s

  • AngularJs Understanding Angular Templates

    angular template是一个声明规范,与model.controller的信息一起,渲染成用户在浏览器中所看到的视图.它是静态的DOM,包括HTML.CSS.angular特别的元素和angular指定的元素属性.angular元素和属性指示angular去扩展行为以及将template DOM转换为动态视图的DOM. 下面是我们可以在template中使用的angular元素已经元素属性的类型: Directive(http://www.jb51.net/article/91739.

  • AngularJs Creating Services详解及示例代码

    虽然angular提供许多有用的service,在一些特别的应用中,我们会发现编写自定义service是很有用的.如果我们想做这件事,我们首先要在module中注册一个service工厂方法,可以通过Module.factory api(http://docs.angularjs.org/api/angular.module)或者在module配置方法中直接通过$provide api(http://docs.angularjs.org/api/AUTO.$provide). 所有angular

  • angularjs实现文字上下无缝滚动特效代码

    最近没有项目做,于是闲暇之余学习了下angularjs知识,然后写了一个文字上下无缝滚动的例子,主要写的是一个小小的指令. css代码: 主要控制样式 <style type="text/css"> *{margin: 0px;padding: 0px;} .slide {width: 200px;height:200px;border:1px solid #dcdcdc;margin: 0 auto;margin-top: 50px;overflow: hidden;}

随机推荐