angular 最佳实践：文件夹结构、组件、ui-路由器

Question

我是 angular 的新手，我需要有人为我指明正确的方向，防止我学习不好的 angular 做法。我知道周围有类似的问题，但我找不到我要找的一般答案。

看起来大多数公司都没有转向 angular 2 并继续使用 angular 1.x 所以我决定学习 angular 1.5。这是一个明智的决定吗？
我看到了两种文件夹结构方法。第一个如下所示：

路由是使用 ngRoute 方法定义的，服务文件夹包含 UI 使用的 REST 服务和数据主机 JSON 对象。根据相关 URL 地址，视图包含 html 文件名。在此示例中，在 DOM 就绪
我见过的另一种方法是：

在这个路由中，使用 UI-Router 完成路由，路由在 states.js 文件中定义。 Views和controller然后放在routes文件夹里面的一个文件夹。

我的问题是哪种方法遵循最佳实践。我还了解到 angular 1.5 引入了组件。它们需要完全不同的结构还是与上述结构相结合。

感谢您的帮助。

Answer 1

你应该看看johnpapa angular style guide！极大地帮助了我。它有一个关于结构的部分，并根据功能架构推荐一个文件夹。

app/
    app.module.js
    app.config.js
    components/
        calendar.directive.js
        calendar.directive.html
        user-profile.directive.js
        user-profile.directive.html
    layout/
        shell.html
        shell.controller.js
        topnav.html
        topnav.controller.js
    people/
        attendees.html
        attendees.controller.js
        people.routes.js
        speakers.html
        speakers.controller.js
        speaker-detail.html
        speaker-detail.controller.js
    services/
        data.service.js
        localstorage.service.js
        logger.service.js
        spinner.service.js
    sessions/
        sessions.html
        sessions.controller.js
        sessions.routes.js
        session-detail.html
        session-detail.controller.js

Answer 2

我将回答您问题中有关文件夹结构的部分。此答案假定您想要使用 AngularJS 而不是 Angular，但要使用最新的技术和最佳实践。

这意味着使用 es2015，可能是 webpack，最新的 ui-router 和 angular 组件。如果是这样，请转到 angularjs styleguide by toddmotto, instead of the one by johnpapa。后者根本没有提到angular.component。

因此，这里是 toddmotto 的 styleguide 中提到的示例文件结构。我也将在这里结束答案。

├── app/
│   ├── components/
│   │  ├── calendar/
│   │  │  ├── calendar.module.js
│   │  │  ├── calendar.component.js
│   │  │  ├── calendar.service.js
│   │  │  ├── calendar.spec.js
│   │  │  ├── calendar.html
│   │  │  ├── calendar.scss
│   │  │  └── calendar-grid/
│   │  │     ├── calendar-grid.module.js
│   │  │     ├── calendar-grid.component.js
│   │  │     ├── calendar-grid.directive.js
│   │  │     ├── calendar-grid.filter.js
│   │  │     ├── calendar-grid.spec.js
│   │  │     ├── calendar-grid.html
│   │  │     └── calendar-grid.scss
│   │  ├── events/
│   │  │  ├── events.module.js
│   │  │  ├── events.component.js
│   │  │  ├── events.directive.js
│   │  │  ├── events.service.js
│   │  │  ├── events.spec.js
│   │  │  ├── events.html
│   │  │  ├── events.scss
│   │  │  └── events-signup/
│   │  │     ├── events-signup.module.js
│   │  │     ├── events-signup.component.js
│   │  │     ├── events-signup.service.js
│   │  │     ├── events-signup.spec.js
│   │  │     ├── events-signup.html
│   │  │     └── events-signup.scss
│   │  └── components.module.js
│   ├── common/
│   │  ├── nav/
│   │  │     ├── nav.module.js
│   │  │     ├── nav.component.js
│   │  │     ├── nav.service.js
│   │  │     ├── nav.spec.js
│   │  │     ├── nav.html
│   │  │     └── nav.scss
│   │  ├── footer/
│   │  │     ├── footer.module.js
│   │  │     ├── footer.component.js
│   │  │     ├── footer.service.js
│   │  │     ├── footer.spec.js
│   │  │     ├── footer.html
│   │  │     └── footer.scss
│   │  └── common.module.js
│   ├── app.module.js
│   ├── app.component.js
│   └── app.scss
└── index.html

angular 最佳实践：文件夹结构、组件、ui-路由器

angular best practice: folder structure, components, ui-Router

directory-structure

angularjs

angular-ui-router

angular-components