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

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

Перед разработкой приложения необходимо установить ChangeDetection. Это позволит существенно оптимизировать приложение.

В Angular своя система определения изменений. Из-за того, что по умолчанию стоит не самая эффективная модель, необходимо в Angular установить ChangeDetection: OnPush — то есть компоненты будут обновляться при изменении @Input() а также изменения могут быть вызваны явно, с помощью сервиса ChangeDetectionRef.

Добавим в angular.json свойство:

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

Также на уровне базового компонента (AppComponent), добавим changeDetection:

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

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

Angular не поощряет написание кода в AppComponent, который является неким подобием front controller’а. Поэтому создадим модуль и соответствующие компоненты, которые будут общими для всего приложения.

Создадим новый модуль ui-layout:

ng g m ui/theme/layout

Создадим папку components для хранения компонентов:

mkdir src/app/ui/theme/layout/components

Сгенерируем три основных компонента и лейаут, которые есть в каждом веб-приложении: шапка, подвал и основной контент.

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

ng g c layout --module=ui/theme/layout/layout.module.ts

Создадим шапку, запустив команду:

ng g c header --module=ui/theme/layout/layout.module.ts

Аналогично создадим подвал:

ng g c footer --module=ui/theme/layout/layout.module.ts

Создадим шапку, запустив команду:

ng g c main --module=ui/theme/layout/layout.module.ts

Перетащим все компоненты в папку src/app/ui/theme/layout/components.

Выведем шапку и подвал в лейауте, а также добавим router-outlet для отображения основного контента:

<app-header></app-header>
<app-main><router-outlet></router-outlet></app-main>
<app-footer></app-footer>

Добавим прижатый снизу футер, добавив следующие стили в layout.component.scss:

@import 'src/stylesheets/utils';
:host {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
}

А также в AppMainComponent добавим расширение:

@import 'src/stylesheets/utils';
:host {
  flex-grow: 1;
}

Подключим layout в приложении, обернув все роуты в комопнент, в app-routng.module.ts:

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

Также немного изменим AppComponent, удалив все демо данные и файл стилей и шаблон, оставив в качестве шаблона только router-outlet:

import { ChangeDetectionStrategy, Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>',
  styleUrls: [],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {}

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

Добавление алиасов для модулей

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

Для уменьшения связанности когда можно сделать следующее:

• определить доступные компоненты и модули
• описать их в специальном файле и сделать на него алиас.

Например, сделаем так, чтобы было нельзя использовать app-header, вне модуля layoutModule.

Конечно, можно создать папки apps и libs, в которых соответственно будут размещены модули для приложения и библиотек. Но ручная настройка очень объемная, и если вам действительно нужно несколько приложений и библиотек, то вам стоит смотреть в сторону Nx.

Создадим файл index.ts в папке src/app/ui/theme/layout:

export * from './components/layout/layout.component';
export * from './layout.module';

Добавим в tsconfig.json новый алиас:

{
  "compileOnSave": false,
  "compilerOptions": {
    ...
    "paths": {
     "@app/ui/theme/layout": ["src/app/ui/theme/layout/index.ts"]
    }
  },
  "angularCompilerOptions": { ... }
}

Используем его в AppRoutingModule:

import { LayoutComponent } from '@app/ui/theme/layout';

Теперь, при любых импортах из @app/ui/theme/layout, будут доступны только те компоненты, которые определены в src/app/ui/theme/layout/index.ts.

Ссылки

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

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

Предыдущая статья — Настройка Unit тестирования с помощью Jest

Все исходники на 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