Bu yazıda AngularJS ile olayları nasıl işlediğimizi inceleyeceğiz.
Olayları anlatmanın en kolay yolu bir örnekle açıklamak olsa gerek. Hadi bir örnekle AngularJS de olaylar nasıl kullanılıyor açıklayalım.
Yukarıdaki tabloda beğen ve beğenme butonları var. Hemen yanlarında da programlama dilleri ve bunları beğenme durumları mevcut. Beğen butonuna basınca beğen değeri bir artacak. Beğenme butonuna basınca beğenme değeri 1 artacak.
Bu açıklamadan sonra angular tarafında neler olacağını açıklayalım.
SCRIPT :Anguarjs tarafında İki tane metodumuz olacak. Birincisi beğen olayını takip edecek. İkincisi de beğenme olayını takip edecek.
Bir de programlama dilleri için bir tane de modelimiz olması gerekiyor. Diller adındaki model içinde dilin adını, beğen ve beğenme oranlarını tutacak.
Toparlayacak olursak, controller içinde iki metod ve bir tane modeli aşağıdaki şekilde oluşturmuş olacağız.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
var app = angular .module("dilModul", []) .controller("dilController", function ($scope) { var diller = [ { adi: "PHP", begen: 0, begenme: 0 }, { adi: "C#", begen: 0, begenme: 0 }, { adi: "Java", begen: 0, begenme: 0 }, { adi: "JavaScript", begen: 0, begenme: 0 } ]; $scope.diller = diller; $scope.begenArttir = function (dil) { dil.begen++; }; $scope.begenmeArttir = function (dil) { dil.begenme++; }; }); |
HTML: Dikkatle baktığımızda beğen() ve beğenme() metodlarını butonlara bağladığımızı göreceksiniz. Butonlara tıkladığımızda bağlı olan fonksiyon çalışacak ve beğen yada beğenme değerini otomatik olarak arttıracaktır.
Burada dikkat edilmesi gereken nokta şu olabilir. Ng-repeat ile dizilerden bir nesne çekilmiş (burada dil) ve olaya parametre olarak geçilmiştir. Olay hangi değeri arttıracağını bu geçilen parametre ile anlamaktadır.
|
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 |
<body ng-app="dilModul"> <div ng-controller="dilController"> <table border="1"> <thead> <tr> <th>ADI</th> <th>BEĞENDİ</th> <th>BEĞENMEDİ</th> <th>Beğen/Beğenme</th> </tr> </thead> <tbody> <tr ng-repeat="dil in diller"> <td> {{ dil.adi }} </td> <td style="text-align:center"> {{ dil.begen }} </td> <td style="text-align:center"> {{ dil.begenme }} </td> <td> <input type="button" ng-click="begenArttir(dil)" value="BEĞEN" /> <input type="button" ng-click="begenmeArttir(dil)"value="BEĞENME" /> </td> </tr> </tbody> </table> </div> </body> |
HTML & SCRIPT
|
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<!doctype html> <html> <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("dilModul", []) .controller("dilController", function ($scope) { var diller = [ { adi: "PHP", begen: 0, begenme: 0 }, { adi: "C#", begen: 0, begenme: 0 }, { adi: "Java", begen: 0, begenme: 0 }, { adi: "JavaScript", begen: 0, begenme: 0 } ]; $scope.diller = diller; $scope.begenArttir = function (dil) { dil.begen++; }; $scope.begenmeArttir = function (dil) { dil.begenme++; }; }); </script> </head> <body ng-app="dilModul"> <div ng-controller="dilController"> <table border="1"> <thead> <tr> <th>ADI</th> <th>BEĞENDİ</th> <th>BEĞENMEDİ</th> <th>Beğen/Beğenme</th> </tr> </thead> <tbody> <tr ng-repeat="dil in diller"> <td> {{ dil.adi }} </td> <td style="text-align:center"> {{ dil.begen }} </td> <td style="text-align:center"> {{ dil.begenme }} </td> <td> <input type="button" ng-click="begenArttir(dil)" value="BEĞEN" /> <input type="button" ng-click="begenmeArttir(dil)"value="BEĞENME" /> </td> </tr> </tbody> </table> </div> </body> </html> |
Ayrıca angularjs ile şu olay yönergelerini de kullanarak HTML öğelerini dinleyebilirsiniz.
- 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
[…] Konu 7: AngularJS Olay Kullanımı […]