Угловая передовая практика: структура папок, компоненты, ui-Router

Question

Я новичок в угловом, и мне нужно, чтобы кто-то указал мне в правильном направлении, чтобы я не изучил плохие угловые практики. Я знаю, что есть похожие вопросы, но я не мог найти общий ответ, который я ищу.

1. это выглядит как большинство компаний не переключается на угловую 2 и продолжать использовать угловую 1.x, так что я решил изучить угловую 1.5. это мудрое решение?

2. Я видел два подхода к структуре папок. Первый из них выглядит следующим образом:

   

   маршруты определены с использованием метода ngRoute, папка услуги содержат REST услуги и данные объекты JSON хостов, используемые в пользовательском интерфейсе. Представления содержат имена файлов html в соответствии с соответствующими URL-адресами. В этом примере REST сервисы называются в маршрутах предоставления данных по времени DOM готова

3. другой подход, который я видел, это один:

   в этом одном маршрутизации осуществляется с помощью пользовательского интерфейса -Router и маршруты определены в файле states.js. Затем просмотры и контроллер складывают папку внутри папки маршрутов.

Мой вопрос заключается в том, какой подход следует лучшим практикам. Также я понимаю, что угловой 1.5 вводит компоненты. Требуется ли им совершенно другая структура или они интегрируются с вышесказанным.

Благодарим за помощь.

Answer 1

Я отвечу на часть вашего вопроса, где вы спрашиваете о структуре папок. Этот ответ предполагает, что вы хотите использовать AngularJS вместо Angular, но с современными технологиями и передовыми методами.

Это означает использование es2015, возможно, webpack, новейших ui-router и угловых компонентов. Если это так, перейдите к угловому 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