angularjs 代码串联后应用无法运行

Question

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

然而，我的应用程序在连接我的应用程序抛出的文件后 concatenation.But 之前运行时没有任何错误 错误：$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'
    ];
  }]);

任何帮助appreciated.Thanks :)

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);

Answer 2

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

Answer 3

是的，你的注释不对。应该是

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

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

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

运行 ng-注释

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

它会自动完成缩小：

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

Answer 4

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

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

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

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

angularjs 代码串联后应用无法运行

angularjs app not working after code concatination

javascript

dependency-injection

angularjs

angularjs-controller