使用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

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 { }

裝飾器接受多個屬性：@NgModule

• declarations：列出了此模塊中的組件，指令和管道定義。 除非明確導出，否則這些是私人的。 >
• ：imports列表外部模塊此模塊取決於>。 。
• ：exports列表組件，指令和管道可用可用於導入此一個的模塊。
• ：列表此模塊提供的服務。 範圍很重要；懶惰模塊中的提供商僅在該模塊中訪問。 providers>
• ：組件在運行時動態加載。 entryComponents
• ：（僅root模塊）指定root組件的bootstrap。 bootstrap
• ：控制模板編譯錯誤處理（例如，schemas）。 NO_ERRORS_SCHEMA
• ：>模塊的唯一ID（很少使用）。 id>

> ngmodule示例：

1。功能ngmodules：

特徵模塊封裝了相關的組件和服務。 示例：

此模塊導出

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 { }

，使其可用於其他模塊。 此處聲明的提供商範圍範圍為該模塊。

（包含核心指令）替換ForumsComponent（僅在root模塊中使用）。 CommonModule BrowserModule使用

，將其導入

>：> ForumsModule AppModule使用Angular CLI生成特徵模塊：

>

@NgModule({
  declarations: [ForumComponent, ForumsComponent, ThreadComponent, ThreadsComponent],
  imports: [CommonModule, FormsModule],
  exports: [ForumsComponent], // Exposing ForumsComponent for use in other modules
  providers: [ForumsService]
})
export class ForumsModule { }

2。懶惰加載路線：ng generate module path/to/module/feature

懶惰加載通過按需加載模塊來改善性能。 這需要使用路由器和功能模塊。

note

。 在

>的路由配置：

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ForumsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

RouterModule.forChild()屬性使用動態導入模塊的函數。 這樣可以確保僅當訪問AppModule路由時才加載。 懶惰模塊中的提供商是

>不

@NgModule({
  declarations: [ForumComponent, ForumsComponent],
  imports: [CommonModule, FormsModule, RouterModule.forChild([
    { path: '', component: ForumsComponent },
    { path: ':forum_id', component: ForumComponent }
  ])],
  providers: [ForumsService]
})
export class ForumsModule { }

全球訪問。

> loadChildren/forums 3。路由模塊：

>一個常見的模式是為更好的組織創建單獨的路由模塊。 Angular CLI可以生成這些：

>

4。 Singleton Services：

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

確保在應用程序上進行服務的單個實例，請在模塊中使用

和方法：

在其他模塊中使用forRoot()和forChild()進行導入。

>

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

5。分組ngmodules：ForumsModule.forRoot()AppModuleNGMODULES可以將其他NGMODULE分組，以更容易導入，但這可能會影響震撼。

摘要：

NGMODULES對於角度應用體系結構至關重要。 了解它們的屬性和使用模式是構建可維護，性能和可擴展應用程序的關鍵。 有關更深入的信息，請參閱官方的角文檔。

以上是使用Angular NGMODULE進行可重複使用的代碼等等的詳細內容。更多資訊請關注PHP中文網其他相關文章！