一、产生的问题
如果你正在进行AngularJS的项目开发，生产时Minified JS文件有没有遇到下面问题：
|
1
2
3
4
|
angular.module("myApp",.controller("mainController",function($scope) $scope.message"Hello,;}); |
在这个例子中，Angular解析后知道它需要使用$scope依赖，下面我们看看最小化的情况：
|
1
|
angular.module("myApp",[]).controller("mainController",function(a){a.message="Hello,;}); |
Minified后$scope被最小化成了变量a，此时Angular无法去解析声明的依赖。因此会报错。
二、解决方式
那么如何解决这个问题呢？下面是一些解决方式，如果你有其它好的解决方式，欢迎留言。
方式一：显示声明依赖注入
|
1
2
3
4
5
6
7
8
|
var mainControllerfunction($scope) $scope.message"Hello,;};angular.module("myApp",.controller("mainController",mainController['$inject']'$scope']; |
Minified
|
1
|
var mainController=function(a){a.message="Hello,;};angular.module("myApp",[]).controller("mainController",mainController);mainController["$inject"]=["$scope"]; |
方式二：内嵌式依赖
|
1
2
3
4
|
angular.module("myApp",.controller("mainController",'$scope','$http',function($scope, $scope.message"Hello,;}]); |
Minified
|
1
|
angular.module("myApp",[]).controller("mainController",["$scope","$http",function(a,b){a.message="Hello,;}]); |
这种方式，在使用模块化时需要我们有好的编码习惯。
方式三：使用ng-annotate
关于ng-annotate的详细信息请戳这里，常使用在NodeJS环境。 Install:
|
1
|
$install -g |
Using:
|
1
|
$file> |
使用时，我们可以结合Gulp、Grunt等自动化工具使用，提高开发效率。
三、方式对比
对比以上方式，个人比较偏向方式二，但是如果项目（自动化）生产中已经产生此问题，可配合gulp，Grunt自动化工具使用解决问题则较为方便。