AngularJS壓縮JS技巧分析

本文實例講述了AngularJS壓縮JS的操作技巧。分享給大家供大家參考，具體如下：

大多數web專案在發佈時候都會對js程式碼進行壓縮，目的是為了減少js檔案的大小，節省一點流量。

它的原理很簡單，就是對參數及部分變數名稱和函數進行重新命名。

但是這種工作方式在AngularJS的應用上會有例外。

由於AngularJS的依賴注入是根據參數名稱注入的，顯然，對參數進行重命名會破壞這個機制。

如果不進行特殊處理，進行壓縮（minify）之後，在執行時將會出現這樣的錯誤

Unknow provider: aProvider

對於這種錯誤的官方解釋是：找不到依賴的服務

也就是說這種依賴注入會出現錯誤。

好在AngularJS內建了一種標準機制來處理這個問題.

最簡單也最常見的方式就是用數組代替函數。如：

.controller('RegisterCtrl', ['$scope', '$interval', '$timeout', function ($scope, $interval, $timeout) {
  //do something
}]);

   

數組的最後一個元素總是一個函數，而前面幾個參數都是字串，和這個函數中的參數一一對應。

另一種形式便是所謂的Annotation方式。如

var objCtrl = function($scope, $timeout, $interval){
  // do something
}
//给objCtrl函数增加一个$inject属性，它是一个数组，定义了需要被注入的对象
objCtrl.$inject = ['$scope', '$interval', '$timeout'];

   

這裡的依賴注入形式不僅限於Controller，一切需要DI（依賴注入的directive、factory、services等）都可以採用這兩種方式。