Question

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

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

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

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

我的问题是哪种方法遵循最佳实践。另外我理解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和角度组件。如果是这种情况，请转到angularjs styleguide by toddmotto，而不是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

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

2 个答案: