發現了一個很好的頁面效果，裡面使用了angular . 來學習一下 angular 。

參考官網，安裝angular-cli .

在安裝 angular-cli 前，先安裝一下node 與 npm, node中自帶npm .

在 命令視窗 使用命令

node -v

npm -v

可以檢視本地是否安裝了這兩個東東，以及他們的版本號。

第一步 下載 angular-cli:

 使用命令

npm install -g @angular/cli

下載的過程比較漫長，下載好後，輸入命令 ng v, 顯示下面的圖，說明安裝成功。

下面，第二步 建立工作空間和初始應用

Angular 工作空間是開發應用的上下文環境。每個工作空間包含一些供一個或多個專案使用的檔案。每個專案都是一組由應用、庫或端到端（e2e）測試構成的檔案。

建立工作空間和初始化應用專案：

  1. 執行 CLI 命令 ng new ， 並提供一個名字 my-angular-app

  2. ng new 會提示要把哪些特性包含在初始應用專案中。按回車接受預設值。

然後安裝angular npm 包以及其它依賴，可能花幾分鐘。

還將建立下列工作空間和初始化專案檔案：

    - 一個新的工作空間，根目錄名叫 my-angular-app

    - 一個初始的骨架應用專案，也叫 my-angular-app（位於src子目錄下）

    - 一個端到端測試專案（位於e2e子目錄下）

    - 相關的配置檔案

初始的應用專案是一個簡單的“歡迎”應用

第三步，啟動開發伺服器

Angular 包含一個開發伺服器，以便能在本地輕鬆地構建應用和啟動開發伺服器。

    1. 進入工作空間目錄

    2. 使用CLI命令 ng server 啟動開發伺服器，並帶上 --open 選項

ng serve 命令會自動開發伺服器，並監視檔案變化，當修改檔案是，它就會重新構建應用。

--open（或只用 -o）選項會自動開啟瀏覽器，並訪問 http://localhost:4200/

第四步，編輯一個Angular 元件

元件 是 Angular 應用中的基本構造塊。它們在螢幕上顯示資料、監聽使用者輸入，並根據這些輸入採取行動。

作為初始應用的一部分，CLI 也會建立第一個Angular 元件。它就是根元件，名叫app-root .

  1. 開啟 ./src/app/app.components.ts

  2. 把title 屬性改為“My First Angular App”

   瀏覽器將會用修改過的標題自動重新整理。但還可以更好看。

  3. 開啟 ./src/app/app.component.css 並給這個元件提供一些樣式

Done.