Angular 4 教程指南

Angular 4 是一个流行的前端开发框架，它可以帮助开发者快速构建现代化的 Web 应用程序。本章将介绍 Angular 4 的基础知识，包括如何创建一个简单的 Angular 应用程序、组件、模板、指令等内容。

创建一个 Angular 应用程序

首先，我们需要安装 Angular CLI（命令行工具），它可以帮助我们快速创建和管理 Angular 4 项目。在命令行中运行以下命令来安装 Angular CLI：

npm install -g @angular/cli

安装完成后，我们可以使用 Angular CLI 来创建一个新的 Angular 4 项目。在命令行中运行以下命令：

ng new my-app
cd my-app
ng serve

以上命令会创建一个名为 my-app 的 Angular 4 项目，并启动开发服务器。打开浏览器并访问 http://localhost:4200，你将看到一个欢迎页面。

创建组件

在 Angular 中，组件是构建应用程序的基本单位。我们可以使用 Angular CLI 来创建一个新的组件。运行以下命令：

ng generate component my-component

以上命令会在项目中创建一个名为 my-component 的新组件，并自动生成所需的文件。在 src/app/my-component 目录下可以找到组件的 TypeScript、HTML 和 CSS 文件。

编写模板

每个 Angular 组件都有一个模板，用来定义组件的视图结构。我们可以在组件的 HTML 文件中编写模板。例如，在 my-component.component.html 文件中编写以下内容：

<h1>Hello, Angular!</h1>

使用指令

Angular 提供了许多内置指令，用来操作 DOM 元素、绑定数据等。例如，我们可以使用 *ngFor 指令来循环渲染一个列表。在组件的模板中使用 *ngFor 指令：

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

总结

在本章中，我们介绍了 Angular 4 的基础知识，包括如何创建一个 Angular 应用程序、组件、模板、指令等内容。在下一章中，我们将深入探讨 Angular 4 的更多高级特性。