Fatal编程技术网

Javascript 模块化角度传感器

javascript angularjs

Javascript 模块化角度传感器,javascript,angularjs,modularity,Javascript,Angularjs,Modularity,我正在启动一个新的Angular项目，并尝试将我所有的代码模块化——我厌倦了拥有大量的app.js文件，因为我正在为一家公司开发一个平台，所以我的代码整洁、模块化非常重要，以便于测试、清洁，并易于过渡到Angular 2 目前，我有三个Angle文件来设置所有内容： Angular.module.js angular .module('app', [ /* Shared Modules */ 'app.config', 'app.states' /* Feature A

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

目前，我有三个Angle文件来设置所有内容：

Angular.module.js

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

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

angular
 .module('app.states')
 .config([
  '$stateProvider',
  '$urlRouterProvider',
  '$locationProvider',
  function($stateProvider, $urlRouterProvider, $locationProvider){
  ...
  }
这是我的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:moduler]

我做错了什么？我很难理解如何让我的各种角度文件相互作用。我遗漏了我状态的一个控制器，因为我现在正在测试视图。

通过编写：

angular.module('app', [
    /* Shared Modules */
    'app.config',
    'app.states'
    /* Feature Areas */
])
您创建一个名为
app
的模块，它需要两个模块：
app.config
和
app.states
。如果其中一个丢失或无效，则
应用程序
模块无法启动

在
config.js
中，编写
angular.module（'app'，[…]）
。这将创建一个名为
app
的模块，该模块在“[…]”之间具有依赖关系。但是，您已经在
module.js
中创建了一个名为“app”的模块

将
config.js
中的模块名称更改为
angular.module（'app.config'，[…]）

在您的
states.js
文件中，还有一件事： 
angular.module（'app'）
提供您在
module.js
文件中创建的模块。您可以对其调用config方法，这不是问题。但是，您可以在
应用程序
模块中定义对
应用程序状态
的依赖关系。您可以删除此依赖项，或将
angular.module（'app'）
替换为
angular.module（'app.states'，[]）.config（…）

希望它能帮助您。

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

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

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')
     .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'
          }
         }
      });
   }]);

angular
 .module('app.states')
 .config([
  '$stateProvider',
  '$urlRouterProvider',
  '$locationProvider',
  function($stateProvider, $urlRouterProvider, $locationProvider){
  ...
  }
不久 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模块有所帮助：

AngularJS模块的
angular.module（“name”，[]）
语法会创建一个模块。您使用相同的模块名多次执行此操作。这非常有意义。我不知道依赖关系或注入是如何工作的，我现在走的是一条更好的道路。非常有用。