介紹

關於 Angular

• 由 Google 於 2010 年發行的開放源 JavaScript 框架
• Angular 2 後轉向使用 TypeScript
• Library 大小約為 500KB，相較 React 及 Vue 較大
• HTML 與 UI 行為分離
• 採用 MVC¹ 模式、SPA

安裝 Angular

npm install -g @angular/cli@15 (1)

1. 此處可指定安裝之版本

建立 Angular 專案 workspace

ng new [workspace 名稱]

於 workspace 建立 Angular 專案

切至 workspace 資料夾

ng g app [專案名稱]

• --help: 條列出參數說明
• --routing: 是否產生 routing 檔案，預設為 true
• --style: 指定樣式表的類型
• --skip-tests (-S): 不建立 spec.ts 測試檔
• --inline-style (-s): 不產生 component.css 檔案

執行 Angular 專案

ng serve [指定的專案]

• --open (-o): 於預設瀏覽器開啟 url
• --port: 指定 port，預設為 4200
• --ssl: 使用 https

Angular 啟動順序

graph LR
    A[index.html] --> B[main.ts];
    B --> C[app.module.ts];
    C --> D[app.component.ts];
    D --> E[app.component.html];

---

1. MVC 分別代表：Model, View 及 Controller。Model: 主要管理與資料邏輯相關事項。View: 主要管理第一線與使用者互動的介面。Controller: 掌握與瀏覽器之間的互動行為，也負責收發 Request 與 Response。優點：使程式結構更直覺、提高程式維護性、可擴充架構，提高網站的發展彈性、測試過程較簡單。 ↩