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;
- Scope nesnesi ile karmaşık veriler gönderme
- Controller ismi yanlış yazıldığında ne olur
- Bir özellik ismi yanlış yazılmışsa ne olur
- 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.
|
1 2 3 4 5 |
ornUyg.controller("ornekController", function ($scope) { $scope.mesaj = "AngularJS Örneği"; }); |
[divider]
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var app=angular.module("uygulama",[]); //app uygulaması için modülü oluşturmak gerkiyor. Modülü oluşturduk ng-app="uygulama" yapılacak app.controller("musteriController", function ($scope) { var musteri = { isim: 'Hasan', soyisim: 'TAHSİN', cinsiyet: 'Erkek' }; $scope.musteri = musteri; }); |
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.
|
1 2 3 4 5 6 7 |
<div ng-controller="musteriController"> <div>ADI : {{ musteri.isim }}</div> <div>SOYADI : {{ musteri.soyisim }}</div> <div>CİNSİYETİ : {{ musteri.cinsiyet}}</div> </div> |
Yukarıdaki Kodun Tek Sayfada Yazılmış Şekli
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!doctype html> <html ng-app="uygulama"> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script> var app=angular.module("uygulama",[]); app.controller("musteriController", function ($scope) { var musteri = { isim: 'Hasan', soyisim: 'TAHSİN', cinsiyet: 'Erkek' }; $scope.musteri = musteri; }); </script> </head> <body> <div ng-controller="musteriController"> <div>ADI : {{ musteri.isim }}</div> <div>SOYADI : {{ musteri.soyisim }}</div> <div>CİNSİYETİ : {{ musteri.cinsiyet}}</div> </div> </body> </html> |
[divider]
Controller ismi yanlış yazıldığında ne olur
Controller adı yanlış yazılırsa 2 olay meydana gelir.
- Bir hata fırlatılır. Hatayı tarayıcının geliştirici ekranından görebilrisiniz.
- 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.
[divider]
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.
[divider]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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var myApp = angular .module("modulum", []) .controller("ornekCtrl", function ($scope) { var musteri = { isim: 'Ahmet', soyisim: 'CAN', cinsiyet: 'Erkek' }; $scope.musteri = musteri; }); |
AngularJS ile ilgili diğer yazıları da okumak istermisiniz.
Yazılarımızı beğendiyseniz. Paylaş butonu ile paylaşmanız bizi mutlu edecektir 🙂
[…] Konu 3: AngularJS Controller Yapısı […]