构建 Angular 应用及更多资源

这篇最后的 Angular 文章介绍了如何构建一个可用于生产环境的应用,并提供了更多资源供您继续学习之旅。

预备知识 熟悉核心 HTMLCSSJavaScript 语言,了解 终端/命令行
目标 学习如何构建您的 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

您可以使用任何后端,例如 FirebaseGoogle CloudApp 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 的特性,例如使用服务、导航和从服务器获取数据。
  • Angular 组件指南:一系列文章,涵盖生命周期、组件交互和视图封装等主题。
  • 表单指南:指导您在 Angular 中构建响应式表单、验证输入和构建动态表单的文章。

总结

以上就是本次的内容。希望您在 Angular 的学习过程中玩得开心!