建立並運行 Angular 專案

什麼是 Angular？

Angular 是一個由 Google 維護的開源前端框架，用於構建動態的單頁應用（SPA）。它基於 TypeScript，提供了豐富的工具和功能，使得開發者可以高效地構建複雜的應用程序。Angular 的核心理念是組件和模組化，這使得代碼更易於組織和維護。

使用 Angular，可以幫助開發者更高效地構建現代化的、響應迅速的 Web 應用。

在這篇文章中，我們將使用 ServBay 提供的 Node.js 環境來建立並運行一個 Angular 專案。我們將使用 ServBay 的『主機』功能來設置 Web 伺服器，並通過反向代理和靜態文件服務來實現專案的訪問。

初始化專案
首先，確保您已經安裝了 ServBay 提供的 Node.js 環境。然後，使用以下命令全局安裝 Angular CLI：
bash
```
npm install -g @angular/cli
```
1
在 ServBay 建議的網站根目錄 /Applications/ServBay/www 中建立一個新的 Angular 專案：
bash
```
cd /Applications/ServBay/www
ng new servbay-angular-app
```
1
2
按照提示輸入專案名稱（建議命名為 servbay-angular-app），並根據需要選擇其他選項：
bash
```
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
```
1
2
安裝依賴
進入專案目錄並安裝依賴：
bash
```
cd servbay-angular-app
npm install
```
1
2

修改 src/app/app.component.html 文件
打開 src/app/app.component.html 文件，修改內容使網頁輸出 "Hello ServBay!"：
html
```
<div style="text-align:center">
  <h1>Hello ServBay!</h1>
</div>
```
1
2
3

運行開發伺服器
啟動開發伺服器並指定端口（例如：8585）：
bash
```
ng serve --port 8585
```
1
這將會在本地啟動一個開發伺服器，並暴露端口 8585。
配置 ServBay 主機反向代理
使用 ServBay 的『主機』功能，通過反向代理來訪問開發伺服器。在 ServBay 的『主機』設置中，添加一個新的反向代理：
- 名字：My first Angular dev site
- 域名：servbay-angular-test.dev
- 主機類型：反向代理
- IP：127.0.0.1
- 端口：8585
詳細設置步驟請參考添加Nodejs開發的網站。
訪問開發模式
打開瀏覽器，訪問 https://servbay-angular-test.dev，實時查看專案。由於 ServBay 支持自定義域名以及免費的 SSL 證書，您將享受到更高的安全性。

建立生產版本
當開發完成後，使用以下命令建立生產版本：
bash
```
ng build --prod
```
1
構建完成後，生成的靜態文件將位於 dist/servbay-angular-app 目錄中。
設置靜態文件服務
使用 ServBay 的『主機』功能，通過靜態文件服務來訪問生產版本。在 ServBay 的『主機』設置中，添加一個新的靜態網站：
- 名字：My first Angular production site
- 域名：servbay-angular-test.prod
- 主機類型：靜態
- 網站根目錄：/Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app
訪問生產模式
打開瀏覽器，訪問 https://servbay-angular-test.prod，查看建構後的生產版本。通過 ServBay 的自定義域名和免費的 SSL 證書，您的網站將具有更高的安全性和可信度。

通過以上步驟，您成功建立並運行了一個 Angular 專案，並使用 ServBay 提供的功能來管理和訪問您的專案。