Modüllere Giriş
Angular'da modüller, uygulamaları daha yönetilebilir ve organize bir şekilde yapılandırmak için kullanılan temel yapılar arasında yer alır. Bir modül, bileşenleri, servisleri ve diğer modülleri gruplar ve uygulamanın belirli bir alanını kapsayan fonksiyonları tanımlar. Modüllere giriş, uygulamanın ölçeklenebilirliğini artırmak, bileşenleri yeniden kullanılabilir hale getirmek ve veri akışı ile durum yönetimini daha verimli yapmak için önemlidir.
Modüller, uygulamayı fonksiyonel alanlara ayırmak gerektiğinde kullanılır. Bu yaklaşım özellikle modern tek sayfa uygulamalarda (SPA) kritik öneme sahiptir çünkü yükleme sürelerini azaltır ve bakım süreçlerini kolaylaştırır. Angular’daki temel kavramlar arasında bileşenler, durum yönetimi, veri akışı ve yaşam döngüsü (lifecycle) yer alır.
Bu eğitimde, Angular modüllerini nasıl oluşturacağınızı, içe aktaracağınızı ve dışa aktaracağınızı öğreneceksiniz. Ayrıca, küçük ve yeniden kullanılabilir bileşenler oluşturma, veri akışını yönetme ve uygulamanın performansını optimize etme konularına da değinilecektir. Bu bilgiler, modülleri etkin kullanarak daha temiz ve sürdürülebilir Angular uygulamaları geliştirmeyi sağlayacaktır.
Temel Örnek
typescriptimport { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
@NgModule({
declarations: [
AppComponent,
HeaderComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Bu temel örnekte NgModule dekoratörü ile bir Angular modülü tanımlanmıştır. declarations alanı, modüle ait bileşenleri listeler; burada AppComponent ve HeaderComponent bulunmaktadır. imports alanı, modülün kullanacağı diğer modülleri içerir; örneğin BrowserModule, uygulamanın tarayıcıda çalışmasını sağlar. providers, modül içindeki servisleri tanımlamak için kullanılır ve bootstrap ise uygulamanın başlangıçta hangi bileşen ile yükleneceğini belirtir.
Bu yapı, modüllerin uygulamayı yönetilebilir parçalara ayırmasını ve veri akışını düzenlemesini gösterir. Bu sayede prop drilling veya gereksiz yeniden render sorunları önlenir. Ayrıca, bileşenlerin yaşam döngüsü modül tarafından kontrol edilir, bu da başlangıç ve durum yönetiminin düzgün çalışmasını sağlar.
Pratik Örnek
typescriptimport { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { UserListComponent } from './user-list/user-list.component';
import { UserService } from './services/user.service';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
UserListComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [UserService],
bootstrap: [AppComponent]
})
export class AppModule { }Bu pratik örnek, gerçek bir proje senaryosuna yakındır. UserListComponent ve UserService eklenmiştir. FormsModule, formların ve çift yönlü veri bağlamanın kullanılmasını sağlar. UserService providers içinde tanımlanarak modül genelinde kullanılabilir hale getirilmiştir.
Bu modül, veri akışı ve durum yönetiminin nasıl etkili bir şekilde yapılacağını gösterir. UserService, bileşenler arasında veri paylaşımını sağlar. ngOnInit() gibi yaşam döngüsü hookları ile bileşenlerin başlatılması kontrol edilir. Bu yapı, performansı artırır, gereksiz renderları önler ve kodun yeniden kullanılabilirliğini sağlar.
Angular'da en iyi uygulamalar, modülleri küçük ve odaklanmış tutmayı içerir. Bileşenler küçük ve yeniden kullanılabilir olmalıdır. Yaygın hatalar arasında prop drilling, gereksiz yeniden render ve durum mutasyonu bulunur. Hata ayıklamak için ngOnChanges ve kontrollü console.log() kullanılabilir. Performansı optimize etmek için lazy loading ve OnPush değişiklik algılama stratejisi önerilir. Güvenlik açısından, servisler ve modüller kapsüllenmiş olmalı, hassas veriler DOM üzerinden doğrudan paylaşılmamalıdır.
📊 Referans Tablosu
| Angular Element/Concept | Description | Usage Example |
|---|---|---|
| NgModule | Bir Angular modülünü tanımlar | @NgModule({ declarations: [AppComponent] }) |
| declarations | Modüle ait bileşenlerin listesi | declarations: [HeaderComponent, UserListComponent] |
| imports | Diğer modülleri içe aktarır | imports: [BrowserModule, FormsModule] |
| providers | Modülde kullanılacak servisleri sağlar | providers: [UserService] |
| bootstrap | Uygulamanın başlangıç bileşeni | bootstrap: [AppComponent] |
Modüllere giriş ile Angular uygulamalarını yönetilebilir parçalara ayırmayı öğrendiniz. Bu sayede veri akışını ve durum yönetimini etkili şekilde kontrol edebilirsiniz. Bir sonraki adım olarak feature modüller, lazy loading ve shared modüller konularını inceleyebilirsiniz. Modülleri doğru şekilde kullanmak, uygulamanın ölçeklenebilirliğini ve performansını artırır. Angular dökümantasyonu ve online eğitim kaynakları, ileri seviye öğrenme için faydalıdır.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek