ng 依賴註入
將依賴的對象註入到當前對象，直接去使用依賴的對象即可。
降低耦合度、提高開發速度。。
文件壓縮：
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 依賴註入