Question

嘿，我有angularjs文件的结构：

项目/

-bin

-model

-node_modules

-public

-routes

-views    app.js，package.json，package-lock.json

内部文件public是：

-images

-javascripts

-stylesheets

在javascripts里面我有：

board（inside boardController）
board（inside boardsController）
组件（在navbar / navbar-components.js和navbar-template.html内）

我会问我有这么好的结构文件或者我应该更改一些东西吗？我在组件上处理项目时，我之所以要问我有什么好处或我应该将文件组件传输到其他或我应该改名吗？

Answer 1

你的想法没问题。但是你错过了一些细节。例如，通常我们应该使用名为app的文件夹。以下是与您的应用程序相关的所有内容，而不是配置文件或节点模块。

另一个错过了，是模块概念，你的意见应该在你的董事会，董事会和组件内。为什么？它可以更容易地找到文件的位置，编辑它们，甚至可以更容易地扩展它们并进行扫描。

在这里，您可以找到更适合您项目的结构： https://scotch.io/tutorials/angularjs-best-practices-directory-structure

这是：

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+），我们在项目中的特定文件中有页面，并且是没有组件关系的页面（如Home，About和stuff）我们有重新组件你描述的可用东西。

Answer 2

我通常会关注Angular JS styleguide from John Papa。我已经在这个应用程序结构上取得了大约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

等

我建议您查看样式指南。那里有很多有用的提示。

此目录结构是否适合AngularJS应用程序？

2 个答案: