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

最新推荐文章于 2025-03-11 20:52:39 发布

haliofwu

最新推荐文章于 2025-03-11 20:52:39 发布

阅读量406

点赞数 1

分类专栏： angularjs web 前段杂构建工具

本文链接：https://blog.youkuaiyun.com/xixi880928/article/details/78717030

版权

web 前段杂同时被 3 个专栏收录

37 篇文章

订阅专栏

angularjs

14 篇文章

订阅专栏

构建工具

2 篇文章

订阅专栏

本文探讨了AngularJS应用中，在使用grunt的uglify进行代码压缩后遇到的依赖注入失败问题，并提供了有效的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题引入

源文件是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 = {};
 }])