## Angular Nedir: Kurumsal Web Geliştirmenin Standartı **Angular**, Google tarafından geliştirilen ve bakımı yapılan, TypeScript tabanlı açık kaynaklı bir web uygulama çatısıdır (framework). Modern web dünyasında, özellikle büyük ölçekli ve karmaşık kurumsal uygulamalar geliştirmek için tercih edilen en güçlü araçlardan biridir. Angular, geliştiricilere **Single Page Application (SPA)** mimarisinde, yüksek performanslı ve sürdürülebilir uygulamalar inşa etmeleri için gerekli olan tüm araçları (routing, form yönetimi, HTTP istemcisi) kutudan çıktığı gibi sunar. Angular'ı diğer kütüphanelerden ayıran en temel özellik, bir kütüphane değil, tam teşekküllü bir platform olmasıdır. Bu rehberde, Angular ekosistemine adım atacak ve profesyonel bir geliştirme ortamının nasıl kurulacağını öğreneceğiz. ## Temel Kavramlar: Bileşen Tabanlı Mimari ve TypeScript Angular mimarisi, modülerlik ve yeniden kullanılabilirlik üzerine kuruludur. Uygulamanın her bir parçası birer **Component** (bileşen) olarak tasarlanır. - **TypeScript:** Angular, JavaScript'in üzerine inşa edilmiş olan TypeScript dilini kullanır. Statik tipleme, sınıflar ve arayüzler sayesinde kodun daha güvenli ve okunabilir olmasını sağlar. - **Modules (NgModules):** Uygulamanın mantıksal parçalarını bir araya getiren konteynerlerdir. - **Templates:** Bileşenin kullanıcı arayüzünü tanımlayan HTML dosyalarıdır. - **Metadata:** Angular'a bir sınıfın nasıl işlenmesi gerektiğini söyleyen dekoratörlerdir (Örn: `@Component`). | Kavram | Açıklama | | :--- | :--- | | Component | UI ve mantığı birleştiren temel yapı taşı | | Directive | DOM öğelerinin davranışını veya görünümünü değiştiren yapılar | | Service | Veri paylaşımı ve iş mantığı için kullanılan sınıflar | | Pipe | Veriyi şablonda görüntülemeden önce dönüştüren araçlar | ## Geliştirme Ortamının Hazırlanması ve Kurulum Angular ile geliştirmeye başlamadan önce sisteminizde **Node.js** ve **npm** (Node Package Manager) kurulu olmalıdır. Angular CLI (Command Line Interface), proje oluşturma, bileşen ekleme ve test süreçlerini otomatize eden kritik bir araçtır. ### 1. Angular CLI Kurulumu Terminalinizi açın ve aşağıdaki komutu çalıştırarak Angular CLI'yı küresel olarak yükleyin: ```bash npm install -g @angular/cli ``` ### 2. Yeni Bir Proje Oluşturma Kurulum tamamlandıktan sonra ilk projenizi şu komutla oluşturabilirsiniz: ```bash ng new ilk-angular-projem ``` > **Not:** Bu aşamada CLI size 'Routing' eklemek isteyip istemediğinizi ve hangi CSS formatını (CSS, SCSS, SASS) kullanacağınızı soracaktır. Başlangıç için 'Yes' ve 'SCSS' seçilmesi önerilir. ### 3. Uygulamayı Çalıştırma Proje klasörüne gidin ve yerel geliştirme sunucusunu başlatın: ```bash cd ilk-angular-projem ng serve --open ``` ## Bileşen (Component) Yapısını Anlamak Bir Angular bileşeni üç ana dosyadan oluşur: Mantık (TS), Görünüm (HTML) ve Stil (CSS/SCSS). `@Component` dekoratörü bu dosyaları birbirine bağlar. ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-merhaba', templateUrl: './merhaba.component.html', styleUrls: ['./merhaba.component.scss'] }) export class MerhabaComponent { baslik: string = 'Angular Dünyasına Hoş Geldiniz!'; } ``` ## Veri Bağlama (Data Binding) Teknikleri Angular, bileşen sınıfı ile şablon arasındaki veri iletişimini dört farklı yöntemle sağlar: ### 1. Interpolation (Ekleme) Class içerisindeki bir değişkeni HTML'de göstermek için kullanılır. ```html

{{ baslik }}

``` ### 2. Property Binding HTML elementlerinin özelliklerini dinamik olarak ayarlamak için kullanılır. ```html ``` ### 3. Event Binding Kullanıcı etkileşimlerini (tıklama, yazma vb.) yakalamak için kullanılır. ```html Kaydet ``` ### 4. Two-Way Binding Verinin hem class'tan HTML'e hem de HTML'den class'a çift yönlü akmasını sağlar. Genellikle formlarda kullanılır. ```html

Merhaba, {{ kullaniciAdi }}!

``` ## Direktifler (Directives) ile Dinamik İçerik Direktifler, DOM yapısını manipüle etmemizi sağlar. En yaygın kullanılan yapısal direktifler şunlardır: ### *ngIf Kullanımı Koşula bağlı olarak bir elementi DOM'a ekler veya çıkarır. ```html Lütfen giriş yapın. ``` ### *ngFor Kullanımı Bir liste üzerinde dönerek tekrarlayan elementler oluşturur. ```html

