使用Angular NGMODULE进行可重复使用的代码等等

Angular ngmodules：深入研究应用程序组织和懒惰加载

NGMODULES是角度，结构应用和简化汇编的基础。 它们对于功能组织，懒惰的加载路线和建筑可重复使用的库至关重要。本指南假定基本的角度知识。

密钥概念：

组织： ngmodules将应用程序划分为可管理的功能块，改善代码可维护性和可读性。>
• >汇编上下文：它们为组件提供了上下文，确保了正确的捆绑和依赖解决方案。
>
• 特征模块：超过根，特征模块封装了特定的应用程序特征，促进模块化。
• 懒惰加载：此性能优化技术仅在需要时加载模块，从而改善初始加载时间。 它是使用路由器和功能模块实现的。 AppModule
模块分组： ngmodules可以分组其他ngmodules，简化导入，但可能阻碍树震动的优化。
• > ngmodules vs. JavaScript模块：
• >重要的是要区分NGMODULES和JAVASCRIPT（ES6）模块。 JavaScript模块是使用和
的代码组织的语言功能，可以管理范围和可重复使用。 在使用Typescript的角度项目中，

/

语句作为JavaScript模块处理。 本文使用全名来保持清晰度。>

- 基础：import> export>每个角应用都以import开头。 它是根模块，引导应用程序。 一个基本示例：export

装饰器为编译器提供元数据。 AppModule阵列指定root component（）。

> ngmodule属性：AppModule

<code class="language-typescript">import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }</code>

装饰器接受多个属性：@NgModule

• declarations：列出了此模块中的组件，指令和管道定义。 除非明确导出，否则这些是私人的。>
• ：imports列表外部模块此模块取决于>。。
• ：exports列表组件，指令和管道可用可用于导入此一个的模块。
• ：列表此模块提供的服务。 范围很重要；懒惰模块中的提供商仅在该模块中访问。providers>
• ：组件在运行时动态加载。entryComponents
• ：（仅root模块）指定root组件的bootstrap。bootstrap
• ：控制模板编译错误处理（例如，schemas）。 NO_ERRORS_SCHEMA
• ：>模块的唯一ID（很少使用）。id>

> ngmodule示例：

1。功能ngmodules：

特征模块封装了相关的组件和服务。 示例：

此模块导出

<code class="language-typescript">import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }</code>

，使其可用于其他模块。 此处声明的提供商范围范围为该模块。

（包含核心指令）替换ForumsComponent（仅在root模块中使用）。CommonModule BrowserModule使用

，将其导入

>：> ForumsModule AppModule使用Angular CLI生成特征模块：

>

<code class="language-typescript">@NgModule({
  declarations: [ForumComponent, ForumsComponent, ThreadComponent, ThreadsComponent],
  imports: [CommonModule, FormsModule],
  exports: [ForumsComponent], // Exposing ForumsComponent for use in other modules
  providers: [ForumsService]
})
export class ForumsModule { }</code>

2。懒惰加载路线：ng generate module path/to/module/feature

懒惰加载通过按需加载模块来改善性能。 这需要使用路由器和功能模块。

note

。 在

>的路由配置：

<code class="language-typescript">@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ForumsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }</code>

RouterModule.forChild()属性使用动态导入模块的函数。 这样可以确保仅当访问AppModule路由时才加载。 懒惰模块中的提供商是

>不

<code class="language-typescript">@NgModule({
  declarations: [ForumComponent, ForumsComponent],
  imports: [CommonModule, FormsModule, RouterModule.forChild([
    { path: '', component: ForumsComponent },
    { path: ':forum_id', component: ForumComponent }
  ])],
  providers: [ForumsService]
})
export class ForumsModule { }</code>

全球访问。

> loadChildren/forums 3。路由模块：

>一个常见的模式是为更好的组织创建单独的路由模块。 Angular CLI可以生成这些：

>

4。 Singleton Services：

ng generate module path/to/module/feature --routing

确保在应用程序上进行服务的单个实例，请在模块中使用

和方法：

在其他模块中使用forRoot()和forChild()进行导入。

>

<code class="language-typescript">const routes: Routes = [
  {
    path: 'forums',
    loadChildren: () => import('./forums/forums.module').then(m => m.ForumsModule) // Updated import syntax
  },
  // ...other routes
];</code>

5。分组ngmodules：ForumsModule.forRoot()AppModuleNGMODULES可以将其他NGMODULE分组，以更容易导入，但这可能会影响震撼。

摘要：

NGMODULES对于角度应用体系结构至关重要。 了解它们的属性和使用模式是构建可维护，性能和可扩展应用程序的关键。 有关更深入的信息，请参阅官方的角文档。

以上是使用Angular NGMODULE进行可重复使用的代码等等的详细内容。更多信息请关注PHP中文网其他相关文章！