Тестовое задание на 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.
Группа в 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