Angular 教程

Angular 是一个由 Google 维护的开源前端框架，用于构建单页应用程序（SPA）。它基于 TypeScript，并提供了强大的工具和功能，帮助开发者快速构建现代化的 Web 应用。本教程将带你从零开始学习 Angular，涵盖基本概念、核心功能以及如何构建一个简单的 Angular 应用。

1. Angular 简介

Angular 是一个基于组件的框架，它将应用程序分解为多个可重用的组件。每个组件由 HTML 模板、CSS 样式和 TypeScript 代码组成。Angular 的核心特性包括：

• 双向数据绑定：自动同步视图和模型之间的数据。
• 依赖注入：提供了一种高效的方式来管理组件之间的依赖关系。
• 路由：支持单页应用中的页面导航。
• 指令：扩展 HTML 的功能，允许你创建自定义的 HTML 元素和属性。
• 服务：用于封装业务逻辑，可以在多个组件之间共享。

2. 环境准备

在开始学习 Angular 之前，你需要确保你的开发环境已经准备好。以下是安装 Angular 所需的工具：

1. Node.js：Angular 依赖于 Node.js 和 npm（Node 包管理器）。你可以从 Node.js 官网 下载并安装*版本的 Node.js。

2. Angular CLI：Angular 命令行工具（CLI）可以帮助你快速创建和管理 Angular 项目。你可以通过以下命令安装 Angular CLI：

   npm install -g @angular/cli

安装完成后，你可以通过以下命令检查 Angular CLI 是否安装成功：

ng --version

3. 创建*个 Angular 应用

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

ng new my-first-app

该命令会创建一个名为 my-first-app 的新项目，并自动安装所有依赖项。创建完成后，进入项目目录并启动开发服务器：

cd my-first-app
ng serve

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

4. Angular 项目结构

Angular CLI 生成的项目具有以下结构：

my-first-app/
├── src/
│   ├── app/
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets/
│   ├── environments/
│   ├── index.html
│   ├── main.ts
│   └── styles.css
├── angular.json
├── package.json
└── tsconfig.json

4.1 src/app/ 目录

src/app/ 目录是 Angular 应用的核心部分，包含应用的所有组件、模块和服务。默认情况下，Angular CLI 会生成一个名为 AppComponent 的根组件。

• app.component.ts：组件的 TypeScript 代码，定义了组件的逻辑。
• app.component.html：组件的 HTML 模板，定义了组件的视图。
• app.component.css：组件的样式文件，定义了组件的样式。
• app.module.ts：应用的根模块，定义了应用的依赖关系和组件。

4.2 src/index.html

src/index.html 是应用的入口 HTML 文件。Angular 应用的所有内容都将被渲染到这个文件中。

4.3 src/main.ts

src/main.ts 是应用的入口 TypeScript 文件，负责启动 Angular 应用。

5. Angular 组件

组件是 Angular 应用的基本构建块。每个组件由三个部分组成：

1. 模板（Template）：定义组件的视图，使用 HTML 编写。
2. 样式（Style）：定义组件的外观，使用 CSS 编写。
3. 逻辑（Logic）：定义组件的行为，使用 TypeScript 编写。

5.1 创建新组件

你可以使用 Angular CLI 快速生成一个新组件。例如，要创建一个名为 hello-world 的组件，可以运行以下命令：

ng generate component hello-world

该命令会在 src/app/ 目录下创建一个新的文件夹 hello-world，并生成以下文件：

• hello-world.component.ts
• hello-world.component.html
• hello-world.component.css
• hello-world.component.spec.ts

5.2 使用组件

生成组件后，你可以在其他组件或模板中使用它。例如，在 app.component.html 中添加以下代码：

这将渲染 HelloWorldComponent 的内容。

6. Angular 模块

模块是 Angular 应用的组织单元。每个 Angular 应用至少有一个根模块，通常命名为 AppModule。模块的主要作用是：

• 声明应用中的组件、指令和管道。
• 导入其他模块，以使用它们提供的功能。
• 配置依赖注入。

6.1 AppModule

默认情况下，Angular CLI 会生成一个名为 AppModule 的根模块，位于 src/app/app.module.ts 中。它的结构如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { HelloWorldComponent } from './hello-world/hello-world.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloWorldComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• declarations：声明应用中的组件、指令和管道。
• imports：导入其他模块，例如 BrowserModule 是运行 Angular 应用所必需的。
• providers：配置依赖注入的服务。
• bootstrap：指定应用的根组件。

7. Angular 数据绑定

Angular 提供了多种数据绑定方式，用于在视图和模型之间同步数据。

7.1 插值绑定

插值绑定使用双花括号 {{ }} 将组件中的属性值插入到模板中。例如：

{{ message }}

在组件中定义 message 属性：

export class AppComponent {
  message = 'Hello, Angular!';
}

7.2 属性绑定

属性绑定使用方括号 [] 将组件中的属性值绑定到 HTML 元素的属性上。例如：

在组件中定义 imageUrl 属性：

export class AppComponent {
  imageUrl = 'https://angular.io/assets/images/logos/angular/angular.png';
}

7.3 事件绑定

事件绑定使用圆括号 () 将组件中的方法绑定到 HTML 元素的事件上。例如：

Click me

在组件中定义 onClick 方法：

export class AppComponent {
  onClick() {
    alert('Button clicked!');
  }
}

7.4 双向数据绑定

双向数据绑定使用 [(ngModel)] 将表单元素的值与组件中的属性双向绑定。例如：

{{ name }}

在组件中定义 name 属性：

export class AppComponent {
  name = '';
}

注意：使用 ngModel 时需要导入 FormsModule。

8. Angular 路由

Angular 提供了强大的路由功能，允许你在单页应用中进行页面导航。

8.1 配置路由

首先，在 app.module.ts 中导入 RouterModule 并配置路由：

import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppModule { }

8.2 使用路由

在模板中使用 routerLink 指令进行导航：

是路由内容的占位符，Angular 会根据当前路由渲染相应的组件。

9. Angular 服务

服务是 Angular 中用于封装业务逻辑的类。它们可以通过依赖注入在多个组件之间共享。

9.1 创建服务

使用 Angular CLI 创建一个新的服务：

ng generate service data

该命令会生成一个名为 DataService 的服务，位于 src/app/data.service.ts 中。

9.2 使用服务

在组件中通过依赖注入使用服务：

import { DataService } from './data.service';

export class AppComponent {
  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getData().subscribe(data => {
      console.log(data);
    });
  }
}

10. 总结

通过本教程，你已经了解了 Angular 的基本概念和核心功能，包括组件、模块、数据绑定、路由和服务。Angular 是一个功能强大且灵活的前端框架，适合构建复杂的单页应用。随着你深入学习 Angular，你将发现它提供了更多高级功能和工具，帮助你构建高效、可维护的 Web 应用。

继续学习和实践，你将能够掌握 Angular 并构建出更加复杂和功能丰富的应用程序。祝你学习愉快！