構建 Angular 應用程式以及更多資源

這篇文章是 Angular 的最後一篇,它涵蓋了如何構建一個可以投入生產使用的應用程式,並提供了一些額外的資源供你繼續學習之旅。

先決條件 熟悉核心 HTMLCSSJavaScript 語言,瞭解 終端/命令列
目標 學習如何構建 Angular 應用程式。

構建完成的應用程式

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

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

bash
ng build -c production

CLI 會編譯應用程式並將輸出放到一個新的 dist 目錄中。--configuration production/-c production 標誌與 ng build 一起使用,可以去除生產環境中不需要的東西。

部署您的應用程式

要部署應用程式,你可以將 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 伺服器還允許你從本地網路上的任何其他裝置訪問應用程式的 IP 地址,該地址在控制檯中 127.0.0.1 地址下列出。

下一步

到目前為止,你已經構建了一個基本的應用程式,但你的 Angular 之旅才剛剛開始。你可以透過探索 Angular 文件來了解更多資訊,例如

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

總結

現在就到這裡了。我們希望你玩得開心!