本文也同步發表在我的公眾號“我的天空” 依賴註入 依賴註入不是AngularJS獨有的概念，而是現代軟體開發與架構的範疇，但是在AngularJS中“依賴註入”是其核心思想之一，所以我們專門來學習一下。 觀察除“AngularJS路由”這節之前的控制器代碼，發現我們把所有的業務邏輯都寫在控制器代碼部 ...
本文也同步發表在我的公眾號“我的天空”
依賴註入
依賴註入不是AngularJS獨有的概念，而是現代軟體開發與架構的範疇，但是在AngularJS中“依賴註入”是其核心思想之一，所以我們專門來學習一下。
觀察除“AngularJS路由”這節之前的控制器代碼，發現我們把所有的業務邏輯都寫在控制器代碼部分，當代碼規模小還好處理，隨著代碼規模擴大，這樣的做法很快就會使代碼變的難以維護，控制器將變成一個代碼垃圾場，我們要做的所有東西都會倒在裡面，它們會變的非常難以理解且難以修改。這種情況下，我們自然會想到代碼分離，將功能類似的代碼抽取出來單獨寫成一個模塊，就像我們會將JS抽取出來寫成一個個JS外部文件一樣，使用的時候將其引入即可。
再來觀察“AngularJS路由”這節的代碼，我們引用模塊的方式與之前有了顯著的不同：
var app=angular.module("myApp",['ngRoute']);
對於angular.mmodule()方法的第二個參數，之前我們一直都是一個空數組，而在路由功能實現中，由於我們要依賴angular-route.min.js中的ngRoute模塊來實現路由功能，因此將第二個參數設置為['ngRoute']，該數組參數就是放置我們所要依賴的其他模塊名，如果我們要依賴多個模塊，則繼續將模塊名添加到該數組中就可以了，類似['module1','module2'...]。
當我們引用了依賴的ngRoute後，就可以使用$routeProvider了，利用其config（）函數來實現路由功能。期間我們並不需要調用任何函數去創建$routeProvider，我們也不用關心這個對象是如何生成的、其內部工作機制如何，只要拿來使用就夠了，就像把$routeProvider註入到我們的代碼里似的。再聯想到我們一直使用的$scope、實現http服務的$http等對象都是貫徹了這一宗旨。因此通俗來說“依賴註入”就是在需要的時候把我們所依賴的模塊功能註入到程式中。
接下來我們自己編寫一個模塊，並註入到程式中：
var app=angular.module("MathService",[])
app.factory('myMath',function(){
var my={};
my.add=function(a,b){
return a+b;
}
return my;
});
Math.js
<head>
<script src="Angular.js"></script>
<script src="Math.js"></script>
</head>
<body ng-app="myApp" ng-controller="ctr">
{{result}}
</body>
<script>
var app=angular.module("myApp",['MathService']);
app.controller("ctr",function($scope,myMath){
$scope.result=myMath.add(1,21);
})
</script>
示例代碼AngularJS_26.html
在Math.js中，我們首先定義了模塊的名稱為“MathService”，接下來使用factory()來定義“myMath”服務，事實上在AngularJS中的服務均為一個單例對象（即只會創建一個實例的對象），在該服務中實現了一個add()方法，返回兩個數的和。
接下來看在示例26中如何使用這個模塊。首先我們引入了Math.js。在模塊聲明中，我們將第二個參數的值設置為“['MathService']”，這個就是我們實現功能所要依賴的模塊，接下來在控制器代碼中，我們註入了myMath服務，並且使用myMath.add()方法，實現兩數求和。
在AngularJS中，創建服務的方法除了factory()外，還有value()、provider()、service()和constant()等方法，其適用的範圍及功能均有所不同，請自行查閱相關文檔。
整個AngularJS系列就到此結束了，實際上該系列只是介紹了AngularJS的入門，把自己的學習過程寫出來的而已。對於更深入的知識我和大家一樣都需要繼續再學習。
該系列的示例代碼
https://github.com/panyongwow/angularJS
