NgModule nedir?

Question

NgModule nedir?

IT Interview Practice · Accepted Answer

**NgModule**, `@NgModule` ile dekorasyon edilmiş bir sınıftır ve ilgili bileşenleri, direktifleri, pipe'ları ve hizmetleri uyumlu bir blok halinde gruplandırarak Angular'a bunları nasıl derleyip birbirine bağlayacağını söyler. (Not: modern Angular, NgModule'ler yerine gittikçe **bağımsız bileşenleri** tercih etmektedir, ancak NgModule'leri anlamak çoğu mevcut codebase için hala gereklidir.)

## NgModule'ün Yapısı

```ts
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

@NgModule({
  declarations: [UserListComponent, UserCardComponent], // components/directives/pipes THIS module owns
  imports: [CommonModule, FormsModule],                 // other modules whose exports we need
  exports: [UserListComponent],                          // what we make available to importers
  providers: [UserService],                              // services (DI) provided by this module
})
export class UsersModule {}
```

## Dört ana dizi

```text
declarations → components, directives, and pipes that BELONG to this module
imports      → other NgModules whose exported features this module needs
exports      → the subset of declarations/modules made available to importers
providers    → services registered for dependency injection
```

Bir bileşen yalnızca **bir** modülde bildirilebilir ve o modülün şablonlarında kullanılabilir olması için (veya bağımsız olarak içe aktarılması gerekir) bildirilmelidir.

## Kök modül

```ts
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  bootstrap: [AppComponent], // the root component to launch
})
export class AppModule {}
```

Her (bağımsız olmayan) uygulamanın, başlangıç bileşenini adlandıran bir `bootstrap` dizisine sahip bir kök `AppModule`'ü vardır.

## Özellik modülleri ve organizasyon

```text
AppModule (root) → imports → UsersModule, AdminModule, SharedModule
```

Uygulamalar **özellik modülleri** (her etki alanı alanı için bir tane) ve **paylaşılan modül** (ortak bileşenler/pipe'lar) halinde organize edilir ve bu da codebase'i modüler tutarak ve özellik başına tembel yüklemeyi etkinleştirir.

## Bağımsız bileşenlere geçiş

```ts
@Component({ standalone: true, imports: [CommonModule], ... }) // no NgModule needed
```

Modern Angular, bileşenlerin **bağımsız** olmasına izin verir — kendi bağımlılıklarını doğrudan bildirirler — NgModule boilerplate'ini azaltır veya ortadan kaldırır.

## Neden önemli

NgModule'ler, Angular'da geleneksel organizasyon ve bağımlılık bağlama mekanizmasıdır — `declarations`/`imports`/`exports`/`providers`'i anlamak, mevcut Angular uygulamalarının büyük çoğunluğunda gezinmek ve tembel yüklemeyi anlamak için gereklidir.

Yeni kod bağımsız bileşenlere doğru eğilim gösterse de, NgModule bilgisi gerçek dünya Angular işi için hala gereklidir.

NgModule'ün Yapısı

Dört ana dizi

Kök modül

Özellik modülleri ve organizasyon

Bağımsız bileşenlere geçiş

Neden önemli

İlgili sorular