创建并运行 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 提供的功能来管理和访问您的项目。