Menggunakan ngmodul sudut untuk kod yang boleh diguna semula dan banyak lagi

ngmodul sudut: menyelam mendalam ke dalam organisasi aplikasi dan pemuatan malas

ngmodul adalah asas untuk sudut, penstrukturan aplikasi dan penyusunan kompilasi. Mereka sangat penting untuk organisasi ciri, laluan pemuatan malas, dan membina perpustakaan yang boleh diguna semula. Panduan ini menganggap pengetahuan sudut asas.

Konsep Utama:

• Organisasi: ngmodules membahagikan aplikasi ke dalam blok yang boleh diurus, berfungsi, meningkatkan pengekalan kod dan kebolehbacaan.
• Konteks Kompilasi: Mereka menyediakan konteks untuk komponen, memastikan resolusi penggabungan dan ketergantungan yang betul.
• Modul ciri: di luar akar , modul ciri merangkumi ciri -ciri aplikasi tertentu, mempromosikan modulariti. AppModule
• Lazy Loading: Teknik pengoptimuman prestasi ini memuat modul hanya apabila diperlukan, meningkatkan masa beban awal. Ia dilaksanakan menggunakan modul penghala dan ciri.
• pengumpulan modul: ngmodules boleh mengumpulkan ngmodul lain, memudahkan import, tetapi berpotensi menghalang pengoptimuman pohon yang menggigil.

ngmodules vs modul JavaScript:

Penting untuk membezakan antara modul ngmodules dan JavaScript (ES6). Modul JavaScript adalah ciri bahasa untuk organisasi kod menggunakan

dan import, menguruskan skop dan kebolehgunaan semula. Dalam projek sudut menggunakan TypeScript, export/import pernyataan dikendalikan sebagai modul JavaScript. Artikel ini menggunakan nama penuh untuk mengekalkan kejelasan. export

the - asas: AppModule

Setiap aplikasi sudut bermula dengan

. Ia adalah modul akar, bootstrapping aplikasi. Contoh asas: 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 { }

Penghias

menyediakan metadata untuk pengkompil. Arahan @NgModule menentukan komponen akar (). bootstrap AppComponent

sifat ngmodule:

Penghias

menerima beberapa sifat:

• declarations: menyenaraikan komponen, arahan, dan paip ditakrifkan dalam modul ini. Ini adalah peribadi kecuali dieksport secara eksplisit.
• imports: menyenaraikan modul luaran modul ini bergantung pada .
• exports: menyenaraikan komponen, arahan, dan paip disediakan ke modul yang mengimport yang satu ini.
• : providers menyenaraikan perkhidmatan yang disediakan oleh modul ini. Skop adalah penting; Penyedia dalam modul yang dimuatkan malas hanya boleh diakses dalam modul tersebut.
• : entryComponents komponen dimuat secara dinamik pada runtime.
• : bootstrap (modul akar sahaja) Menentukan komponen akar ke bootstrap.
• : schemas Kawalan pengendalian ralat penyusunan template (mis., ). NO_ERRORS_SCHEMA
• : id ID unik untuk modul (jarang digunakan).

Ngmodule Contoh:

1. Ciri ngmodules:

Modul ciri merangkumi komponen dan perkhidmatan yang berkaitan. Contoh:

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

Eksport modul ini

, menjadikannya mudah diakses dengan modul lain. Pembekal yang diisytiharkan di sini dilancarkan ke modul ini. ForumsComponent (mengandungi arahan teras) menggantikan CommonModule (hanya digunakan dalam modul akar). BrowserModule

untuk menggunakan

, mengimportnya ke ForumsModule: AppModule

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

Modul Ciri Menjana Menggunakan CLI Angular:

ng generate module path/to/module/feature

2. Memuatkan malas dengan laluan:

Lazy Loading meningkatkan prestasi dengan memuatkan modul atas permintaan. Ini memerlukan menggunakan modul penghala dan ciri.

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

nota

. Konfigurasi Routing 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 { }

harta menggunakan fungsi yang secara dinamik mengimport modul. Ini memastikan beban modul hanya apabila laluan

diakses. Pembekal dalam modul yang dimuatkan malas adalah loadChildren tidak /forums diakses secara global.

3. Modul penghalaan:

Corak yang sama adalah untuk mewujudkan modul penghalaan berasingan untuk organisasi yang lebih baik. CLI sudut boleh menghasilkan ini:

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

4. Perkhidmatan Singleton:

Untuk memastikan satu contoh perkhidmatan di seluruh aplikasi, gunakan

dan

kaedah dalam modul anda: forRoot() forChild()

import menggunakan

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

dalam

dan ForumsModule.forRoot() dalam modul lain. AppModule ForumsModule.forChild()

5. Pengelompokkan ngmodules:

ngmodules boleh mengumpulkan ngmodul lain untuk import yang lebih mudah, tetapi ini boleh memberi kesan kepada pohon.

Ringkasan:

ngmodul adalah penting untuk seni bina aplikasi sudut. Memahami sifat dan corak penggunaan mereka adalah kunci untuk membina aplikasi yang boleh dipelihara, berpengalaman, dan berskala. Rujuk kepada dokumentasi sudut rasmi untuk maklumat yang lebih mendalam.

Atas ialah kandungan terperinci Menggunakan ngmodul sudut untuk kod yang boleh diguna semula dan banyak lagi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!