Тестовое задание на Angular. Создание модулей и компонентов

В данной статье поговорим о структуре приложения. Создадим ряд модулей и компонентов на примере layout’а.

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

Для этого, немного украсим базовый лейаут, сделав шапку и подвал.

Добавим в шапку стандартный toolbar из Angular Material:

Импортируем необходимые модули в LayoutModule:

@NgModule({
  imports: [
    ...
    MatToolbarModule,
    MatButtonModule,
    MatIconModule
  ],
  ...
})
export class LayoutModule {}

Запустим проект:

Однако отметим, что использование MatToolbarModule необходимо только в HeaderCompont. Чем больше и сложнее будет макет, тем больше и сложнее будет основной модуль. Для того, чтобы не перегружать LayoutModule, создадим новый модуль — HeaderModule, в который перенесем все требуемые импорты.

ng g m ui/theme/layout/components/header

Перенесем все необходимые импорты:

И подключим HeaderModule в LayoutModule:

Аналогично создадим футер:

ng g m ui/theme/layout/components/footer

Перенесем необходимые имопорты.

Так как в иконках material нет социальных сетей, создадим небольшую либу, которая позволит использовать svg иконки в MatIconModule.

Создадим модуль:

ng g m ui/icons

Добавим иконки социальных сетей в svg:

Создадим алиас на модуль и пропишем его в tsconfig.js:

"@app/ui/icons": ["src/app/ui/icons/index.ts"]

И для тестов добавим в конфиг jest.config.js:

'@app/ui/icons': ['<rootDir>/src/app/ui/icons/index.ts'],

Импортируем в FooterModule:

imports: [RouterModule, IconsModule, MatButtonModule],

Добавим немного стилей и социальных сетей в футер:

Отмечу, что в Angular 12 немного изменились миксины для цветов, и в данном случае мы получим стили:

@use '~@angular/material' as mat;

:host {
  ...
  background-color: mat.get-color-from-palette(mat.$gray-palette, 300);
  ...
}

Запустим приложение и посмотрим, что получилось:

Так как появились модули с экспортируемыми модулями, немного поправим конфиги и добавим в tsconfig.json

"emitDecoratorMetadata": true,

Ссылки

Вернуться к оглавлению — Введение.

Следующая статья — Создание базовых интерфейсов.

Предыдущая статья — Добавление библиотек для упрощения тестирования.

Все исходники на github/fafnur/barinb.

Fafnur/barinb

Группа в Medium: https://medium.com/fafnur
Группа в Vkontakte: https://vk.com/fafnur
Группа в Facebook: https://www.facebook.com/groups/fafnur/
Telegram канал: https://t.me/f_a_f_n_u_r
Twitter: https://twitter.com/Fafnur1
LinkedIn: https://www.linkedin.com/in/fafnur