Angular Material 7-環境のセットアップ

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

ノード番号
Npm
角度CLI
コードを書くためのIDE

Nodejsは8.11より大きく、npmは5.6より大きくなければなりません。

ノード番号

nodejsがシステムにインストールされているかどうかを確認するには、ターミナルで node -v と入力します。これは、現在システムにインストールされているnodejsのバージョンを確認するのに役立ちます。

C:\>node -v
v8.11.3

何も印刷されない場合は、システムにnodejsをインストールします。 nodejsをインストールするには、nodejsのホームページhttps://nodejs.org/en/download/にアクセスし、OSに基づいてパッケージをインストールします。

nodejsのホームページは次のようになります-

NodeJSホームページ

OSに基づいて、必要なパッケージをインストールします。 nodejsがインストールされると、npmも一緒にインストールされます。 npmがインストールされているかどうかを確認するには、ターミナルでnpm -vと入力します。 npmのバージョンが表示されます。

C:\>npm -v
5.6.0

Angular 6のインストールは、angular CLIを使用して非常に簡単です。コマンドのリファレンスを取得するには、angularのホームページhttps://cli.angular.io/にアクセスしてください。

Angular CLI

*npm install -g @ angular/cli* と入力して、システムにangle cliをインストールします。

Angular CLIのインストール

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

角度材料をインストールする

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

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

+ @angular/animations@6.1.10
+ @angular/cdk@7.0.3
+ @angular/material@7.0.3
+ hammerjs@2.0.8
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";

マテリアルファイルのサポートを取得するには、インデックスファイルに次のエントリを追加します。

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

Angular-material7-environment-setup

Angular Material 7-環境のセットアップ

ノード番号

角度材料をインストールする