角度最佳实践：文件夹结构、组件、ui-Router

Question

我是 Angular 新手，我需要有人指出我正确的方向，以防止我学习不良的 Angular 实践。我知道周围有类似的问题，但我找不到我正在寻找的一般答案。

1. 看起来大多数公司都没有改用 Angular 2 并继续使用 angular 1.x，所以我决定学习 angular 1.5。 这是一个明智的决定吗？

2. 我看到了两种文件夹结构的方法。第一个如下所示：

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

3. 我见过的另一种方法是：

   在这一路由中，使用 UI-Router 完成，并且路由在 states.js 文件中定义。然后将视图和控制器放在 routes 文件夹内的一个文件夹中。

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

感谢您的帮助。

Answer 1

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

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

所以，这里是 toddmotto 的样式指南中提到的示例文件结构。我也将在此结束答案。

├── 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

Answer 2

您应该查看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