Question

我确信这是一个简单的修复，但我无法解决它。

我有一个app文件，一个路由文件和一个配置文件。这是每一个：

应用文件：

(function () {
  'use strict';

  angular
    .module('app', [
      'app.config',
      'app.routes',
      'app.authentication'
    ]);

  angular
    .module('app.config', [
      'restangular',
      'ngAnimate',
      'ngMaterial'
    ]);

  angular
    .module('app.routes', ['ui.router']);

})();

路线档案：

(function () {
  'use strict';

  angular
    .module('app.routes')
    .config(config);

  config.$inject = ['ui.router'];

  function config($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise("/");

    $stateProvider
      .state('register', {
        url:"/register",
        controller: 'RegisterController',
        controllerAs: 'register',
        templateUrl: "/static/templates/authentication/register.html"
      })
      .state('', {
        url:"/",
        templateUrl: "/static/templates/landing.html"
      });
  }

})();

配置文件：

(function () {
  'use strict';

  angular
    .module('app.config')
    .config(config);

  config.$inject = [
    'restangular',
    'ngAnimate',
    'ngMaterial'
  ];

  function config($locationProvider, $uiViewScrollProvider, RestangularProvider, $mdThemingProvider, $mdIconProvider) {
    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix('!');

    RestangularProvider.setBaseUrl('/api/');
    RestangularProvider.setDefaultHttpFields({xsrfCookieName:'csrftoken', xsrfHeaderName:'X-CSRFToken'});

    $uiViewScrollProvider.useAnchorScroll();

    $mdThemingProvider.theme('default').primaryPalette('blue').accentPalette('pink');

    $mdIconProvider.fontSet('fa', 'fontawesome');
  }

})();

然后在我的索引文件中，我将它们包括在内：

<script src="{% static 'app/app.config.js' %}" type="text/javascript"></script>
<script src="{% static 'app/app.routes.js' %}" type="text/javascript"></script>
<script src="{% static 'app/app.js' %}" type="text/javascript"></script>

我得到的错误是：

Error: [$injector:nomod] Module 'app.routes' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.4.2/$injector/nomod?p0=app.routes

和

Error: [$injector:nomod] Module 'app.config' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.4.2/$injector/nomod?p0=app.config

奇怪的是它们是缩写错误，而不是我过去搞砸注射时的正常错误。

Answer 1

在脚本中声明模块之前，您正尝试使用这些模块。您需要重新排序加载的脚本，例如app.js和app.config.js之前需要加载app.routes.js。

<!-- This comes first before the files that uses it-->
<script src="{% static 'app/app.js' %}" type="text/javascript"></script>
<script src="{% static 'app/app.config.js' %}" type="text/javascript"></script>
<script src="{% static 'app/app.routes.js' %}" type="text/javascript"></script>

或者将config和路由的声明分别移动到它自己的文件中。

 //in app.config.js, declare its module
  angular
    .module('app.config', [
      'restangular',
      'ngAnimate',
      'ngMaterial'
    ]);

  //app.routes.js
  angular
    .module('app.routes', ['ui.router']);

你有更多问题：你不能 inject 一个模块，你只能将它们列为模块声明中的依赖项。相反，您使用$ inject注释的数组注释注入模块的服务，提供者，控制器等。这样它们就可以安全化。

所以你需要改变：

config.$inject = ['ui.router'];

到

config.$inject = ['$stateProvider', '$urlRouterProvider'];

和

config.$inject = [
    'restangular',
    'ngAnimate',
    'ngMaterial'
  ];

到

config.$inject = [
  '$locationProvider', 
  '$uiViewScrollProvider', 
  'RestangularProvider', 
  '$mdThemingProvider', 
  '$mdIconProvider'

];

我不确定修复此问题后会弹出哪些其他（实际）错误。但是，如果您按照错误消息，您应该能够修复它们。大多数Angular错误消息都是非常具有描述性的（如果不是在开发模式下使用非缩小版以查看更多描述性错误），在使用它之前也可以很好地阅读 dependency injection 。

Answer 2

需要定义角度模块的第二个参数。

angular.module('app.config', []);

此外，您要两次定义app.config和app.routing模块。其中一个分别位于app.js和app.config.js和app.routing.js中。

如果您在控制台中运行angular.module('app.config', []);，则会收到您发布的相同错误。

Error: [$injector:nomod]....

此语法不适用于Angular依赖注入的语法，我该如何解决这个问题？

2 个答案: