是否适用于AngularJS应用的目录结构



嘿,我有AngularJS文件的结构:

项目/

-bin

- 模型

-node_modules

-public

-Routes

- 视图app.js,package.json,package-lock.json

内部文件公共是:

图像

-javascripts

- 风格表

和javaScripts内部我有:

  • 董事会(内部董事会控制器)
  • 董事会(内部董事会controller)
  • 组件(内部navbar/navbar-components.js和navbar-template.html)

我会问我有一个很好的结构文件,还是应该更改某些内容?我在处理该项目的过程中是我的原因,为什么我问我有好处,或者我应该将文件组件转移到其他方面或我应该更改名称??

我通常遵循约翰·帕帕(John Papa)的Angular JS styleguide。我在该应用结构中取得了成功,大约3 - 4年了。基本上就像何塞所说。您将应用程序代码(JS,视图,测试等)保留在称为/app的目录中,然后根据模块将代码分为文件夹。

因此,您的应用程序中有三个不同的部分:帐户,布局和董事会。然后,您会这样构建您的应用程序:

app/
    account/
        account.module.js
        account.component.js
        account.component.spec.js
        account.component.html
    layout/
        layout.module.js
        navbar/
            navbar.component.js
            navbar.component.spec.js
            navbar.component.html
    boards/
        boards.module.js
        boards.component.js
        boards.component.spec.js
        boards.component.html
    app.module.js
    app.config.js

等。

自然,确切的结构取决于您如何构建模块,但这是构建应用程序的好方法的基础知识。

其余文件(静态资产,配置,构建脚本等)与app/文件夹一起位于根中。这样的东西:

app/
assets/
    images/
    fonts/
    styles/
node_modules/
dist/
package.json
index.html
karma.conf.js
gulpfile.js

等。

我建议您检查styleGuide。那里有很多有用的技巧。

您的想法还可以。但是您缺少一些细节。例如,通常我们应该使用一个名为app的文件夹。这将是与您的应用相关的所有内容,而不是配置文件或节点模块。

另一个错过的是模块概念,您的视图应该在板,板和组件内。为什么?它更容易找到文件应该在哪里,对它们进行编辑,甚至更容易将其增长并缩放。

在这里您可以找到一个更好的项目结构:https://scotch.io/tutorials/angularjs-best-practices-directory-scrupture

是:

app/
-- index.html
-- shared/   // acts as reusable components or partials of our site
-- -- sidebar/
-- -- -- sidebarDirective.js
-- -- -- sidebarView.html
-- -- article/
-- -- -- articleDirective.js
-- -- -- articleView.html
-- components/   // each component is treated as a mini Angular app
-- -- home/
-- -- -- homeController.js
-- -- -- homeService.js
-- -- -- homeView.html
-- -- blog/
-- -- -- blogController.js
-- -- -- blogService.js
-- -- -- blogView.html
-- -- app.module.js
-- -- app.routes.js
assets/
-- img/      // Images and icons for your app
-- css/      // All styles and style related files (SCSS or LESS files)
-- js/       // JavaScript files written for your app that are not for angular
-- libs/     // Third-party libraries such as jQuery, Moment, Underscore, etc.

在页面中,您可以进一步阅读有关每个文件夹/想法的信息。如果您的项目很大,您也可以阅读建议。

另一个很好的参考是Angular(Angular 2 ),在该项目中,我们在特定文件中有页面,并且是没有组件关系的页面(例如家庭,大约和其他内容),我们为重新提供了组件如您所描述的。

最新更新