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 = {};
 }])