Ionic Framework ile Çoklu Dil Kullanımı (1 Viewer)

Joined
Jan 16, 2017
Credits
0
Rating - 0%
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

Code:
<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

Code:
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

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

tr.json

Code:
{
    "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

Code:
<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.

Code:
.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);
    };
})
 

Users who are viewing this thread

Top