526互联

angular/platform-browser 开发包里的 BrowserModule

发布时间 2023-07-23 22:27:07作者: JerryWang_汪子熙

在 Angular 中，BrowserModule 是一个关键的模块，它提供了在浏览器中运行应用程序所必需的服务和指令。这个模块是由 @angular/platform-browser 包提供的。

BrowserModule 为我们提供了很多基础的服务、组件和指令，如 CommonModule、ApplicationModule、PlatformModule、APP_ID_RANDOM_PROVIDER 等。它包含了一些核心的指令，如 NgIf、NgFor 等，它们是在我们的模板中经常用到的。

举个例子，假设开发人员有一个基本的 Angular 组件如下：

@Component({
  selector: 'my-app',
  template: `<div *ngIf="showTitle">
               <h1>{{title}}</h1>
             </div>`
})
export class AppComponent {
  title = 'Hello Angular';
  showTitle = true;
}

在这个组件中，我们使用了 *ngIf 指令来决定是否显示标题。这个 *ngIf 指令实际上是由 BrowserModule 提供的。如果我们没有在我们的 AppModule 中导入 BrowserModule，那么 Angular 就无法识别这个 *ngIf 指令，从而导致我们的组件无法正常工作。

在 Angular 应用中，BrowserModule 应该在应用的根模块（即通常所说的 AppModule）中导入。这是因为 BrowserModule 会初始化一些只能初始化一次的服务，如果在其他模块中再次导入 BrowserModule，会导致这些服务被重复初始化，从而引发问题。

如果 Angular 应用有多个特性模块，并且这些特性模块也需要使用 BrowserModule 提供的服务和指令，那么应该使用 CommonModule 来替代 BrowserModule。CommonModule 提供了 BrowserModule 中的大部分服务和指令，但不包括那些只能初始化一次的服务。

Angular 的模块系统是其设计中的一个重要部分，它使我们能够更好地组织和共享代码。BrowserModule 是这个模块系统中的一个关键部分，它提供了我们在开发浏览器应用时所需的大部分基础功能。

总结

BrowserModule 的主要职责就是在浏览器环境下启动应用。当然，除了 BrowserModule，Angular 还提供了其他一些平台特定的模块，如 ServerModule（用于服务器端渲染）和 ServiceWorkerModule（用于支持 PWA）。这些模块都有各自的职责和用途，我们需要根据我们的应用需求来选择合适的模块。