Предисловие

Столкнулся с необходимостью использования Angular 4 Material. Качал с .io сайтов HelloWorld-овские проекты, следовал гайдам. Но уроков по Angular 4 Material мало и складывается ощущение, что они написаны для уже знающих людей. Поэтому, решил написать несколько статей, в которых расскажу, как сделать из обычного проекта Angular проект Angular Material, а также о неожиданных проблемах использования некоторых компонентов и о их решениях. Пару раз пришлось даже написать собственные компоненты на основе существующих, что тоже будет освещено. Но обо все по порядку.

Этап 1. Подготовка ОС

В уроках используется Ubuntu 16.04.

Установка NodeJS

Сначала необходимо установить NodeJS. Используем пакетный менеджер Ubuntu:

sudo apt-get install nodejs

Для тех, кому не подходит пакетный менеджер Ubuntu, используйте Node Version Manager (если NodeJS успешно стал с помощью пакетного менеджера Ubuntu, пропустите этот шаг).

Установка Node Version Manager

Выполните:

sudo apt-get install build-essential checkinstall
sudo apt-get install libssl-dev
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash

У кого cURL не стоит, поставьте следующей командой:

sudo apt-get update
sudo apt-get install curl

Перезапустите свой терминал и выполните установку NVM:

nvm install stable

Установка NodeJS с помощью NVM завершена.

Установка npm

Теперь необходимо установить npm — менеджер пакетов для NodeJS, который по идее стандартный и должен ставиться автоматически с NodeJS, но у меня такого не произошло.

Установка npm:

sudo apt-get install npm

И, наконец, последняя и важная вещь для нас, это инструмент для инициализации, разработки и поддержки приложений Angular, то есть, Angular CLI:

sudo npm install -g @angular/cli

Этап 2. Базовое приложение

Прежде, чем пойти дальше, давайте убедимся, что мы говорим на одном языке:

Компонент — это элемент или совокупность элементов веб-страницы (отображение).
Модуль — всё приложение на Angular состоит из модулей. Обязан быть как минимум один корневой модуль.

Мы сделаем Material Angular проект на основе обычного генерирующегося Angular проекта. Для создания нового проекта служит команда:

ng new mySoul

mySoul — это название моего нового проекта. В этих уроках я буду делать проект, предназначенный для коллекционирования фильмов, книг, отдельных цитат и прочего. Такие ресурсы уже есть, но у каждого есть свои минусы. А впрочем, почему не создать удобный для себя ресурс, идеальный ресурс?

А вот и первая ошибка при создании проекта:

cannot find module 'abbrev'

Чтобы ее устранить я создал ссылку на node для совместимости:

sudo ln -s /usr/bin/nodejs /usr/bin/node

Теперь проект успешно создан. Перейдем в папку с проектом

cd mySoul

И запустим его

ng serve --open

Автоматически откроется страница в браузере, где Вы увидите



Если Вы закрыли страницу, а сервер еще запущен, то в адресной строке напишите:
localhost:4200. 4200 — порт по умолчанию. Как его изменить, расскажу в следующей части.

Давайте удалим лишнее. Откройте файл mySoul/src/app/app.component.html и можете удалить всё из файла. Сохраните файл, перейдите на Вашу страницу и увидите, что на ней ничего нет. Одно из удобств: при редактировании проекта Вы сразу же можете видеть изменения. Т.к. мы делаем проект Angular Material, нам необходимо установить дополнительные компоненты.

Внимание! Установка дополнительных пакетов должна производиться в корневом каталоге проекта (в нашем случае в папке mySoul)

Установим Angular Material:

npm install --save @angular/material

Angular CDK:

npm install --save @angular/cdk

И пакет, необходимый для отображения анимации. Некоторые компоненты Material используют анимацию, поэтому установка этого пакета желательна:

npm install --save @angular/animations

И еще один важный шаг, который не описан на официальном сайте (или я очень слеп, т.к. несколько раз все перечитывал на официальном сайте, но этого не видел), но он необходим. Необходимо подключить стиль. Для этого открываем файл mySoul/src/styles.css и подключаем стиль:

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

Больше стилей можете найти на официальном сайте.

Теперь мы можем добавить Material компонент. Все Material компоненты можете найти на сайте Material Angular

Практически на любой веб-странице есть кнопки, поэтому добавим кнопку. Переходим на сайт Material Angular > вкладка Components > в меню слева ищем Button и кликаем на него. На открытой странице Вы можете увидеть, как этот элемент работает, и весь необходимый код для добавления элемента в Ваш проект.

Сначала, Вы должны нажать «<>» (вверху справа) и скопировать код

button md-button> Click me! </button
(добавьте открывающий и закрывающий теги)
с вкладки «HTML». Вставьте этот код в файл mySoul/src/app/app.component.html. После того, как Вы сохранили файл, на Вашей странице Вы увидите кнопку.



Кнопка самая обычная. А где же Material Design? Чтобы его увидеть, необходимо сделать следующее: импортировать модуль для этого компонента в свой проект. Перейдите на вкладку «API» (вверху).

Вы увидите:

import {MdButtonModule} from '@angular/material';

Откройте файл mySoul/src/app/app.modul.ts и подключите необходимый модуль. До редактирования файл app.modul.ts выглядел так:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

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

После подключения модуля он должен выглядеть так:

 import { BrowserModule } from '@angular/platform-browser';
        import { NgModule } from '@angular/core';
        import {MdButtonModule} from '@angular/material';

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

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

Сохраните файл. Подождите, пока загрузится необходимый модуль и на своей странице Вы увидите:



Совет: для правильного отображения некоторых компонентов прямо сейчас подключите анимацию:

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

Я против того, когда в проект подключается лишнее, но не раз бывало, что при добавлении компонента, требующего анимации, он отображался, я тратил много времени на поиск решения проблемы. А решение просто: надо импортировать анимацию.

Теперь у Вас есть проект Angular с единственным Material компонентом. В следующей части я расскажу подробно о структуре проекта, как создать и правильно подключить несколько компонентов и напишем сервис.