https://ozgurvurgun.github.io/angular/Recent content in Angular on @ozgurvurgunHugo -- gohugo.ioen-usozgurvurgunSun, 27 Jul 2025 00:00:00 +0000https://ozgurvurgun.github.io/angular/1-what-is-angular/Tue, 15 Jul 2025 00:00:00 +0000https://ozgurvurgun.github.io/angular/1-what-is-angular/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.https://ozgurvurgun.github.io/angular/2-initially/Mon, 14 Jul 2025 00:00:00 +0000https://ozgurvurgun.github.io/angular/2-initially/ 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.https://ozgurvurgun.github.io/angular/3-first-component/Mon, 14 Jul 2025 00:00:00 +0000https://ozgurvurgun.github.io/angular/3-first-component/Angular ile yeni bir component oluşturmak için şu komutu verirsin ng generate component first or ng g c first bu kadar :)https://ozgurvurgun.github.io/angular/4-directive/Tue, 15 Jul 2025 00:00:00 +0000https://ozgurvurgun.github.io/angular/4-directive/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”https://ozgurvurgun.github.io/angular/5-service/Thu, 17 Jul 2025 00:00:00 +0000https://ozgurvurgun.github.io/angular/5-service/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.https://ozgurvurgun.github.io/angular/6-pipe/Wed, 23 Jul 2025 00:00:00 +0000https://ozgurvurgun.github.io/angular/6-pipe/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ı: Pipehttps://ozgurvurgun.github.io/angular/7-guard/Wed, 23 Jul 2025 00:00:00 +0000https://ozgurvurgun.github.io/angular/7-guard/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).https://ozgurvurgun.github.io/angular/8-componentler-arasi-veri-akisi/Wed, 23 Jul 2025 00:00:00 +0000https://ozgurvurgun.github.io/angular/8-componentler-arasi-veri-akisi/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:https://ozgurvurgun.github.io/angular/9-service-injection-ve-dependency-injection-felsefesi/Wed, 23 Jul 2025 00:00:00 +0000https://ozgurvurgun.github.io/angular/9-service-injection-ve-dependency-injection-felsefesi/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.https://ozgurvurgun.github.io/angular/10-angularda-api-istekleri-ve-httpclient-kullanimi/Fri, 25 Jul 2025 00:00:00 +0000https://ozgurvurgun.github.io/angular/10-angularda-api-istekleri-ve-httpclient-kullanimi/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:https://ozgurvurgun.github.io/angular/11-angular-forms-template-vs-reactive/Fri, 25 Jul 2025 00:00:00 +0000https://ozgurvurgun.github.io/angular/11-angular-forms-template-vs-reactive/Giriş: Form Nedir? Sadece Input mu? Form = Kullanıcıdan veri almak. Ama sadece <input /> koymakla iş bitmez. İhtiyacın olan şey: Validasyon (giriş kontrolü) Veri toplama Dinamik alanlar (birden fazla e-posta vs.) Submit işlemi Temizleme, resetleme Form state takibi (dirty, touched, valid…) İşte Angular burada iki yol sunar: Template-Driven ve Reactive Forms Angular’ın Bakışı: “Form bir bileşen değil, bir state’tir.” Bir input’a sadece veri bağlamazsın. Değeri ne? Değişti mi? Hata var mı?https://ozgurvurgun.github.io/angular/12-rxjs-ve-angularda-reaktif-programlama/Wed, 23 Jul 2025 00:00:00 +0000https://ozgurvurgun.github.io/angular/12-rxjs-ve-angularda-reaktif-programlama/Reaktif programlama Nedir? Şöyle düşün: Bir şey değiştiğinde, başka bir şey otomatik değişsin istiyorum Bu fikir temel olarak reaklam panosuna benzer. Panoya fiyatı asarsın, her yerde o fiyat görünür. Ama panoya yeni fiyatı yazdığında tüm afişler otomatik güncellenir. Buna veri akışına tepki verme yani reaktif olma denir. RxJS Nedir? RxJS, “Reactive Extensions for JavaSript” anlamına gelir. Yani: “JavaScript’e reaktif yetenek ekleyelim” projesidir. Angular, fromdan HTTP’ye router’dan event’lere kadar her şeyi Observable sistemiyle yönetir.https://ozgurvurgun.github.io/angular/13-lazy-loading/Wed, 23 Jul 2025 00:00:00 +0000https://ozgurvurgun.github.io/angular/13-lazy-loading/Lazy Loading Nedir? Lazy Loading, Türkçesiyle tembel yükleme, uygulamamızdaki bazı modülleri ilk başta yüklememek, sadece ihtiyaç duyulduğunda (örn. bir route ziyaret edildiğinde) yüklemek demektir. Ana fikir: “Her şeyi başta yükleme, kullanıcı neye tıklarsa onu getir.” Neden Lazy Loading? Angular projeleri büyüdükçe, bundle (paket) boyutu artar. Bu neye yol açar? İlk yükleme süresi uzar Kullanıcı daha uygulamayı görmeden bile MB’larca veri iner Özellikle mobil kullanıcılar için felaket olabilir Lazy Loading buna çare olur:https://ozgurvurgun.github.io/angular/14-signals/Sat, 26 Jul 2025 00:00:00 +0000https://ozgurvurgun.github.io/angular/14-signals/Angular Signals - Yeni Nesil Reaktivite Neden Böyle Bir Yapıya İhtiyaç Duyuldu? Angular uzun yıllardır reaktif programlama ihtiyaçlarını karşılamak için RxJS kütüphanesini kullanıyordu. Observable Subject pipe map switchMap subscribe unsubscribe gibi yapılar bu sistemin parçalarıydı. Ancak bu yapı: Öğrenilmesi karmaşık Hatalara açık Basit senaryolarda gereksiz yere ağır hale gelebiliyordu. Angular ekibi bu sebeple daha basit, daha doğal, daha az kodla daha çok şey yapılabilen bir yapı üzerinde çalıştı. Ve Signal ortaya çıktı.https://ozgurvurgun.github.io/angular/15-angular.json/Sun, 27 Jul 2025 00:00:00 +0000https://ozgurvurgun.github.io/angular/15-angular.json/Bu Dosya Nedir? angular.json, bir Angular projesinin yapılandırma dosyasıdır. Angular CLI, bu dosyaya bakarak: Projenin nerede başladığını Hangi derleyici ayarlarının kullanılacağını Build, test, lint, serve komutlarında ne yapılacağını Uygulama yollarını, stilleri, scriptleri gibi yüzlerce detayı öğrenir ve uygular. Bu dosya olmadan Angular CLI, projeyi nasıl çalıştıracağını bilemez. angular.json Nerede Bulunur? Her Angular projesinde, projenin kök dizininde bulunur: /app ├── src/ ├── angular.json ├── package.json ├── tsconfig.json angular.json’un Genel Yapısı { "$schema": ".https://ozgurvurgun.github.io/angular/16-zoneless-nedir/Sun, 27 Jul 2025 00:00:00 +0000https://ozgurvurgun.github.io/angular/16-zoneless-nedir/Angular deyince akla genelde component’ler, service’ler falan gelir ama içerde bir mimari var ki, senin haberin bile olmadan bütün uygulamanın kaderini etkiliyor: Zone.js Bu yazıda Zone.js nedir, ne iş yapar, neden Angular artık onsuz olmaya çalışıyor ve bu neye çare olabilir… hepsine tek tek gireceğiz. Zone.js Nedir? Kısaca: Zone.js, JavaScript’teki async olayları izleyen bir kütüphanedir. Yani sen setTimeout, fetch, Promise, addEventListener falan kullandığında, Angular’ın “bir şey oldu galiba” deyip yeniden UI güncellemesi yapmasını sağlar.https://ozgurvurgun.github.io/angular/17-internationalization-localization/Sun, 27 Jul 2025 00:00:00 +0000https://ozgurvurgun.github.io/angular/17-internationalization-localization/Uygulamanı yazdın, harika çalışıyor. Ama bir gün Product Manager gelip şöyle diyor: Yani uygulama çok güzel ama… bunu Almanca da yapabilir miyiz? Yani “Kullanıcıya Giriş Yap değil de Anmelden yazsın. Senin iç sesin: Hay aq… O kadar JSON’u kim yazacak, her yere this.text = translations[this.currentLang][“blabla”]; diye mi koyacağım Ama korkma dostum, Angular bu konuda çözümler sunmuş. Önce Temel Kavramları Oturtalım | Terim | Anlamı | | ------------------------------- | -------------------------------------------------------------------- | | Internationalization (i18n) | Uygulamanı çok dilli hale getirme hazırlığıdır.https://ozgurvurgun.github.io/angular/18-monorepo-nedir/Sun, 27 Jul 2025 00:00:00 +0000https://ozgurvurgun.github.io/angular/18-monorepo-nedir/Ne Bu Monorepo? Projeyi yazıyorsun, her şey yolunda. Sonra ekip büyüyor. Frontend bir yerde, backend başka yerde, ortak UI bileşenleri başka bir repo’da… Bir noktada kendini şöyle derken buluyorsun: Abi şu ui-kit’i güncelledim ama 3 farklı repo’da aynı şeyi elle publish’lemek zorundayım İşte burada Monorepo devreye giriyor. Monorepo = Tüm projelerini, kütüphanelerini, app’lerini tek bir Git deposunda toplamak. Tek repo. Tek hayat. Çok huzur (doğru kullanılırsa). Polyrepo vs Monorepo | Özellik | Polyrepo | Monorepo | | ------------------- | --------------------------- | ------------------------------ | | Kod yapısı | Her proje ayrı repo | Her şey tek repo içinde | | Versiyonlama | Her repo kendi içinde | Ortak versiyon yönetimi | | Ortak kod paylaşımı | Zor, publish gerekebilir | import ile direkt erişim | | CI/CD | Her repo için ayrı pipeline | Ortak config ile yönetilebilir | | Bağımlılık takibi | Dağınık | Merkezi | Ne Zaman Lazım Olur?