Perşembe , 19 Ekim 2017
Anasayfa » JavaScript » AngularJS » AngularJS Controller Yapısı

AngularJS Controller Yapısı

Bu yazıda  Angular içindeki Controller yapısı ve kullanımını  anlatmaya devam edeceğiz.  Controller yapısı ile ilgili  ilk makalesi okumadıysanız 2. yazıyı okumanızı tavsiye ederim.

 

Bu yazıda anlatılacak kavramlar;

  1. Scope nesnesi ile karmaşık veriler gönderme
  2. Controller ismi yanlış yazıldığında ne olur
  3. Bir özellik ismi yanlış yazılmışsa ne olur
  4. Bir modüle tek satırda bir controller ve kayıt nasıl kaydedilir.

Controllerin görevi view(görüntü) için bir model üretmektir. Aşağıdaki örnekte $scope bir model değildir. $scope nesnesine eklenmiş  mesaj özelliği modeldir.

Controller içinde modeli $scope özellik olarak ekleriz.

Scope nesnesi ile karmaşık veriler gönderme

View(Görüntü) $scope’a eklenmiş olan özelliği veriye bağlanmak (data-binding) için kullanacaktır. Böylelikle controller DOM üzerinde dönüşüm yaparak. Model ile view arasında temiz bir kanal oluşmasını sağlamaktadır. Controller iki yapı arasında bağlantı sağladığı için burada yazılacak kodun sade olması view kısmında işin kolaylaşmasını sağlamış olacak. Bu nedenle Controller yanlızca scope ve davranış  olaylarını almalıdır.  Sonraki makalelerde davranışların kullanımı ile ilgili bir yazı yayınlayacağım.

Yukarıdaki gibi $scope’a basit bir veri eklenebileceği gibi karmaşık veriler eklemek de mümkündür. Aşağıdaki örnekte 3 özelliği olan karmaşık bir nesne eklemiştir.

 

Yukarıda oluşturulan Controller içinde Hazırlanan müsteri modeli bilgilerini görünümde göstermek için hazırız.  Aşağıdaki görümün(view) kodları müşteri bilgilerini ekrana göstermektedir.

 

Yukarıdaki Kodun Tek Sayfada Yazılmış Şekli

Controller ismi yanlış yazıldığında ne olur

Controller adı yanlış yazılırsa 2  olay meydana gelir.

  1. Bir hata fırlatılır. Hatayı tarayıcının geliştirici ekranından görebilrisiniz.
  2. Bağlayıcı(binding) ifadesi viewdeki $scope nesnesini değerlendirmeye almaz.  Viewde gösterilmek istenen ifadeler doğru da olsa controller farklı olduğu için ifadelerin yeri boş kalacaktır.

Yukarıdaki örnekte ng-controller adını değiştirip ekran çıktısını inceleyebilirisiniz.

Not:Hata mesajı almıyorsanız yada hata mesajı karışık geliyorsa, angularjsnin geliştirici sürümünü kullanarak tekrar deneyin.

Bir özellik ismi yanlış yazılmışsa ne olur

Bir özellik adını yanlış yazıdığınızda angular yazılan ifadeyi değerlendirmeye almayacak ama hata da vermeyecektir. Ekrana sadece null yada undefined değerini döndürecektir. Dolayısıyla ekranda birşey görünmeyecektir. Hata vermesi dışında controllerdaki durum ile aynı aslında.

Yukarıdaki kodlarda {{ifade }} içindeki ifadeleri değiştirip ekran çıktısını inceleyebilirsiniz.

Bir modüle ve Controller tek satırda nasıl yazılıp kaydedilir.

Aşağıdaki kod yapısını javascriptin zincirleme özelliğini(avantajını) kullanarak zincirleme şeklinde yazabilirsiniz.

 

UYGULAMAYI İNDİR AngularJS ile ilgili diğer yazıları da okumak istermisiniz.

Yazılarımızı beğendiyseniz. Yukarıdaki paylaş butonu ile paylaşmanız bizi mutlu edecektir 🙂

 

Hakkında Hayri

İlginizi Çekebilir

AngularJS Template (Asp.net WebService)

Bu yazıda oluşturduğumuz ürünler template sayfasını ile veri tabanındaki kayıtları birleştireceğiz. Öncelikle bilmeniz gereken bu …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir