Angular Google Charts - 環境搭建

本教程將指導您如何準備開發環境，以便開始使用 Google Charts 和 Angular 框架進行工作。本章將討論 Angular 6 所需的環境設定。要安裝 Angular 6，我們需要以下內容：

Nodejs 版本必須大於 8.11，npm 版本必須大於 5.6。

要檢查系統中是否安裝了 nodejs，請在終端中輸入 **node -v**。這將幫助您檢視當前系統上安裝的 nodejs 版本。

C:\>node -v
v8.11.3

如果沒有任何輸出，請在您的系統上安裝 nodejs。要安裝 nodejs，請訪問 nodejs 的主頁 https://nodejs.org/en/download/ 並根據您的作業系統安裝軟體包。

根據您的作業系統安裝所需的軟體包。安裝 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 等。

安裝 Google Charts 包裝器

執行以下命令，在建立的專案中安裝 Google Charts 包裝器模組。

googleChartsApp> npm angular-google-charts

+ angular-google-charts@0.1.0
added 2 packages in 20.526s

在 app.module.ts 檔案中新增以下條目

import { GoogleChartsModule } from 'angular-google-charts';

imports: [
   ...
   GoogleChartsModule
],

列印頁面