创建 Angular 项目

使用 Angular CLI 创建 Angular 项目

首先，以管理员模式启动命令提示符。然后，选择要创建 Angular 项目的目录。我将在我的 D 盘中构建 Angular 项目。在命令提示符中，键入 D: 然后按 Enter 键将目录更改到 D 盘，如下所示。

输入 D: 并按 Enter 后，目录路径将切换到 D 盘。接下来，选择要启动项目的文件夹。我将在我的电脑上创建一个名为 Demo 的空文件夹，并在该文件夹内放置我的 Angular 项目。输入 CD Demo 并按 Enter 键将目录更新到 Demo 文件夹，如下所示。

新的 project-name 命令是使用 Angular CLI 启动项目的必要命令。该项目现在将被命名为 MyFirstAngularApp。因此，如下所示，键入命令 ng create MyFirstAngularApp 并按 Enter。

在这里，在开始之前，按 Enter 键后会提示您一些问题。它将询问您是否要添加路由支持作为第一个查询。是否要使用 Angular 路由完全取决于您。为了将 Angular 路由集成到我的项目中，我键入 Y 并按 Enter 键，如下所示。

按下 Enter 键后，在开始之前，您将在这里被问到一些问题。它的第一个问题将询问您是否要添加路由支持。您是否要使用 Angular 路由完全取决于您。我的项目需要 Angular 路由，所以我输入 Y 并按 Enter 添加它，如下所示。

在您按下 Enter 键后，您的项目将需要一些时间。它将在后台生成大量文件和文件夹。此外，它还安装了运行 Angular 应用程序所需的包。我们将在下一篇文章中讨论 Angular 应用程序的文件夹和文件结构。在项目成功生成后，让我们看看如何使用 Angular CLI 命令来运行项目。

使用 Angular CLI 运行 Angular 应用程序

• 要使用 Angular CLI 运行 Angular 应用程序，您必须首先将目录路径修改到项目文件夹。我使用以下命令将目录路径修改到 D:\Demo\MyFirstAngularApp，因为我在 D:\Demo 文件夹中以 MyFirstAngularApp 的名称构建了项目。
• 让我们看一下如何使用 Angular CLI 命令来编译 Angular 项目。您必须执行 ng serve 命令来编译项目。输入 "ng serve" 并按 Enter 键，如下所示。Web 服务器将启动，应用程序将使用 ng serve 命令进行构建。
• 让我们看一下如何使用 Angular CLI 命令来构建 Angular 项目。要编译项目，您需要运行 ng serve 命令。如下所示，键入 "ng serve" 并按 Enter 键。ng serve 命令将构建应用程序并启动 Web 服务器。

成功编译后，请查看端口号，即 4200。这意味着 Web 服务器在 4200 端口启动。

在命令提示符中输入 ng serve -o 并按 Enter 键，如下所示，以在您喜欢的浏览器中启动您的应用程序。

如下图所示，项目文件夹中有许多文件夹和文件。

创建 Angular 项目需要多个步骤。Angular 提供的命令行界面 (CLI) 使该过程更容易。您可以使用 Angular CLI 以以下步骤创建 Angular 项目：

步骤 1：安装 Node.js 和 npm

从官方 Node.js 网站下载安装程序，然后运行它进行安装。下载 Node.js

步骤 2：安装 Angular CLI

您可以通过在打开的终端或命令提示符中运行以下行，将 Angular CLI 全局安装到您的计算机上。

步骤 3：启动一个新的 Angular 应用程序。

要启动一个新项目，请在登录 Angular CLI 后键入以下命令：ng new project-name。在你的任务调用位置输入你想要的 Angular 任务的名称。

步骤 4：转到项目目录。

进入刚刚创建的项目目录。

步骤 5：服务 Angular 应用程序

运行以下命令来启动开发服务器。

附加操作

• 探索项目：熟悉 Angular CLI 生成的文件和项目结构。
• 进行修改：开始修改 src 文件夹中的代码。src/app 目录通常包含主要的应用程序功能。
• 学习 Angular：通过阅读其文档，了解更多关于 Angular 的特性和原理。

完成此操作后，您应该能够创建和管理一个基本的 Angular 项目。根据您的具体需求，可以根据需要实施对项目结构的进一步设置或更改。

结论

总而言之，使用 Angular CLI 创建 Angular 项目所需的一切就是安装 Node.js、npm 和 Angular CLI。设置好这些工具后，您可以通过生成新的 Angular 项目来查看您的应用程序运行起来，进入项目目录并启动开发服务器。

Angular CLI 使开发过程中的许多步骤（包括项目设置、代码生成和构建）变得更简单。在处理您的 Angular 项目时，您可以探索项目结构，修改代码，并利用 Angular 的特性来创建可扩展且可靠的在线应用程序。

在您继续开发之旅时，请记住技术格局在不断变化。因此，务必检查 Angular CLI 和 Angular 框架文档的更新或更改。