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

• 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

• {{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/

2. http://plnkr.co/edit/zG0E46?p=preview

3. http://tr.wikipedia.org/wiki/Yerelle%C5%9Ftirme 

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

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.

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

1. https://groups.google.com/forum/#!msg/angular/56sdORWEoqg/HuZsOsMvKv4J

2. http://tylermcginnis.com/angularjs-factory-vs-service-vs-provider/
3. https://docs.angularjs.org/guide/providers
4. https://docs.angularjs.org/guide/services 

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"
}]

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">







 

  

  

  


    
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

1. https://docs.angularjs.org/api/ng/filter 

2. https://docs.angularjs.org/guide/expression

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

Sandık Güvenliği'ne Dair Öneriler

2014 yerel seçimlerinde, özellikle sandık güvenliği konusunda çok ciddi kaygılar var. Bunlardan öne çıkan iki tanesinden ve bunlara karşı alınabilecek önlemlerden bahsetmek istiyorum. Bu yazıyı okuyacak olan sandık kurulu başkanı/memurlarına mantıklı gelirse, bir nebze olsun usülsüzlüğün önüne geçebilirler.

1. En yaygın olarak bahsedilen; kimi seçmenlerin daha önceden mühürlenmiş oy pusulasını yanında getirip, oy kullanma sırasında boş oy pusulası ile değiştirmesidir. Elindeki boş oy pusulasını ise adına çalıştığı parti temsilcisine verecek ve karşılığında bir miktar para alacağıdır. Kısacası oyunu satmasıdır.

Çözüm: Sandık kurulu başkanı/memuru, seçim günü boş oy pusulalarını mühürledikleri anda, sandık başındaki tüm parti yetkililerine bildirecek ve mührü her oy pusulasının belli bir noktasına vuracaktır. Sandık açıldıktından sonra ise; sandıktan belirlenen noktadan farklı bir yeri mühürlenmiş oy pusulalarını geçersiz olarak işaretleyebilirler. Bunu tüm parti yetkililerine pusulaların hazırlık aşamasında haber verdiği taktirde; kimsenin daha sonra itiraz edecek bir durumu olamaz.

2. Bir diğer konu ise; kimi seçmenlerin yanında getirmek istediği kalem ile imza atmak isteyeceğidir. Bu kalemlerin ise bir süre sonra silinen özel kalemler olduğuna dairdir. Böylelikle bir seçmen, gün içerisinde aynı sandıkta birden fazla oy kullanma şansına sahip olabilir.

Çözüm: Sandık kurulu başkanı/memuru, kendisinin belirlediği tek bir kalemle imza atmasına izin vermelidir ve her seçmen bu kalemle kullanmak zorundadır.

Hiç alakam olmadığı bu konuda bile yazma ihtiyacı hissettim, düşünün artık siz bu yerel seçimlerin önemini :)

AngularJS - Debugging

Uygulama geliştirme sırasında hata ayıklama çok önemli bir yere sahiptir. Örneğin; uygulama beklenmedik şekilde çalıştığında, performans problemi yaşadığınızda veya sayfa üzerindeki bir element'in çalışma anında nasıl ifade edildiğini öğrenmek istediğinizde hata ayıklama aracına başvurursunuz. Her web uygulamasında olduğu gibi; Angular uygulaması geliştirirken de hata ayıklama aracını etkin bir şekilde kullanabiliyor olmanız gerekir. Firefox ile birlikte gelen, kullanabileceğiniz öntanımlı bir hata ayıklama aracı yoktur. Eklenti olarak Firebug'ı önerebilirim. Chrome'da ise öntanımlı olarak "Geliştirici Araçları" gelmektedir ve pek çok ihtiyacınıza cevap verir. Ancak mevcut sorununuz Angular'ın çalışması ile alakalı ise, bu araç da işinizi görmez. Bunun için; Chrome üzerinde hata ayıklamada kullanılabilecek oldukça işe yarar bir eklenti geliştirilmiştir: Batarang [1].
Eklentiyi kurduktan sonra, mevcut geliştirici araçları ekranına "AngularJS" isminde bir sekme daha eklenir ve kullanabilmeniz için checkbox işaretleyerek etkinleştirmeniz yeterlidir. Ayrıca "Elements" sekmesi altına da "AngularJS Properties" isminde bir sekme eklenir. "AngularJS" altındaki "Help" sekmesinde ise eklentinin ne işe yaradığını güzel bir şekilde anlatmışlar.

