Angular 模块介绍及使用（二）

Angular 模块概念

Angular 模块是一个重要的概念。模块提供了一种组织和封装组件、指令、管道和服务的方式，以及在应用程序中定义和配置这些功能。

下面是一些常见的 Angular 模块概念的介绍：

• 根模块：根模块是 Angular 应用程序的入口模块，通常称为 AppModule。它用 @NgModule 装饰器进行注解，并通过 imports 属性导入一些内置的 Angular 模块、第三方库模块和自定义模块。根模块还将其启动组件（通常是根组件）指定为bootstrap 属性。
• 特性模块：特性模块是应用程序中的一个独立功能模块，它负责定义和实现特定的功能。特性模块通常由一组相关的组件、指令、管道和服务组成，以及它们之间的协作关系。特性模块使用 @NgModule 装饰器进行注解，并通过 declarations、imports 和 providers 属性配置。
• 共享模块：共享模块是一种可重用的模块，它用于在应用程序中共享和导出一些功能。共享模块可以包含一些常用的组件、指令、管道和服务，以便其他模块可以导入并使用它们。共享模块使用 @NgModule 装饰器进行注解，并通过 exports 属性声明要导出的功能。
• 惰性加载模块：惰性加载模块是一种通过按需加载来提高应用程序性能的技术。通过将某些模块标记为惰性加载，它们将在需要时才被加载，而不是在应用程序启动时一次性加载所有模块。这可以帮助减少初始加载时间，并根据用户的导航行为动态加载所需的模块。

Angular 模块提供了一种模块化的开发方式，使得应用程序的不同部分可以独立开发、测试和维护。使用模块有助于组织和管理复杂的应用程序，并提供更好的可扩展性和可重用性。同时，模块也充当了依赖注入的容器，使得我们可以方便地管理和共享服务实例。

Angular 模块作用

Angular 中有以下几个主要作用：

1. 组织和封装：模块帮助我们组织和封装应用程序的不同功能和组件。我们可以将相关的组件、指令、管道和服务捆绑在一起，构成一个模块，以便于管理和维护。

2. 模块化开发：通过将应用程序划分为多个模块，我们可以实现模块化开发。不同团队可以独立开发不同的模块，然后将它们组合在一起构建完整的应用程序。这种模块化的开发方式使得应用程序更易于维护、扩展和测试。

3. 依赖注入：模块在 Angular中也充当了依赖注入的容器。我们可以在模块级别上注册并提供服务，在整个应用程序中共享这些服务。这样可以避免在每个组件中重复创建和管理相同的实例，提高了代码的重用性和效率。

4. 生命周期：模块还可以实现生命周期钩子，通过实现一些特定的方法，我们可以在模块的不同生命周期阶段执行相应的操作。例如，可以在模块初始化时执行一些初始化操作，或在模块销毁时执行一些清理操作。

   生命周期理解：
   在 Angular 中，组件和指令都有生命周期钩子，这些钩子是一些特定的方法，它们在组件或指令的生命周期中的不同阶段被调用。通过实现这些生命周期钩子方法，我们可以在特定的时间点执行一些逻辑操作。

   以下是 Angular 组件的一些常见生命周期钩子：

   • ngOnChanges()：在组件输入属性发生变化时被调用。它接收一个参数，这个参数是一个包含当前和之前属性值的SimpleChanges 对象。
   • ngOnInit()：在组件初始化完成后被调用。一般在这个钩子中进行一些初始化操作，如获取数据等。
   • ngDoCheck()：在每次变更检测周期中调用。一般用于检测变更，对发生的变化进行处理。
   • ngAfterContentInit()：在组件的投影内容初始化完成后被调用。一般用于处理投影内容。
   • ngAfterContentChecked()：在每次投影内容发生变化时被调用，并且在 ngDoCheck() 之后被调用。
   • ngAfterViewInit()：在组件视图及其子视图已初始化完成后被调用。一般用于处理组件视图相关的操作。
   • ngAfterViewChecked()：在每次组件视图及其子视图发生变化后被调用，并且在 ngAfterContentChecked()之后被调用。
   • ngOnDestroy()：在组件被销毁时被调用。一般用于做一些清理工作，如取消订阅、释放资源等。

   这些生命周期钩子方法允许我们在组件或指令的不同生命周期阶段执行一些操作，例如初始化数据、订阅和取消订阅、监测变化等。通过正确实现这些钩子方法，我们可以更好地管理和控制组件的行为。

