Angular 是一种流行的 JavaScript 框架，用于构建动态 Web 应用程序，它的最新版本（截至2021年）是Angular 12。本文将介绍如何使用Angular CLI搭建一个基于Angular 6的项目。Angular CLI 是 Angular 的官方命令行工具，它可以快速搭建一个环境，并创建我们需要的组件、模块等文件。通过本文你可以学习到以下内容：
- 安装Angular CLI
- 创建一个基于 Angular 6 的项目
- 搭建项目框架
- 添加组件与模块
- 编写 Angular 组件
- 运行项目并调试
安装Angular CLI
首先，我们需要在我们的机器上安装 Angular CLI。安装方法有很多种，这里给出两种常见的安装方法。
方法一：使用 npm
npm install -g @angular/cli
方法二：使用 Yarn
如果你使用 Yarn，你可以使用以下命令安装 Angular CLI：
yarn global add @angular/cli
安装完成后，我们可以验证一下，输入以下命令检查安装是否成功：
ng version
如果出现版本信息，则说明 Angular CLI 安装成功。
创建一个基于 Angular 6 的项目
创建一个 Angular 6 的项目，使用 Angular CLI 的 ng new [project-name] 命令。例如，要创建一个名为 "my-project" 的新项目：
ng new my-project
命令会在当前目录下创建一个新的名为 "my-project" 的目录，其中包含了整个 Angular 6 项目的初始骨架代码。
搭建项目框架
创建好项目之后，我们需要搭建项目框架。默认情况下，Angular CLI 已经生成了很多文件和文件夹，这些文件为我们提供了一个基本的项目结构，使我们能够快速开始编写代码。
文件结构
Angular CLI 创建的项目默认包含以下文件和文件夹：
-- -------------------- ---- ------- --- ---- --- ------------- --- ---- --- ------------- --- ---------- --- ------------ --- ------------ --- --------- --- ------------- --- ----------------- --- ------------------ --- -----------
以下是这些文件和文件夹的用途：
- e2e/：端到端测试目录。
- node_modules/：NPM 安装的所有依赖包。
- src/：开发我们应用的主要文件夹。
- angular.json：Angular CLI 配置文件，控制项目的编译、构建、开发和编译器选项。
- package.json：NPM 依赖项的清单文件。
- README.md：项目文档。
- tsconfig.json：TypeScript 配置文件。
- tsconfig.app.json：TypeScript 应用程序配置文件。
- tsconfig.spec.json：TypeScript 测试配置文件。
- tslint.json：代码风格指南文件。
构建 Angular 6 应用程序的核心组件
在登陆页面之前，我们需要创建应用程序的核心组件，这些组件可以是应用程序上的多个页面或一个复杂页面的多个模块。通过以下命令创建一个组件：
ng generate component home
以上命令将在“src/app”目录下创建一个名为“home”的组件文件夹，包含以下文件：
- home.component.ts（组件的 TypeScript 代码）
- home.component.css（组件的样式）
- home.component.html（组件的 HTML 模板）
- home.component.spec.ts（组件的测试代码）
我们不需要手动创建这些文件，Angular CLI 已经为我们完成了。创建完成之后，这个组件已经可以在我们的 Angular 应用程序中使用了。
添加组件与模块
我们需要创建以下三个组件：
- 登录（login）
- 注册（register）
- 首页（home）
使用以下命令在src/app路径下创建组件：
ng generate component login ng generate component register
src/app路径下会多出两个组件目录 login 和 register，目录中包含 login 和 register 这两个组件的 TypeScript 代码、HTML 模板和 CSS 风格表等。
我们还要新建一个 home 模块，用来在应用中引入其他组件和其他服务。使用以下命令创建一个名为 HomeModule 的新模块。
ng generate module home
此命令会创建文件 home.module.ts，我们需要在文件中导入其他组件。请将以下 import 语句添加到 home.module.ts：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------ - ---- ------------------ ------ - ------------- - ---- ------------------- ------ - -------------- - ---- --------------------------- ------ - ----------------- - ---- --------------------------------- ----------- -------- --------------- ------------- --------------- --------------- ------------------- -------- --------------- -- ------ ----- ---------- - -
编写 Angular 组件
虽然 Angular CLI 创建的组件已经拥有了一些基本的模板和样式，但是我们还需要编写业务逻辑。在src/app/login.component.ts中添加以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ------------
------------ -------------------------
---------- -------------------------
--
------ ----- -------------- -
---- - ---
-------- - ---
------------- - -
--------- -
-- ----
-
-上述代码中，我们创建了 LoginComponent 组件，并添加了一个名为 doLogin 的方法，在这个方法中添加了登录逻辑。我们还定义了两个属性 user 和 password 用于记录用户名和密码。
在src/app/login.component.html 中，我们编写模板，添加表单和输入框供用户输入用户名和密码，并绑定到组件类的属性：
-- -------------------- ---- -------
---- ------------------
--------------
----- -----------------------
-------
---------
------ ----------- -------------------
--------
----
-------
---------
------ --------------- -----------------------
--------
----
------- ----------------------------
-------
------绑定 [(ngModel)]="user" 和 [(ngModel)]="password" 使得我们可以与 LoginComponent 类中定义的属性 user 和 password 结合使用。
同样的改造应用于 register，以上代码也应被移植到 register.component.ts 和、register.component.html 中。
运行项目并调试
使用以下命令启动我们的 Angular 应用程序：
ng serve
这个命令会启动本地服务器（默认端口是4200），用于运行我们的 Angular 应用程序。在浏览器里输入 http://localhost:4200 即可访问我们新建的应用程序了。
到此，我们的示例项目已大功告成！可以愉快地一边调试一边学习了。
结论
本文介绍了如何使用 Angular CLI 快速搭建一个 Angular 6 项目，并创建和添加组件和模块。通过学习本文，你应该已经熟悉了 Angular 6 的基本概念和项目搭建方法，同时也学会了如何编写 Angular 组件和调试项目。尽管我们的示例项目简单，但是它可以为你开始学习 Angular 提供起点。愿你在使用 Angular 过程中取得成功！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674c4bd4a336082f2540216f