Перевод статьи «Angular 5 Material Tutorial From Scratch»

Данный материал посвящен изучению Angular 5 Material. В примере будет использоваться именно пятая версия, потому что с новыми релизами появляются все новые и новые возможности в фреймворке. Так, например, переход с AngularJS на Angular 2 ознаменовался полной переработкой всего фреймворка.

Начало работы с Angular 5 Material

Для начала необходимо установить Angular CLI глобально во всей системе. Для этого нужно выполнить следующую команду:

$ npm install -g @angular/cli

Также вы можете ознакомиться с полной документацией по установке на сайте разработчиков.

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

В командной строке выполните следующую команду:

$ ng new ng5material

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

Установка Angular Material и Angular CDK

В командной строке введите команду для установки компонентов и их зависимостей:

$ npm install --save @angular/material @angular/cdk

Установка модуля Animations

Для работы с Angular Material нужно установить модуль Animations:

$ npm install --save @angular/animations

Теперь надо импортировать модули в файле app.module.ts:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
imports: [
BrowserModule, BrowserAnimationsModule
],

Затем нужно добавить новый модуль, который будет отвечать за Angular Material Components. Для этого создется файл в src/app с именем ngmaterial.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material';

@NgModule({
imports: [MatButtonModule],
exports: [MatButtonModule]
})
export class MaterialAppModule { }

Теперь модуль MatButtonModule добавлен в приложение. Далее надо
зарегистрировать MaterialAppModule в app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialAppModule } from './ngmaterial.module';

import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, BrowserAnimationsModule, MaterialAppModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Подключение тем оформления

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

Для примера будем использовать заранее подготовленную тему Angular Material Indigo-Pink. Подключим ее в приложение, добавив следующую строку в style.css:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Также подключим поддержку иконок в стиле material. Для этого добавим следующую строку в index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Поддержка жестов

Некоторые элементы (mat-slide-toggle, mat-slider, matTooltip) используют HammerJS для обработки жестов. Для полной поддержки возможностей этих элементов надо подключить HammerJS в приложение.

Это можно сделать несколькими способами: через npm, с использованием CDN (например Google CDN) или же напрямую из приложения.

Рассмотрим способ подключения через npm. Для этого введем следующую команду:

$ npm install --save hammerjs

После установки импортируем компонент в наше приложение, добавив следующие строки в src/main.ts:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import 'hammerjs';

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));

Теперь, когда все модули подключены, добавим новый элемент в app.component.html:

<button>Material Button</button>

Удалим лишний HTML-код и запустим приложение следующей командой:

$ ng serve

Теперь приложение запущено и доступно по ссылке http://localhost:4200.

Если всё сделано правильно, то на странице отобразится кнопка, при нажатии на которую будет воспроизводиться анимация.

Добавление новых элементов интерфейса

На примере ToolBar разберемся, как добавлять новые элементы интерфейса в приложение. Для этого добавим следующие строки в app.component.html:

<mat-toolbar>  
  <mat-toolbar-row>
    <span>First Row</span>
  </mat-toolbar-row>

  <mat-toolbar-row>
    <span>Second Row</span>
  </mat-toolbar-row>
</mat-toolbar>

Также пропишем следующие строки и в ngmaterial.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material';
import { MatToolbarModule } from '@angular/material/toolbar';

@NgModule({
imports: [MatButtonModule, MatToolbarModule],
exports: [MatButtonModule, MatToolbarModule]
})
export class MaterialAppModule { }

Таким образом мы добавили ToolBar в приложение.

Заключение

Мы рассмотрели построение простейших интерфейсов на Angular 5 Material. Если вы только начали знакомство с frontend, то вам стоит обратить внимание на наш материал для начинающих разработчиков.