Какой тип структуры папок следует использовать с 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

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

введите описание изображения здесь

Ответы

Ответ 2

Я считаю, что структурирование проекта по функциональности является практическим методом. Это делает проект масштабируемым и легко ремонтируемым. И это заставляет каждую часть проекта работать в полной автономии. Позвольте мне знать, что вы думаете об этой структуре ниже: ANGULAR TYPESCRIPT СТРУКТУРА ПРОЕКТА - ANGULAR 2

источник: http://www.angulartypescript.com/angular-typescript-project-structure/

Ответ 3

Итак, после того, как я сделал больше исследований, я перешел к слегка переработанной версии метода 3 (mgechev/ angular2 -seed).

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

Ответ 4

Я собираюсь использовать этот. Очень похоже на третье, показанное @Marin.

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

Ответ 5

Может быть, что-то вроде этой структуры:

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

Ответ 6

В последнее время я использовал 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*

Ответ 7

Если проект небольшой и останется небольшим, я бы рекомендовал структурировать по типу (метод 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

Ответ 8

Я предлагаю следующую структуру, которая может нарушать некоторые существующие соглашения.

Я стремился уменьшить избыточность имен в пути, и пытался вообще кратко именовать.

Так что нет /app/components/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