5. 导入和导出：通过导入和导出其他模块，我们可以共享和重用模块的功能。我们可以使用 “imports”属性导入其他模块中的组件、指令、管道和服务，并使用 “exports” 属性导出当前模块的功能，以便其他模块可以使用。

Angular 模块相关例子

例1：

我们有一个名为 “appModule” 的 Angular 模块，它定义了一个组件并导入了一些内置的 Angular 模块，代码可能如下所示：

// 导入 Angular 核心模块
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

// 导入自定义的组件
import { AppComponent } from './app.component';

// 声明 AppModule，并使用 @NgModule 装饰器进行配置
@NgModule({
  declarations: [
    AppComponent // 声明该模块拥有的组件
  ],
  imports: [
    BrowserModule, // 导入 BrowserModule，使应用可以在浏览器中运行
    FormsModule // 导入 FormsModule，使应用可以使用表单功能
  ],
  bootstrap: [AppComponent] // 声明该模块的启动组件
})
export class AppModule { } // 导出 AppModule 类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这个例子中，我们创建了一个名为 AppModule 的 Angular 模块。我们从 @angular/core 中导入 NgModule 装饰器，并从 @angular/platform-browser 和 @angular/forms 中导入一些模块，然后使用这些模块来配置我们的 AppModule。我们声明了一个名为 AppComponent 的组件，然后将它包含在了 declarations 和 bootstrap 中，以及导入了 BrowserModule 和 FormsModule 等模块。

例2：

模块复杂的代码例子，供您参考：

// users.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';

import { UserService } from './user.service';
import { UserListComponent } from './user-list.component';
import { UserDetailComponent } from './user-detail.component';
import { UserFormComponent } from './user-form.component';
import { UserFilterPipe } from './user-filter.pipe';

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule
  ],
  declarations: [
    UserListComponent,
    UserDetailComponent,
    UserFormComponent,
    UserFilterPipe
  ],
  providers: [UserService]
})
export class UsersModule { }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// user.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

import { User } from './user.model';

@Injectable()
export class UserService {
  private apiUrl = 'https://api.example.com/users';

  constructor(private http: HttpClient) { }

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.apiUrl);
  }

  getUser(id: number): Observable<User> {
    return this.http.get<User>(`${this.apiUrl}/${id}`);
  }

  addUser(user: User): Observable<User> {
    return this.http.post<User>(this.apiUrl, user);
  }

  updateUser(user: User): Observable<User> {
    return this.http.put<User>(`${this.apiUrl}/${user.id}`, user);
  }

  deleteUser(id: number): Observable<void> {
    return this.http.delete<void>(`${this.apiUrl}/${id}`);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

// user-list.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

import { UserService } from './user.service';
import { User } from './user.model';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
  users$: Observable<User[]>;

  constructor(private userService: UserService) { }

  ngOnInit(): void {
    this.users$ = this.userService.getUsers();
  }

  deleteUser(id: number): void {
    this.userService.deleteUser(id).subscribe(() => {
      console.log(`User with ID ${id} deleted`);
    });
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// user-list.component.html

<div *ngFor="let user of users$ | async">
  <h3>{{ user.name }}h3>
  <p>Email: {{ user.email }}p>
  <button (click)="deleteUser(user.id)">Deletebutton>
div>
1
2
3
4
5
6
7

在这个例子中，我们有一个名为 “UsersModule” 的模块，它包含了对用户数据的操作。模块中包含了一个 UserService 服务，用于从 API 获取用户数据，并在 UserListComponent 组件中展示用户列表。UserDetailComponent 组件用于展示用户详细信息，UserFormComponent 组件用于添加和编辑用户信息。UserFilterPipe 管道用于筛选用户列表。

这个例子展示了如何使用模块、服务和组件来组织和封装复杂的代码。模块文件中通过 NgModule 的配置来导入和声明组件、服务和管道。服务文件中定义了对 API 的请求方法，组件文件中定义了对用户数据的展示和操作。

刚刚接触Angular，总结理论知识和简单例子，希望能帮助后来学习Angular的人。

大鹏一日同风起 扶摇直上九万里

诸位加油

---

END