Angularjs 角度最佳实践：文件夹结构、组件、ui路由器

我是个新手，我需要有人给我指出正确的方向，防止我学习不良的角度练习。我知道周围也有类似的问题，但我找不到我想要的一般答案

看起来大多数公司都没有转向角型 2并继续使用angular 1.x，因此我决定学习angular 1.5。 这是一个明智的决定吗

我看到了两种实现文件夹结构的方法。第一个看起来如下所示：

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

我见过的另一种方法是：

在本例中，路由使用UI路由器完成，路由在states.js文件中定义。视图和控制器然后放在routes文件夹中的一个文件夹中

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

谢谢您的帮助。

您应该查看！对我帮助很大。它有一个关于结构的部分，并按功能体系结构推荐一个文件夹

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

---

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

这意味着使用es2015，可能是webpack、最新的ui路由器和angular组件。如果是这样的话，那就到安格拉家去，而不是去教堂。后者根本没有提到角度组件

下面是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 1.x指南没有提到新的

Angular.component

。这部分问题不包括在这个答案中。等我有了一个答案，我也会回来的。