不久

Question

我正在开始一个新的Angular项目并试图模块化我的所有代码 - 我厌倦了拥有大量的app.js文件，而且因为我正在为一家公司开发一个平台，所以我的代码很整洁很重要模块化，易于测试，清洁，易于过渡到Angular 2。

目前，我有三个角度文件设置一切：

Angular.module.js

angular
 .module('app', [
   /* Shared Modules */
   'app.config',
   'app.states'
   /* Feature Areas */
 ])

Angular.config.js

   angular
    .module('app', [
     /* Angular Modules */
     'ngResource',
     'ngSanitize',
     /* 3rd-party Modules */
     'ui.router'
    ]);

Angular.states.js

    angular
     .module('app')
     .config([
      '$stateProvider',
      '$urlRouterProvider',
      '$locationProvider',
      function($stateProvider, $urlRouterProvider, $locationProvider){

       // Unknown URLs go to 404
       $urlRouterProvider.otherwise('/404');
       // No route goes to index
       $urlRouterProvider.when('', '/');

       // State provider for routing
      $stateProvider
       .state('home', {
         url: '/',
         views: {
          '': {
          templateUrl: 'home/_home.html'
          }
         }
      });
   }]);

这是我的index.html

    <!DOCTYPE html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <title>App</title>
      <link rel="stylesheet" href="/content/stylesheets/screen.css">

      <!-- Angular Dependencies -->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
      <script src="https://code.angularjs.org/1.3.15/angular-sanitize.min.js"></script>
      <script src="https://code.angularjs.org/1.3.15/angular-resource.min.js"></script>

      <!-- Angular Modules -->
      <script src="/app/app.config.js"></script>
      <script src="/app/app.states.js"></script>
      <script src="/app/app.module.js"></script>
     </head>
    <body ng-app="app">
     <div id="wrapper">
      <div ui-view></div>
     </div>
    </body>
  </html>

我一直在犯这个错误：

未捕捉错误：[$ injector：modulerr]

我做错了什么？我很难理解我如何使各种Angular文件相互交互。我遗漏了一个州的控制器，因为我现在正在测试视图。

Answer 1

写作：

angular.module('app', [
    /* Shared Modules */
    'app.config',
    'app.states'
    /* Feature Areas */
])

您创建了一个名为app的模块，该模块需要2个模块：app.config和app.states。如果其中一个缺失或无效，则app模块无法启动。

在config.js中，您可以撰写angular.module('app', [...])。这将创建一个名为app的模块，其中包含＆＃39; [...]＆＃39;之间的依赖关系。但是，您已经创建了一个名为＆＃39; app＆＃39;在module.js。

中

将模块名称更改为config.js至angular.module('app.config', [...])。

在您的states.js文件中，还有另一件事： angular.module('app')为您提供了在module.js文件中创建的模块。你可以在上面调用config方法，这不是问题。但是，您可以在app模块中定义app.states的依赖关系。您可以删除此依赖关系，或将angular.module('app')替换为angular.module('app.states', []).config(...)

希望它对你有所帮助。

Answer 2

您必须正确命名模块，文件名本身不会改变任何内容： Angular.module.js

angular
 .module('app', [
   /* Shared Modules */
   'app.config',
   'app.states'
   /* Feature Areas */
 ])

Angular.config.js

angular
    .module('app.config', [
     /* Angular Modules */
     'ngResource',
     'ngSanitize',
     /* 3rd-party Modules */
     'ui.router'
    ]);

Angular.states.js

angular
 .module('app.states')
 .config([
  '$stateProvider',
  '$urlRouterProvider',
  '$locationProvider',
  function($stateProvider, $urlRouterProvider, $locationProvider){
  ...
  }

Answer 3

不久

Angular.config.js 重新定义'app'模块并更改其依赖项。所以我想建议以下解决......

Angular.module.js

将 Angular.module.js （实际上是 app / app.module.js ）代码设为以下内容：

angular
  .module('app', [
    /* Angular Modules */
    'ngResource',
    'ngSanitize',
    /* 3rd-party Modules */
    'ui.router'
  ]);

Angular.config.js

将 Angular.config.js （实际上是 app / app.config.js ）代码设为：

angular
  .module('app')
  .config([
    '$stateProvider',
    '$urlRouterProvider',
    '$locationProvider',
    function($stateProvider, $urlRouterProvider, $locationProvider) {
      ...
    }
  ]);

Angular.states.js

应删除

Angular.states.js （实际上是 app / app.states.js ），或者将其重命名为 app / app.config。 js （见上文）。

的index.html

index.html 代码应具有以下文件顺序：

  <!-- Angular Modules -->
  <script src="/app/app.module.js"></script>
  <script src="/app/app.config.js"></script>

其他文件

在单独的文件中定义模块。例如，在 something.module.js
something.config.js 文件
等

并按以下顺序将这些文件包含在 index.html 中：

  <!-- Angular Modules -->
  <script src="/something/something.module.js"></script>
  <script src="/something/something.config.js"></script>
  <script src="/app/app.module.js"></script>
  <script src="/app/app.config.js"></script>

一般

以下有关AngularJS代码样式的文档可能对您以后编写AngularJS模块有所帮助：https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

模块化角度

3 个答案:

不久

Angular.module.js

Angular.config.js

Angular.states.js

的index.html

其他文件

一般