Not: İçerisinde büyük boyutta veri tutan nesneler üzerinde çalışıyorsanız, ng-repeat directive'i kullanımında performans problemleri ile karşılaşmanız muhtemeldir [3]. Özellikle bu tür performans problemlerinde Batarang çok işinize yarayacaktır.

Referanslar:

1. Introducing the AngularJS Batarang
2. AngularJS Batarang (video)
3. Debugging performance problems in AngularJS with Batarang and Chrome DevTools

AngularJS - Chrome'da routing problemi

İlk günden bu yana, Angular'da Firefox üzerinde çalışıyordum. Chrome üzerinde hata ayıklama aracı olan Batarang'ı test etmek istedim. Örnek bir routing uygulamasını açmak istediğimde ise sayfanın yüklenmediğini farkettim. Chrome'un geliştirici konsolunda
"Failed to load resource: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. file:///D:/workspaces/route/view1.html XMLHttpRequest cannot load file:///D:/workspaces/route/view1.html. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. main.html:1" şeklinde bir hata ile karşılaştım. Hata kaydından da görüldüğü üzere; açmaya çalıştığım sayfaya dosya sistemi üzerinden erişmeye çalışıyorum. Problemin de nedeni bu aslında. Chrome, güvenlik nedeniyle dosya sistemi üzerinden yönlendirmeye izin vermiyor. Buna benzer pek çok şeyi, bu sebepten dolayı engelliyor olmalı.

yapmamız gereken:
Çalışmalarınızı yerel bir web sunucusu üzerinde tutabilir ve tarayıcıdan o şekilde erişebilirsiniz. Elbette benim önerim Apache olacaktır.

Bu vesileyle, bir sonraki yazımın da "AngularJS Debugging - Batarang" ile ilgili olacağını da bildirmiş olayım :)

AngularJS - Module ve Routing

Daha önceki blog girdisinde, oluşturulan sayfanın bir Angular uygulaması olduğunu belirtmek için ng-app directive'i kullanıdığından bahsetmiştim. O yazıda ng-app="" şeklinde kullanılıyordu. Bu şekilde kullanımda; uygulamamız "single page application"dan ibarettir ve Angular'ın çok önemli bir özelliği olan modülerlikten bahsedemeyiz.
Oluşturucağınız uygulama birden fazla modül içerecek ise; Angular altında bu modülleri oluşturduktan sonra ng-app="module1" gibi bir kullanım ile o sayfanın hangi modüle ait olduğunu belirtebilirsiniz. Her bir modülün kendine ait controller, view, factory, service, filter vs. nesneleri vardır. Farklı modüllerin, birbirlerine ait erişim izinlerini yönetebilirsiniz.
Module, controller, directive, routing gibi elemanların birbiriyle olan ilişkisi aşağıdaki görselden daha net bir şekilde anlaşılacaktır.

Javascript kodunda var module1 = angular.module('module1', []); gibi çok basit bir kullanımla bir modül oluşturabilir ve html sayfanızdan şeklinde bu modüle erişebilirsiniz. module metodundaki ikinci parametre([]) module1'in miras alacağı(bağımlı olduğu) modül veya modülleri içeren bir dizidir. Örneğin; var module1 = angular.module('module1', ['base']); şeklinde modülümüzü oluşturmamız, "module1" modülünün  "base" modülünü miras aldığı ve base'e ait olan her nesneye erişiminin mümkün olduğu anlamına gelir.
Ben burada modulün oluşturulmasında kullanılan javascript kodu üzerinde duracağım. Module ve routing ile ilgili örneğe buradan erişebilir ve kod üzerinde çalışabilirsiniz.

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

module1.controller('myController', function($scope) {
 $scope.test = function() {
  alert('controller1 : ' + $scope.name);
 };
});

module1.controller('myController2', function($scope) {
 $scope.test = function() {
  alert('controller2 : ' + $scope.name);
 };
});

module1.config(function($routeProvider) {
 $routeProvider.when('/view1', {
  controller : 'myController',
  templateUrl : 'view1.html'
 }).when('/view2', {
  controller : 'myController2',
  templateUrl : 'view2.html'
 }).otherwise({
  redirectTo : '/view1'
 });
});   

