Учебники

Угловой материал 7 — Настройка среды

Август 29, 2018

Из этого туториала вы узнаете, как подготовить среду разработки к работе с Angular Framework и Angular Material. В этой главе мы обсудим настройку среды, необходимую для Angular 6. Для установки Angular 6 нам потребуется следующее:

  • Nodejs
  • НПМ
  • Угловой CLI
  • IDE для написания вашего кода

Nodejs должно быть больше 8,11, а npm должно быть больше 5,6.

Nodejs

Чтобы проверить, установлен ли nodejs в вашей системе, введите в терминале node -v . Это поможет вам увидеть версию nodejs, установленную в вашей системе. 

C:\>node -v
v8.11.3

Если он ничего не печатает, установите nodejs в своей системе. Чтобы установить nodejs, перейдите на домашнюю страницу https://nodejs.org/en/download/ узла nodejs и установите пакет на основе вашей ОС.

Домашняя страница nodejs будет выглядеть следующим образом:

Домашняя страница NodeJS

В зависимости от вашей ОС, установите необходимый пакет. Как только nodejs установлен, npm также будет установлен вместе с ним. Чтобы проверить, установлен npm или нет, введите в терминале npm -v. Должна отображаться версия npm. 

C:\>npm -v
5.6.0

Установка Angular 6 очень проста с помощью углового CLI. Посетите домашнюю страницу https://cli.angular.io/ angular, чтобы получить ссылку на команду.

Угловой CLI

Введите npm install -g @ angular / cli , чтобы установить angular cli в вашей системе.

Установите угловой CLI

После установки Angular CLI вы получите указанную выше установку в своем терминале. Вы можете использовать любую IDE по вашему выбору, например, WebStorm, Atom, код Visual Studio и т. Д.

Установить угловой материал

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

materialApp>npm install --save @angular/material @angular/cdk @angular/animations hammerjs

+ @angular/[email protected]
+ @angular/[email protected]
+ @angular/[email protected]
+ [email protected]
added 4 packages and updated 1 package in 39.699s

Добавьте следующую запись в файл app.module.ts 

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

imports: [
    ...
   FormsModule,
   ReactiveFormsModule,
   BrowserAnimationsModule
],

Добавьте следующую запись в файл styles.css, чтобы получить тему. 

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

Добавьте следующую запись в файл index.htm, чтобы получить поддержку значков материала.

43
Share: