Merhaba Arkadaslar,

Angular JS Egitim setimize devam ediyoruz. Bu makalemizde ng-repeat direktifini inceleyecegiz.

ng-repeat, adindan da anlasildigi gibi repeat yani tekrarlama mantigi ile çalisan bir direktif. Bu direktifi Foreach, Forinn döngüleri gibi düsünebiliriz. ng-repeat direktifinin genel çalisma mantigi, dizi-koleksiyon'larin içerisinde gezmektir. 

C#,Java gibi programlama dillerindeki Foreach, PHP'de ki ve jQuery'de ki Forinn döngüsü gibi. (Çalisma mantigi olarak)

Web dünyasi sürekli gelisiyor ve sunucu tarafinda çok fazla yük bindirmemek için, olayi browser tarafinda bitirmeye çalisiyoruz. Neden mi? Örnegin bir nesnenin sayfa açildiginda yüklenmesi ve yapilacak filtrelendirmelerin, islemlerin o yüklenen nesne üzerinden yapilmasi, her seferinde sunucuya istekte bulunulmasini engelleyecek, bizi hem büyük bir is yükünden kurtaracak, hem de performans anlaminda çok daha faydali olacaktir. Düsünün ki, bir emlak sitesi yaptiniz, çesitli filtrelendirmeler, kriterlendirmeler vs var ve her kriter degisikliginde sunucuya istek yolluyorsunuz. Bunu ayni anda 1000 kisinin yaptigini düsünün. Sunucu ve Veritabani için ciddi anlamda is yükü ve performans anlaminda ciddi kayip.

Simdi diyeceksiniz ki, ya hoca iyi güzel anlatiyorsun ama bunun ng-repeat direktifi ile ne alakasi var? Söyle bir alakasi var, az önce söyledigim gibi ng-repeat dizi-koleksiyon'larin içerisinde gezmemizi saglar. Angular ile Http isteginde bulunup, aldigimiz veriyi sabit tutarsak, ng-repeat ile içerisinde istedigimiz gibi gezeriz. Veriyi tek seferde çeker, istedigimiz gibi kullanabiliriz :)

Ilk  örnegimizde, 2 farkli JSON nesnesini ng-repeat direktifi ile table içerisinde gösterecegiz. Göreceksiniz çok kolay olacak :)

Bu arada ng-repeat direktifi yalnizca table içerisinde kullanilir diye bir kural yok. li ya da farkli html elementlerinin içerisinde de kullanabilirsiniz.

Çalisma mantigi su sekilde; 

Herhangi bir elementin, bind edilen nesne kadar tekrar edilmesi. Yukaridaki örnegimizde 2 tane JSON nesnesi bind ettik, 2 kere tekrar etti. Zaten isminin ng-repeat olmasi da tekrarlayici oldugunu bize en bastan beri animsatiyordu.

Verilen datanin sayisi(count) kadar çalisacak, içerisindeki bilgileri istedigimiz sekilde kullanmamiza olanak saglayacak. E o zaman bu Web tabanli gelistirdigimiz uygulamalarda bize çok yardimci olmaz mi? Elbette. Çünkü Angular JS bir takim ihtiyaçlara çözüm olarak gelistirildi ve hala da gelistirilmeye devam ediliyor. Özellikle Angular JS 2 yayinlandiktan sonra Web piyasasinda diger JavaScript kütüphanelerinin epey bir önünde oldugu su götürmez bir gerçek.

Dikkat etmemiz gerekenler;

Bütün Angular JS makalelerinde belirttigim gibi bu makalede de belirtmezsem olmaz :) 
ng-app, ng-controlller, ng-model gibi Angular JS'in temel direktiflerini kullanmamiz gerekiyor. ng-model bütün uygulamalar için zorunlu olmasa da, ng-app ve ng-controller bu tarz uygulamalarda zorunlu. Çünkü MVC tabanli bir framework. Örnegin, ng-app attribute'unu silip çalistirmayi deneyin, çalismayacaktir. Ya da ng-controller attribute'unu silin çalistirmayi deneyin, çalismayacaktir.

Bu konu ilk baslarda biraz kafa karistirabiliyor ama zamanla alismak çok zor olmuyor :)

Bu makalemizde Angular JS ng-repeat direktifini ögrendik. Bir sonraki makalemizde görüsmek üzere.