Данный материал посвящен изучению 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, то вам стоит обратить внимание на наш материал для начинающих разработчиков.
Перевод статьи «Angular 5 Material Tutorial From Scratch»