I have 4+ experience and working as software Engineer with Hytech professionals India PVT ltd and also working as Consultant,Trainer,Blogger and Author on Microsoft technologies,Also I have Trained more than 500+ IT professionals.I have knowledge about Asp.net,C#,SQL,Project management,replication,MVC,WebApi,SSRS,PostMan,TFS,SVN,Swagger,WMI,Agile,SignalR,Angularjs,IIS configuration.

Part 15::Event Handling in AngularJs.

While making more progressed AngularJS applications, eventually your application should handle DOM events like mouse clicks, moves, keyboard presses, change events etc. AngularJS has a basic model for how to add event listeners members to the HTML you create from your perspectives. This content will clarify this model.
For Video session visit:Event handling
Event Handling flow
Event Handling Flow chart
Event Listener Directives in AngularJs:-
 You can  use an event listener to an HTML element using one of the AngularJS event  listener  directives:-
  1. ng-click
  2. ng-dbl-click
  3. ng-mousedown
  4. ng-mouseup
  5. ng-mouseenter
  6. ng-mouseleave
  7. ng-mousemove
  8. ng-mouseover
  9. ng-keydown
  10. ng-keyup
  11. ng-keypress
  12. ng-change
Basic event listener directive example in AngularJs:-

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="Myctrl" >
<div ng-click="Data.dataClick ()">Submit</div>
</div>
<script>
angular.module("app", [])
.controller("myctrl", function($scope) {
$scope.Data = {};
$scope.Data.dataClick = function() {
alert("clicked on button!!");
}
} );
</script>
</body> 
</html>

Description:-
    When you tap the internal div of the above illustration, the "Data.dataClick()" function will called. As should be obvious in the controller functions , the "Data" object has a "dataClick()" functions added to it.

As should be obvious, joining events to HTML DOM components is very little not the same as creating the HTML in any case. The event listener functions called are functions added to the "$scope" object by the controller functions .

parameterized($event) event listener directive example in AngularJs:-
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="myctrl" >
<div ng-click="Data.dataClick($event)">Submit</div>
</div>
<script>
angular.module("app", [])
.controller("myctrl", function($scope) {
$scope.Data = {};
$scope.Data.dataClick = function(event) {
alert("clicked Event : " + event.clientX + ", " + event.clientY);
}
} );
</script>
</body> 
</html>
parameterized($event,item) event listener directive example in AngularJs:-

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="myctrl" >
<ul>
<li ng-repeat="item in Data.items"
ng-click="Data.dataClick(item, $event)">Submit</li>
</ul>
</div>
<script>
angular.module("app", [])
.controller("myctrl", function($scope) {
$scope.Data = {};
$scope.Data.items = [{ v: "1"}, { v: "2"}, { v : "3"} ];
$scope.Data.dataClick = function(item, event) {
alert("clicked Event: " + item.v + " @ " + event.clientX + ": " + event.clientY);
}
} );
</script>
</body> 

</html>

Description:-
   In this example iterates through a list of "items" data, generates li elements from them, and adds click listeners to each li html  element. Along with the call to the click listener is passed the item JavaScript object the li  html element was generated based on, along with the click event object "($event)".


You have just read an article that categorized by title AngularJs by title Part 15::Event Handling in AngularJs.. You can bookmark this page with a URL https://bikeshsrivastava.blogspot.com/2016/03/part-15event-handling-in-angularjs.html. Thank You!
Author: Bikesh Srivastava - Monday, 14 March 2016

There are currently no comments for "Part 15::Event Handling in AngularJs."

Post a Comment

Life Is Complicated, But Now programmer Can Keep It Simple.