FED实验室 - 专注WEB端开发和用户体验

Minifying Angular应用时产生的问题

ANGULARJS 煦涵 2940℃ 0评论

一、产生的问题

如果你正在进行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自动化工具使用解决问题则较为方便。

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持 喜欢 (1)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址