代码连接后angularjs应用程序无法正常工作答案

【问题标题】：angularjs app not working after code concatination代码连接后angularjs应用程序无法正常工作
【发布时间】：2016-05-12 20:09:42
【问题描述】：

我有和 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'
    ];
  }]);

任何帮助表示赞赏。谢谢:)

【问题讨论】：

标签： javascript angularjs dependency-injection angularjs-controller

【解决方案1】：

压缩js文件时需要严格遵守Inline Array Annotation的DI或$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);

【讨论】：

我添加了 $routeProvide 作为 DI。但它似乎仍然不起作用.app.config(['$routeProvider', function ($routeProvider)
@dennyjohn 也验证其他文件，您一定在其他地方遗漏了同样的东西吗？
这些是我唯一拥有的文件。当代码未连接时，此应用可以正常工作。

【解决方案2】：

好像配置行是你的问题，试试app.config(['$routeProvider', function ($routeProvider) { ... }]);

【讨论】：

【解决方案3】：

是的，您的注释不正确。应该是

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

使用ng-annotate 作为安全、干净和简单的解决方案。

它的作用是当您 grunt 时，它会以正确的方式注释您的定义，因此您不必处理 Angular 的古怪方式。

在

上运行 ng-annotate

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

它会自动完成以进行缩小：

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

【讨论】：

【解决方案4】：

您还可以在构建工作流程中添加另一个步骤 - grunt-ng-annotate 在这种情况下，您将能够跳过几乎所有严格的 DI 注释。使用此插件，您可以简化服务/控制器定义，例如：

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

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

当您将一长串服务注入控制器或其他服务时，这非常有用。您不必记住将每个依赖项放置两次。

【讨论】：