Neler Öğreneceğim?
- Çoklu Dil Destekli AngularJS Uygulamaları
- $locale Servisi ve Kullanımı
- Lokalizasyona Göre Çoklu Dil Mantığı
Gereksinimler
Notepad++
Zorluk Düzeyi
- Intermediate (Orta Seviye)
English
Multilingual AngularJS Applications
AngularJS makes it easy to create multi-language, browser-side applications as of the modular and layered work structure.
If the AngularJS-based content is to provide language management in practice with the help of filters before processing, this layering is the most effective
One of the approaches.
In this section, we will try to explain the rationale for how we can create multi-lingual interfaces or content with our own or pre-existing filter after we have discussed the locale service in more detail.
Türkçe
Çoklu Dil Destekli AngularJS Uygulamaları
AngularJS, modüler ve katmanlı çalışma yapısı itibari ile tarayıcı taraflı çoklu dil destekleyen uygulamalar oluşturmayı kolay bir hale getiriyor.
AngularJS tabanlı içerikler işlenmeden önce filtreler yardımı ile uygulamadaki dil yönetimini sağlamak ise, bu katmanlı yapıyı kuılanmanın en etkili
yaklaşımlarından birisi.
Bu bölümünde, $locale servisi üzerine daha ayrıntılı şekilde değindikten sonra, kendi oluşturduğumuz veya hazır bir filtre ile nasıl çoklu dil destekli arayüz veya içerik oluşturabileceğimizin mantlğını açıklamaya çalışacağız.
$locale Servisi ve Kullanımı
$locale servisi, tarayıcı tarafından sağlanan bilgiyi AngularJS içerisinde kullanmanıza yarayan bir servis olarak düşünülebilir.
$locale servisi, bulunduğunuz ülke, kullandığımz dil, kullandığınız para birimi, saat sistemi, geçerli saat, haftanın günlerinin tarayıcı tarafından kullanılan dile göre belirlenmiş hali gibi birçok lokalizasyon (yerelleştirme) bilgisini içinde barındırmaktadır.
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<script type="text/javascript" src="ngTouch.min.js"></script>
<meta name="viewport" content="width=device-width">
</head>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope, $locale) {
console.log($locale);
});
</script>
</body>
</html>
Ömeğimizde, $locale varsayılan servisinin içeriğini konsola bastırdık. Burada görselde gördüğünüz gibi, tarayıcı kullanıcısının lokalizasyonu (yerelleştirme) hakkında istenilebilecek her bilgi bulunmakta.
Not: Genellikıe basit bir proje için en çok $locale.id değerinin kullanıldığını söyleyebiliriz. Bu değer, tarayıcının kullandığı dil ve ülke kodlarını içerir.
» İngilizce-Birleşik Devletler (en-us)
» İngilizce-Büyük Biritanya (en-gb)
» Türkçe-Türkiye (tr-tr)gibi.
Lokalizasyona Göre Çoklu Dil Mantığı
Sade Javascript ile çoklu diıe uyumlu uygulama geliştirirken öncelikle bir ana dil belirlenir (genellikle İngilizce) arayüz yazı içerikleri için bir dil veri haritamız (map) olur ve bu harita kullanılarak, kullanıcının kullandığı dile göre arayüz yazılarını manipüle ederiz.
AngularJS'de çok benzer bir yaklaşım izleyebilirsiniz. Fakat manipüıasyon sırasında AngularJS filtreleri kullanarak daha hızlı ve efektif bir sonuç alabiliriz.
Gelin isterseniz geçmiş eğitimlerde öğrendiğimiz kendi filtremizi oluşturma işlemini uygulayarak bir çevirici filtre oluşturup, bahsettiğimiz şekilde veri haritası ile içeriği lokalize edelim;
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<meta name="viewport" content="width=device-width">
</head>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
<ul>
<li>{{"Home" | cevir}}</li>
<li>{{"About" | cevir}}</li>
<li>{{"Contact" | cevir}}</li>
</ul>
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope, $locale) {
});
var dil = "tr"; // en-tr-de
var dilHaritasi = {
"Home": {
en: "Home",
tr: "Anasayfa",
de: "Hauptseite"
},
"About": {
en: "About",
tr: "Hakkında",
de: "Etwa"
},
"Contact": {
en: "Contact",
tr: "İletişim",
de: "Kontakt"
}
};
uygulama.filter('cevir', function() {
return function(kelime) {
return dilHaritasi[kelime][dil];
};
});
</script>
</body>
</html>
Örneğimizde, cevir Filtresi uygulandığı degişkeni oluşturdugumuz dil haritasında istenilen dildeki halini görünnüme basıyor, Burada tanımladığımız dil değişkeni sabit bir değişken. Son olarak locale servisini bu değişkene bağlarsak tarayıcı diline göre içeriği gösterebiliriz.
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<meta name="viewport" content="width=device-width">
</head>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
<ul>
<li>{{"Home" | cevir}}</li>
<li>{{"About" | cevir}}</li>
<li>{{"Contact" | cevir}}</li>
</ul>
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
var dil;
uygulama.controller("ngKontrol", function($scope, $locale) {
dil = $locale.id.split("-")[0];
});
var dilHaritasi = {
"Home": {
en: "Home",
tr: "Anasayfa",
de: "Hauptseite"
},
"About": {
en: "About",
tr: "Hakkında",
de: "Etwa"
},
"Contact": {
en: "Contact",
tr: "İletişim",
de: "Kontakt"
}
};
uygulama.filter('cevir', function() {
return function(kelime) {
return dilHaritasi[kelime][dil];
};
});
</script>
</body>
</html>
Burada en-us olarak dönen $locale.id değerini split ile tire'ye göre bölerek dil kodunu aldım ve bu değeri dil değişkenine atadım.
Not: Sadece string değerleri için değil, {{degisken | cevir}} tanımında verilebilecek bir bağlı degisken değeri için de veri haritasında karşılık oluşturabilirsiniz.
Posted on Utopian.io - Rewarding Open Source Contributors