Bu yazımda bir html dosyasında basitçe bir Angular translate işlemi nasıl uygulanır ondan bahsedeceğim.
Gereksinimler
- Bower
Şu şekilde angular-translate i yükleyelim.
bower install angular-translate
Html dosyamızın içeriğinin bu şekilde olduğunu düşünelim.
<!DOCTYPE html><html><body><div><h1> <span style="color:grey">selam</span></h1><div><br><button>English</button><button>Turkce</button></div></div></body></html>
Şuan bizim iki butonumuz var. Biz istiyoruz ki butonlara basınca sayfamızın içeriği değişsin.
Şimdi bu html dosyamıza bir kaç düzenleme yapalım.
Öncelikle <html> tagini <html ng-app="myApp"> olarak değiştirelim ve böylece bir angularjs uygulaması haline dönüştürelim.
Şimdi bulunduğumuz dizinde bir app.js dosyası oluşturalım.
içeriği şu şekilde başlasın.
var app = angular.module("myApp",['pascalprecht.translate']);
Bu şekilde uygulamamızı tanımladık, parametre olarak html dosyamızdaki myApp'ı ve translate modülünü eklemiş olduk.
Hemen peşine şunu ekleyelim.
app.config(["$translateProvider",function($translateProvider){var en_translations = {selam : "Hello World"}var tr_translations = {selam : "Merhaba Dunya"}$translateProvider.translations('en',en_translations);$translateProvider.translations('tr',tr_translations);$translateProvider.preferredLanguage('tr');}]);
Burada iki farklı dil seçeneği ekledik. Bunları iki farklı json dosyası gibi düşünelim. Html dosyamızdaki selam yazımız iki farklı dile göre farklı çıktılar sunacak. preferredLanguage kısmında ise tr ayarladık. Böylece varsayılan olarak sayfa yüklenince tr dili ile yüklenecek.
Bir <head></head> etiketi oluşturalım ve içine az önce bower ile indirdiğimiz angular kütüphanesini ve oluşturduğumuz app.js dosyalarını kaynak olarak gösterelim.
<script src="bower_components/angular/angular.js"></script><script src="bower_components/angular-translate/angular-translate.js"></script><script src="app.js"></script>
Geldik <body> kısmına. Burada ilk <div> etiketini Controller yapalım.
<div ng-controller="MainController">
Geldik hemen sonrasındaki <span> etiketine. Burada ufacık bir değişiklik yapalım. <span> etiketini <span translate> yapalım ve şu şekilde görünsün.
<h1> <span translate style="color:grey">selam</span></h1>
Button kısmında da şöyle bir değişiklik yapalım;
<button ng-click="changeLanguage('en')">English</button><button ng-click="changeLanguage('tr')">Turkce</button>
Birazdan buradaki ng-click ne işe yaradığından bahsedeceğim.
Şimdi geldik Controller kısmına.
Aynı dizinde MainController.js adında bir dosya oluşturalım ve içerisini şu şekilde dolduralım.
app.controller("MainController" ,["$scope","$translate",function($scope,$translate){$scope.changeLanguage = function(lang){$translate.use(lang);}}]);
İşte bu da Controller yapımız. Artık html dosyamızın içindeki butona basınca ng-click bu controllerımızı tetikleyecek. Controller ise bu işlem için config dosyamızdaki ayarları uygulayacak üstelik bunların hepsi dinamik bir sayfada hızlı bir şekilde gerçekleşecek.
Olur da Angular için bir stil rehber ararsanız bu adresi tavsiye ederim. Güzel ve açıklayıcı olmasının yanında çoklu dil desteği de var. 😏
İyi günler.
HelloWorld.html
<!DOCTYPE html><html ng-app="myApp"><head><script src="bower_components/angular/angular.js"></script><script src="bower_components/angular-translate/angular-translate.js"></script><script src="js/app.js"></script><script src="js/controllers/MainController.js"></script></head><body><div ng-controller="MainController"><h1> <span translate style="color:grey">selam</span></h1><div><br><button ng-click="changeLanguage('en')">English</button><button ng-click="changeLanguage('tr')">Turkce</button></div></div></body></html>
app.js
var app = angular.module("myApp",['pascalprecht.translate']);app.config(["$translateProvider",function($translateProvider){var en_translations = {selam : "Hello World"}var tr_translations = {selam : "Merhaba Dunya"}$translateProvider.translations('en',en_translations);$translateProvider.translations('tr',tr_translations);$translateProvider.preferredLanguage('tr');}]);
MainController.js
app.controller("MainController" ,["$scope","$translate",function($scope,$translate){$scope.changeLanguage = function(lang){$translate.use(lang);}}]);
Hiç yorum yok:
Yorum Gönder