Angular Material7-環境のセットアップ

このチュートリアルでは、AngularFrameworkとAngularMaterialを使用して作業を開始するための開発環境を準備する方法について説明します。この章では、Angular 6に必要な環境設定について説明します。Angular6をインストールするには、次のものが必要です。

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のインストールは、AngularCLIの助けを借りて非常に簡単です。ホームページにアクセスhttps://cli.angular.io/ コマンドの参照を取得するための角度の。

タイプ npm install -g @angular/cli、システムにangularcliをインストールします。

Angular CLIがインストールされると、ターミナルに上記のインストールが行われます。WebStorm、Atom、Visual StudioCodeなどの任意のIDEを使用できます。

AngularMaterialをインストールする

次のコマンドを実行して、作成されたプロジェクトにAngularMaterialモジュールとその関連コンポーネントをインストールします。

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">