环境搭建、创建项目、运行项目

踏上 Angular 旅程：从环境搭建到项目运行

踏上 Angular 开发之旅的第一步就是为你的机器设置一个可靠的环境。本指南将逐步指导你完成必要的步骤，让你能够创建和运行一个 Angular 项目。

1. 环境搭建

1.1 安装 Node.js

开启 Angular 之旅的第一步是安装 Node.js。Node.js 是 Angular 赖以运行的 JavaScript 运行时环境。前往 Node.js 官方网站下载并安装最新的 Node.js 版本。

1.2 安装 Angular CLI

接下来，你需要安装 Angular CLI，这是一个强大的命令行工具，可以帮助你创建、构建和运行 Angular 项目。只需运行以下命令即可通过 npm 安装 Angular CLI：

npm install -g @angular/cli

1.3 检查环境安装

完成安装后，通过运行以下命令检查你的环境是否已正确配置：

ng version

如果命令输出类似于以下内容，则说明你的环境已准备就绪：

Angular CLI: 13.3.0
Node: 18.2.0
Package Manager: npm 8.19.2
OS: darwin x64

2. 创建 Angular 项目

2.1 使用 Angular CLI 创建项目

现在，让我们用 Angular CLI 创建一个新项目。打开终端或命令提示符，导航到要创建项目的位置，然后运行以下命令：

ng new <project-name>

其中 <project-name> 是你项目的名称。

2.2 检查项目创建

项目创建完成后，转到项目目录并运行以下命令检查项目是否创建成功：

cd <project-name>

ng serve

成功创建项目后，你会看到类似于以下内容的输出：

Project is running at: http://localhost:4200
webpack: Compiled successfully.

3. 运行 Angular 项目

3.1 使用 ng serve 运行项目

最后，是时候运行你的 Angular 项目了。在终端或命令提示符中运行以下命令：

ng serve

3.2 检查项目运行

项目运行后，在浏览器中导航到 http://localhost:4200。你会看到一个 Angular 欢迎页面，表明项目正在成功运行。

恭喜你！你已经成功地为 Angular 设置了环境，创建并运行了一个 Angular 项目。现在，你可以开始探索 Angular 的强大功能，并构建你的第一个应用程序。

常见问题解答

1. 如何更新 Angular CLI？

   要更新 Angular CLI，请运行以下命令：

   npm install -g @angular/cli@latest
   

2. 如何创建 Angular 组件？

   要创建 Angular 组件，请运行以下命令：

   ng generate component <component-name>
   

3. 如何使用 Angular 路由？

   Angular 路由使你能够在应用程序中管理页面导航。要使用路由，请先在你的模块中导入 RouterModule，然后在你的 app.component.html 文件中定义路由出口：

   <router-outlet></router-outlet>
   

4. 如何添加依赖项到 Angular 项目中？

   要添加依赖项，请在终端或命令提示符中运行以下命令：

   npm install <dependency-name> --save
   

5. 如何调试 Angular 应用程序？

   要调试 Angular 应用程序，请在运行项目时添加 --inspect-brk 标志：

   ng serve --inspect-brk