Banx. Создание базового лейаута в Angular

Published in

F.A.F.N.U.R

5 min readMar 31, 2021

Banx. Создание базового лейаута в Angular

В данной статье поговорим о создании базового лейаута в Angular приложении. Рассмотрим некоторые нюансы связанные с версткой, в частности создания контейнеров и базовый сеток.

В предыдущей статье были рассмотрены основные нюансы относительно использования CSS в Angular — Banx. Организация стилей в Angular. Сейчас же займемся созданием лейаута, который формально будет основной темой приложения.

И так как статья является продолжением цикла статей, посвященных разработке angular приложения (banx), будем использовать монорепозиторий Nx.

Сразу скажу, что позаимствуем концепт дизайна у одного из лучших банков в России — Tinkoff.ru.

Создание лейаута

Добавим ряд Angular зависимостей, если они ранее не были добавлены:

angular/localize — поддержка локализации в пайпах, директивах (календари и прочее)
angular/material — реализация material design в Angular.

Запустим команду:

ng add @angular/localize

Теперь добавим material:

ng add @angular/material

Создание material темы

Для работы компонентов Angular material необходима тема, поэтому создадим material-theme.scss, в котором определим тему для компонентов material’а.

Вы можете посмотреть примеры primary и second цветов, на сайте material, используя Cool tool.

В качестве цветов выберем наиболее подходящие по дизайну и создадим material тему:

Подключим material-theme.scss в src/styles.scss.

/* You can add global styles to this file, and also import other style files */
@import 'libs/russian/ui/styles/stylesheets/utils';

@import 'libs/russian/ui/styles/stylesheets/normalize';
@import 'libs/russian/ui/styles/stylesheets/fonts';
@import 'libs/russian/ui/styles/stylesheets/material-theme';
@import 'libs/russian/ui/styles/stylesheets/global';

Добавление локализации

Теперь добавим для каждого приложения, соответствующую локализацию. Для это создадим модуль — app-locale.module.ts:

Как видно из реализации, были добавлены значения для:

LOCALE_ID — текущая локаль приложения, по умолчанию en;
DEFAULT_CURRENCY_CODE — валюта по умолчанию;
MAT_DATE_LOCALE — локаль для даты в material.

Подключим AppLocaleModule в AppModule.

И так как при создании приложения — Banx. Создание Nx workspace для Angular, Nx не догадался добавить angular/router, добавим модуль навигации для приложения.

Создание библиотеки лейаута

Создадим библиотеку, в которой будут находиться компоненты темы:

ng g lib russian/ui/layout

Как показывает практика, в приложении всегда только один базовый layout. И поэтому нет потребности как-то персонализировать лейауты на уровне монорепозитория, например, создавая структуру — russian/ui/layouts/base

После запуска команды, cli создаст библиотеку с модулем RussianUiLayoutModule. Особого смысла использовать префикс «Russian» в названии модуля нет, так как все russian библиотеки будут располагаться в папке russian, и импорт их будет начинаться c @banx/russian/…

Поэтому переименуем модуль в UiLayoutModule.

В дальнейшем для всех модулей будем удалять начальный префикс, означающий специфику страны.

Создание компонента лейаута

Создадим компонент лейаута. Запустим команду:

ng g c ui-layout --project=russian-ui-layout

Компонент будет создан в папке lib библиотеки russian/ui/layout.

Так как layout будет внушительных размеров (больше 100 строчек кода) из-за шапки и подвала, то создадим внутри папки lib папку components, в которой будем располагать все компоненты.

Перенесем компонент в папку components, не забыв экспортировать в index.ts:

export * from './lib/components/ui-layout/ui-layout.component';
export * from './lib/ui-layout.module';

Теперь, подключим UiLayoutComponent, добавив его как основной макет в app-routing.module.ts:

const routes: Routes = [
  {
    path: '',
    component: UiLayoutComponent,
    children: [],
  },
];

А также в app.component.html, добавим вывод:

<router-outlet></router-outlet>

