模块化 Angular

Question

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

目前，我有三个 angular 文件来设置一切：

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>

我一直遇到这个错误：

Uncaught Error: [$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 的模块，并在“[...]”之间具有依赖关系。但是，您已经在 module.js.

中创建了一个名为 'app' 的模块

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

在你的states.js文件中，还有一件事： angular.module('app') 为您提供在 module.js 文件中创建的模块。你可以调用它的配置方法，这不是问题。但是，您在 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

模块化 Angular

Modularizing Angular

javascript

modularity

angularjs

不久

Angular.module.js

Angular.config.js

Angular.states.js

index.html

其他文件

一般