30 Aralık 2014 Salı

AngularJS - i18n

Hazırlayacağımız web uygulamasında yerelleştirme sıkça istenen özelliklerden biridir. Metin tercümesi, tarih, zaman, para birimi vs. bunlardan bazılarıdır. Ben bu girdide metin tercümesinin nasıl yapılacağından bahsedeceğim.
Angular'da bu işi yapmak için ben angular-translate'i öneririm. Kullanımı oldukça basit. Aşağıda yer alan örnekte de uygulamanızda nasıl kullanabileceğinizden kısaca bahsedeceğim.
Burada .js ve html kodunun sadece bir kısmına değineceğim. Uygulama üzerinde buradan çalışabilirsiniz.

script.js

var myModule = angular.module('myModule', []);
var i18nApp = angular.module("i18nApp", ['pascalprecht.translate']);

i18nApp.config(['$translateProvider',
  function($translateProvider) {
    $translateProvider.translations('en', {
      'nav.button.home': 'Home',
      'nav.button.about': 'About Us',
      'nav.button.contact': 'Contact',
      'option.choose.lang': 'Choose language',
      'app.title.i18n.application': 'i18n Application'
    });

    $translateProvider.translations('tr', {
      'nav.button.home': 'Anasayfa',
      'nav.button.about': 'Hakkkımızda',
      'nav.button.contact': 'İletişim',
      'option.choose.lang': 'Dil seçiniz',
      'app.title.i18n.application': 'i18n Uygulaması'
    });

    $translateProvider.use("en");

  }
]);

  • angular-translate script'ini html'imize ekledikten sonra,istenen metinlerin tercüme edilebilmesi için 'pascalprecht.translate' şeklinde modülümüze bağımlılık olarak ekliyoruz.
  • i18nApp.config(['$translateProvider', şeklinde $translateProvider'i config fonksiyonuna inject ediyoruz.
  • $translateProvider.translations şeklinde ise; her bir dile karşılık gelecek metinleri key: value çifleri şeklinde tanımlıyoruz. Dikkat edecek olursak: 'nav.button.home' text key'i 'en' için 'Home' value olarak tanımlanmışken; 'tr' için 'Anasayfa' şeklinde tanımlanmıştır.
  • $translateProvider.use("en"); şeklinde ise öntanımlı dil olarak 'en' kullanacağını belirtiyoruz. Mevcut kullanılan dili öğrenmek için ise $translateProvider.use(); şeklinde bir çağırım yeterli olacaktı.

app.html


  

{{appTitle | translate}}


  • {{languageOption.text | translate}} Tercüme için dikkat edilecek olan nokta burası. Bind ettiğimiz $scope değişkeninin yanına | translate şeklinde bir ekleme yapılarak ilgili metnin tercüme edilebilir olduğunu belirtiyoruz
1. http://angular-translate.github.io/

25 Aralık 2014 Perşembe

Hata: npm ERR! peerinvalid The package yo does not satisfy its siblings' peerDependencies

npm(Node package manager) ile generator-angular modülünü kurmak istediğimde "npm ERR! peerinvalid The package yo does not satisfy its siblings' peerDependencies" içeren bir hata mesajı alıyor iseniz; izlememiz gereken adımlar:

1: Remove Yeoman

$ npm uninstall -g yo

2: Clear NPM Cache

$ npm cache clean

3: Upgrade NPM to latest version

$ npm install -g npm

4: Install Yeoman

$ npm install -g yo

5: Install Angular generator

$ npm install -g generator-angular

Referans: http://stackoverflow.com/questions/25618226/cant-install-yeoman-on-windows-8-npm-err-peerinvalid-the-package-yo-does-not

19 Kasım 2014 Çarşamba

AngularJS - Factory, Service ve Provider

Tıpkı benim gibi AngularJS'e yeni başlayanlar için belki de en çok kafa karışıklığına neden olan konulardan birisi; Factory, Service ve Provider'dir. Bunların tam olarak ne işe yaradığı, hangi durumlarda ve nasıl kullanıldığı, kısıtlamaları vs. oldukça karışık görünür. Anladığım kadarıyla burada toparlamaya çalışacağım.
AngularJS'de sayfa yenilendiğinde veya yönlendirme yapıldığında controller'ların içeriği silinir. Bu nedenle, uygulama genelinde kullanılacak nesnelere erişimi mümkün kılmak için Service'ler kullanılır. Angular'da Service oluşturulması ve kaydedilmesi 3 yolla gerçekleştirilebilir.

1. Factory
Syntax: module.factory( 'factoryName', functionName );
factoryName'i injectable argument olarak tanımladığımız zaman, functionName parametresine ait referansın çağırımındaki değer geri döndürülür.
2. Service
Syntax: module.service( 'serviceName', functionName );
serviceName'i injectable argument olarak tanımladığımız zaman, functionName parametresine ait bir instance geri döndürülür. new functionName() diyebiliriz.
3. Provider
Syntax: module.provider( 'providerName', functionName );
providerName'i injectable argument olarak tanımladığımız zaman, functionName parametresine ait referansın $get methodunun çağırımındaki değer geri döndürülür.
Provider, Service ve Factory'e göre daha karışık görünmesine rağmen onlardan çok daha fazla avantajı vardır. Uygulama henüz başlamadığında, module configuration yapıldığı esnâda Provider'lar kullanılabilir. Aslında Angular Provider'ı tanımakta, Factory ve Service ise Provider'ı sadece miras almaktadır.

Aşağıda bu konuda basit bir örnek bulunmaktadır. Ben .js kodu üzerinde duracağım. Örneğe buradan erişebilir ve kod üzerinde çalışabilirsiniz.

var myModule = angular.module('myModule', []);
var myModule = angular.module('myModule', []);

var MyFunc = function() {
    this.name = 'Factory';
    console.log('init constructor');
 
    this.$get = function() {
 console.log('$get function');
 this.name = 'Provider';
 return this.name;
    };

    console.log('end constructor');
    return this.name;
};

myModule.service('myService', MyFunc);

myModule.factory('myFactory', MyFunc);

myModule.provider('myProvider', MyFunc);

myModule.controller('myController', [ '$scope', 'myService', 'myFactory',
  'myProvider', function($scope, myService, myFactory, myProvider) {
   $scope.serviceMsg = myService;
   $scope.factoryMsg = myFactory;
   $scope.providerMsg = myProvider;
  }]);

Yukarıdaki örnekte ilk olarak MyFunc isminde bir constructor fonksiyonu tanımlanıyor. Öntanımlı olarak fonksiyon içerisinde name değişkenine 'Factory' atanıyor. $get fonksiyonunda ise 'Provider' atanıyor. Constructor fonksiyonuna ve $get fonksiyonuna girişte console'a log yazdırılıyor. Aşağıdaki ekran görüntüsünden de görüleceği üzere; Provider kullanımında, constructor çağırımından sonra çağırılan $get() fonksiyonunda işlem yapılıyor. Yukarıda bahsettiğim gibi; bu fonksiyon configuration safhasında çağırıldığı için sadece Provider kullanımında bu log basılıyor.
Daha sonra myService, myFactory ve myProvider isminde service, factory ve provider oluşturuluyor.
myModule.controller('myController', [ '$scope', 'myService', 'myFactory', 'myProvider', function($scope, myService, myFactory, myProvider)... kullanımında ise; service, factory ve provider myController oluşturulurken inject ediliyor.


Not: Şu ana kadar paylaştığım Angular uygulamaların tamamına da buradan erişebilirsiniz.

Referanslar

13 Kasım 2014 Perşembe

AngularJS Bootcamp

VNGRS'in düzenlediği AngularJS Bootcamp etkinliği, 22-23 Kasım'da YTÜ Beşiktaş Yerleşkesi, Oditoryum'da yapılacaktır. AngularJS meraklısı iseniz; tam 2 gün boyunca, temelden ileri seviyeye kadar pek çok eğitimin verileceği bu etkinliği kaçırmamanızı öneririm.
Katılmayı düşünürseniz etkinlik sayfasından ücretsiz kaydınızı gerçekleştirebilirsiniz.

AngularJS - $http.get(*.json) parsing error

Harici bir Json dosyasını $scope verisi olarak olarak kullanmak istediğinizde; Developer Console'da SyntaxError: Unexpected token e at Object.parse (native) şeklinde bir hata alıyorsanız, bunun sebebi Json içeriğinin Angular'ın parse edebileceği şekilde düzenlenmemiş olmamasıdır.

Hata görüntüsü aşağıdaki gibidir:


Hatalı Json içeriğinin aşağıdaki şekilde olduğunu varsayalım:
 teams = [ {
"name": "Barcelona",
"country": "Spain",
"teamUrl": "http://tr.wikipedia.org/wiki/FC_Barcelona",
"flagUrl": "http://cd1.dibujos.net/dibujos/pintados/201237/escudo-del-f.c.-barcelona-deportes-escudos-de-futbol-pintado-por-martinb-9769813.jpg",
fanCount: 36619000
}];
Hatanın olası sebepleri şunlardır:

  1. Object dizisi bir değişkene atanmamalıdır. Yani teams = ... olmamalıdır.
  2. Object attribute isimleri ve değerleri " arasına alınmalıdır. Yani fanCount: 36619000 yerine "fanCount": "36619000" olmalıdır.
  3. Dizi tanımlamasından sonra ; kullanılmamalıdır.
Yukarıdaki hatalı json içeriğinin düzeltilmiş hâli şu şekildedir:
 [{
"name": "Barcelona",
"country": "Spain",
"teamUrl": "http://tr.wikipedia.org/wiki/FC_Barcelona",
"flagUrl": "http://cd1.dibujos.net/dibujos/pintados/201237/escudo-del-f.c.-barcelona-deportes-escudos-de-futbol-pintado-por-martinb-9769813.jpg",
"fanCount": "36619000"
}]

12 Kasım 2014 Çarşamba

AngularJS - Filters

Bu yazıda, Angular'da sıkça kullanılan filtreleme bileşenlerinden bahsedeceğim. Bununla birlikte, Angular directive'leri içerisinde expression kullanımı ve harici bir dosyanın da scope verisi olarak kullanımı da örnek uygulamada yer alan konulardır.
Filtreleme bileşeşenleri,verinin istenilen şekilde kullanıcıya görüntülenmesi için kullanılan elemanlardır. Angular'da sıkça kullanılan filter'lara "orderBy" ve "filter"ı örnek verebiliriz. Mevcut filter component listesine ve ayrıntılı açıklamalarına [1]'den göz atabilirsiniz.
Filter'lar ile ilgili örneğe buradan erişebilir ve kod üzerinde çalışabilirsiniz.
Ben daha çok HTML kodu üzerinde duracağım. Ayrıntılı olarak yukarıdaki bağlantıdan göz atabilirsiniz.

var module1 = angular.module('module1',[]);

module1.controller('controller1',function($scope, $http){
 $http.get('teams.json').success(function(data){
  $scope.teams = data;
 });
 
 $scope.sortBy = 'fanCount';
 $scope.reverse = true;
});

Yukarıdaki Javascript kodunda module1 isminde bir module, onun üzerinde controller1 isminde bir controller ve bu controller scope'unda da teams isminde bir değişken oluşturuluyor. teams içeriği ise, teams.json dosyasındaki veri ile dolduruluyor.
Ayrıca sıralamanın neye göre yapılacağını belirten sortBy ve artan/azalan şekilde sıralanacağını belirten reverse isminde değişkenler de $scope'da tanımlanıyor.

<html ng-app="module1">




AngularJS Filters Example


 
Team Flag Country Fans Page
{{team.name}} {{team.country}} {{team.fanCount | number}} Details
</html>
İlk olarak üzerinde durmak istediğim konu: Angular .js'inin kaynağı olarak
cdnjs üzerinde bulunan sürümü kullanılıyor. cdnjs, üzerinde popüler tüm javascript kütüphanelerini barından bir cdn(Content Delivery Network) hizmetidir.
ng-controller="controller1": html'deki bu element'in içerisindeki tüm elementler için, ilgili .js'de oluşturulan controller1 isimli controller'ın kullanılacağı anlamına geliyor.
ng-model="searchText": filtreleme için kullanılacak elementler'den biri olan text field için controller scope'unda bir bir model oluşturuyor. Kısaca bu text field searchText olarak ifade ediliyor ve erişim bu isimle yapılacak.
ng-repeat="team in teams | filter:searchText: gösterilen veriler searchText değerine göre filtrelenerek gösterilecektir.
| orderBy:sortBy:reverse: filtrelenmiş veriler $scope'da tanımlanan sortBy'a göre sıralanacaktır. Bu değerler ilgili .json dosyasındaki object attribute isimleri olabilmektedir. reverse ise orderBy filter'ına gönderilecek ikinci parameterdir(true|false) ve sıralamanın artan veya azalan olduğunu belirtmek için kullanılır.
ng-click="sortBy='name'; reverse=!reverse": burada javascript expression'larının da Angular directive'leri içerisinde kullanılabildiği görülmektedir. İlgili element'e tıklandığında $scope üzerindeki sortBy parameresi set ediliyor ve yukarıda bahsettiğim gibi sıralama bu attribute'a göre yapılıyor. Buna ek olarak; reverse attribute'u bir önceki state'inin tersi şeklinde set ediliyor ve artan/azalan sıralama bu şekilde belirleniyor. Angular expression'lar ile ilgili detaylı bilgiye [2]'den ulaşabilirsiniz.

Referanslar

25 Temmuz 2014 Cuma

Hırvatistan Gezi Notları

Aylardır planladığım Hırvatistan tatil planımı geçen hafta gerçekleştirdim. Ultra Europe'un da orada organize edilmesi, Hırvatistan'ı tatil yeri olarak seçmemizde etkili oldu. Karar verdikten sonra Split ve Dubrovnik'e dair yorumları da okuyunca iyice heyecanlanmaya başlamıştım. Hatta bir adım daha öteye götüreyim de kendi aracımızla seyahatimizi geçirelim diye kararlaştırdık. İlk defa yurtdışına araçla çıkacağım için biraz endişeliydim yolların durumu, geçilen ülkelerin güvenlik durumları, araç problem çıkarır mı vs. konularında. Neticede ciddi bir problem yaşamadan harika bir tatil geçirdiğimizi söyleyebilirim. Bu yazım özellikle benim kullandığım güzergahlarda araç ile seyahat edecek olanlar için oldukça faydalı olabilir.
Öncelikle yurtdışına araçla çıkacak iseniz; Turing'den uluslararası ehliyet ve yeşil kart(uluslarararı trafik sigortası) almanız yeterli olacaktır. Bu belgeleri sınır kapısındaki Turing ofisinden de alabiliyorsunuz, ama ben orada vakit kaybetmemek için Istanbul ofisinde yarım saatte halletim işimi.
Güzergah olarak Yunanistan-Arnavutluk-Karadağ-Bosna Hersek-Hırvatistan'ı tercih ettik. Schengen vizesi aldık seyahat öncesinde. Yunanistan Schengen ülkesi, bunun dışında Hırvatistan Schengen'e dahil olmadığı halde Schengen vizesi geçerlidir. Uçakla doğrudan Hırvatistan'a seyahat edecek olursanız; ya elinize geçerli bir Schengen vizesi, ya da Hırvatistan vizesi bulunuyor olmalı. Diğer ülkelerin Türk vatandaşlarına vize uygulaması bulunmuyor zaten.
Seyahate başladığımız gün, Yunanistan sınır kapısına vardığımızda o gün grev olduğunu öğrendik :) Sadece bir kapı yavaş bir şekilde çalışıyordu. Neyse ki sabah erken saatte orada olduğumuz için sıra çok azdı ve yarım saatte giriş yaptık. Yunanistan'ın yolları gerçekten harika. Şehirler arası yollar tamamiyle düz otobandan oluşuyor. Gece yolculuğu uykunuzu getirebilir :) İlk durağımız Kavala idi. Şirin bir sahil kenti, bana Çanakkale'yi hatırlattı. Orea Mitilini(Güzel Midilli) balık restoranında öğle yemeğini yedik. Midye pilav ve kalamar'ı tavsiye ederim. Personel Türkçe biliyor, rahatlıkla sipariş verebilirsiniz. Fiyatları da gayet normal, Türkiye'de ortalama bir balık restoranında ne veriyorsan orada da yaklaşık aynı fiyatı ödüyorsun. Kavala'ya uğramışken Kavala Kurabiyesi almak isterseniz İossifidis'i tavsiye ederim. Lezzetli ve tazedir kurabiyeleri(bizzat Kavala'da yaşayan birisine sordum, kesinlikle orayı önerdi).
Bir süre Kavala'da geçirdikten sonra birkaç saat içinde Arnavutluk'a giriş yaptık ve günün büyük bölümü berbat Arnavutluk yollarında geçti. Yolda sıkça polise rastlayabilirsiniz. Gündüz dahi olsa farlarınız kapalı ise veya hız sınırını çok aşarsanız muhakkak durdururlar. Araçla sayahat edecekseniz Elbasan-Tiran yolunu değil de; Gjirokaster-Fier-Durres sahile yakın olan yolu kullanmanızı öneririm. 100 km daha uzatacak yolunuzu ama değecektir emin olun, yolları çok daha iyi.
Arnavutluk macerasından sonra Karadağ ve Bosna-Herseği 3-5 saatte geçip Hırvatistan'a vardık. Tavsiye ettiğim güzergahı takip ederseniz; Karadağ'ın Budva kentinten geçeceksiniz: çok güzel bir yer, eminim hayran kalacaksınız. Burası dışında; Karadağ'ın doğası müthiş gerçekten, yolda sık sık aracı kenara çekip fotoğraf çekmek istedik :)

Karadağ
Hırvatistan'a giriş yaptıktan sonra doğrudan Split'e yol aldık. Split yolunda 72km/saat ile giderken, polis durdurdu ve hız sınırının 50km/saat olduğunu 500 kuna (yaklaşık 200TL) cezası olduğunu, o anda ödemem durumunda yarısını tahsil edeceğini söyledi ve polis aracındaki POS cihazından o anda kredi kartı ile ödemesini aldı :) O andan sonra tüm yolu 50-60 km ile gitmek gerçekten işkenceydi.
Split'e vardığımızda konaklayacağımız ev sahibi ile görüştük ve eve yerleştik. Orada otel yerine daha çok apartman tercih ediliyor. Festival zamanı gittiğimiz için riske atmadım ve öncesinden kalacağımız yeri ayarlamıştım. Evi Airbnb'den aylar önce ayarlamıştım, çok rahat oldu. En ünlü plajı Bačvice, çok kalabalık olur. Biz ise, eve yakın olması ve nispeten daha sakin olduğu için daha çok Žnjan'da vakit geçirdik. Restoran olarak şiddetle Buffer Fife'yi öneririm. Split limanı yakınlarında, pek çok kişi biliyor zaten nerede olduğunu. Kalamar tava ve karışık et ızgara'sı çok iyidir. Gezilecek yer olarak Diocletian's Palace Split'in en bilinen turistik mekanıdır, görülmeye değer. Buna ek olarak; Marjan parkı muhteşemdi, girişte bisiklet kiraladık(saati 15 kuna=6 TL) ve parkta birkaç saat gezinti yapma fırsatımız oldu. Yolunuz düşerse Marjan'ı es geçmeyin derim, isterseniz mola verip aşağıdaki harika bir plajda bir süre de yüzebilirsiniz. Biz bilmediğimiz için yanıma şortumu almamıştım, çok pişman oldum :)
Marjan plaj
5 gün Split'te kaldıktan sonra, en meşhur adası olan Hvar'a geçtik. Feribot sefer saatleri ve fiyatları ile ilgili ayrıntılı bilgiye buradan erişebilirsiniz. Hvar adasında çeşitli noktalarda yerleşim yerleri var. En iyisi elbette kendi ismini taşıyan Hvar. Çok güzel yapılar ve restoranlar vardır. Hvar'da birkaç tane tanınmış plaj vardır. Bunlardan bilinen ikisi Zavala ve Jelsa'dadır. Biz dönüşteki feribota bineceğimiz Sućuraj yoluna yakın olduğu için Jelsa'yı tercih ettik, hiç de pişman olmadık :) Adriyatik denizi Akdeniz ve Ege'yi aratmıyor gerçekten.
Aynı akşam geceyi geçireceğimiz Dubrovnik'e geçtik. 10 Temmuz -25 Ağustos tarihleri arası düzenlenen Dubrovnik Festivali'ni de görme fırsatımız oldu. Dubrovnik'i gördükten sonra bir kez de ayrıca Dubrovnik'e tatile gelmeliyiz diye kararlıştırdık.
Ertesi gün sabahtan yola çıktık dinlene dinlene, uzunca süre uyku çekerek 1 günde İstanbul'a dönüş yaptık:)
Bu tatil çok yorucu olmasına rağmen, gerçekten asla unutmayacağım harika bir deneyim oldu. Uçakla seyahat etseydim bu güzel yerlerin onda birini bile görme fırsatım olmayacaktı. Yorucu geçeceğini zaten tahmin ediyordum ama ne kadar yorucu olsa da araçla seyahatin tadı bir başkaymış hakkaten :)