Угловая структура проекта, лучшие практики - PullRequest
0 голосов
/ 22 октября 2018

Может кто-нибудь дать мне несколько советов о структуре моего проекта, пожалуйста?

-app
  -layout
     -home-layout
         -header
         -menu
         -content
            -detail-page
               -left-side
                  -left-side.component.html
                  -left-side.component.ts
               -right-side
             -detail-page.component.html
             -detail-page.component.ts
         -footer
     -pipes
     -widget-features
  -material-module
  -services
  -models

С фактической структурой организация карты сайта очень ясна, я легко могу найти содержимое различных страниц.Но чтобы получить модульную архитектуру, я хочу реорганизовать структуру.Не могли бы вы дать мне несколько советов, пожалуйста?

Спасибо.

Ответы [ 3 ]

0 голосов
/ 22 октября 2018

Помните, что для этого или общего рецепта, который подходит для всех проектов, не существует волшебной пули.

При этом вы можете использовать официальное Angular Style Guide , которое пытается следовать Структура папок по признакам .

Относительно Структура приложения Вы должны иметь в виду, что LIFT :

Создайте структуру приложения таким образом, чтобы вы могли L быстро кодировать код, I быстро определить код, сохранить F самая последняя структура, которую вы можете, и T ry быть DRY

  • L ocate

Doсделать поиск кода интуитивно понятным, простым и быстрым.

  • I dentify

Назовите файл так, чтобы вы сразу узналичто он содержит и представляет.

Не забудьте описать имена файлов и сохраняйте содержимое файла только для одного компонента.

Избегайте файлов с несколькимиКомпоненты, несколько служб или их смесь.

  • F lat

Сохраняйте структуру плоских папок до тех пор, покавозможно.

Рассмотрите возможность создания подпапок, когда папка достигает семи или более файлов.

Рассмотрите возможность настройки среды IDE, чтобы скрыть отвлекающие и не относящиеся к делу файлы, такие как сгенерированные файлы .js и .js.map.

  • T только СУХОЙ

СУХОЙ (не повторяйте себя).

Старайтесь не быть настолько СУХИМЫМ, чтобы жертвовать удобочитаемостью.


В соответствии с показанной вами структурой, одна вещь, возможно, заслуживает рассмотрения - это уровень вложенности папок по принципу Do keep a flat folder structure as long as possible.

Это означает, что вы должны сохранять структуру как можно более плоской, это позволяет быстрее находить файлы.Но это не правило must , а правило должно .Таким образом, если создание более плоской структуры не влияет на логическую организацию, которая у вас есть в настоящее время, вам, вероятно, следует сделать ее более плоской (в противном случае не следует делать это).

Помните это направлено на улучшение процесса разработки : если что-то не улучшает организацию / производительность вашей команды и т. д., не используйте это, если это помогает, используйте это тогда.

0 голосов
/ 22 октября 2018

Архитектура, на которую опирается Angular Style Guide , известна как архитектура «функциональных модулей», в которой функции заключены в модулях Angular (классы TypeScript с декоратором @ngModule).

Чтобы почувствовать это, попробуйте запустить некоторые команды генерации, используя Angular CLI.

Например, чтобы создать функциональный модуль, содержащий некоторые инкапсулированные компоненты / сервисы, выполните эти команды в последовательности:

ng g m my-awesome-feature
ng g c my-awesome-feature/cool-component
ng g s my-awesome-feature/fancy-service

Интерфейс CLI создаст для вас удобную архитектуру модуля и даже автоматическиобъявите ваши компоненты в файлах модуля!

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CoolComponentComponent } from './cool-component/cool-component.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [CoolComponentComponent]
})
export class MyAwesomeFeatureModule { }
0 голосов
/ 22 октября 2018

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

  • приложение
    • _models
    • _services
    • _shared
      • общие компоненты
      • общие модули
    • home
    • на любой странице
      • на каких специфических компонентах

По сути, в «_shared» вы помещаете все компоненты и модули, совместно используемые на разных страницах, такие как нижний колонтитул или модули «Материал».Вы должны объявить их или импортировать их в модуль _shared, а также экспортировать их.

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

Кстати, я называю их реальным подчеркиванием, чтобы они всплыли в проводнике.Полезно знать, что они всегда будут там.

...