创建一个应用程序

我们将从搭建一个新项目开始。你将学习如何在本地创建项目。

在本地搭建新项目

上一课中我们已经安装了 CLI 工具。现在我们将使用它来创建一个新项目。在终端中运行 ng new 命令：

1ng new reverse-phrase

输入命令后，需要为项目命名。我们第一个创建的项目将根据输入的字符串进行反转，因此将其命名为“reverse phrase”（反转短语）。

CLI 会询问一些关于要生成项目的选项。这些只是用于进一步自定义项目的设置。通常会被问到是否启用路由。路由是后续课程的内容，目前不需要。选择“否”。

接着，它会要求你选择一种 CSS 工具。使用原生 CSS 即可。

直接按回车键即可，我们将使用默认设置。由于不会做特别复杂的操作，默认设置完全够用。

执行命令后，CLI 将开始下载初始文件并安装依赖项。

启动/停止服务器

Angular 会为我们提供一个开发服务器，可以本地在浏览器中预览应用。它还会自动监听文件变化，并自动刷新应用。最棒的是，我们无需配置服务器，开箱即用。这让我们能专注于应用开发。

有两个命令可以启动服务器：npm start 和 ng serve。大多数教程都会使用其中任意一个。但它们完全相同，没有任何区别。实际上，npm start 命令内部会执行 ng serve。你可以随意选择使用哪一个。在终端中运行以下命令：

1ng serve

Angular 将开始编译你的项目，并持续监听文件变化。每次修改文件后，Angular 都会重新编译项目。你应该会看到一个链接，用于在浏览器中查看项目。

默认情况下，可以通过 http://localhost:4200 或 http://127.0.0.1:4200 访问项目。

以下是可能看到的界面示例：

你看到的内容可能因课程发布时间不同而略有差异。默认首页在后续版本中可能会更新。不过只要一切正常，你应该能在浏览器中成功打开应用。

通过键盘按下 CTRL + C 可以停止服务器。

Educative 示例

在本课程中，你会遇到 Educative 提供的代码运行工具。你可以自由修改工具中的文件。我鼓励你这样做，以帮助更好地理解 Angular。

点击 Run 按钮即可运行示例。这将生成输出预览并在终端中显示日志信息。如果你希望在新标签页中查看完整功能的应用，还有一个链接可供点击。请注意，只有在点击 Run 按钮后，该链接才会生效。

以下示例是在运行 ng new 命令时自动生成的。

注意：该工具中不会包含 node_modules 目录。项目的依赖项已在后台自动安装。不必担心，我们不需要查看该目录中的任何文件。