Minifying Angular應用時產生的問題

zuo發表於2014-11-12
Angular

一、產生的問題

如果你正在進行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-專注前端開發和使用者體驗

相關文章