開始使用:最佳化 Angular 應用程式

想讓 Angular 網站盡可能快速且易於存取嗎?你來對地方了!

什麼是 Angular?

Angular 是用於建構使用者介面的架構。提供可供建構的元素,協助您快速設定可維護且可擴充的應用程式。透過 Angular,開發人員可建立可用於網頁、行動裝置或電腦上的應用程式。

這個系列叢書包含哪些內容?

本系列文章將著重於五個主要領域,協助您改善 Angular 應用程式:

  • 改善應用程式的效能,提高使用者轉換和參與度
  • 使用 Angular 服務 worker 預先快取素材資源,改善應用程式在網路品質不佳時的可靠性
  • 使用預先轉譯和伺服器端轉譯,讓應用程式可供搜尋引擎和社群媒體漫遊器偵測
  • 讓應用程式可安裝,提供與 iOS/Android 應用程式相似的使用者體驗

系列文章中的每篇文章都會說明您可以直接應用到自己的應用程式的技術。

這個系列叢書「不」包含哪些內容?

本系列文章假設您已熟悉 Angular 和 TypeScript。如果您對這些概念還不熟悉,請參閱 angular.io 上的 TypeScript 說明文件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 新增網頁應用程式資訊清單