English Description
Event Identifiers in AngularJS
In the previous episode we reviewed the features provided by AngularJS for forms and inputs.
In this section, we will give a few little details on how Javascript event descriptors are used on AngularJS directives and how AngularJS variables are connected to events.
What are JavaScript Events?
Javascript events I think most readers have knowledge are a reference to the actions of the user. User made; clicking on a DOM object, hovering over it, pressing a key on the keyboard, or loading a page can be an example of a Javascript event.
The DOM (Document Object Model) elements listen to events and invoke this function if a specific function has been assigned to it when the event fires.
Türkçe Açıklama
AngularJS'de Olay Tanımlayıcıları
Bir önceki bölümümüzde, AngularJS tarafından form ve input'lar için sunulan özellikleri inceledik.
Bu bölümde, Javascript olay tanımlayıcılarının AngularJS direktifleri üzerinde nasıl kullanıldığını ve AngularJS değişkenlerinin olaylara nasıl bağlanacağı üzerine küçük birkaç bilgi vereceğiz.
JavaScript Olayları Nedir?
Çoğu okuyucunun bilgi sahibi olduğunu düşündüğüm Javascript olayları kullanıcının aksiyonlarına bir referanstır. Kullanıcının yaptığı; bir DOM objesine tıklama, üzerine gelmesi, klavyede bir tuşa basmak veya sayfanın yüklenmesi, Javascript olayı olarak örnek verilebilir.
DOM (Document Object Model) elementleri, olayları dinler ve olayın ateşlenmesi durumunda, dinlediği olaya özel fonksiyon atanmış ise bu fonksiyonu çağırır.
Örneğin, bir elemente tıklanması durumununda tetiklenecek olacak fonksiyonu şöyle atıyoruz:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>
<div onclick="tetiklenecekFonksiyon()">Tıkla!</div>
</body>
</html>
Not: Buraya kadar bahsettiğimiz konulardan çoğumuzun bilgisi var. Fakat AngularJS kullanırken aklımıza şöyle bir soru gelebilir. Peki AngularJS fonskiyonlarını bu olay tanımlayıcıları ile nasıl kullanacağım?
AngularJS, kendi fonksiyonlarım olay tanımlayıcılarına bağlamak için kendi direktiflerine (nitelik tanımlayicılarına) sahiptir. Örneğin, AngularJS kontrol metodum üzerinde tutulan bir fonksiyonu, bir DOM elementine tıkladığımda tetiklemek istersem şu yapıyı kullanmam gerekecek:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>
<div ng-click="tetiklenecekAngularFonksiyonu()">Tıkla!</div>
</body>
</html>
Not: Anlattıklarımıza ek olarak, tüm Javascript olayları için bir AngularJS direktifi olduğunu ve bağına ng-eki getirerek kullandığımızı da not olarak ekleyelim.
AngularJS Olay Tanımlayıcılarının Kullanımı
Kullanımı çok basit olan, olay tammlayıcısı atama olayını basit bir tıklama örneği ile gösterelim:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
{{ yazi }}
<hr>
<button ng-click="tiklandi()">Tıkla</button>
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope){
$scope.yazi = "Butona Tıklayın!";
$scope.tiklandi = function(){
$scope.yazi = "Merhaba Dünya!!";
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
{{ yazi }}
<hr>
<button ng-click="tiklandi()">Buraya Tıklamalısın!</button>
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope){
$scope.yazi = "Lütfen Aşağıdaki Butona Tıklayınız!";
$scope.tiklandi = function(){
$scope.yazi = "Butona Tıkladığınız İçin Teşekkürler :)";
}
});
</script>
</body>
</html>
Bu örneğimizde, önceki bölümlerde de gösterdiğimiz fakat mantığını açıklamadığımız görünüme fonksiyon bağlama olayının nasıl gerçekleştiğini daha net bir şekilde görebilirsiniz.
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
{{ yazi }} <hr>
<button ng-click="tiklandi()">Tıkla</button>
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope){
$scope.yazi = "Butona Tıklayın!";
function tiklandi(){
$scope.yazi = "Merhaba Dünya!!";
}
});
</script>
</body>
</html>
Bu örnekde çok küçük bir değişiklik yaptık. Tiklandi() fonksiyonunu bir $scope fonksiyonu olarak atamaktansa, controller içerisinde görünüme kapalı olarak tanımladık.
Bu örnek istendiği gibi çalışmayacaktır. Bunun temel nedeni, tiklandi() fonksiyonunun görünüm tarafından kuılanılabilir bir fonksiyon olmamasıdir. Direktif olay tanımlayıcıları için kullanılan fonksiyonların $scope üzerinde tanımlı-bağlı olması gerekmektedir.
Kullanımı çok yaygın olan JQuery kütüphanesi, AngularJS'in olay dinleyicileri ile karmaşa yaratabilmektedir. Bu açıdan Jquery'nin bırakın tek başına, AngularJS ile birlikte kesinlikle kullanılmaması gerektiğinden yanayım.
AngularJS'de kullanılabilecek olay tetikleyici direktifleri şöyle sıralayabiliriz;
Github: https://github.com/angular/angular.js
Posted on Utopian.io - Rewarding Open Source Contributors