嘿,我有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 ),在该项目中,我们在特定文件中有页面,并且是没有组件关系的页面(例如家庭,大约和其他内容),我们为重新提供了组件如您所描述的。