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

var myModule = angular.module('myModule', []);
var i18nApp = angular.module("i18nApp", ['pascalprecht.translate']);

i18nApp.config(['$translateProvider',
  function($translateProvider) {
    $translateProvider.translations('en', {
      'nav.button.home': 'Home',
      'nav.button.about': 'About Us',
      'nav.button.contact': 'Contact',
      'option.choose.lang': 'Choose language',
      'app.title.i18n.application': 'i18n Application'
    });

    $translateProvider.translations('tr', {
      'nav.button.home': 'Anasayfa',
      'nav.button.about': 'Hakkkımızda',
      'nav.button.contact': 'İletişim',
      'option.choose.lang': 'Dil seçiniz',
      'app.title.i18n.application': 'i18n Uygulaması'
    });

    $translateProvider.use("en");

  }
]);

  • 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


  

{{appTitle | translate}}


  • {{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/

Hiç yorum yok: