構建 Angular 應用及更多資源

這篇最後的 Angular 文章介紹瞭如何構建一個可用於生產環境的應用,並提供了更多資源供您繼續學習之旅。

預備知識 熟悉核心 HTMLCSSJavaScript 語言,瞭解 終端/命令列
目標 學習如何構建您的 Angular 應用。

構建您完成的應用

現在您已經完成了應用的開發,可以執行 Angular CLI 的 build 命令。在 todo 目錄中執行 build 命令時,您的應用將編譯到一個名為 dist/ 的輸出目錄中。

todo 目錄中,在命令列中執行以下命令

bash
ng build -c production

CLI 會編譯應用並將輸出放在新的 dist 目錄中。使用 ng build 配合 --configuration production/-c production 標誌會移除生產環境中不需要的東西。

部署您的應用

要部署您的應用,您可以將 dist/my-project-name 資料夾的內容複製到您的 Web 伺服器。因為這些檔案是靜態的,所以您可以將它們託管在任何能夠提供檔案的 Web 伺服器上,例如

  • Node.js
  • Java
  • .NET

您可以使用任何後端,例如 FirebaseGoogle CloudApp Engine

本地託管

為了好玩,您可以使用 http-server 包在本地機器上託管構建的應用,在執行構建命令後執行以下命令:

bash
npx http-server ./dist/todo/browser/ -o

此命令會在 8080 埠上提供 dist/todo/browser 目錄,因此您可以在瀏覽器中開啟 http://127.0.0.1:8080 來檢視應用執行情況。HTTP 伺服器還允許您從本地網路上的任何其他裝置訪問該應用,該地址在控制檯中列於 127.0.0.1 地址下方。

接下來是什麼

至此,您已經構建了一個基本應用,但您的 Angular 之旅才剛剛開始。您可以透過探索 Angular 文件來了解更多資訊,例如:

  • 教程:一個深入的教程,重點介紹 Angular 的特性,例如使用服務、導航和從伺服器獲取資料。
  • Angular 元件指南:一系列文章,涵蓋生命週期、元件互動和檢視封裝等主題。
  • 表單指南:指導您在 Angular 中構建響應式表單、驗證輸入和構建動態表單的文章。

總結

以上就是本次的內容。希望您在 Angular 的學習過程中玩得開心!