• angular.module('module1', []); ile module1 modülünü oluşturuyoruz. AngularJS 1.2.* sonrası sürümlerinde routing için  'ngRoute' modülünü miras almanız(var module1 = angular.module('module1', ['ngRoute']);) ve html kodunuzda import etmeniz gerekiyor.
• module1.controller('myController', function($scope) ile module1 üzerinde myController isminde bir controller oluşturuyoruz. $scope ise; view(html sayfamız) ve controller(myController)'ın birlikte çalışmasını sağlayan, arada köprü görevi gören nesnedir. Controller üzerinde oluşturulan fonksiyon ve attribute'lara $scope nesnesi üzerinden erişim sağlanır.
• module1.config(function($routeProvider) ile module1 üzerinde bir yönlendirme tanımlıyoruz. $routeProvider ise; yönlendirme yönetiminde kullanılan nesnedir. Kod bloğuna bakacak olursak; sayfa öntanımlı olarak view1.html'i myController ile birlikte çalışacak şekilde yüklenecektir. Daha sonra "/view2" şeklinde bir yönledirme isteği gelirse; view2.html myController2 ile birlikte çalışacak şekilde yüklenecektir. 

Referanslar:

1. AngularJS Fundamentals in 60 Minutes - Modules, Routes and Factories (video)
2. How to structure large angularJS applications
3. AngularAPI - ngApp 
4. AngularAPI - angular.module
5. AngularAPI - $route

AngularJS - Controllers

Angular'da Controller,  MVC (Model-View-Controller) tasarım şablonunun gerçekleştiriminde çok önemli bir yere sahiptir. ngController directive'i ile kullanılırlar. View'a herhangi bir controller class'ı bağlamamızı sağlar. Böylece; view üzerinde kullandığımız model'ler üzerinde işlem yapabiliriz.
Angular'da MVC:

• Model: Scope özellikleridir(properties) ve data binding ile DOM üzerinde erişim mümkündür.
• View: Data binding'ler içeren HTML sayfasıdır(şablon-template olarak da adlandırılır) ve View'a dönüştürülür.
• Controller:View'dan ngController directive'i ile çağırılan controller class'ıdır. Controller class'ı, scope property'ler üzerinde değişiklik yapabilmemize imkan sağlanyan function ve value'ları içerir.

Controller'lar ile ilgili örneğe buradan erişebilir ve kod üzerinde çalışabilirsiniz.

Ben burada sadece HTML kodu üzerinde duracağım. Ayrıntılı olarak .js ve .css'e yukarıdaki bağlantıdan göz atabilirsiniz.

<html ng-app>

  
  
  
  
  
  
  
  



  

    

Kayıtlar
Kayıt sayısı : {{records.length}}
    

      

        


            

              
               {{record.name}}
            
            

              
            
          

      


      
      
    


</html>    

ng-controller ile ilgili etiket içerisinde kullanılacak controller class'ı belirtiliyor.{{records.length}} ile controller class'ında tanmlanmış olan records objesinin uzunluğunu yazdırıyoruz. ng-init="records" ile bu object'i ilgili blokta kullanıyoruz ve ng-repeat="record in records" ile her bir record üzerinde işlem yapabiliyoruz. ng-click="delRecord(record.name)" kullanarak controller class'ında bulunan delRecord fonksiyonu çağırılır. ng-submit="addRecord()" kullanımı ile form'u submit etmek için controller üzerinde addRecord fonksiyonu çağırılır.

Controller'larla ilgili detaylı bilgiye aşağıdaki bağlantılardan ulaşabilirsiniz. Aslına bakarsanız; AngularJS ile ilgili pek çok kaynağa ulaşabilirsiniz. Ben de bu kaynaklara başvuruyorum ve öğrenebildiğim kadarıyla burada paylaşmaya çalışıyorum. Blog'da bununla ilgili konuları tekrar paylaşmamın nedeni ise; hiçbir Türkçe kaynağa rastlamamış olmamdır.

1. http://docs.angularjs.org/api/ng.directive:ngController
2. http://blog.pluralsight.com/angularjs-step-by-step-controllers

Versiyon Kontrol Sistemleri

Versiyon Kontrol Sistemi; bir dosya veya dosyalar üzerinde zaman içerisinde yapılmış tüm değişiklikleri tutan sistemdir.

Versiyon Kontrol Sistemi özellikleri:

• Dosyanın veya projenin tamamının daha önceki, değişiklik yapılmış/yapılmamış herhangi bir hâline geçme imkânı sağlar
• Zaman içerisinde yapılan değişikliklere göz atma imkânı sağlar
• Problem oluşturan veya faydalı olan bir kısım üzerinde kimin değişiklik yaptığını öğrenme imkânı sağlar

Versiyon Kontrol Sistemleri Tipleri

1. Yerel Versiyon Kontrol Sistemleri
2. Merkezi Versiyon Kontrol Sistemleri
3. Dağıtık Versiyon Kontrol Sistemleri

1. Yerel Versiyon Kontrol Sistemleri

En eski versiyon kontrol sistemi yaklaşımıdır. Üzerinde çalışılan proje ve yapılan değişiklikler, kullanıcı makinası üzerindeki veritabanında tutulur. Yerel versiyon kontrol sisteminde yalnızca bir kullanıcı etkin bir şekilde çalışabilir. Metin dosyaları dışındaki dosya türleri üzerinde versiyonlama yapmak oldukça zordur. Sunucu yönetiminde, yalnızca yönetici yapılandırma dosyaları ve script'ler üzerinde sıkça çalıştığından dolayı; bu yaklaşım tercih edilebilir.
En popüler yerel versiyon kontrol sistemi RCS(Revision Kontrol System)'dir.

Yerel Versiyon Kontrol Sistemleri Çalışma Mimarisi

2. Merkezi Versiyon Kontrol Sistemleri

İstemci-sunucu mimarisi şeklinde çalışan versiyonlama yaklaşımıdır. Yerel versiyon kontrol sistemlerinde birden fazla kişinin proje üzerinde etkin çalışabilmesi için ortaya atılmış bir versiyonlama sistemidir. Proje katkıcılarının ortak olarak kullandığı bir veri deposu vardır. Katkıcılar bu depo üzerinden checkout ve commit işlemlerini gerçekleştiriler.
İlk merkezi kontrol sistemi CVS(Concurrent Version Control System)'dir ve en popüler olan SVN(Subversion), CVS baz alınarak gerçekleştirimi yapılan bir versiyon kontrol sistemidir.

Merkezi Versiyon Kontrol Sistemleri Çalışma Mimarisi

3. Dağıtık Versiyon Kontrol Sistemleri

Merkezi versiyon sistemlerinin "katkıcıların offline çalışabilme" ve "deponun zarar görmesi durumunda geri getirilmesi" gibi durumlardaki eksikliklerinden dolayı ortaya atılmış bir versiyonlama sistemidir. Uzak depo sunucusu dışında, proje üzerinde çalışan her makina projenin tamamının kopyasını yerelinde tuttuğundan dolayı; her biri birer depo görevi görmektedir aslında. Böylelikle katkıcılar proje üzerinde değişiklik yapmak istediklerinde veya proje geçmişine göz atmak istediklerinde uzak depo ile iletişime geçmek zorunda değildir. Ayrıca katkıcılar, uzak depoyu hiç işin içine katmadan birbirleri arasında da veri alışverişi yapabilirler.

Dağıtık Versiyon Kontrol Sistemleri Çalışma Mimarisi

Dağıtık versiyonlama sistemi öncülerinden birisi BitKeeper'dır ve son dönemde en yaygın kullanılan örneği olan, Linus Torvalds'ın geliştirdiği Git'in geliştirilmesinde de ilham kaynağı olmuştur. Linux çekirdeği geliştirilmesi sırasındaki versiyonlama işi bir dönem BitKeeper'da yapılıyordu. BitKeeper'ın telif hakkı sahibi Larry McVoy'un bu ürünün artık ücretli olduğunu duyurmasının ardından, Andrew Tridgell BitKeeper protokollerini geriye mühendislik(reverse engineering) yardımıyla çözümlemiş ve Git'in önemli bir temel taşını oluşturmuştur.
Git'in tasarımında Linus 3 temel kriter belirlemiştir:

1.  Merkezi kontrol sisteminin öncüsü olan CVS'i "ne yapmama" konusunda örnek al ve tasarımı ona göre şekillendir.
2. BirKeeper benzeri, dağıtık çalışmayı destekleyen iş akışları oluştur.
3. Bozulma(corruption) anında güçlü koruma önlemleri al.

Git'i denemek isterseniz; temel Git terimlerinin oldukça faydalı açıklamalarının da yer aldığı sayfaya buradan erişebilirsiniz.

Referanslar

1. http://git-scm.com/book
2. http://en.wikipedia.org/wiki/Git_%28software%29
3. http://en.wikipedia.org/wiki/Apache_Subversion#cite_note-26
4. http://www.pushok.com/software/svn-vscvs.html
5. http://en.wikipedia.org/wiki/Revision_Control_System
6. http://betterexplained.com/articles/intro-to-distributed-version-control-illustrated/