📅 最后修改于: 2023-12-03 15:08:49.835000 🧑 作者: Mango
Angular 是一款现代化的 JavaScript 前端开发框架，它可以帮助我们快速构建复杂的单页面应用程序。在本文中，我们将介绍如何使用 Visual Studio 代码来运行 Angular 应用程序。
在开始之前，我们需要安装 Node.js 和 Angular CLI。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，它可以让我们在本地运行 JavaScript 代码。Angular CLI 是 Angular 官方提供的命令行工具，它可以帮助我们快速创建、构建和测试 Angular 应用程序。
在官网下载 Node.js 的安装程序，安装完成后在控制台中输入以下命令来检查 Node.js 是否安装成功：
node -v
如果输出了 Node.js 的版本号，则说明安装成功了。
在控制台中输入以下命令来安装 Angular CLI：
npm install -g @angular/cli
这个命令会把 Angular CLI 安装到全局环境中。安装完成后，在控制台中输入以下命令来检查 Angular CLI 是否安装成功：
ng version
如果输出了 Angular CLI 的版本号，则说明安装成功了。
在控制台中输入以下命令来创建新的 Angular 应用程序：
ng new my-app
这个命令会创建一个名为 my-app 的新的 Angular 应用程序。在创建完成后，我们需要进入到应用程序的根目录，并在控制台中输入以下命令来启动开发服务器：
cd my-app
ng serve --open
这个命令会启动一个开发服务器，它会自动打开我们的应用程序，并监听来自浏览器的请求。在应用程序启动后，我们可以在浏览器中访问 http://localhost:4200/ 来查看应用程序。
在我们创建的应用程序中，有一个位于 src/app 目录下的 app.component.ts 文件，它是我们应用程序的入口组件。在这个文件中，可以编辑组件的模板和逻辑代码。在编辑完成后，保存文件后，开发服务器会自动重新编译和刷新应用程序。在浏览器中，我们可以看到编辑后的应用程序。
在控制台中输入以下命令来构建应用程序：
ng build
这个命令会编译应用程序中的所有 TypeScript 代码，并把编译后的 JavaScript 代码保存到 dist 目录中。在完成编译后，我们可以在 dist 目录中找到生成的应用程序。
如果我们需要把应用程序发布到生产环境中，可以在控制台中输入以下命令：
ng build --prod
这个命令会把应用程序编译成优化过的、可以快速加载的代码。
在本文中，我们介绍了如何在 Visual Studio 代码中运行 Angular 应用程序。我们学习了如何安装 Node.js 和 Angular CLI，如何创建、编辑、构建和发布 Angular 应用程序。希望这篇文章对你有所帮助。