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
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
İngilizce ve Türkçe için en.json ve tr.json dil dosyalarını aşağıdaki gibi hazırlayın.
en.json
tr.json
Dil değişikliklerini gerçekleştirmek için gerekli seçme kutumuzu hazırlayalım.
HTML
Son adım olarak da html’i yöneteceğimiz controller‘ı şu şekilde oluşturabiliriz.
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);
};
})