• {{ urun.ad }} - {{ urun.fiyat | currency }}

``` ## Servisler ve Bağımlılık Enjeksiyonu (Dependency Injection) Angular'da iş mantığını (business logic) ve veri çekme işlemlerini bileşenlerin dışında, **Service** yapılarında tutmalıyız. Bu, kodun test edilebilirliğini ve tekrar kullanılabilirliğini artırır. ```typescript // veri.service.ts import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class VeriService { getVeriler() { return ['Veri 1', 'Veri 2', 'Veri 3']; } } ``` Servisi bir bileşene enjekte etmek için constructor kullanılır: ```typescript // app.component.ts constructor(private veriService: VeriService) { this.liste = this.veriService.getVeriler(); } ``` ## Angular Routing: Sayfalar Arası Geçiş SPA uygulamalarında sayfa yenilenmeden farklı görünümler arasında geçiş yapmak için **Router** modülü kullanılır. ```typescript const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'hakkimizda', component: AboutComponent }, { path: 'urunler/:id', component: ProductDetailComponent } ]; ``` HTML tarafında ise `router-outlet` ve `routerLink` kullanılır: ```html ``` ## HTTP İstekleri ve API Entegrasyonu Angular, backend servisleri ile iletişim kurmak için `HttpClientModule` sunar. Bu modül RxJS tabanlı **Observables** yapısını kullanır. ```typescript import { HttpClient } from '@angular/common/http'; @Injectable() export class ApiService { constructor(private http: HttpClient) {} getUsers() { return this.http.get('https://api.example.com/users'); } } ``` ## Best Practices: Profesyonel Angular Geliştirme İpuçları 1. **Modüler Mimari:** Uygulamayı küçük, yönetilebilir özellik modüllerine (Feature Modules) bölün. 2. **Lazy Loading:** Tüm uygulamayı tek seferde yüklemek yerine, modülleri sadece ihtiyaç duyulduğunda yükleyerek açılış hızını artırın. 3. **OnPush Change Detection:** Performans için bileşenlerde `ChangeDetectionStrategy.OnPush` kullanmayı değerlendirin. 4. **Unsubscribe:** Bellek sızıntılarını önlemek için Observable aboneliklerini `ngOnDestroy` aşamasında mutlaka sonlandırın. 5. **Strict Typing:** TypeScript'in gücünden yararlanın, `any` tipini kullanmaktan kaçının. ## Sık Yapılan Hatalar - **DOM Manipülasyonu:** Doğrudan JavaScript veya jQuery ile DOM'a müdahale etmek Angular'ın state yönetimini bozar. Bunun yerine Renderer2 veya direktifleri kullanın. - **Büyük Bileşenler:** Tek bir bileşene binlerce satır kod yazmak sürdürülebilirliği yok eder. Bileşenleri atomik parçalara ayırın. - **Nested Subscriptions:** İç içe `subscribe` kullanmak yerine RxJS operatörlerini (switchMap, mergeMap) tercih edin. ## Performans Optimizasyonu Angular uygulamalarını optimize etmek için **Ivy** render motoru avantajlarından yararlanın. Ayrıca, `trackBy` fonksiyonunu `*ngFor` ile kullanarak liste güncellemelerinde DOM'un sadece değişen kısımlarının render edilmesini sağlayın. ```html

{{ item.name }}

``` ## Sık Sorulan Sorular (SSS) **1. Angular ve AngularJS arasındaki fark nedir?** AngularJS (v1.x) JavaScript tabanlıdır, Angular (v2+) ise tamamen yeniden yazılmış ve TypeScript tabanlı bir mimariye sahiptir. İkisi birbirinden tamamen farklıdır. **2. Angular öğrenmek için JavaScript bilmek şart mı?** Evet, Angular TypeScript kullansa da temel JavaScript (ES6+) kavramlarına hakim olmak öğrenme sürecini hızlandırır. **3. Angular SEO dostu mu?** Varsayılan olarak SPA'lar SEO zorlukları yaşayabilir ancak **Angular Universal** (Server-Side Rendering) kullanarak SEO uyumlu, hızlı yüklenen sayfalar oluşturulabilir. **4. RxJS nedir ve neden önemlidir?** RxJS, asenkron veri akışlarını yönetmek için kullanılan bir kütüphanedir. Angular'ın HTTP ve Event sisteminin kalbinde yer alır. **5. Küçük projeler için Angular uygun mu?** Angular oldukça kapsamlı bir framework olduğu için çok küçük projelerde gereksiz karmaşıklık yaratabilir; ancak ölçeklenebilirlik hedefleniyorsa her zaman iyi bir tercihtir. ## Özet ve Sonuç Angular, kurumsal düzeyde web uygulamaları geliştirmek için sunduğu disiplinli yapı, güçlü CLI desteği ve geniş ekosistemi ile rakipsizdir. Bu rehberde öğrendiğiniz temel kavramlar, kurulum adımları ve veri bağlama teknikleri, profesyonel bir Angular geliştiricisi olma yolundaki ilk sağlam adımlarınızdır. Unutmayın, Angular öğrenmek bir maratondur; pratik yaparak ve resmi dokümantasyonu takip ederek yetkinliğinizi artırabilirsiniz.