Question

我是棱角分明的新手

我想像这样创建我的项目结构

- APPLICATION
  -index.html
  -app.js
  -modules
     -core
       -controllers
       -directive
       -views
       -core.app.js
       -core.config.routes.js

     -test
       -controllers
       -directive
       -views
       -test.app.js
       -test.config.routes.js

这里核心，测试是不同的模块（ng-app）

我配置像这里

app.js angular.module（＆＃39; mainapp＆＃39; [＆＃39; mainapp.core＆＃39;＆＃39; mainapp.test＆＃39;]）

core.app.js angular.module（＆＃39; mainapp.core＆＃39;，[]）

test.app.js angular.module（＆＃39; mainapp.test＆＃39;，[]）

这里我遇到的问题是我的核心模块状态不正常。我正在使用$ staeprovider（ui-views）进行路由。

例如

core.config.routes.js

angular.module('mainapp.core').config(function($stateProvider,
        $urlRouterProvider) {

$stateProvider
    .state('core', {
      url: '/core',
      templateUrl: 'modules/core/views/core.html',

    })
    .state('core.sidebar ', {
      url: '^/sidebar ',
      templateUrl: 'modules/core/views/core.sidebar .html'
    })
     });

test.config.routes.js

angular.module('mainapp.test').config(function($stateProvider,
        $urlRouterProvider) {

$stateProvider

    .state('core.sidebar .test', {
      url: '^/test',
      templateUrl: 'modules/core/views/test.html'
    })
     });

我的html页面是

的index.html

  <div ng-app="mainapp">
      <div ui-view= ""></div>
   </div>

core.html

  `    <div>
           <h1>I am designing jeader Here. it goes on tp of page</h1>
            <div ui-view></div>
        </div>`

core.sidebar .html

    `<div>
     <h2>It goes left side</h2>

      <h1>I am designing sidebar Here</h1>

      <div ui-view></div>
     </div>`

直到这里它工作正常。 heaser，sider bar正在 core.sidebar

加载$ state

我在这里遇到问题＆＃39;不工作的的test.html

 <div>
      <h1>I am designing middle content Here</h1>

   </div>

请任何人帮我解决问题并为项目结构建立更好的方法

Answer 1

我建议你看一下Angular Style Guide如何推荐项目结构。 https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#application-structure-lift-principle

我非常喜欢他们推荐使用LIFT方法：

找到我们的代码很简单

识别代码一目了然

平面结构，只要我们可以

尽量保持干燥（不要重复自己）或T-DRY

本着这种精神，您可能只有一个模块文件夹，然后使用文件命名约定来保持组织有序。在我的项目中，我这样做并使用ng-structure前缀。例如：

nx.core
- controller.header
- controller.footer
- controller.app
- 路由
nx.admin
- 路由
- controller.admin
- directive.blah

这样做，我能够实现扁平化组织以及快速过滤，我需要哪些文件。然后唯一的缺点是如果你在IDE中使用快捷方式来快速打开文件，你通常会想到 FindingsController 而不是像 controller.Findings 这样的前缀。

只是我的2¢

大型Angular应用程序的项目结构？

1 个答案: