Який тип структури папки слід використовувати з Angular 2?

Я розробник Angular 1, який починає дізнаватися про Angular 2. Існує дуже багато різних методів структури папок, залежно від навчального матеріалу. Я перелічу кожного з них нижче, і мені б хотілося отримати думку людей щодо того, що мені слід використовувати і чому. Крім того, якщо є метод, який немає в списку, але ви вважаєте, що він працює краще, будь ласка, перелічіть його також.

Переглядаючи все це, метод №3 в значній мірі, як я робив свої програми Angular 1.

Спосіб 1: angular2-quickstart

Джерело: https://angular.io/guide/quickstart

Структура папки:

Метод 2: ng-book2

Джерело: https://www.ng-book.com/2/ (заплатили за перегляд файлів)

Структура папки:

Спосіб 3: mgechev / angular2-seed

Джерело: https://github.com/mgechev/angular2-seed

Структура папки:

Офіційна настанова існує зараз. mgechev/angular2-seedтеж погодився з цим. див. # 857 .

https://angular.io/guide/styleguide#overall-structural-guidelines

Я думаю, що структурування проекту за функціональними можливостями - це практичний метод. Це робить проект масштабованим і легко ремонтом. І це робить кожну частину проекту повною самостійністю. Дайте мені знати, що ви думаєте про цю структуру нижче: СТРУКТУРА АНГУЛЬНОГО ТИПИСКРИПТУ - ANGULAR 2

джерело: http://www.angulartypescript.com/angular-typescript-project-structure/

Я збираюся використовувати цей. Дуже схожий на третій, показаний @Marin.

app
|
|___ images
|
|___ fonts
|
|___ css
|
|___ *main.ts*
|   
|___ *main.component.ts*
|
|___ *index.html*
|
|___ components
|   |
|   |___ shared
|   |
|   |___ home
|   |
|   |___ about
|   |
|   |___ product
|
|___ services
|
|___ structures

Отож, провівши докладніші дослідження, я закінчив трохи переглянуту версію Методу 3 (mgechev / angular2-seed).

Я в основному перемістив компоненти в основний каталог рівня, і тоді кожна функція буде всередині нього.

Можливо, щось на кшталт цієї структури:

|-- app
     |-- modules
       |-- home
           |-- [+] components
           |-- pages
              |-- home
              |-- home.component.ts|html|scss|spec
           |-- home-routing.module.ts
           |-- home.module.ts
     |-- core
       |-- authentication
           |-- authentication.service.ts|spec.ts
       |-- footer
           |-- footer.component.ts|html|scss|spec.ts
       |-- guards
           |-- auth.guard.ts
           |-- no-auth-guard.ts
           |-- admin-guard.ts 
       |-- http
           |-- user
               |-- user.service.ts|spec.ts
           |-- api.service.ts|spec.ts
       |-- interceptors
           |-- api-prefix.interceptor.ts
           |-- error-handler.interceptor.ts
           |-- http.token.interceptor.ts
       |-- mocks
           |-- user.mock.ts
       |-- services
           |-- srv1.service.ts|spec.ts
           |-- srv2.service.ts|spec.ts
       |-- header
           |-- header.component.ts|html|scss|spec.ts
       |-- core.module.ts
       |-- ensureModuleLoadedOnceGuard.ts
       |-- logger.service.ts
     |-- shared
          |-- components
              |-- loader
                  |-- loader.component.ts|html|scss|spec.ts
          |-- buttons
              |-- favorite-button
                  |-- favorite-button.component.ts|html|scss|spec.ts
              |-- collapse-button
                  |-- collapse-button.component.ts|html|scss|spec.ts
          |-- directives
              |-- auth.directive.ts|spec.ts
          |-- pipes
              |-- capitalize.pipe.ts
              |-- safe.pipe.ts
     |-- configs
         |-- app-settings.config.ts
         |-- dt-norwegian.config.ts
     |-- scss
          |-- [+] partials
          |-- _base.scss
          |-- styles.scss
     |-- assets

Я використовую ng cli останнім часом, і мені було дуже важко знайти хороший спосіб структурувати свій код.

Найефективніший, який я бачив досі, походить із сховища mrholek ( https://github.com/mrholek/CoreUI-Angular ).

Ця структура папок дозволяє зберегти ваш кореневий проект чистим та структурувати компоненти, це дозволяє уникнути зайвої (іноді марної) конвенції іменування офіційного Посібника зі стилів.

Крім того, ця структура корисна для групового імпорту, коли це потрібно, і уникати 30 рядків імпорту для одного файлу.

src
|
|___ app
|
|   |___ components/shared
|   |   |___ header
|   |
|   |___ containers/layout
|   |   |___ layout1
|   |
|   |___ directives
|   |   |___ sidebar
|   |
|   |___ services
|   |   |___ *user.service.ts* 
|   | 
|   |___ guards
|   |   |___ *auth.guard.ts* 
|   |
|   |___ views
|   |   |___ about  
|   |
|   |___ *app.component.ts*
|   |
|   |___ *app.module.ts*
|   |
|   |___ *app.routing.ts*
|
|___ assets
|
|___ environments
|
|___ img
|   
|___ scss
|
|___ *index.html*
|
|___ *main.ts*

Якщо проект малий і залишиться малим, я рекомендую структурувати за типом (Метод 2: ng-book2)

app
|- components
|  |- hero
|  |- hero-list
|  |- villain
|  |- ...
|- services
|  |- hero.service.ts
|  |- ...
|- utils
|- shared

Якщо проект буде зростати, вам слід структурувати папки за доменом (метод 3: mgechev / angular2-seed)

app
|- heroes
|  |- hero
|  |- hero-list
|  |- hero.service.ts
|- villains
|  |- villain
|  |- ...
|- utils
|- shared

Краще слідкуйте за офіційними документами.
https://angular.io/guide/styleguide#application-structure-and-ngmodules

Я пропоную наступну структуру, яка може порушити деякі існуючі конвенції.

Я прагнув зменшити надмірність імені на шляху і намагався загалом назвати короткий імен.

Так що немає / app / компоненти / home / home.component.ts | html | css.

Натомість це виглядає приблизно так:

|-- app
    |-- users
        |-- list.ts|html|css
        |-- form.ts|html|css
    |-- cars
        |-- list.ts|html|css
        |-- form.ts|html|css
        |-- configurator.ts|html|css
    |-- app.component.ts|html|css
    |-- app.module.ts
    |-- user.service.ts
    |-- car.service.ts
|-- index.html
|-- main.ts
|-- style.css