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

今天药忘吃喽~ 2022-06-04 05:07 142阅读 0赞

## 问题引入 ##

源文件是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的意义 ##

![这里写图片描述][SouthEast]  
可以看到压缩比率接近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 = {};
     }])

[SouthEast]: /images/20220604/2a237b8ddaee423db6780da30470e9f0.png