想讓 Angular 網站盡可能快速且易於存取嗎？你來對地方了！
Minko Gechev
什麼是 Angular？
Angular 是建構使用者介面的架構。提供建構模塊，協助您快速設定可維護、可擴充的應用程式。Angular 可協助開發人員建立適用於網頁、行動裝置或電腦的應用程式。
這個珍藏內容有哪些項目？
本系列文章著重於最佳化 Angular 應用程式的五大領域：
- 提升應用程式效能，提高使用者轉換率和參與度
- 使用 Angular Service Worker 預先快取素材資源，提升應用程式在不良網路環境中的可靠性
- 使用預先算繪和伺服器端算繪，讓搜尋引擎和社群媒體機器人發現您的應用程式
- 讓應用程式可安裝，提供類似 iOS/Android 應用程式的使用者體驗
系列文章中的每篇貼文都會說明可直接套用至應用程式的技術。
這個集合不包含哪些內容？
本系列課程假設您已熟悉 Angular 和 TypeScript。如果您對這些技術還不熟悉，請參閱 TypeScript 說明文件，以及 angular.io 上的 Angular 入門指南。
開始製作專案
Angular 指令列介面 (CLI) 可讓您快速設定簡單的用戶端 Angular 應用程式。這篇文章會簡短介紹 CLI，而本系列的其他文章則會說明如何新增更進階的功能，例如伺服器端轉譯和部署支援。
設定 CLI
首先，請在全域安裝 CLI，並執行下列指令，確認您使用的是最新版本：
npm i -g @angular/cli
ng version
確認最後一個指令輸出的是 8.0.3 以上版本。
或者，如果您不想全域安裝 CLI，也可以在本機安裝，並使用 npx 指令執行：
npm i @angular/cli
npx ng version
建立專案
如要建立新的專案執行作業，請按照下列步驟操作：
ng new my-app
這個指令會為應用程式建立初始檔案和資料夾結構，並安裝所需的節點模組。
設定程序順利完成後，請執行下列指令來啟動應用程式：
cd my-app
ng serve
現在應該可以透過 http://localhost:4200 存取應用程式。
後續步驟
在本系列課程的其餘部分，您將瞭解如何提升 Angular 應用程式的效能和 SEO。涵蓋內容如下：
- Angular 的路徑層級程式碼分割
- 使用 Angular CLI 設定效能預算
- Angular 中的路徑預先擷取策略
- Angular 的變更偵測最佳化
- 使用 Angular CDK 虛擬化大型清單
- 使用 Angular Service Worker 預先快取
- 使用 Angular CLI 預先轉譯路徑
- 使用 Angular Universal 進行伺服器端算繪
- 使用 Angular CLI 新增網頁應用程式資訊清單