Minifying 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-专注前端开发和用户体验