Angular Material 7 - 環境搭建

本教程將指導您如何準備開發環境，以便開始使用 Angular 框架和 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，請訪問 nodejs 的主頁 https://nodejs.com.tw/en/download/ 並根據您的作業系統安裝軟體包。

nodejs 的主頁如下所示：

根據您的作業系統安裝所需的軟體包。安裝 nodejs 後，npm 也會隨之安裝。要檢查 npm 是否已安裝，請在終端中輸入 npm -v。它應該顯示 npm 的版本。

C:\>npm -v
5.6.0

藉助 angular CLI，Angular 6 的安裝非常簡單。訪問 angular 的主頁 https://cli.angular.io/ 以獲取命令的參考。

輸入 **npm install -g @angular/cli**，以在您的系統上安裝 angular cli。

安裝 Angular CLI 後，您將在終端中看到上述安裝資訊。您可以使用任何您選擇的 IDE，例如 WebStorm、Atom、Visual Studio Code 等。

安裝 Angular Material

執行以下命令，在已建立的專案中安裝 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";

在 index.htm 檔案中新增以下條目以獲得 Material 圖示支援。

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