Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
Angular Nedir, Neden Var? Bir Framework'ün Varlık Sebebi
Angular tam olarak nedir, neden var ve hangi problemi çözüyor? Framework ile library farkını, TypeScript zorunluluğunu, ne zaman doğru seçim olduğunu ve serinin nasıl ilerleyeceğini anlatıyoruz.
Angular Kurulumu ve İlk Proje: Ortamı Sıfırdan Hazırlamak
nvm ile Node 16'yı ve Angular CLI 12'yi kuruyoruz, ilk projeyi oluşturuyoruz ve app.module.ts'ten environments klasörüne kadar her dosyanın ne işe yaradığını tek tek gezip görüyoruz.
Angular'da İlk Component: Decorator, Selector ve Template Anatomisi
Angular component'inin anatomisini söküyoruz: @Component decorator'ı, selector, template ve stiller. CLI ile component üretip component ağacını ve style encapsulation'ı görüyoruz.
Angular NgModule Nedir? declarations, imports, exports ve Feature Module
Angular 12 uygulamasının iskeleti NgModule'ü açıyoruz: declarations, imports, exports, providers, bootstrap, main.ts'teki başlatma, BrowserModule ile CommonModule farkı, feature ve shared module.
Angular'da Data Binding: Interpolation, Property, Event ve Two-Way Binding
Angular 12'de class ile template arasındaki bütün köprüler: interpolation, property, attribute, class ve style binding, event binding ve $event, template reference variable ve [(ngModel)].
Angular Built-in Directive'leri: *ngIf, *ngFor, ngSwitch, ngClass ve Kendi Directive'in
Angular 12'nin hazır directive'leri: *ngIf ve else, *ngFor ve trackBy, ngSwitch, ngClass, ngStyle, ng-container, yıldızın arkasındaki ng-template ve HostListener ile kendi attribute directive'in.
Angular'da Component İletişimi: @Input, @Output, @ViewChild ve ng-content
Angular 12'de component'ler nasıl konuşur: @Input ile parent'tan child'a veri, @Output ve EventEmitter ile geri bildirim, kendi two-way binding'in, @ViewChild ve ng-content ile content projection.
Angular Lifecycle Hook'ları: ngOnInit'ten ngOnDestroy'a Bir Component'in Hayatı
Constructor ile ngOnInit farkı, SimpleChanges ile ngOnChanges, ViewChild'ın hazır olduğu ngAfterViewInit ve interval temizleyen ngOnDestroy. Tüm hook'ların sırasını loglarla görüyoruz.
Angular Pipe'ları: Tarih, Para Birimi, Türkçe Locale ve Custom Pipe Yazmak
date, currency, number ve titlecase gibi hazır pipe'lar, parametre ve zincirleme kullanım, registerLocaleData ile Türkçe format, custom pipe yazmak ve pure/impure farkının performansa etkisi.
Angular Service ve Dependency Injection: providedIn, Injector Ağacı ve Provider'lar
Service neden var, providedIn: 'root' ile singleton, constructor injection, component seviyesinde providers ve hiyerarşik injector, useClass/useValue/useFactory ve InjectionToken ile config sağlamak.
Angular'da RxJS'e Giriş: Observable, Operatörler, BehaviorSubject ve async Pipe
Observable ile Promise farkı, of/from/interval/fromEvent, map, filter, debounceTime ve switchMap ile arama kutusu, BehaviorSubject ile service'te state, async pipe ve takeUntil ile memory leak önleme.
Angular HttpClient ile API İstekleri: GET, POST, Hata Yönetimi ve Interceptor
Angular 12'de HttpClient ile API'ye GET, POST, PUT ve DELETE istekleri atıyoruz. Tipli response, HttpParams, catchError ve retry ile hata yönetimi, class-based interceptor ve environment ayarı.