Angular Material 7-환경 설정

이 튜토리얼은 Angular Framework 및 Angular Material으로 작업을 시작하기 위해 개발 환경을 준비하는 방법을 안내합니다. 이 장에서는 Angular 6에 필요한 환경 설정에 대해 설명합니다. Angular 6을 설치하려면 다음이 필요합니다.

Nodejs
Npm
Angular 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의 OS에 따라 패키지를 설치하십시오.

nodejs의 홈페이지는 다음과 같습니다.

OS에 따라 필요한 패키지를 설치하십시오. nodejs가 설치되면 npm도 함께 설치됩니다. npm이 설치되어 있는지 확인하려면 터미널에 npm -v를 입력합니다. npm의 버전이 표시되어야합니다.

C:\>npm -v
5.6.0

Angular 6 설치는 angular CLI의 도움으로 매우 간단합니다. 홈페이지 방문https://cli.angular.io/ 명령의 참조를 얻기 위해 각도의.

유형 npm install -g @angular/cli, 시스템에 각도 CLI를 설치합니다.

Angular CLI가 설치되면 터미널에서 위의 설치를 받게됩니다. WebStorm, Atom, Visual Studio Code 등 원하는 IDE를 사용할 수 있습니다.

각도 재료 설치

다음 명령을 실행하여 생성 된 프로젝트에 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 파일에 다음 항목을 추가하십시오.

<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">