在AngularJS中也有依赖注入的概念，像spring中的依赖注入，但是又有所不同。Spring中使用构造注入或者设值注入的方式，还需要做一些额外的操作，但是angular中只需要在需要的地方声明一下即可，类似模块的引用，因此十分方便。

参考：[angular api doc] (http://docs.angularjs.cn/api/auto/service/$injector)

推断式注入

这种注入方式，需要在保证参数名称与服务名称相同。如果代码要经过压缩等操作，就会导致注入失败。

  1.    app.controller("myCtrl1", function($scope,hello1,hello2){
  2. 		$scope.hello = function(){
  3. 			hello1.hello();
  4. 			hello2.hello();
  5. 		}
  6. 	});

标记式注入

这种注入方式，需要设置一个依赖数组，数组内是依赖的服务名字，在函数参数中，可以随意设置参数名称，但是必须保证顺序的一致性。

  1. var myCtrl2 = function($scope,hello1,hello2){
  2. 		$scope.hello = function(){
  3. 			hello1.hello();
  4. 			hello2.hello();
  5. 		}
  6. 	}
  7. 	myCtrl2.$injector = ['hello1','hello2'];
  8. 	app.controller("myCtrl2", myCtrl2);

内联式注入

这种注入方式直接传入两个参数，一个是名字，另一个是一个数组。这个数组的最后一个参数是真正的方法体，其他的都是依赖的目标，但是要保证与方法体的参数顺序一致（与标记注入一样）。

  1. app.controller("myCtrl3",['$scope','hello1','hello2',function($scope,hello1,hello2){
  2. 		$scope.hello = function(){
  3. 			hello1.hello();
  4. 			hello2.hello();
  5. 		}
  6. 	}]);

$injector常用的方法

在angular中，可以通过angular.injector()获得注入器。

  1. var $injector = angular.injector();

通过$injector.get('serviceName')获得依赖的服务名字

  1. $injector.get('$scope')

通过$injector.annotate('xxx')获得xxx的所有依赖项

  1. $injector.annotate(xxx)

样例代码

  1. <html>
  2. <head>
  3. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. 	<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  5. </head>
  6. <body ng-app="myApp">
  7. 	<div ng-controller="myCtrl1">
  8. 		<input type="button" ng-click="hello()" value="ctrl1"></input>
  9. 	</div>
  10. 	<div ng-controller="myCtrl2">
  11. 		<input type="button" ng-click="hello()" value="ctrl2"></input>
  12. 	</div>
  13. 	<div ng-controller="myCtrl3">
  14. 		<input type="button" ng-click="hello()" value="ctrl3"></input>
  15. 	</div>
  16. 	<script type="text/javascript">
  17. 	var app = angular.module("myApp",[]);
  18. 	app.factory("hello1",function(){
  19. 		return {
  20. 			hello:function(){
  21. 				console.log("hello1 service");
  22. 			}
  23. 		}
  24. 	});
  25. 	app.factory("hello2",function(){
  26. 		return {
  27. 			hello:function(){
  28. 				console.log("hello2 service");
  29. 			}
  30. 		}
  31. 	});
  33. 	var $injector = angular.injector();
  34. 	console.log(angular.equals($injector.get('$injector'),$injector));//true
  35. 	console.log(angular.equals($injector.invoke(function($injector) {return $injector;}),$injector));//true
  37. 	//inferred
  38. 	// $injector.invoke(function(serviceA){});
  39. 	app.controller("myCtrl1", function($scope,hello1,hello2){
  40. 		$scope.hello = function(){
  41. 			hello1.hello();
  42. 			hello2.hello();
  43. 		}
  44. 	});
  46. 	//annotated
  47. 	// function explicit(serviceA) {};
  48. 	// explicit.$inject = ['serviceA'];
  49. 	// $injector.invoke(explicit);
  50. 	var myCtrl2 = function($scope,hello1,hello2){
  51. 		$scope.hello = function(){
  52. 			hello1.hello();
  53. 			hello2.hello();
  54. 		}
  55. 	}
  56. 	myCtrl2.$injector = ['hello1','hello2'];
  57. 	app.controller("myCtrl2", myCtrl2);
  59. 	//inline
  60. 	app.controller("myCtrl3",['$scope','hello1','hello2',function($scope,hello1,hello2){
  61. 	// app.controller("myCtrl3",['$scope','hello1','hello2',function(a,b,c){
  62. 		// a.hello = function(){
  63. 		// 	b.hello();
  64. 		// 	c.hello();
  65. 		// }
  66. 		$scope.hello = function(){
  67. 			hello1.hello();
  68. 			hello2.hello();
  69. 		}
  70. 	}]);
  72. 	console.log($injector.annotate(myCtrl2));//["$scope","hello1","hello2"]
  73. 	</script>
  74. </body>
  75. </html>

AngularJS API之$injector ---- 依赖注入的更多相关文章

  1. AngularJS学习笔记之依赖注入

    最近在看AngularJS权威指南,由于各种各样的原因(主要是因为我没有money,好讨厌的有木有......),于是我选择了网上下载电子版的(因为它不要钱,哈哈...),字体也蛮清晰的,总体效果还不 ...

  2. ASP.NET Web API中的依赖注入

    什么是依赖注入 依赖,就是一个对象需要的另一个对象,比如说,这是我们通常定义的一个用来处理数据访问的存储,让我们用一个例子来解释,首先,定义一个领域模型如下: namespace Pattern.DI ...

  3. Magento2 API 服务合同设计模式 依赖注入 介绍

    公共接口和API 什么是公共界面? 一个公共接口是一组代码,第三方开发者可以调用,实现或构建一个 插件 .Magento保证在没有重大版本更改的情况下,此代码在后续版本中不会更改. 模块的公共接口 标 ...

  4. AngularJS——第7章 依赖注入

    第7章 依赖注入 AngularJS采用模块化的方式组织代码,将一些通用逻辑封装成一个对象或函数,实现最大程度的复用,这导致了使用者和被使用者之间存在依赖关系. 所谓依赖注入是指在运行时自动查找依赖关 ...

  5. angularJs的作用域和依赖注入

    一.angularJs的作用域 &scope这是局部作用域,先在局部作用域中找,如果没有就在全局作用域中找  &rootScope这是全局作用域 <!DOCTYPE HTML&g ...

  6. angularjs(显示和隐身) 依赖注入

    1.angularjs 隐身参数注入control: 1.control名称 , 2.function,在function内部直接传递参数和方法. var myapp=angular.model(&q ...

  7. 使用Autofac在ASP.NET Web API上实现依赖注入

    在ASP.NET Web API里使用Autofac 1.通过NuGet安装Autofac.WebApi(当时安装的是Autofac 3.1.0) PM > Install-Package Au ...

  8. 【半小时大话.net依赖注入】（下）详解AutoFac+实战Mvc、Api以及.NET Core的依赖注入

    系列目录 上|理论基础+实战控制台程序实现AutoFac注入 下|详解AutoFac+实战Mvc.Api以及.NET Core的依赖注入 前言 本来计划是五篇文章的,每章发个半小时随便翻翻就能懂,但是 ...

  9. 依赖注入——angular

    在Angular中创建一个对象时,需要依赖另一个对象,这是代码层的一种依赖关系,当这种依赖被声明后,Angular通过injector注入器将所依赖的对象进行注入操作. 一.依赖注入的原理 看下面的示 ...

随机推荐

  1. BZOJ4488: [Jsoi2015]最大公约数

    Description 给定一个长度为 N 的正整数序列Ai对于其任意一个连续的子序列{Al,Al+1...Ar},我们定义其权值W(L,R )为其长度与序列中所有元素的最大公约数的乘积,即W(L,R ...

  2. 关于js单线程（转载）

    进程和线程都是操作系统的概念.进程是应用程序的执行实例,每一个进程都是由私有的虚拟地址空间.代码.数据和其它系统资源所组成:进程在运行过程中能够申请创建和使用系统资源(如独立的内存区域等),这些资源也 ...

  3. jQuery的加法运算.

    jQuery的加法运算. 加法运算 ?想必大家听到这都会不屑了,加法运算这是多么简单的运算.然而有的时候在jQuery也让人挺头疼的. 常规的是: var num1 = 123; var num2=1 ...

  4. travis CI

    travis可对多语言持续继承,本文以nodejs 为例. 首先添加文件.travis.yml 中language: node_jsnode_js:  - "6"  - " ...

  5. CSS 一些知识点

  6. c# 局域网文件传输实例

    一个基于c#的点对点局域网文件传输小案例,运行效果截图 //界面窗体 using System;using System.Collections.Generic;using System.Compon ...

  7. 通过监听键盘，实现对UITextView的内容移动

    视图出现时,增加观察 - (void)viewWillAppear:(BOOL)animated { // 增加对键盘的监听 [[NSNotificationCenter defaultCenter] ...

  8. python pickle和json的区别

    pickle可以在python之间进行交互 json可以实现python与不同开发语言的交互 pickle可以序列化python中的任何数据类型 json只能序列化python中的常归数据类型(列表等 ...

  9. 修复jLink V9固件小记

    网上买了个山寨jLink V9.3 plus,号称不掉固件的,不过固件最终还是掉了,现象是:插上去红灯亮,发现jLink但是驱动无法安装.估计是固件丢失了,放G搜了一圈发现修复固件都是V8的,但是倒找 ...

  10. if [ "$变量1"x = "$变量2"x ]中x的含义

    问题:if [ "$变量1"x = "$变量2"x ]中x的含义是? 答:“x”字符可以为任意字符,用于防止变量为空时,某些版本的bash中会产生错误: 在一个 ...