6 环境搭建之创建第一个Angular项目

在上一个章节中，我们完成了Angular CLI的安装，这为接下来的项目创建奠定了基础。现在，我们将开始创建我们的第一个Angular项目，并了解项目目录的结构和基本配置。

创建Angular项目

使用Angular CLI创建项目非常简单。只需在命令行中运行以下命令：

ng new my-angular-app

这个命令中的 my-angular-app 是我们项目的名称。你可以根据自己的需求，将其替换为其他名称。

命令解析

• ng: 这是Angular CLI的命令行工具。
• new: 这是告诉CLI我们希望创建一个新项目的命令。
• my-angular-app: 新项目的名称，可以任意命名。

创建过程中的选项

在创建项目时，CLI会询问一些关于项目的配置选项：

1. 是否添加Angular路由：如果项目需要多个视图并希望使用路由功能，可以选择“Y”。
2. 选择样式格式：CLI支持多种样式格式，包括 CSS、SCSS、SASS、LESS、Stylus。根据项目需要进行选择。

例如，你可能会看到如下的提示：

? Would you like to add Angular routing? (y/N)
? Which stylesheet format would you like to use? (CSS, SCSS, SASS, LESS, Stylus)

项目结构

项目创建完成后，CLI会生成一个新目录，该目录包含多种文件和文件夹，基础结构如下：

my-angular-app/
├── e2e/                       # 端到端测试的相关文件
├── node_modules/             # npm依赖包
├── src/                      # 源代码
│   ├── app/                  # 应用级代码
│   ├── assets/               # 静态资源
│   ├── environments/          # 环境配置
│   ├── index.html            # 主 HTML 文件
│   ├── main.ts                # 入口文件
│   ├── polyfills.ts           # 浏览器兼容性补丁
│   ├── styles.css             # 全局样式
│   └── test.ts                # 测试文件
├── angular.json              # Angular 配置文件
├── package.json              # npm 配置文件
└── tsconfig.json             # TypeScript 配置文件

启动开发服务器

现在，我们可以启动本地开发服务器，查看我们创建的Angular项目。在命令行中执行：

cd my-angular-app
ng serve

默认情况下，开发服务器将在 http://localhost:4200 启动。打开浏览器并访问这个地址，你将看到Angular的欢迎页面。

访问项目

在浏览器中输入 http://localhost:4200，如果一切顺利，你会看到如下信息：

Welcome to my-angular-app! 

这表示你的Angular项目已成功创建并运行。

本节小结

在本章中，我们学习了如何使用Angular CLI创建一个新的Angular项目，并了解了项目的基本结构和如何启动开发服务器。你现在有了一个基本的Angular项目，可以开始进行进一步的开发。在接下来的章节中，我们将深入探索Angular的组件概念，以及如何创建和使用组件。

请确保在继续学习之前，确认你已成功运行项目；这将为后续的学习提供良好的基础。接下来，我们将进入Angular的核心——组件的创建和使用。