将依赖的对象注入到当前对象，直接去使用依赖的对象即可。

降低耦合度、提高开发速度。。

文件压缩：
yui-compressor
有两种方案：
①CLI（command line interface）
java -jar **.jar **.js > **.min.js
②webStorm
file->settings->tools-->fileWatchers->点击+ -》选中yui compressor js-->设置program（点击按钮在弹窗中选中C盘根目录下的js文件）

文件压缩的作用：
①删除了注释 ②没用空白字符清除
③简化了变量的名称（混淆）

文件压缩出现了问题：
$scope变成了a。。，ng框架是无法找到被修改名字后的服务，程序就出现了问题。

依赖注入：
①推断式（猜测）
app.controller('',function($scope){})
注入器，是直接根据服务的名称，在服务的注册列表中去查找该名称所对应的服务，找到并实例化提供给我们使用
特点：注入服务的顺序是无所谓的，在压缩混淆时，会出现无法查找服务的16:34 2017/6/7问题

html代码，直接运行会出错，即出现无法查找服务的问题：

<!DOCTYPE html>

<html ng-app="myApp">

<head lang="en">

  <meta charset="UTF-8">

  <script src="js/angular.js"></script>

  <script src="js/demo09.min.js"></script>

  <title></title>

</head>

<body>

<div ng-controller="myCtrl">

  <span>{{count}}</span>

</div>

</body>

</html>
js/demo09.min.js 代码：这里进行了混淆压缩，替换了原有的$scope

var app=angular.module("myApp",["ng"]);app.controller("myCtrl",function(a){a.count=100});

未压缩以前：

var app = angular.module('myApp', ['ng']);

app.controller('myCtrl', function ($scope) {

  $scope.count = 100;

})


②标记式
可以解决文件压缩后找不到服务的问题
解决方案：给处理函数指定了$inject属性：由依赖的服务名称构成数组
ctrFunc.$inject = ['$scope','$show']


注意事项：在数组中写服务的顺序要与在创建ng对象时对应的方法中服务的顺序是要保持一致


html代码：




<!DOCTYPE html>

<html ng-app="myApp">

<head lang="en">

  <meta charset="UTF-8">

  <script src="js/angular.js"></script>

  <script src="js/demo10.min.js"></script>

  <title></title>

</head>

<body>

<div ng-controller="myCtrl">

  <button ng-click="handleClick()">

    clickMe

  </button>

</div>

</body>

</html>




js/demo10.min.js 代码：




var app=angular.module("myApp",["ng"]);app.service("$show",function(){this.showAlert=function(){alert("Hello myService")}});var ctrFunc=function(a,b){a.handleClick=function(){b.showAlert()}};ctrFunc.$inject=["$scope","$show"];app.controller("myCtrl",ctrFunc);




③行内式（内联）
允许在创建ng对象指定一个数组作为参数，在数组中写上依赖的服务的名称，数组中最后一个参数必须是该ng对象对应的处理函数


注意事项：顺序


html代码：




<!DOCTYPE html>

<html ng-app="myApp">

<head lang="en">

  <meta charset="UTF-8">

  <script src="js/angular.js"></script>

  <script src="js/demo11.min.js"></script>

  <title></title>

</head>

<body>

<div ng-controller="myCtrl">

</div>

</body>

</html>




js/demo11.min.js 代码：




var app=angular.module("myApp",["ng"]);app.factory("$Debug",function(){return{debugSwitch:true,log:function(a){if(this.debugSwitch){console.log(a)}}}});app.controller("myCtrl",["$scope","$Debug",function(a,b){b.log("Hello Dependency Injection")}]);




四、注入器
注入器是帮助查找和定位服务


得到注入器：
①直接注入$injector
②通过方法
angular.injector();


注入器常用API：
has('服务名称')
get('服务名称')




<!DOCTYPE html>

<html ng-app="myApp">

<head lang="en">

  <meta charset="UTF-8">

  <script src="js/angular.js"></script>

  <title></title>

</head>

<body>

<div ng-controller="myCtrl">

</div>

<script>

  var app = angular.module('myApp', ['ng']);

  //通过service方法创建自定义服务

  app.service('$test', function () {

    this.info = 'it is a test';

  })

  //得到注入器

  var injector = angular.injector(['ng', 'myApp']);

  //手工判断该服务是否存在

  var result = injector.has('$test')

  console.log(result);

  //如果存在，得到该服务对象，调用属性或者方法

  if (result) {

    var testObj = injector.get('$test');

    console.log(testObj.info);

  }

  //采用行内式依赖注入

  app.controller('myCtrl',

    ['$scope','$injector' ,

      function ($scope,$injector ) {

        if($injector.has('$test'))

        {

          var result = $injector.get('$test').info

          console.log("in myCtrl is "+ result)

        }

      }])

</script>

</body>

</html>




例子：


实现一个自定义计算器服务（加法运算的方法-》有两个参数，将参数求和返回）
采用行内式依赖注入注入上述服务。
在视图中两个input标签，一个求和按钮


结果：




代码：




<!DOCTYPE html>

<html ng-app="myApp">

<head lang="en">

  <meta charset="UTF-8">

  <script src="js/angular.js"></script>

  <title></title>

</head>

<body>

<div ng-controller="myCtrl">

  <input type="number" ng-model="num1"/>

  <input type="number" ng-model="num2"/>

  <br/>

  <button ng-click="addResult()">求和</button>

  <p>{{'求和结果：'+result}}</p>

</div>

