AngularJS - Angular-Translate Kullanımı

Angular-Translate Kullanımı adlı bu konuda web sitelerinin nasıl çoklu dil desteği sağlandığını anlatacağım. Cok dil destekli web siteler adlı makalemde web sitelerine nasıl çok dil desteği sağlanacağını anlatmıştım. Burada ise bu yöntemlerden bir tanesi olan Angular Translate anlatılacaktır.
Web sitenizde framework olarak AngularJS kullandıysanız ve sitenize çoklu dil desteği eklemek istiyorsanız doğru yerdesiniz. AngularJS kullanmadıysanız da, sunduğu avantajlardan dolayı, çoklu dil desteği için en ideal ve profesyonel çözüm Angular Translate kullanmaktır. Aşağıdakileri adımları uygulayarak çok kısa sürede web sitenize çoklu dil desteği vermiş olacaksınız.

Hadi başlayalım...
İlk Önce gerekli paketleri indirelim.
Angular Translate Kütüphanesi buradan indirebilirsiniz.
Dil dosyalarını statik dosyalardan, yani json dosyalarından çağırmak için  buradaki kütüphaneyi indirebilirsiniz
Eğer tercüme verilerini, dilin hatırlanması için seçili dilin Cookilerde tutmak isterseniz buradan angular-translate'nin sağladığı Cookie kütüphanesini buradan indirebilirsiniz.

Bundan sonra kendi site klasör yapınıza göre bu kütüphaneleri web sitenizin bulunduğu dizinlere ekleyin. Son bir işlem ise index.html dosyasına angular-translate kütüphanelerinin ekleme sırasıdır. Siz buradaki sıralamayı kullanarak, kütüphaneleri kendi klasör yapınıza uygun olarak ekleyebilirsiniz. Birdaha belirtmek istiyorum ki bu sadece kütüphane açısınıdan bağımlılıkların giderilmesi için kütüphanelerin doğru kullanım sıralamasıdır.

<script src="library/js/angular.min.js"></script>
<script src="library/js/angular-cookies.min.js"></script>
<script src="library/js/angular-route.min.js"></script>
<script src="library/js/angular-translate/angular-translate.min.js"></script>
<script src="library/js/angular-translate/angular-translate-loader-static-files.min.js"></script>
<script src="library/js/angular-translate/angular-translate-storage-cookie.min.js"></script>

Bundan sonra angular-translateyi modül yapımıza ekleyebiliriz.Bunun için aşağıdaki kodları kullanabilirsiniz.

var myApp = angular.module('myApp', [
    'ngRoute',
    'ngCookies',
    'pascalprecht.translate',
    'ui.bootstrap'
]);

Burada angular translate için olan module "pascalprecht.translate" dir.

Bir diğer önemli olan nokta, tercüme verilerini nasıl çağıracağınız. İdeal ve profesyonel çözümler için her dil dosyasını ayrı-ayrı klasörde tutmak önerilir. Buradaki yapıda da bunun üzerine kuruludur. Örneğin türkçe ve ingilizce is dilleriniz "dildosyalari" diye klasör açın buraya locale-tr, locale-en diye iki tane json dosyası ekleyin.
Bundan sonra aşağıdaki yapıyı kullanarak dil dosyalarını çağırabilirsiniz.Aynı zamanda aşağıdaki kod yapınızda cookie ayarları da vardır.

myApp.config(['$translateProvider', function ($translateProvider) {
    $translateProvider.useStaticFilesLoader({
        prefix: '../dildosyalari/locale-',
        suffix: '.json'
    });
    $translateProvider.preferredLanguage('en');
    $translateProvider.useCookieStorage();
}]);

Bundan sonra tek bir işlem kaldı. O da dil butonları için controller eklemek. Aşağıdaki kod yapısını kullnarak bu işlemi yapabilirsiniz.

myApp.controller('langController', function ($scope, $translate) {
    $scope.switchLanguage = function (languageKey) {
        $translate.use(languageKey);
    };
});

İşte bu kadar... Angular Translate ile, web sitenizin çok dil desteği için gerekli altyapıyı kurmuş olduk. Bundan sonra önemli olan diğer nokta bu altyapıyı kullanmaktır. Bunun için de yapmanız gereken iki işlem var. Bunlarda birinci dil butonları, diğeri tercüme değişkenlerinin html veta javascript içinde tanımlanması ve bu değişkenlerin dil dosyalarında tutulmasıdır.

Dil Butonları için aşağıdaki yapıyı kullanabilirsiniz. Burada birçok dil için örnek verdim.

<button class="language-single-button" ng-click="switchLanguage('az')">AZ <img src="assets/flag/Azerbaijan.png" class="img-responsive" /></button>
<button class="language-single-button" ng-click="switchLanguage('tr')">TR <img src="assets/flag/Turkey.png" class="img-responsive" /></button>
<button class="language-single-button" ng-click="switchLanguage('en')">EN <img src="assets/flag/England.png" class="img-responsive" /></button>
<button class="language-single-button" ng-click="switchLanguage('ru')">RU <img src="assets/flag/Russia.png" class="img-responsive" /></button>
<button class="language-single-button" ng-click="switchLanguage('fr')">FR <img src="assets/flag/France.png" class="img-responsive" /></button>
<button class="language-single-button" ng-click="switchLanguage('es')">ES <img src="assets/flag/Spain.png" class="img-responsive" /></button>

Diğer önemli husus ise html içinde Angular Translate nasıl kullanılacak. Bunun için örneğin menu yapınız aşağıdaki şekilde olabilir. Burada da iki yapı kullanabilirsiniz. Directiveler ve filterler. Benim tercihim aşağıdaki gibi filterlerden yana.

<ul class="nav navbar-nav custom-menu">
     <li><a href="#/main" class="custom-menu-item">{{"ld_homepage" | translate}}</a></li>
     <li><a href="#/lahij" class="custom-menu-item">{{"ld_lahic" | translate}}</a></li>
     <li><a href="#/service" class="custom-menu-item">{{"ld_service" | translate}}</a></li>
     <li><a href="#/aboutus" class="custom-menu-item">{{"ld_aboutus" | translate}}</a></li>
     <li><a href="#/contact" class="custom-menu-item">{{"ld_contact" | translate}}</a></li>
</ul>

En son ise değişkenlerimizi json dosyaramıza ekliyoruz. Yukarıdaki menülere göre aşağıdaki gibi bir yapı olacaktır. Sadece türkçe sayfası için örneği veriyorum. Siz aynı değişkenleri, diğer dil dosyalarında da oluşturup tercüme edebilirsiniz.

locale-tr içinde
{
  "ld_homepage": "Anasayfa",
  "ld_lahic": "Lahıc",
  "ld_service": "Hizmetler",
  "ld_aboutus": "Hakkımızda",
  "ld_contact": "İletişim"
}

İşte Bu Kadar....Kolay Gelsin
Sorularınız olursa lütfen sormaktan çekinmeyin.