核心模块

概述

在Angular应用中，模块（Module）是组织代码的基本单位。它们帮助我们将应用划分为不同的功能块，每个模块可以包含组件、服务、指令等。核心模块（Core Module）是一个特殊的模块，通常用于存放应用的全局服务和单例组件。

为什么需要核心模块？

核心模块的主要目的是减少根模块（AppModule）的复杂性，并将全局服务和单例组件集中管理。通过将这些内容移到核心模块中，我们可以使根模块更加简洁，同时也便于维护和扩展。

创建核心模块

1. 使用Angular CLI创建核心模块

首先，我们需要使用Angular CLI来创建一个新的模块。打开终端并运行以下命令：

ng generate module core

这将在src/app目录下生成一个名为core的文件夹，并在其中创建一个core.module.ts文件。

2. 定义核心模块

打开core.module.ts文件，并定义核心模块：

import { NgModule, Optional, SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ],
  providers: []
})
export class CoreModule {
  constructor(@Optional() @SkipSelf() parentModule?: CoreModule) {
    if (parentModule) {
      throw new Error(
        'CoreModule is already loaded. Import it in the AppModule only.'
      );
    }
  }
}

3. 添加全局服务

假设我们有一个全局的服务LoggerService，我们可以将其添加到核心模块中：

import { NgModule, Optional, SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoggerService } from './services/logger.service';

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ],
  providers: [LoggerService]
})
export class CoreModule {
  constructor(@Optional() @SkipSelf() parentModule?: CoreModule) {
    if (parentModule) {
      throw new Error(
        'CoreModule is already loaded. Import it in the AppModule only.'
      );
    }
  }
}

4. 在根模块中导入核心模块

最后，我们需要在根模块（AppModule）中导入核心模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CoreModule // 导入核心模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

实践练习

练习1：创建一个全局服务

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

   ng generate service core/services/auth
   

2. 在auth.service.ts中实现一个简单的认证服务：

   import { Injectable } from '@angular/core';
   
   @Injectable({
     providedIn: 'root'
   })
   export class AuthService {
     isAuthenticated(): boolean {
       // 这里可以实现实际的认证逻辑
       return true;
     }
   }
   

3. 将AuthService添加到核心模块的providers数组中。

练习2：使用核心模块中的服务

1. 在AppComponent中注入AuthService并使用它：

   import { Component } from '@angular/core';
   import { AuthService } from './core/services/auth.service';
   
   @Component({
     selector: 'app-root',
     template: `
       <div *ngIf="isAuthenticated">Welcome!</div>
       <div *ngIf="!isAuthenticated">Please log in.</div>
     `
   })
   export class AppComponent {
     isAuthenticated: boolean;
   
     constructor(private authService: AuthService) {
       this.isAuthenticated = this.authService.isAuthenticated();
     }
   }
   

2. 运行应用并观察结果。

总结

核心模块是Angular应用中一个重要的组织结构，它帮助我们管理全局服务和单例组件，使应用更加模块化和易于维护。通过本教程，你应该已经掌握了如何创建和使用核心模块，并能够在实际项目中应用这些知识。

下一步

接下来，你可以继续学习Angular的其他高级主题，如路由配置、表单处理、状态管理等。这些主题将进一步帮助你构建复杂且功能强大的Angular应用。