Thursday, 25 June 2015

Angular JS Events

Almost all of you have heard of the 'Event handling', to develop outstanding applications we will need to handle certain events within like a mouse click, key press, unload, etc. Angular JS provides the simplest way to add event listeners to our app. Let's get started experiencing an event handling in Angular JS.

First, I'll start with embedding a click event to our angular is app.

<code>
<div ng-controller="HelloController">
<div ng-click="helloData.hClick()">
<code>Click here</code></div>
</div>
<code>
/* script start*/
<script>
    angular.module("helloapp", [])
            .controller("HelloController", function($scope) {
                $scope.helloData = {};
                $scope.helloData.hClick = function() {
                    alert("Hello World");
                }
            } );
</script>
/* script end */
</code>

On clicking the text "click here" hClick() function is called resulting the output. I guess there is not much difficulty to do so, all we need is an 'ng-click' provided by angular js. This is only simple demonstration, please suggest further improvements and feel free to raise questions.