Angular 5 Material для начинающих
Разные JS-фреймворки появляются и исчезают ежегодно, а Angular живёт и радуется, предлагаем вам с ним ознакомиться. Ведь в разработке важна стабильность.
20К открытий20К показов
Данный материал посвящен изучению Angular 5 Material. В примере будет использоваться именно пятая версия, потому что с новыми релизами появляются все новые и новые возможности в фреймворке. Так, например, переход с AngularJS на Angular 2 ознаменовался полной переработкой всего фреймворка.
Начало работы с Angular 5 Material
Для начала необходимо установить Angular CLI глобально во всей системе. Для этого нужно выполнить следующую команду:
Также вы можете ознакомиться с полной документацией по установке на сайте разработчиков.
Создание проекта
В командной строке выполните следующую команду:
С её помощью мы создадим новый проект. Все нужные компоненты приложения будут сгенерированы автоматически.
Установка Angular Material и Angular CDK
В командной строке введите команду для установки компонентов и их зависимостей:
Установка модуля Animations
Для работы с Angular Material нужно установить модуль Animations:
Теперь надо импортировать модули в файле app.module.ts
:
Затем нужно добавить новый модуль, который будет отвечать за Angular Material Components. Для этого создется файл в src/app
с именем ngmaterial.module.ts
:
Теперь модуль MatButtonModule
добавлен в приложение. Далее надо
зарегистрировать MaterialAppModule
в app.module.ts
:
Подключение тем оформления
Для корректной работы тем оформления требуется подключение всех стилей темы глобально в приложении.
Для примера будем использовать заранее подготовленную тему Angular Material Indigo-Pink. Подключим ее в приложение, добавив следующую строку в style.css
:
Также подключим поддержку иконок в стиле material. Для этого добавим следующую строку в index.html
:
Поддержка жестов
Некоторые элементы (mat-slide-toggle
, mat-slider
, matTooltip
) используют HammerJS для обработки жестов. Для полной поддержки возможностей этих элементов надо подключить HammerJS в приложение.
Это можно сделать несколькими способами: через npm, с использованием CDN (например Google CDN) или же напрямую из приложения.
Рассмотрим способ подключения через npm
. Для этого введем следующую команду:
После установки импортируем компонент в наше приложение, добавив следующие строки в src/main.ts
:
Теперь, когда все модули подключены, добавим новый элемент в app.component.html
:
Удалим лишний HTML-код и запустим приложение следующей командой:
Теперь приложение запущено и доступно по ссылке http://localhost:4200.
Если всё сделано правильно, то на странице отобразится кнопка, при нажатии на которую будет воспроизводиться анимация.
Добавление новых элементов интерфейса
На примере ToolBar разберемся, как добавлять новые элементы интерфейса в приложение. Для этого добавим следующие строки в app.component.html
:
Также пропишем следующие строки и в ngmaterial.module.ts
:
Таким образом мы добавили ToolBar в приложение.
Заключение
Мы рассмотрели построение простейших интерфейсов на Angular 5 Material. Если вы только начали знакомство с frontend, то вам стоит обратить внимание на наш материал для начинающих разработчиков.
20К открытий20К показов