Angular’ın Felsefesi ve Paradigması Angular bir “framework"tür, bir “library” değil. Bu şu anlama gelir: Ne yapman gerektiğini değil, nasıl yapman gerektiğini söyler. Bir yapı ve düzen silsilesi sunar. Geliştirici özgürlüğünü azaltır ama büyük ölçekli projelerde tutarlılık, test edilebilirlik ve bakım kolaylığı sağlar. Paradigması Component-Based Architecture (React ile benzer) Declarative Template Syntax (HTML içinde Angular’ın syntax’ı kullanılabilir, bildiğin template engine işte) Two-Way Data Binding (Kısaca UI ile JS arasına kablo çekmişler, değişkende bir değişiklik olunca anında UI değişiyor; aynı şekilde UI’da bir değişiklik olunca değişken güncelleniyor gibi bir şey) Dependency Injection (Bağımlılık sokuşturma) RxJS ile Reactive Programming (Kısaca bir veri kaynağında bir değişiklik olunca bu otomatik bir zincirleme reaksiyonu tetikliyor, bir şeyler yapılıyor.…

Angular CLI NodeJs üzerinde çalışır öncelikle NodeJs kurmalı. npm install -g @angular/cli cd ~/Projects # or... ng new my-app Bir kaç soru soracak sistem tasarımına göre bunlara cevap ver. ng serve --port 4200 Hayırlı olsun Angular ayağa kalkmış olmalı. Angular CLI komutları hakkında bilgi almak istersen ng help komutunu kullan. …

Angular ile yeni bir component oluşturmak için şu komutu verirsin ng generate component first or ng g c first bu kadar :)…

Bir düşünelim: HTML temelde birr takım verinin semantik şekilde gösterilemsinden ibaret. Bir noktada bu statik yapıya takla attrmak istiyorsun. “Bu elementi sadece bazı durumlarda göster”, “Şuna tıklandığında şu davranış tetiklensin”, “Şu div’i mavi yap ama bazı senaryolarda yeşil olsun” falan diyorsun. Bir noktada bu davranışların soyutlanması icap ediyor. Yani sadece ne göreceğini değil, nasıl davranacağını da kontrol etmek istiyorsun. Bu meta programlama dediğimiz yaklaşımın ilk adımıdır: “Kodu kodla şekillendirme işi”…

Angular Service Nedir? Angular Service dediğimiz şey, uygulamada ortaklaşa kullanılan işleri ve verileri tek bir yerde toplayan TypeScript sınıflarıdır. Misal: API’den veri çekmek Bileşenler arasında veri paylaşmak Ortak bir hesaplama, filtreleme, validasyon işlemini yapmak gibi işler için service yazarsın. Böylece aynı kodu her component’te yeniden yazmazsın. Ne Diye Service Denen Zımbırtıları Kullanıyoruz? Bir örnek: Hem AComponent hem BComponent aynı veriyi kullanmak istiyor. Gidip her birine ayrı ayrı veri koyarsan kopukluk olur.…

Pİie Nedir? Neden Vardır? Şöyle düşün: Bir değerin ham hali ile gösterilecek hali genellikle aynı değildir. Tarih formatı farklı gösterilsin istersin. Sayının sonuna TL, $ gibi birim gelsin istersin. Tüm harfleri büyük/küçük yapmak istersin. listeyi filtrelemek, slice etmek istersin. Bunların hepsini component içinde yapmak mümkün. Ama zamanla kod şişer, tekrar eder, okunmaz hale gelir. Angular burada şöyle der: Veri değişmeyecek. Sadece görüntüsü değişecekse, o zaman bunu HTML’ de hallet. Bu yaklaşımın adı: Pipe…

Guard Nedir? Neden Var? Şöyle düşün: Bir apartman giriş kapısı var ama herkese açık değil. Kapıda bir güvenlik görevlisi var ve sana sorular soruyor: Kimsin? Giriş iznin var mı? Bu kata çıkabilir misin? Bu daireye özel yetkin var mı? İşte bu Angular Gaurd tam olarak bu işi yapar. Uygulamanın rotaları arasında geçiş yapılırken kim geçebilir, kim geçemez sorularına cevap verir. Guard Ne İş Yapar? Angular’daki Router sistemi sayesinde sayfalar arasında geziniriz (/login, /dashboard, /admin vs).…

Angular’da Bileşenler Konuşur mu? Bileşenlerinizi oluşturuyorsunuz: AppComponent NavbarComponent UserCardComponent TodoListComponent Ama bir sorun var: Bunlar yalnızca görüntü mü veriyor, yoska birbirleriyle konuşabiliyorlar mı? Cevap: Evet konuşabilirler. Ama sadece belirli yollarla. Angular’ın Felsefesi: Tek Yönlü Veri Akışı Angular’da veri akışı: Parent ➡️ Child Yani üst bileşen, alt bileşene veri gönderir. Tersini yapmak istersen, child bileşen sadece bir event fırlatabilir. “Benim içimde bir şey oldu, haberin olsun” der. Bu mekanizma için 2 araç kullanırız:…

Neden Kodu Parçalamak Yetmez? Diyelim ki bir bileşen, API’den veri çekiyor: export class UserComponent { constructor() { fetch('https://api.example.com/users') .then(res => res.json()) .then(data => this.users = data); } } Çalışıyor mu? Evet. Ama test edilebilir mi? Hayır. Başka yerde tekrar kullanılabilir mi? Hayır. API değişirse ne olacak? Her yeri mi değiştireceğiz? Evet. Yani: felaket. İşte bu yüzden yazılım mühendisi emmiler şöyle der: Bileşenler ihtiyaçlarını kendi üretmemeli, dışarıdan almalı. Dependency Injection Nedir? Dependency Injection, bir sınıfın ihtiyaç duyduğu şeyleri (servis, veri, yapı) kendi içinde üretmek yerine, dışarıdan alması prensibidir.…

Angular’da API ile Konuşmak: HttpClient Bir frontend uygulaması coğu zaman tek başına bir frontend değildir. Backend ile konuşur, veri çeker, gönderir, günceller. Angular’da bu işi yapmak için HttpClient servisi kullanılır. Angular’da HTTP demek, HttpCLient demektir. HttpClient Nedir? Angular bize @angular/common/http paketiyle gelen HttpClient sınıfını sunar. Bununla şunları yapabilirsin: GET, POST, PUT, DELETE, gibi HTTP istekleri atmak Header, query param, body gibi seçenekler eklemek RxJS sayesinde asenkron istekleri yönetmek Interceptor’ larla istek öncesi/sonrası işlemler eklemek Ama önce HttpClientModule’ ü app module’e dahil etmelisin:…