grunt等工具uglify angularjs 控制器注入失败的问题

问题引入

源文件是csp.js. 使用grunt的uglify压缩后的文件是csp.min.js.
其中，csp.js的结构如下：

var cmsApp = angular.module('cmsApp', ['cmsController', 'cmsService', 'cmsDirective', 'oc.lazyLoad']);angular.module('cmsController', []);angular.module('cmsService', []);angular.module('cmsDirective', []);angular.module('cmsController').controller('mainCtrl', function ($scope, $rootScope, $interval, $timeout, $ocLazyLoad, mainService) {    //新界面定义变量    $scope.primaryMenu = 0;    $scope.primaryMenuEnum = {};    $scope.showSecondaryMenu = false;    $scope.secondaryMenuList = [];    $scope.secondaryOpenMenuList = [];    $scope.showMax = false;    $scope.menuList = [];})

在index.html中引入csp.js程序是可以运行的。但是引入csp.min.js则报错：
Error: [$injector:unpr]
我们知道这是：控制器注入失败的错误。

引入min.js的意义

可以看到压缩比率接近50%。一个成熟的网站，体积一般在M以上，这么高的压缩率是相当可观的。

解决的办法

1.问题产生的原因
angular控制器依赖注入编写有两种方式：

第一种：

angular.module('cmsController').controller('mainCtrl', ['$scope', '$rootScope', '$interval', '$timeout', '$ocLazyLoad', 'mainService', function ($scope, $rootScope, $interval, $timeout, $ocLazyLoad, mainService) {}])

第二种：

angular.module('cmsController').controller('mainCtrl',  function ($scope, $rootScope, $interval, $timeout, $ocLazyLoad, mainService) {})

在非压缩形式下，两种方式都是正确的。实际上最开始我们也没很明白这两种写法的区别，为了简便，很多人直接用了后者的写法。

正是这种方式，导致了压缩后，构造函数参数也被压缩，依赖注入无法正确找到服务器。因此，全部统一换成第一种方式，用数组方式构造控制器，把注入依赖放入到一个数组中，该数组最后一个元素是控制器的方法函数。

注意：
除了控制器，service也需要写成这种形式：

 angular.module('cmsService').factory('mainService',['$http',function($http) {    var service = {}; }])