javascript - angularjs 应用程序在代码连接后无法正常工作

Question

我有一个 angularjs 应用程序。我想将所有 JS 文件连接到一个文件中。我目前正在尝试使用 Grunt.js 设置自动构建过程以连接 JavaScript 文件。

但是我的应用程序在连接之前运行没有任何错误。但是在连接文件之后我的应用程序抛出 错误:$injector:modulerr模块错误。

下面是我压缩后的代码

angular.module('myApp', []);


var app = angular
  .module('myApp', [ 
    'ngRoute'
  ]);

 app.config(function ($routeProvider) {
    'use strict';
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'mainCntrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'aboutCntrl',
        controllerAs: 'about'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

   app.controller('mainCntrl',['$scope', function ($scope) {
  	'use strict';

    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
    
  }]);

app.controller('aboutCntrl',['$scope', function ($scope) {
    'use strict';
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
  }]);

感谢任何帮助。谢谢 :)

Answer 1

在缩小js文件时，你需要严格遵循DI的Inline Array Annotation或者$inject Property Annotation。

app.config(function ($routeProvider) {
    'use strict';
    //code 
});

应更改为以下代码。

Inline Array Annotation

app.config(['$routeProvider', function ($routeProvider) {
    'use strict';
    //code as is
}]);

$inject Property Annotation

var config = function($routeProvider) {
   'use strict';
   //code as is
}
config.$inject = ['$routeProvider'];
app.config(config);