Если запустить проект, получим белый экран с надписью: ui-layout works!

Создание компонента контейнера

В Twitter Bootstrap есть класс контейнера, который выравнивает текст по центру по ширине. Создадим библиотеку и компонент, которые будут реализовывать аналогичную логику.

ng g lib russian/ui/container
ng g c ui-container --project=russian-ui-container

Добавим переменные для сетки в variables.scss:

Позаимствуем миксин у Twitter Bootstrap для создания адаптивности — breakpoints.scss:

Подключим все в utils.scss:

В самом компоненте ui-container.component.html выведем его содержимое:

<ng-content></ng-content>

Реализация по изменению ширины контейнера будет следующей:

Если выведем созданный контейнер, то увидим:

В зависимости от ширины экрана, контейнер получает определенную ширину.

Создание компонента шапки

Создадим компонент шапки. Для этого запустим команду:

ng g c ui-header --project=russian-ui-layout

В первой итерации создадим шапку ограничившись лишь названием компании и парой кнопок.

Создадим макет ui-header.component.html:

Добавим немного стилей ui-header.component.scss:

Выведем на странице лейаута:

<banx-ui-header></banx-ui-header>
<router-outlet></router-outlet>

И добавив необходимые зависимости от Angular Material в модуль UiLayoutModule:

А также добавив немного функциональности UiContainer:

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

Создание компонента подвала

Создадим футер. Для этого запустим команду:

ng g c ui-main --project=russian-ui-layout
ng g c ui-footer --project=russian-ui-layout

Компонент UiMain нужен для того, чтобы сделать прижатый снизу футер.

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

Установка ChangeDetection

Так как при генерации, не были установлены правила для создания компонент, добавим стратегию changeDetection: ChangeDetectionStrategy.OnPush

В файле angular.json пропишем:

"schematics": {
  ...
  "@nrwl/angular:component": {
    "style": "scss",
    "changeDetection": "OnPush"
  }
},

Создание главной страницы

И напоследок, добавим главную страницу. Сгенерируем библиотеку и компонент для главной, запустив команды:

ng g lib russian/content/home/page
ng g c home-page --project=russian-content-home-page

Также создадим модуль для маршрутизации:

И подключим его в ContentHomePageModule:

Для того, чтобы Angular максимально эффективно загружал модули, и наш app-routing.module.ts не раздувался до неведомых масштабов, создадим ленивый модуль и подключим его.

Добавим UiContainerModule в ContentHomePageModule и выведем содержимое компонента в контейнере:

<banx-ui-container>
  <p>home-page works!</p>
</banx-ui-container>

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

Как видим, все отлично работает. Есть несколько компонентов, которые выравниваются по ширине. Также футер прижат к низу страницы.

Резюме

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

Создали тему для Angular Material
Добавили локализацию пайпов и дат с помощью задания констант локализации
Создали компонент контейнера, который выравнивает содержимое по центру.
Создали несколько компонентов, которые стали основой лейаута.
Добавили футер, который прижат к низу страницы
И создали главную страницу, которую вывели в лейауте.

В следующих статьях продолжим разрабатывать приложение, где добавим раздел авторизации, поговорим о гуардах и много чего еще.

Исходники

Все исходники находятся на github, в репозитории:

Fafnur/banx

This project was generated using Nx. 🔎 Nx is a set of Extensible Dev Tools for Monorepos. Nx Documentation 10-minute…

github.com

Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — layout.

git checkout layout

Ссылки

Подписывайтесь на блог, чтобы не пропустить новые статьи про Angular, веб-разработку и новости из мира фронтенда.

Medium: https://medium.com/fafnur
Добавляйтесь в группу ВК: https://vk.com/fafnur
Добавляйтесь в группу в Fb: https://www.facebook.com/groups/fafnur/
Телеграм канал: https://t.me/f_a_f_n_u_r
Twitter: https://twitter.com/Fafnur1
Instagram: https://www.instagram.com/fafnur
LinkedIn: https://www.linkedin.com/in/fafnur

Предыдущие статьи: