Tarayıcınız JavaScript! desteklememektedir.

Angular JS Giris ve Direktifleri

Angular JS Giris ve Direktifleri

Bir önceki makalemizde Angular JS'e giris yapmistik, nedir nasil kullanilir nerelerde kullanilir gibi sorulari cevaplamistik. Eger okumadiysaniz burayi tiklayarak okumanizi tavsiye ederim.

Öncelikle sunu bilmemiz lazim, Angular JS, DOM elementleri içerisinde ng- ile baslayan ifadelerle tanimlanir ve kullanilir. Buradaki "ng-", Angular'in kisaltilmis halidir.

  • ng-app: Angular uygulamasinin çalisacagi scope.
  • ng-init: Scope'un içerisinde tanimlanan ifadelerin,degerlerin baslangiç degerini vermemizi saglar. (Kullanim amaci encapsulation(kapsülleme) ile çok benzer ancak kullanimi çok daha kolay.)
  • ng-model: MVC'nin M'si. Model kismi.Bu bölümde input,text vs kullanabiliriz.
  • ng-bind: Data binding yapmamizi saglayan, tanimlanan modele baglanan alan olarak degerlendirebiliriz.
  • {{ }}: Küme parantezleri arasinda degiskenleri kullaniriz. ng-bind ile benzer görevdedir.
  • ng-repeat: jQuery'deki forEach, C#,Java'da ki Foreach döngüsü. Dizilerin içerisindeki elemanlara ulasmamizi saglar.

Bunlarla birlikte çok önemli bir "$scope" belirtecimiz var. Aslinda bu Backend programlamadan asina oldugumuz bir kavram. Temel anlamda bakarsak, "Etki Alani" olarak nitelendirebiliriz.

$scope belirteci, bagli bulundugu controller hatta üst seviyedeki app yani uygulamanin içerisindeki kodlar için geçerlidir.

Burada hiyerarsik bir yapi var, bu konuya da deginecegiz...

Ilk giris için biraz fazla olabilir ama asagidaki örnegi inceleyelim:

Örnegi inceledigimizde, kodlarin jQuery'den çok daha açiklayici, temiz kod dedigimiz karmasik yapidan uzak, belirli patternler dahilinde yazildigini rahatlikla görebiliriz.

Aslinda AngularJS tam olarak böyle bir yapi arkadaslar. Tamamen modüler, MVC patternini implement etmis olmasi ciddi anlamda kullanim kolayligi sagliyor. Bir sürü örnek yapacagiz. Örnek yaptikça daha iyi anlayacaksiniz.

Bu kadar teorik bilgi yeterli diye düsünüyorum...

Bir sonraki makalemizde Angular Expressions'lar ile {{ }} ve ng-bind direktiflerini inceleyecegiz...

 



Bu Makaleye Yapılan Yorum Sayısı : 0

Sende Yaz

Aşağıdaki bölümleri doldurarak bu makaleye yorum yapabilirsin.