By Prem Tiwari in Angular JS. Updated on
Hello friend, hope you are in good health and spirit. In today tutorial, I am going to share the angular js events and its uses for example in real-time web applications.
If you have just started with angular js or want to learn Angular js, then keep your close attention in this tutorial. This tutorial is very helpful for you.
If you are a web developer, you have to deal with different DOM (Document Object Model) events like the key press, mouse over, mouse click and other DOM events.
Below is the list of angular js event listeners:
1) ng-blur
2) ng-change
3) ng-click
4) ng-copy
5) ng-cut
6) ng-dblclick
7) ng-focus
8) ng-keydown
9) ng-keypress
10) ng-keyup
11) ng-paste
Below angular js events are the Mouse Events.
1) ng-mousedown
2) ng-mouseenter
3) ng-mouseleave
4) ng-mousemove
5) ng-mouseover
6) ng-mouseup
Blow is an example of ng-mousemove events.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> <h1 ng-mousemove="count = count + 1">Mouse Over Me!</h1> <h2>{{ count }}</h2> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.count = 0; }); </script> </body> </html> |
Blow is an example of ng-click events.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> <button ng-click="count = count + 1">Click Here!</button> <p>{{ count }}</p> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.count = 0; }); </script> </body> </html> |
Sharing is caring!
Tags: angularjs 1 tutorial, angularjs and php, angularjs dom events, angularjs events, angularjs examples, angularjs tutorial, angularjs tutorial for beginners
