Google tarafından desteklenen, TypeScript tabanlı, büyük ölçekli ve kurumsal uygulamalar geliştirmek için tasarlanmış kapsamlı bir framework.
Angular tamamen TypeScript ile yazılmıştır. Güçlü tip kontrolü ve gelişmiş IDE desteği sunar.
Gelişmiş bir DI sistemine sahiptir. Servislerin ve bileşenlerin test edilebilirliğini ve modülerliğini artırır.
Asenkron işlemleri yönetmek için reaktif programlama yaklaşımını ve RxJS kütüphanesini kullanır.
NgModules ile uygulamayı mantıksal modüllere ayırarak lazy loading gibi performans avantajları sağlar.
Güçlü komut satırı aracı (CLI) ile proje oluşturma, test etme, derleme ve kod üretimi işlemlerini kolaylaştırır.
[(ngModel)] direktifi sayesinde görünüm (UI) ile veri modeli arasında çift yönlü veri bağlamayı destekler.
Angular'ın güçlü şablon (template) yeteneklerini gösteren örnek. Interpolation {{ }}, Property Binding [prop] ve Event Binding (event) içerir.
Merhaba, Ziyaretçi!
import { Component } from '@angular/core';
@Component({
selector: 'app-user-profile',
template: `
<div class="card">
<h4>Kullanıcı Bilgileri</h4>
<!-- Interpolation -->
<p>Merhaba, <strong>{{ userName }}</strong>!</p>
<!-- Two-way Data Binding -->
<input [(ngModel)]="userName" placeholder="Adınız" />
<!-- Event Binding ve Property Binding -->
<button (click)="toggleStatus()" [class.active]="isActive">
{{ isActive ? 'Aktif' : 'Pasif' }} (Durumu Değiştir)
</button>
</div>
`
})
export class UserProfileComponent {
userName: string = 'Ziyaretçi';
isActive: boolean = false;
toggleStatus() {
this.isActive = !this.isActive;
}
}Servislerin bileşenlere nasıl enjekte edildiğini gösteren bir örnek. DI sayesinde modüller arası bağımlılık azalır.
Uygulama çapında loglama yapar.
import { Injectable, Component } from '@angular/core';
// 1. Servis Tanımı
@Injectable({
providedIn: 'root'
})
export class LoggerService {
log(msg: string) {
console.log(new Date().toLocaleTimeString() + ': ' + msg);
}
}
// 2. Servisi Kullanan Bileşen
@Component({
selector: 'app-component-a',
template: `<button (click)="doAction()">Bileşen A'dan Log</button>`
})
export class ComponentA {
// Dependency Injection (DI) ile servis enjekte ediliyor
constructor(private logger: LoggerService) {}
doAction() {
this.logger.log('Bileşen A çalıştı.');
}
}Bileşenlerin yaşam döngüsü hook'larını inceleyin. Aşağıdaki aşamalara tıklayarak açıklamalarını görün.
import { Component, OnInit, OnDestroy, OnChanges, SimpleChanges, Input } from '@angular/core';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-lifecycle',
template: `<p>Sayaç: {{ count }}</p>`
})
export class LifecycleComponent implements OnInit, OnChanges, OnDestroy {
@Input() count: number;
private timerSub: Subscription;
ngOnChanges(changes: SimpleChanges) {
console.log('Count değişti:', changes.count.currentValue);
}
ngOnInit() {
console.log('Bileşen başlatıldı.');
// Veri çekme veya abonelik başlatma
}
ngOnDestroy() {
console.log('Bileşen yok ediliyor.');
// Aboneliği sonlandır (Memory leak önlemek için)
if (this.timerSub) {
this.timerSub.unsubscribe();
}
}
}Angular Pipes, şablon içinde veriyi formatlamak için kullanılır. Vanilla JS ile simüle edilmiştir.
import { Component } from '@angular/core';
@Component({
selector: 'app-pipes-demo',
template: `
<div>
<h4>Orijinal Metin: {{ text }}</h4>
<!-- Metin dönüştürme pipes -->
<p>Uppercase: {{ text | uppercase }}</p>
<p>Titlecase: {{ text | titlecase }}</p>
<!-- Sayı formatlama pipes -->
<p>Para Birimi: {{ amount | currency:'USD' }}</p>
<p>Tarih: {{ today | date:'dd.MM.yyyy' }}</p>
</div>
`
})
export class PipesDemoComponent {
text: string = 'angular pipes harika!';
amount: number = 1250.5;
today: Date = new Date();
}