将依赖的对象注入到当前对象，直接去使用依赖的对象即可。
降低耦合度、提高开发速度。。
文件压缩：
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>