構建 Angular 應用及更多資源
這篇最後的 Angular 文章介紹瞭如何構建一個可用於生產環境的應用,並提供了更多資源供您繼續學習之旅。
| 預備知識 | 熟悉核心 HTML、CSS 和 JavaScript 語言,瞭解 終端/命令列。 |
|---|---|
| 目標 | 學習如何構建您的 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
您可以使用任何後端,例如 Firebase、Google Cloud 或 App 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 的學習過程中玩得開心!