Angularjs events tutorial

Event:

Happening something is known as event.

Angularjs events:

Angularjs provides no. of events directives to handle DOM events like mouse clicks, moves, keyboard presses, change events etc. We can add AngularJS event listeners to our HTML elements by using one or more of following directives: 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

Example Explanation:

First include the AngularJS library in the application. The ng-app directive initializes the application. The ng-controller directive defines the controller. We use ng-click event directive for event listener. When we click on Click Me! Button, angularjs handles it with ng-click event directive and call countFunction() method which increase the count by 1. Note: We can pass the $event object as an argument when calling the function. The $event object contains the original browser event object.

Example:

<!DOCTYPE html>
<html>
<script 
 src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
 
<div ng-app="testApp" ng-controller="appCtrl">
 
<button ng-click="countFunction()">Click Me!</button>
 
{{count }}
 
</div>
<script>
var app = angular.module('testApp', []);
app.controller('appCtrl', function($scope) {
    $scope.count = 0;
    $scope.countFunction= function() {
        $scope.count++;
    }
});
</script> 
 
</body>
</html>

Try it:

JS Bin on jsbin.com

Please follow and like us:
Content Protection by DMCA.com