关于 Angular 应用 Module 的 forRoot 方法的讨论

简介: 关于 Angular 应用 Module 的 forRoot 方法的讨论

Angular 开发中,我们经常遇到一个 NgModule 在导入时需要调用它的静态 forRoot 方法。,最值得注意的例子是 RouterModule. 当在 Angular 应用的根目录注册这个模块时,导入RouterModule的方式如下:

import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
    { path: '',   redirectTo: '/index', pathMatch: 'full' }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  ...
})
export class AppModule { }

这个约定在 ngx-bootstrap 中也使用过,以前在 Angular Material 中也使用过。这种约定意味着,给定的模块必须在调用 forRoot()方法时,注册到应用程序的根 NgModule 中。这个方法有什么特别之处,以至于它需要在应用程序的根目录调用,而不是在其他NgModule中调用?


对于初学者来说,forRoot() 约定返回什么?通常,这个方法的返回类型是一个符合ModuleWithProviders 接口的对象。这个接口是一个可接受的NgModule导入接口,它有两个属性:

interface ModuleWithProviders { 
  ngModule: Type<any>
  providers: Provider[]
}

forRoot() 方法会返回一个 NgModule 及其依赖的提供商。这和根 NgModule 有什么关系?也许什么都没有。事实上,尽管这种约定意味着它必须在应用的根模块处导入,但在很多情况下,你可以在非根模块中导入它,它也能工作。


下面是 ModalModule 在ngx-bootstrap中使用forRoot()约定的方式:

import { NgModule, ModuleWithProviders } from '@angular/core';
import { ModalBackdropComponent } from './modal-backdrop.component';
import { ModalDirective } from './modal.component';
import { PositioningService } from '../positioning';
import { ComponentLoaderFactory } from '../component-loader';
@NgModule({
  declarations: [ModalBackdropComponent, ModalDirective],
  exports: [ModalBackdropComponent, ModalDirective],
  entryComponents: [ModalBackdropComponent]
})
export class ModalModule {
  public static forRoot(): ModuleWithProviders {
    return {ngModule: ModalModule, providers: [ComponentLoaderFactory, PositioningService]};
  }
}

尽管从理论上讲,导入forRoot()方法的额外提供程序。在子ngmodule中是可行的,但将它注册到应用程序的根目录,在很多方面都有帮助。


首先,考虑 providers 的注入方式与组件和指令有何不同。通常,当用@Injectable装饰一个类并在NgModule中注册为提供商时,这个类只创建一次,并且这个实例会在整个应用中共享。当Angular引导根模块时,所有NgModule中所有可用的导入都会在那时注册,并对整个应用都可用——它们是全局的。这就是为什么注册在子NgModule中的提供商在整个应用中都是可用的。


相关文章
|
2月前
|
JavaScript 前端开发 架构师
Angular进阶:理解RxJS在Angular应用中的高效运用
RxJS(Reactive Extensions for JavaScript)是JavaScript的一个响应式编程库,特别适用于处理异步数据流。
35 0
|
2月前
|
JavaScript 前端开发
Angular.js 应用中数据模式的删除操作实现
Angular.js 应用中数据模式的删除操作实现
|
5天前
|
JavaScript 前端开发 开发者
Angular框架:企业级Web应用的强大后盾
Angular,谷歌支持的JavaScript框架,因其组件化架构、双向数据绑定、依赖注入和路由系统,成为企业级Web开发首选。组件化促进代码重用,如`AppComponent`示例。双向数据绑定简化DOM操作,减少手动工作。依赖注入通过示例展示易管理依赖,提升测试性。路由则支持SPA开发,平滑页面过渡。Angular的特性增强了开发效率和应用质量,使其在Web开发领域保持领先地位。【6月更文挑战第25天】
13 2
|
2月前
|
前端开发 JavaScript 测试技术
使用Angular构建高效单页应用的实践指南
【5月更文挑战第21天】本文是使用Angular构建高效单页应用的实践指南,涵盖了Angular框架简介、SPA构建步骤和最佳实践。首先,Angular是基于TypeScript的前端框架,提供声明式模板、组件化和路由管理等功能。构建SPA包括环境搭建、创建组件、编写路由、数据绑定和交互,以及构建和部署。实践中,应遵循Angular风格指南,使用Angular Material UI库,实现服务端渲染,并进行性能优化和测试,以提升应用性能和用户体验。
|
2月前
|
JavaScript 前端开发
关于 Angular.js 应用里的 $scope.$apply()
关于 Angular.js 应用里的 $scope.$apply()
|
2月前
|
JavaScript 前端开发
Angular.js 应用里如何发送 HTTP 请求
Angular.js 应用里如何发送 HTTP 请求
|
2月前
|
资源调度 JavaScript 编译器
显式指定 npm 作为创建 Angular 应用时的包管理器
显式指定 npm 作为创建 Angular 应用时的包管理器
|
2月前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
|
2月前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
Angular 应用里异步打开对话框的技术实现
Angular 应用里异步打开对话框的技术实现