IT工程師數位筆記本

一、產生的問題

如果你正在進行AngularJS的項目開發，生產時Minified JS文件有沒有遇到下面問題：

angular.module("myApp", [])
.controller("mainController", function($scope) {
	$scope.message = "Hello, Benjamin!";
});	

在這個例子中，Angular解析后知道它需要使用$scope依賴，下面我們看看最小化的情況：

angular.module("myApp",[]).controller("mainController",function(a){a.message="Hello, Benjamin!";});

Minified后$scope被最小化成了變量a，此時Angular無法去解析聲明的依賴。因此會報錯。

二、解決方式

那么如何解決這個問題呢？下面是一些解決方式，如果你有其它好的解決方式，歡迎留言。

方式一：顯示聲明依賴注入

var mainController = function($scope) {
	$scope.message = "Hello, Benjamin!";
};

angular.module("myApp", [])
.controller("mainController", mainController);	

mainController['$inject'] = ['$scope'];

Minified

var mainController=function(a){a.message="Hello, Benjamin!";};angular.module("myApp",[]).controller("mainController",mainController);mainController["$inject"]=["$scope"];

方式二：內嵌式依賴

angular.module("myApp", [])
.controller("mainController", ['$scope', '$http', function($scope, $http) {
	$scope.message = "Hello, Benjamin!";
}]);	

Minified

angular.module("myApp",[]).controller("mainController",["$scope","$http",function(a,b){a.message="Hello, Benjamin!";}]);

這種方式，在使用模塊化時需要我們有好的編碼習慣。

方式三：使用ng-annotate

關于ng-annotate的詳細信息請戳這里，常使用在NodeJS環境。 Install:

$ npm install -g ng-annotate

Using:

$ ng-annotate OPTIONS <file>

使用時，我們可以結合Gulp、Grunt等自動化工具使用，提高開發效率。

三、方式對比

對比以上方式，個人比較偏向方式二，但是如果項目（自動化）生產中已經產生此問題，可配合gulp，Grunt自動化工具使用解決問題則較為方便。

轉載聲明：

本文標題：Minifying Angular應用時產生的問題

本文鏈接：http://www.zuojj.com/archives/1069.html，轉載請注明轉自Benjamin-專注前端開發和用戶體驗