[AngularJS]AngularJS 入門教學 - $inject

在接下去學習更進階的 AngularJS 之前，咱門得先來看一下什麼是依賴注入(Dependency Injection)，為什麼要用以及可以用在那邊。

先來看一下簡單的 Controller：

1
2
3

var Ctrl = function($scope){
	$scope.name = '男丁格爾';
};

這邊就只有一個很簡單的 Model，然後搭配一個也是很簡單的 View：

1
2
3

<div class="well span4" style="margin-top:20px;" ng-controller="Ctrl">
	{{ name }}
</div>

基本的效果就是...

然後將 $scope 顯示出來看看：

這邊其實可以看到我們的 $scope 本身就是個物件模型，它是用來將 Controller 及 View 連結起來的...黏著劑。也因為我們的 $scope 是 建立 Controller 時所傳入的參數，所以我們能在 Controller 中取得整個 $scope 的各種 Model。

不過當程式越寫越多時，各位可能都會想辦法來將 JavaScript 程式進行最小化的壓縮，在壓縮的過程可能會將變數進行改變，像是用簡單的名稱來代替：

1
2
3

var Ctrl = function(a){
	a.name = '男丁格爾';
};

這邊可以看到本來參數名稱是叫 $scope，但被精簡成 a 了。那再來預覽看看效果：

唔~該有的效果都沒出來。Why！一般來說啦~參數名稱基本上跟所傳入的內容並不一定是要搭上任何關係，但當我們在建立 Controller 時所傳入的參數名稱是會被 AngularJS 拿來處理使用的，它會將你指定的參數名稱的物件傳入。

原本我們都是寫說需要 $scope，所以它就會把 $scope 傳進來。但~現在改成說我們要 a...所以就...。那是表示不能將程式來進行最小化的壓縮嗎？其實也不是不行，但因為函式的參數可能會被精簡改變，這樣會影響 Controller 的建立，因此 AngularJS 提供了一種很方便的依賴注入(Dependency Injection)方式。

讓我們把我們真正需要的參數利用依賴注入(Dependency Injection)的方式來指定：

1
2
3
4
5

var Ctrl = function(a){
	a.name = '男丁格爾';
};
 
Ctrl.$inject = ['$scope'];

我們需要透過 $inject 屬性來將要注入的參數設定在陣列中，陣列中元素的順序是會對應 Controller 的參數順利的。以這範例來看，參數 a 就是代表 $scope 囉。

當這樣給它注下去就後，就算參數名稱每次都不一樣也不影響程式及效果囉(順序要對啦！)：

不過，像筆者在 AngularJS 入門教學 - Module中使用模組(Module) 的 .controller(name, constructor) 來建立 Controller 的話，那要怎樣搭配依賴注入(Dependency Injection)呢？

假設原本的模組(Module)是這樣：

1
2
3
4
5

var myApp = angular.module('MyApp', []);
 
myApp.controller('Ctrl', function($scope){
	$scope.name = '男丁格爾';
});

那如果要改用依賴注入(Dependency Injection)的話，可以改成：

1
2
3
4
5

var myApp = angular.module('MyApp', []);
 
myApp.controller('Ctrl', ['$scope', function(new$scope){
	new$scope.name = '(新)男丁格爾';
}]);

.controller(name, constructor) 中的第二個參數原本是 Controller 的建構子，但現在我們可以傳入一個陣列，而陣列中的最後一個元素才是 Controller 的建構子，其它的則是用來注入物件名稱。

因為 new$scope 就是代表著 $scope，所以在 Controller 中一樣能存取使用我們的 Model 囉：

這種依賴注入(Dependency Injection)的方式可以讓我們用更精簡的方式來編寫我們的 Controller 及其它 Service 等等。為了讓各位可是先習慣這樣的語法，所以請再建立一個新的模組(Module)並使用依賴注入(Dependency Injection)來產生一個新的控制器(Controller)吧！