Bu derste controller ların nasıl kullanıldığını göreceğiz. Tam sıralı bir ders oluşturmak istiyordum ama direk uygulamalar üzerinden anlatmam daha iyi olacak gibi. Evet uygulamamız üzerinden sırası ile anlatalım.
1.html'in başladığı yerde tanımlanan ng-app tagına dikkat edin. ng-app in tanımlı olduğu element içerisinde çalışabileceğimiz anlamına gelir. Angular JS de modüller oluşturup bunları istediğimiz alanlarda çalışacak şekilde kullanabiliriz. Buna sonra döneceğiz. İşte bu modüllerin istenen element içinde kullanılmasını ng-app ile sağlayacağız. Örneğimizdeki sayfada herhangi bir modül kullanmadığımız için bir bildiri yapmadık ve oluşturduğumuz controller ı direk kullanabiliriz. Hiç modül kullanmayacak olsak bile ng-app yi eklemek zorundayız.
2.ng-controller tagı ile controller ımızın hangi element içinde çalışacağını bildiriyoruz. Oluşturduğumuz fonksiyonda $scope isimli parametremiz ile controller ımıza tüm veri giriş çıkışlarını kullanabilirsiniz. Yani this yok $scope var örneğimizde görüldüğü gibi kisiler array ını $scope a ekledik ve controller ımızı dahil ettiğimiz element içinde kullanabiliriz.
3.Ve işte Angular JS nin en iyi özelliklerinden biri olan ng-repeat. ng-repeat controller içinde tanımladığınız array ı alıyor ve kullanıldığı element içinde bir döngü kurarak JSON ile yazmak istediğimiz elemana direk erişip kullanabilmemizi sağlıyor.{{ }} arasına yazdırmak istediğimiz elemanı ekliyoruz.
<li ng-repeat='kisi in kisiler'>
{{ kisi.isim }}
</li>
4.Ve şimdi geldik ng-model e. ng-model eklendiğimi form elementlerinden input ları çekerek controller da $scope ile erişmemizi sağlıyor.
<input type="text" ng-model="isim"/>
5.ng-click içerisinde yazılan fonksiyonun ise çalıştırılmasını sağlıyor. Fonksiyonu $scope ile controller içinde tanımlıyoruz. Fonksiyon çağrıldığı anda input ta yazılan yazı array a ekleniyor. Yazıyı ekleyip input u temizliyoruz.
$scope.ekle = function(){
$scope.kisiler.push({isim:$scope.isim});
$scope.isim = '';
}
Bu dersimizde ng-app,ng-controller,ng-model ve ng-repeat in basit bir kullanımını anlatmaya çalıştım. Sonraki dersimizde görüşmek üzere.
Hiç yorum yok:
Yorum Gönder