新闻中心

angular教程

发布时间：2025-05-14 08:16:24 点击量：44

Angular 教程

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

1. Angular 简介

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

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

2. 环境准备

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

Node.js：Angular 依赖于 Node.js 和 npm（Node 包管理器）。你可以从 Node.js 官网下载并安装*版本的 Node.js。
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 应用的基本构建块。每个组件由三个部分组成：

模板（Template）：定义组件的视图，使用 HTML 编写。
样式（Style）：定义组件的外观，使用 CSS 编写。
逻辑（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 中添加以下代码：

<app-hello-world></app-hello-world>

这将渲染 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 插值绑定

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

<p>{{ message }}</p>

在组件中定义 message 属性：

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

7.2 属性绑定

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

<img [src]="imageUrl">

在组件中定义 imageUrl 属性：

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

7.3 事件绑定

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

<button (click)="onClick()">Click me</button>

在组件中定义 onClick 方法：

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

7.4 双向数据绑定

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

<input [(ngModel)]="name">
<p>{{ name }}</p>

在组件中定义 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 指令进行导航：

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

<router-outlet> 是路由内容的占位符，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);
    });
  }
}