构建 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 的学习过程中玩得开心!