Uluslararasılaştırma (i18n)
Uluslararasılaştırma (i18n), Angular uygulamalarında farklı dilleri ve kültürel biçimleri destekleyebilmek için kullanılan güçlü bir özelliktir. Modern web uygulamaları, global kullanıcı kitlesine hizmet ettiği için çoklu dil desteği artık bir lüks değil, zorunluluk haline gelmiştir. Angular, yerleşik i18n modülü sayesinde metinlerin, tarihlerin, sayısal değerlerin ve para birimlerinin kolayca yerelleştirilmesini sağlar.
Bir Angular uygulamasında i18n, bileşen tabanlı düşünce yapısına sıkı sıkıya bağlıdır. Her bileşen, kullanıcı arayüzü metinlerini i18n etiketleriyle işaretleyebilir. Bu sayede çeviri dosyaları (messages.xlf, messages.json vb.) oluşturularak dinamik dil değişimi yönetilebilir. Uygulamanın durum yönetimi (state management) ve veri akışı (data flow) içinde bu çeviri verileri merkezi bir servis aracılığıyla bileşenlere aktarılır.
Bu bölümde okuyucu, Angular’ın i18n mekanizmasının nasıl çalıştığını, çeviri dosyalarının nasıl oluşturulup yönetildiğini ve bileşen yaşam döngüsü (lifecycle) içerisinde uluslararasılaştırmanın nasıl entegre edileceğini öğrenecektir. Ayrıca performans optimizasyonu, yeniden kullanılabilir bileşen tasarımı ve en iyi uygulama standartlarına uygun bir i18n altyapısı kurmayı da keşfedecektir.
Temel Örnek
typescript// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
bootstrap: [AppComponent]
})
export class AppModule { }
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
userCount = 3;
}
// app.component.html
<h1 i18n="@@welcomeMessage">Uygulamamıza Hoş Geldiniz!</h1>
<p i18n="@@userCountMessage">Şu anda {{ userCount }} kullanıcı çevrimiçi.</p>
// i18n/messages.en.xlf (İngilizce çeviri) <trans-unit id="welcomeMessage"> <target>Welcome to our Application!</target> </trans-unit> <trans-unit id="userCountMessage"> <target>Currently, there are {{ userCount }} users online.</target> </trans-unit>Yukarıdaki örnek, Angular’da i18n kullanımının temelini göstermektedir. i18n özniteliği, Angular derleyicisine bu metinlerin çeviri dosyalarına aktarılması gerektiğini belirtir. Bu örnekte app.component.<a href="/tr/html/" class="smart-link">html</a> dosyasındaki iki metin, messages.en.xlf dosyasına alınır. @@welcomeMessage ve @@userCountMessage kimlikleri, çevirilerin yönetimini kolaylaştırır.
Angular derleme sürecinde ng extract-i18n komutu kullanılarak metinler otomatik olarak bir XLIFF dosyasına çıkarılır. Daha sonra çeviriler eklenip, angular.json içerisinde uygun dil yapılandırmaları tanımlanır. Bu yapı, bileşen tabanlı düşünmeyi destekler çünkü her bileşen kendi içeriğini i18n etiketleriyle bağımsız olarak yönetebilir.
Durum yönetimi açısından, uygulamanın dili bir servis aracılığıyla yönetilebilir. Bu servis, kullanıcı tercihlerini depolayarak veri akışını (data flow) düzenler. Ayrıca yaşam döngüsü (lifecycle) içinde ngOnInit aşamasında çevirilerin yüklenmesi sağlanabilir. Bu örnek, Angular’ın güçlü şablon derleme yapısı ve statik analiz yetenekleri sayesinde gereksiz yeniden render işlemlerinden (unnecessary re-renders) kaçınarak performansı artırır.
Pratik Örnek
typescript// translation.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class TranslationService {
private currentLang = new BehaviorSubject<string>('tr');
currentLang$ = this.currentLang.asObservable();
changeLanguage(lang: string) {
this.currentLang.next(lang);
localStorage.setItem('lang', lang);
}
getLanguage(): string {
return localStorage.getItem('lang') || 'tr';
}
}
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { TranslationService } from './translation.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
lang: string = 'tr';
constructor(private translationService: TranslationService) {}
ngOnInit() {
this.lang = this.translationService.getLanguage();
}
changeLang(lang: string) {
this.translationService.changeLanguage(lang);
window.location.reload();
}
}
// app.component.html
<div>
<button (click)="changeLang('tr')">Türkçe</button>
<button (click)="changeLang('en')">English</button>
</div>
<h1 i18n="@@greeting">Merhaba, Angular Kullanıcısı!</h1>
<p i18n="@@instruction">Dili değiştirmek için butonlara tıklayın.</p>Bu gelişmiş örnekte, uygulamanın dili dinamik olarak değiştirilebilmektedir. TranslationService, dili merkezi olarak yöneten bir durum (state) yöneticisi görevi görür. BehaviorSubject kullanımı, bileşenler arasında veri akışını (data flow) reaktif biçimde sağlar.
Kullanıcı dil tercihi localStorage içinde saklanarak uygulama yeniden yüklendiğinde tercih edilen dil korunur. AppComponent, bileşen yaşam döngüsünde (ngOnInit) geçerli dili yükler ve çevirilerin buna göre uygulanmasını sağlar. Bu mimari, yeniden kullanılabilir bileşenlerin (reusable components) farklı dillerde tutarlı biçimde çalışmasını kolaylaştırır.
Bu yaklaşım ayrıca performans açısından verimlidir; çünkü yalnızca dil değiştiğinde DOM yeniden işlenir. Angular’ın i18n mekanizması derleme zamanında çalıştığından, çalışma zamanı yükü minimize edilir. Böylece kullanıcı deneyimi kesintisiz olur.
Angular en iyi uygulamaları ve yaygın hatalar:
Uluslararasılaştırma uygularken, tüm metinleri şablonlarda i18n özniteliği ile işaretlemek esastır. Bu, otomatik çeviri çıkarımını kolaylaştırır. TranslationService gibi merkezi bir yapı, durum yönetimini düzenli hale getirir.
Kaçınılması gereken hatalar arasında doğrudan bileşenler arası veri aktarımı (prop drilling), gereksiz bileşen yeniden render’ları (unnecessary re-renders) ve state mutasyonları yer alır. Angular’da reaktif programlama paradigması (RxJS, BehaviorSubject) kullanmak, bu tür hataları azaltır.
Sorun giderme sürecinde, ng extract-i18n çıktısını kontrol etmek, eksik veya hatalı etiketleri tespit etmede yardımcı olur. Performans açısından, gereksiz çeviri dosyalarının yüklenmemesine dikkat edilmelidir. Güvenlik bağlamında ise, dinamik içeriklerin (örneğin kullanıcı girdilerinin) çeviri içinde kullanılmasında bypassSecurityTrustHtml gibi Angular güvenlik API’leri dikkatle kullanılmalıdır. Bu adımlar, sürdürülebilir ve güvenli i18n altyapısının temelini oluşturur.
📊 Referans Tablosu
| Angular Element/Concept | Description | Usage Example |
|---|---|---|
| i18n attribute | Metinleri çeviri için işaretler | <h1 i18n="@@header">Başlık</h1> |
| TranslationService | Merkezi dil yönetimini sağlar | this.translationService.changeLanguage('en') |
| XLIFF files | Çeviri metinlerinin tutulduğu dosya formatıdır | messages.en.xlf |
| BehaviorSubject | Durumun reaktif yönetimi için kullanılır | new BehaviorSubject('tr') |
| ng extract-i18n | Çeviri dosyalarını oluşturur | ng extract-i18n --output-path src/locale |
Özet ve sonraki adımlar:
Angular’da uluslararasılaştırma, global kullanıcı kitlesine ulaşmak için kritik bir adımdır. Bu eğitimde, i18n etiketleriyle metinlerin işaretlenmesini, çeviri dosyalarının yönetimini ve dinamik dil değişimini nasıl uygulayacağınızı öğrendiniz.
Bu beceriler, modüler ve yeniden kullanılabilir bileşenlerin çok dilli desteğini kolaylaştırır. Gelişmiş uygulamalarda bu yapı, kullanıcı tercihleriyle entegre edilebilir ve performans odaklı hale getirilebilir.
Bir sonraki adım olarak Angular’ın Localization (LOCALE_ID) sistemini, üçüncü parti kütüphanelerle (ngx-translate) i18n entegrasyonunu ve dinamik içeriklerin güvenli biçimde çevrilmesini incelemeniz önerilir.
Bu bilgiler, profesyonel düzeyde, sürdürülebilir ve erişilebilir Angular uygulamaları geliştirmenize katkı sağlar.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek