Angular Proje Yapısı ve Modüller: Kapsamlı Rehber

FrontEndLatest Software Developers 04/05/2025

📁 Angular Proje Dizini ve Temel Dosyalar

1. src/ Dizini: Angular Kaynak Kodları

Angular proje yapısının kalbi olan src/ dizini, tüm uygulama kodlarını barındırır. Profesyonel bir Angular geliştirme süreci için bu yapının iyi anlaşılması kritik öneme sahiptir.

🔹 src/app/ - Angular Bileşenleri

Angular component ve Angular service dosyaları burada bulunur
app.module.ts - Angular root module tanımı
app.component.ts - Angular root component mantığı

🔹 src/assets/ - Statik Dosyalar

Angular static files için özel dizin
/assets/ yoluyla erişim sağlanır

🔹 src/environments/ - Ortam Değişkenleri

Angular environment configuration ayarları

// Angular environment.ts örneği
export const environment = {
  production: false,  // Angular production mode
  apiUrl: 'http://localhost:3000'  // Angular API endpoint
};

📦 Angular Modülleri: Detaylı Rehber

1. Angular Modül (NgModule) Nedir?

Angular module yapısı, uygulama bileşenlerini mantıksal olarak gruplamak için kullanılır. NgModule decorator ile tanımlanır:

@NgModule({
  declarations: [AppComponent],  // Angular component declarations
  imports: [BrowserModule],      // Angular module imports
  bootstrap: [AppComponent]      // Angular bootstrap component
})
export class AppModule { }

2. Angular Modül Türleri

🔹 AppModule - Angular Root Module

Angular bootstrap işlemi için gerekli
Tüm uygulamanın giriş noktası

🔹 FeatureModule - Angular Lazy Module

Angular lazy loading için ideal yapı
Performans optimizasyonu sağlar

🔹 SharedModule - Angular Shared Components

Angular reusable components için kullanılır
Birden çok modülde paylaşılabilir

3. Angular Modül Yapılandırma Tablosu

Yapılandırma	Açıklama
declarations	Angular components, pipes ve directives
imports	Angular module imports - DI için gerekli
providers	Angular services - Dependency Injection
exports	Angular public API - Dışa açılan bileşenler
bootstrap	Angular root component - İlk yüklenen

🚀 İleri Düzey Angular Yapılandırması

1. Profesyonel Angular Klasör Yapısı

app/
├── core/ → Angular core services
├── shared/ → Angular shared components
├── features/ → Angular feature modules
│ ├── auth/ → Angular authentication
│ ├── admin/ → Angular admin dashboard
└── app-routing.module.ts → Angular lazy loading routes

2. Angular Performans İpuçları

Angular lazy loading ile modül bazlı yükleme
Angular tree shaking için doğru modül bölümleme
Angular change detection optimizasyonu

3. Angular SEO Best Practices

Angular universal ile server-side rendering
Angular meta tags dinamik yönetimi
Angular sitemap oluşturma

✅ Sonuç: Angular Proje Yapısı ve Modüller

Bu rehberde Angular proje yapısı ve NgModule kullanımı detaylı şekilde açıklandı. Angular best practices ile:

✔ Daha organize kod yapısı
✔ Daha yüksek performans
✔ Daha kolay ekip çalışması
✔ Daha iyi bakım yapılabilir

Angular geliştirme sürecinizde bu yapıyı uygulayarak profesyonel seviyeye ulaşabilirsiniz.

Bir sonraki yazıda görüşmek üzere! 😊