AngularJS’de Olay(Event) Oluşturma ve Tetikleme

Merhaba,

Bu içeriğimizde AngularJS’de Olay(Event) oluşturmayı ve oluşturduğumuz bu olayı tetiklemeyi inceleyeceğiz.

AngularJS’de DOM nesneleri üzerinde aşağıdaki direktifler sayesinde genel geçer olayları tetikleyebilmekteyiz;

  • ng-blur
  • ng-change
  • ng-click
  • ng-copy
  • ng-cut
  • ng-dblclick
  • ng-focus
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-paste

Şimdi direkt olarak Peki bu olayları nasıl tetikliyoruz? sorusuna yanıtla başlayalım.

Olay direktiflerimizden “ng-click” direktifini numune olarak ele alalım ve bunun üzerinden örneklendirmeyle konuyu değerlendirelim.

Şimdi bir buton nesnesine tıklandığı zaman click olayını tetikleyelim ve bir işlem başlatalım.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body ng-app="">
    <div ng-init="Sayi = 0"></div>
    <input type="submit" ng-click="Sayi = Sayi + 1" value="Tıkla" />
    <span>{{Sayi}}</span>
</body>
</html>

Yukarıdaki örneği incelerseniz eğer “ng-init” direktifi ile oluşturulmuş “Sayi” değişkeninin değeri butona tıklandığında bir arttırılmakta ve bu değer aşağıda yazdırılmaktadır.
AngularJS'de Olay(Event) Oluşturma ve Tetikleme

AngularJS’de olaylar üzerinde prosedürel işlemleri kullanabildiğimiz gibi asıl fonksiyonel mantıkta çalışmalar gerçekleştirilmektedir. Bunun içinde modüle bağlı controller içerisinde oluşturucağımız fonksiyonu kullanmamız yeterli olacaktır.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script>
        var Uygulama = angular.module("Uygulama", []).controller("UygulamaController", function ($scope) {
            $scope.Fonksiyon = function () {
                alert("Merhaba");
            };
        });
    </script>
</head>
<body ng-app="Uygulama" ng-controller="UygulamaController">
    <input type="submit" ng-click="Fonksiyon()" value="Tıkla" />
</body>
</html>

Yukarıdaki kod bloğunu incelerseniz eğer “Uygulama” modülüne eklenen “UygulamaController” isimli controller içerisinde oluşturulan “Fonksiyon” isimli fonksiyon “ng-click” butonuna tanımlanmıştır. Haliyle aşağıdaki ekran görüntüsünde olduğu gibi butona tıklandığı vakit içeriğindeki işleve uygun sonuç alınmaktadır.
AngularJS'de Olay(Event) Oluşturma ve Tetikleme

Son olarak biraz daha kompleks ve işlevsellik gerektiren örneklendirmeyle makalemizi sonlandıralım. Yapacağımız işlem bir liste üzerindeki satırlarda beğenme/beğenmeme olayı yaratmaktır.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script>
        var Uygulama = angular.module("Uygulama", []).controller("UygulamaController", function ($scope) {
            var Uygulamalar =
                [
                    { UygulamaAdi: 'Firefox', SonGuncelleme: '14.03.2018', Begeni: 0 },
                    { UygulamaAdi: 'Müzik Çalar', SonGuncelleme: '09.03.2018', Begeni: 0 },
                    { UygulamaAdi: 'e-Devlet', SonGuncelleme: '01.02.2018', Begeni: 0 },
                    { UygulamaAdi: 'WhatsApp', SonGuncelleme: '11.01.2018', Begeni: 0 },
                    { UygulamaAdi: 'CIA', SonGuncelleme: '02.03.2018', Begeni: 0 }
                ];
            $scope.Uygulamalar = Uygulamalar;
            $scope.Degerlendir = function (Uygulama, Oy) {
                if (Oy == 1)
                    Uygulama.Begeni += 1;
                else if (Oy == 2)
                    Uygulama.Begeni -= 1;
            };
        });
    </script>
</head>
<body ng-app="Uygulama" ng-controller="UygulamaController">
    <table style="width:40%;">
        <thead>
            <tr style="text-align:left;">
                <th>Uygulama Adı</th>
                <th>Son Güncelleme Tarihi</th>
                <th>Değer</th>
                <th>Beğen</th>
                <th>Beğenme</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="Uygulama in Uygulamalar">
                <td>{{Uygulama.UygulamaAdi}}</td>
                <td>{{Uygulama.SonGuncelleme}}</td>
                <td style="text-align:center;">{{Uygulama.Begeni}}</td>
                <td><button ng-click="Degerlendir(Uygulama, 1)">Beğen</button></td>
                <td><button ng-click="Degerlendir(Uygulama, 2)">Beğenme</button></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Örnekte de incelediğiniz üzere “Uygulamalar” isimli dizi gene aynı isimde tanımlanan bir değişkene atanmıştır. View kısmında ise bu dizi içerisinde dönülerek tablo oluşturulmuş ve her satıra karşılık gelen butonların click eventına “Degerlendir” isimli fonksiyon tanımlanmıştır. İlgili fonksiyon içerisinde değere bağlı prosedürel işlemler gerçekleştirilmiştir. Sonuç olarak bu çalışmayı çalıştırdığımızda aşağıdaki ekran görüntüsündeki işlevsellikte bir çalışmayla karşılaşmaktayız.
AngularJS'de Olay(Event) Oluşturma ve Tetikleme

Yukarıdaki yapmış olduğumuz çalışmalar neticesinde gözlemleneceği üzere Two Way Data Binding özelliği sayesinde müdahale edilen tüm yapıların değerleri view katmanındaki ilgili alana yansıtılmaktadır. Bu özelliğe de, kullandığımız teknolojinin ne kadar dinamik ve hızlı olduğunu gösterdiğinden dolayı tekrardan dikkatinizi çekmek istedim.

Sonraki yazılarda görüşmek üzere…
İyi çalışmalar dilerim…

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

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

*

Copy Protected by Chetan's WP-Copyprotect.