NgModule nedir?

Question

NgModule nedir?

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.