<script>

  var app = angular.module('myApp', ['ng']);

  //创建服务

  app.service('$calculator', function () {

    this.add = function (num1,num2) {

      return (num1+num2);

    }

  })

  //行内式依赖注入

  app.controller('myCtrl',

    ['$scope','$calculator',

      function ($scope,$calculator) {

          $scope.addResult = function () {

            $scope.result = $calculator.add(

              $scope.num1,$scope.num2);

          }

      }

    ])

</script>

</body>

</html>


												


											
ng 依赖注入的更多相关文章
	

    
								
  1. ng依赖注入
		
    依赖注入 1.注入器在组件的构造函数中写服务constructor(private httpreq:HttpService) { } 2.提供器 providers: [HttpService],
    
		
    2. 
						
  2. angular路由 模块 依赖注入
		
    1.模块 var helloModule=angular.module('helloAngular',[]); helloModule.controller('helloNgCrtl',['$scop ...
    
		
    3. 
						
  3. AngularJS学习笔记之依赖注入
		
    最近在看AngularJS权威指南,由于各种各样的原因(主要是因为我没有money,好讨厌的有木有......),于是我选择了网上下载电子版的(因为它不要钱,哈哈...),字体也蛮清晰的,总体效果还不 ...
    
		
    4. 
						
  4. 4.了解AngularJS模块和依赖注入
		
    1.模块和依赖注入概述 1.了解模块 AngularJS模块是一种容器,把代码隔离并组织成简洁,整齐,可复用的块. 模块本身不提供直接的功能:包含其他提供功能的对象的实例:控制器,过滤器,服务,动画  ...
    
		
    5. 
						
  5. AngularJS——依赖注入
		
    依赖注入    依赖注入(DI)是一个经典的设计模式, 主要是用来处理组件如何获得依赖的问题.关于DI,推荐阅读Martin Flower的文章(http://martinfowler.com/art ...
    
		
    6. 
						
  6. AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5
		
    前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start  ...
    
		
    7. 
						
  7. angular2 学习笔记 ( DI 依赖注入 )
		
    refer : http://blog.thoughtram.io/angular/2016/09/15/angular-2-final-is-out.html ( search Dependency ...
    
		
    8. 
						
  8. （五）Angularjs - 依赖注入
		
    如何找到API? AngularJS提供了一些功能的封装,但是当你试图通过全局对象angular去 访问这些功能时,却发现与以往遇到的库大不相同. 比如,AngularJS暴露了一个全局对象:angu ...
    
		
    9. 
						
  9. AngularJs学习笔记6——四大特性之依赖注入
		
    压缩工具:YUI-compressor 为了优化网页功能,对一些脚本文件进行压缩,比如:删除所有的注释和空格等,简化形参.但是AngularJs模块中可以声明多种组件,如控制器.指令.过滤器.服务等. ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Delphi 正则表达式之TPerlRegEx 类的属性与方法(1): 查找
			
    Delphi 正则表达式之TPerlRegEx 类的属性与方法(1): 查找 //查找是否存在 var   reg: TPerlRegEx; begin   reg := TPerlRegEx.Cre ...
    
			
    2. 
						
  2. 解释一下python中的身份运算符
			
    通过身份运算符‘is’和‘is not’,我们可以确定两个值是否相同 ')#False print(True is not False)#True
    
			
    3. 
						
  3. CNN学习笔记：目标函数
			
    CNN学习笔记:目标函数 分类任务中的目标函数 目标函数,亦称损失函数或代价函数,是整个网络模型的指挥棒,通过样本的预测结果与真实标记产生的误差来反向传播指导网络参数学习和表示学习. 假设某分类任务共 ...
    
			
    4. 
						
  4. UVALive 6911 F - Double Swords
			
    思路:1.把所有有长度的剑看做点.Ai点是肯定要取.然后求另一把剑. 先对右区间排个序,然后每次看这个区间范围内有没有剑,如果没有就添加一把(值为右端点的剑): 如果有并且数量为1且这条龙的Ai等这把 ...
    
			
    5. 
						
  5. CWinApp类CMultiDocTemplate类CDocument类CView类的关系
			
    转自:http://blog.csdn.net/bboot/article/details/26884011 不得不转,瞬间搞清了很多问题,短小精悍 1.CWinApp类   它包含并管理着应用程序的 ...
    
			
    6. 
						
  6. 移植MarS Board代码到内核3.0.35
			
    MarS Board提供的出厂Linux内核是3.0.15的.而Freescale的BSP都早已经更新到3.0.35.为了跟上节奏,我花了点时间把关于marsboard代码从3.0.15移植到了Fre ...
    
			
    7. 
						
  7. Curator的监听机制
			
    原生的zookeeper的监听API所实现的方法存在一些缺点,对于开发者来说后续的开发会考虑的细节比较多. Curator所实现的方法希望摒弃原声API 的不足,是开发看起来更加的简单,一些重连等操作 ...
    
			
    8. 
						
  8. resultMap结果集映射
			
    resultMap结果集是用来定义sql查询的结果与java对象的映射关系.它主要解决2大问题: 1)可以解决POJO属性名和表结构的字段名不一致问题(甚至是 不是标准的驼峰命名法) 2)可以完成高级 ...
    
			
    9. 
						
  9. MySql 查询数据库中所有表名以及对比分布式库中字段和表的不同
			
    查询数据库中所有表名select table_name from information_schema.tables where table_schema='数据库名' and table_type= ...
    
			
    10. 
						
  10. java实现定时任务的三种方法 - 转载
			
    java实现定时任务的三种方法 /** * 普通thread * 这是最常见的,创建一个thread,然后让它在while循环里一直运行着, * 通过sleep方法来达到定时任务的效果.这样可以快速简 ...
    
			
    11.