Ionic Framework ile Çoklu Dil Kullanımı

[RichmanTR]

Ionic kullanarak birden fazla dil desteğine sahip uygulama geliştirmek istiyorsanız, nasıl yapabileceğinizin cevabı burada.


Dinamik olarak dil değişikliklerini yapmak istediğimizde veritabanı üzerinden tutulan farklı alanlarda yapıldığı için, bu yazıda özellikle statik bulunan alanların nasıl çoklu dile uygun olarak yapacağımızı bu yazıda inceleyeceğiz.

Bu işlem için öncelikle projemizin içerisine 2 kütüphaneyi eklememiz gerekiyor.

1. Angular Translate
https://angular-translate.github.io/

2. Angular Translate Loader Static Files
https://www.npmjs.com/package/angular-translate-loader-static-files

Kütüphaneleri ekledikten sonra projenizin “index.html” sayfasına kütüphanelere ait JS dosyalarının yollarını ekleyin.

index.html

<script src="lib/angular-translate/angular-translate.js"></script>
<script src="lib/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>

Uygulamanızın modülüne “pascalprecht.translate” inject edin ve “translateProvider” ı kullanarak gerekli config ayarlarını gerçekleştirin. Burada varsayılan dil olarak “Türkçe” belirtilip, dil dosyalarının uzantısının “json” olacağını ve “translations” klasörü içerisinde bulunacağını belirttik.

app.js

angular.module('myapp', ['ionic', 'pascalprecht.translate'])
.config(['$translateProvider', function ($translateProvider) {
    $translateProvider.preferredLanguage('tr');
    $translateProvider.useStaticFilesLoader({
        prefix: 'translations/',
        suffix: '.json'
    });
}])

İngilizce ve Türkçe için en.json ve tr.json dil dosyalarını aşağıdaki gibi hazırlayın.

en.json

{
    "SELECT_LANGUAGE": "Select Language",
    "PLACEHOLDER_EMAIL": "E-Mail",
    "PLACEHOLDER_PASSWORD": "Password",
    "LOGIN_BUTTON": "Login",
    "SHOW_PASSWORD": "Show Password",
    "LOADING": "Loading.."
}

tr.json

{
    "SELECT_LANGUAGE": "Dil Seçiniz",
    "PLACEHOLDER_EMAIL": "E-Posta",
    "PLACEHOLDER_PASSWORD": "Şifre",
    "LOGIN_BUTTON": "Giriş",
    "SHOW_PASSWORD": "Şifreyi Göster",
    "LOADING": "Yükleniyor.."
}

Dil değişikliklerini gerçekleştirmek için gerekli seçme kutumuzu hazırlayalım.

HTML

<label class="item item-input item-select of_loginItem">
    <div class="input-label">
        {{'SELECT_LANGUAGE' | translate}}
    </div>
    <select ng-options="item.value as item.language for item in languageList" ng-model="selectedLanguageItem" ng-change="changedLanguage(selectedLanguageItem)" class="of_selectLogin"></select>
</label>

Son adım olarak da html’i yöneteceğimiz controller‘ı şu şekilde oluşturabiliriz.

.controller('LoginCtrl', function ($scope, $translate, $timeout, $ionicLoading) {
    // Dil Listesi
    $scope.languageList = [
        { language: 'Türkçe', value: "tr" },
        { language: 'English', value: "en" }
    ];
    // Başlangıçta Seçilecek Dil
    $scope.selectedLanguageItem = "tr";
    // Dil Değişimini onayla
    $scope.changedLanguage = function(_selectedLanguageItem) {
        $translate.use(_selectedLanguageItem);
    };
})