30 Aralık 2014 Salı

AngularJS - i18n

Hazırlayacağımız web uygulamasında yerelleştirme sıkça istenen özelliklerden biridir. Metin tercümesi, tarih, zaman, para birimi vs. bunlardan bazılarıdır. Ben bu girdide metin tercümesinin nasıl yapılacağından bahsedeceğim.
Angular'da bu işi yapmak için ben angular-translate'i öneririm. Kullanımı oldukça basit. Aşağıda yer alan örnekte de uygulamanızda nasıl kullanabileceğinizden kısaca bahsedeceğim.
Burada .js ve html kodunun sadece bir kısmına değineceğim. Uygulama üzerinde buradan çalışabilirsiniz.

script.js

  • angular-translate script'ini html'imize ekledikten sonra,istenen metinlerin tercüme edilebilmesi için 'pascalprecht.translate' şeklinde modülümüze bağımlılık olarak ekliyoruz.
  • i18nApp.config(['$translateProvider', şeklinde $translateProvider'i config fonksiyonuna inject ediyoruz.
  • $translateProvider.translations şeklinde ise; her bir dile karşılık gelecek metinleri key: value çifleri şeklinde tanımlıyoruz. Dikkat edecek olursak: 'nav.button.home' text key'i 'en' için 'Home' value olarak tanımlanmışken; 'tr' için 'Anasayfa' şeklinde tanımlanmıştır.
  • $translateProvider.use("en"); şeklinde ise öntanımlı dil olarak 'en' kullanacağını belirtiyoruz. Mevcut kullanılan dili öğrenmek için ise $translateProvider.use(); şeklinde bir çağırım yeterli olacaktı.

app.html

  • {{languageOption.text | translate}} Tercüme için dikkat edilecek olan nokta burası. Bind ettiğimiz $scope değişkeninin yanına | translate şeklinde bir ekleme yapılarak ilgili metnin tercüme edilebilir olduğunu belirtiyoruz
1. http://angular-translate.github.io/

1 yorum:

Inwizards Incorporation dedi ki...

very nice blogs!!! i have to learning for lot of information for this sites...Sharing for wonderful information about the web design and web development.Thanks for sharing this valuable information to our vision. You have posted a trust worthy blog keep sharing.
Hire Angularjs Developer