介紹

「Angular」 非 「AngularJS」。
2010年 「AngularJS」 出生，是 Google 推出的一款用來協助 SPA 應用程式運行的 JS 函式庫。
2016年 「Angular」 出生，是 Google「AngularJS」 團隊推出的全新版本。不過「Angular」不再被視為一個函式庫，而是一個 Web 應用框架。

前端三大主流框架：Vue, Angular, React，延伸閱讀：
Angular vs React vs Vue: Which Framework to Choose in 2021

Angular 特色

開發工具與環境建置

推薦的工具及建置方法，可依自己習慣來調整

Visual Studio Code

• Chinese (Traditional) Language Pack for Visual Studio Code
• Prettier - Code formatter
• Angular Extension Pack – Will 保哥

Node.js

1. 打開命令提示字元使用指令檢查本機是否有安裝，若無請至官網下載。

   node -v
   

2. 安裝套件 Angular CLI

   npm install -g @angular/cli
   

   Angular CLI是一個命令行介面工具，可用來初始化、開發、搭建和維護 Angular 。
   共有三種類型的命令：

   類型名稱	說明	範例

   Schematics | 添加、生成、創建和更新 Angular 項目的結構和代碼 | ng add, ng generate, ng new, ng update
   Architect | 構建、部署、測試和運行 Angular 項目的功能 | ng build, ng deploy, ng e2e, ng lint, ng run, ng serve, ng test...
   Native | 配置、查看和獲取 Angular CLI 的訊息 | ng config, ng doc, ng version, ng analytics, ng help

   Windows電腦使用者有可能在使用「npm…」時遇到禁用PowerShell 腳本執行的情況，請點擊：更改執行策略步驟說明來做設定。

   Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
   

建立Angular專案

1. 移動至路徑（依個人放置習慣）

   cd /d D:\Projects
   

   /d：從C: 轉指向 D: 的指令
2. 建立新專案

   ng new 專案名稱 --routing=true --style=scss
   

   --routing=true：使用Angular內建路由系統（SPA架構整個專案為一頁、透過此來進行分頁）
   --style=scss：使用SCSS撰寫樣式
3. 使用 VS Code 開啟專案

   code .
   

新增套件

1. 開啟終端機（Ctrl+Shift+`）

   npm install 套件名稱
   

   • @angular/cdk
   • @angular/material
   • @angular/flex-layout

2. 啟動伺服器
   Angular CLI 會監測檔案變動，並在這些檔案發生更改時重建應用。

   ng serve --open
   

   --open (-o)：自動開啟瀏覽器：http://localhost:4200/

   
   出現此畫面即為成功!