Создание проекта на Angular 2 с Angular Material

Разработка /
Разработка: Создание проекта на Angular 2 с Angular Material

В этой статье мы рассмотрим процесс создания проекта Angular2 с использованием компонентов Angular Material2.

Мы будем использовать следующие версии пакетов: Angular 2.4.6, Angular-CLI 1.0.0-beta.30 и Angular Material2 2.0.0-beta.1.

Начальная подготовка

Вначале установим библиотеку material:

npm install -S @angular/material

После установки импортируем модуль Material Module из неё в файл app.module.ts

import { MaterialModule } from ‘@angular/material';

и добавим в массив импорта

MaterialModule.forRoot()

Файл app.module.ts должен выглядеть так:

Разработка: Создание проекта на Angular 2 с Angular Material

Установка HammerJS

Если вы планируете использовать в приложении слайдеры или переключатели, вам не обойтись без hammerjs. В противном случае, пропустите этот абзац.

npm install -S hammerjs
npm install --save-dev @types/hammerjs

Не забудьте импортировать hammerjs:

import 'hammerjs';

Получится примерно так:

Разработка: Создание проекта на Angular 2 с Angular Material
Добавим hammerjs в файл tsconfig.json, в раздел типов:

"types": [
      "hammerjs"
    ]

Разработка: Создание проекта на Angular 2 с Angular Material

Добавим Roboto Font и Material Icons

Очень важно для стиля Material использовать специальный шрифт Roboto и иконки Material Icons, добавим их в styles.css:

@import '~https://fonts.googleapis.com/icon?family=Material+Icons';
@import '~https://fonts.googleapis.com/icon?family=Roboto';
body {
 font-family: Roboto;
 }

Сохраним файл и перезапустим локальный сервер — шрифты применятся. Вот пример до/после:

Разработка: Создание проекта на Angular 2 с Angular Material
Разработка: Создание проекта на Angular 2 с Angular Material

Темы в Angular Material2

Опции тем по-умолчанию доступны в папке /node_modules/angular/material/core/theming/prebuilt. Сейчас доступны следующие темы:

deep purple / amber,
indigo / pink,
pink / bluegrey,
purple / green

Разработка: Создание проекта на Angular 2 с Angular Material
Первый цвет в названии темы это главный цвет, второй — цвет выделения. Добавим тему в styles.css:

@import '~@angular/material/core/theming/prebuilt/indigo-pink.css';

Создать свою тему вам поможет официальная документация.

А для тестирования своих тем или просмотра «вживую» официальных тем поможет сайт Material Palette.

Разработка: Создание проекта на Angular 2 с Angular Material

Проверка тем

После добавления темы в приложение необходимо убедиться в её работоспособности. Добавим несколько кнопок в app.component.html и увидим тему в действии.

<div>
    <a md-button color="primary">Flat button</a>
    <a md-raised-button color="accent">Raised button</a>
    <a md-fab color="primary"><md-icon>check</md-icon></a>
    <a md-mini-fab color="primary"><md-icon>check</md-icon></a>
  </div>

Разработка: Создание проекта на Angular 2 с Angular Material
В результате у нас получится что-то подобное:

Разработка: Создание проекта на Angular 2 с Angular Material
Если ваше приложение выглядит не так, попробуйте перезапустить сервер разработки — обычно это помогает :)

Исходный код этого примера можно взять здесь.

Во второй части (будет позже) мы рассмотрим добавление других компонентов в наше приложение, создание своих стилей и использование кнопок и индикаторов.

Источник: Setting up your first Angular (2) Project Using Angular Material (2)
0 комментариев
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.