angularjs 依赖注入

如果你的应用包含多个模块,注意在添加模块时添加其它模块的引用。例如,一个应用包含三个模块app、controls、和data :

Java代码  

  1. // app.js (名称为app的模块依赖于controls和data模块)  
  2. angular.module("app", [ "controls", "data"])  

 

推断依赖

最简单的处理依赖的方法,就是假设函数的参数名就是依赖的名字

Java代码  

  1. function MyController($scope, greeter) {  
  2.   ...  
  3. }  

给出一个注入器可以通过检查声明来获取函数名,从而知道需要的依赖的函数。在上面的例子中,$scopegreeter是需要注入到函数中的依赖,参数名不能修改。

坦白的来讲,用了这种方法就不能使用js压缩了,因为它们会改变变量名。这使得这种方法只适合于pretotyping和做demo。

 

$inject 标记

要允许压缩类库重命名函数参数,同时注入器又能正确处理依赖的话,函数需要使用$inject属性。这个属性是一个包含依赖的名称的数组。

Java代码  

  1. var MyController = function(renamed$scope, renamedGreeter) {//形参  
  2.   ...  
  3. }  
  4. MyController.$inject = ['$scope', 'greeter'];//实参  

注意$inject标记里的值和函数声明的参数是对应的。

 

这种方式适合用于控制器的声明,因为控制器有了明确的声明标记。

有时候用$inject标记不是很方便,使用$inject会导致代码膨胀:

比如用来声明指令的时候

Java代码  

  1. someModule.factory('greeter', function($window) {  
  2.   ...;  
  3. });  

使用inject后

Java代码  

  1. var greeterFactory =function(renamed$window){...;};  
  2. greeterFactory.$inject =['$window'];  
  3. someModule.factory('greeter', greeterFactory);  

这种情况我们就推荐使用第三种方式

行内标记

Java代码  

  1. someModule.factory('greeter', ['$window', function(renamed$window) {  
  2.   ...;  
  3. }]);  

 记住这三种方式是等效的,并且在AngularJS应用中注入器支持的情况下可以随处用。

时间: 2024-11-05 03:26:07

angularjs 依赖注入的相关文章

AngularJS 依赖注入详解和简单实例_AngularJS

AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分. 该模式分离了客户端依赖本身行为的创建,这使得程序设计变得松耦合,并遵循了依赖反转和单一职责原则.与服务定位器模式形成直接对比的是,它允许客户端了解客户端如何使用该系统找到依赖 一句话 --- 没事你不要来找我,有事我会

AngularJS 依赖注入详解及示例代码_AngularJS

依赖注入是一个在组件中给出的替代了硬的组件内的编码它们的依赖关系的软件设计模式.这减轻一个组成部分,从定位的依赖,依赖配置.这有助于使组件可重用,维护和测试. AngularJS提供了一个至高无上的依赖注入机制.它提供了一个可注入彼此依赖下列核心组件. 值 工厂 服务 提供者 常值 值 值是简单的JavaScript对象,它是用来将值传递过程中的配置相位控制器. //define a module var mainApp = angular.module("mainApp", []);

自学实现angularjs依赖注入_AngularJS

    在用angular依赖注入时,感觉很好用,他的出现是 为了"削减计算机程序的耦合问题" ,我怀着敬畏与好奇的心情,轻轻的走进了angular源码,看看他到底是怎么实现的,我也想写个这么牛逼的功能.于是就模仿着写了一个,如果有什么不对,请大家批评指正.      其实刚开始的时候我也不知道怎么下手,源码中有些确实晦涩难懂,到现在我也没有看明白,于是我就静下心想一想,他是怎么用的,如下所示: angular.module(/*省略*/) .factory("xxxServ

AngularJS学习笔记之依赖注入详解_AngularJS

     最近在看AngularJS权威指南,由于各种各样的原因(主要是因为我没有money,好讨厌的有木有......),于是我选择了网上下载电子版的(因为它不要钱,哈哈...),字体也蛮清晰的,总体效果还不错.但是,当我看到左上角的总页码的时候,479页....479....479....俺的小心脏被击穿了二分之一有木有啊,上半身都石化了有木有啊,那种特别想学但是看到页码又不想学的纠结的心情比和女朋友吵架了还复杂有木有啊,我平常看的电子书百位数都不大于3的好伐! 哎,原谅我吧,我应该多看几本

AngularJS之依赖注入模拟实现_AngularJS

一.概述  AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的.  依赖注入,简而言之,就是解除硬编码,达到解偶的目的.  下面,我们看看AngularJS中常用的实现方式.  方法一:推断式注入声明,假定参数名称就是依赖的名称.因此,它会在内部调用函数对象的toString()方法,分析并提取出函数参数列表,然后通过$injector将这些参数注入进对象实例.  如下:  //方法一:推断式注入声明,假定参数

AngularJS $injector 依赖注入详解_AngularJS

推断式注入 这种注入方式,需要在保证参数名称与服务名称相同.如果代码要经过压缩等操作,就会导致注入失败. app.controller("myCtrl1", function($scope,hello1,hello2){ $scope.hello = function(){ hello1.hello(); hello2.hello(); } }); 标记式注入 这种注入方式,需要设置一个依赖数组,数组内是依赖的服务名字,在函数参数中,可以随意设置参数名称,但是必须保证顺序的一致性. v

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

一.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

Javascript技术栈中的四种依赖注入小结_基础知识

作为面向对象编程中实现控制反转(Inversion of Control,下文称IoC)最常见的技术手段之一,依赖注入(Dependency Injection,下文称DI)可谓在OOP编程中大行其道经久不衰.比如在J2EE中,就有大名鼎鼎的执牛耳者Spring.Javascript社区中自然也不乏一些积极的尝试,广为人知的AngularJS很大程度上就是基于DI实现的.遗憾的是,作为一款缺少反射机制.不支持Annotation语法的动态语言,Javascript长期以来都没有属于自己的Spri

详解AngularJS中的依赖注入机制

  这篇文章主要介绍了详解AngularJS中的依赖注入机制,对JavaScript各组件的使用起到非常重要的作用,需要的朋友可以参考下 依赖注入是一个在组件中给出的替代了硬的组件内的编码它们的依赖关系的软件设计模式.这减轻一个组成部分,从定位的依赖,依赖配置.这有助于使组件可重用,维护和测试. AngularJS提供了一个至高无上的依赖注入机制.它提供了一个可注入彼此依赖下列核心组件. 值 工厂 服务 提供者 常值 值 值是简单的JavaScript对象,它是用来将值传递过程中的配置相位控制器