Best Angularjs training institute | IT training-insitute-in-gurgaon

Directive	Description
ng-blur	It will execute the particular code when a user loses focuses from the element with which ng-blur directive attach.
ng-change	It is meant for performing operations when a component value or event is changed
ng-click	It consists of that particular code when the element will click, it will execute.
ng-dblclick	It invokes whenever an element with which ng-dblclick is attached is double-clicked.
ng-focus	It will execute the particular code when the user focuses on the element with which the ng-focus directive is attached.
ng-keydown	It tells AngularJS what to do when the keyboard is used on the specific HTML element.
ng-keyup	It is used to raise or call events / custom functions on keyup event.
ng-keypress	It is used to apply custom behavior on a keypress event.
ng-mousedown	It executes when mouse is clicked on the element.
ng-mouseenter	It executes when mouse enters into the element area.
ng-mouseleave	It executes when mouse enters into the element area.
ng-mousemove	It executes when mouse is moved on the element area.
ng-mouseover	It executes when mouse is kept over the element.
ng-mouseup	It executes when mouse is left after clicking the element.

ng-blur

This directive will execute the particular code when a user loses focuses from the element with which ng-blur directive attach. The ng-blur directive from AngularJS will not override the element's original onblur event, both the ng-blur expression and the original onblur event will be executed.

Execute an expresson when the input field is on blur:
AngularJS Example
<input ng-blur="count = count + 1" ng-init="count=0" />

<h1>{{count}}</h1>

ng-change

The ng-change directive tells AngularJS what to do when the value of an HTML element changes. The ng-change directive requires a ng-model directive to be present. The ng-change directive from AngularJS will not override the element's original onchange event, both the ng-change expression and the original onchange event will be executed. The ng-change event is triggered at every change in the value. It will not wait until all changes are made, or when the input field loses focus. The ng-change event is only triggered if there is a actual change in the input value, and not if the change was made from a JavaScript.

Execute an expresson when the input field is changed:
AngularJS Example
<body ng-app="myApp">

<div ng-controller="myCtrl">
    <input type="text" ng-change="myFunc()" ng-model="myValue" />
    <p>The input field has changed {{count}} times.</p>
</div>

<script>

angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
    $scope.count = 0;
    $scope.myFunc = function() {
        $scope.count++;
    };
}]);
</script>

</body>

ng-click

The ng-click directive consists of that particular code when the element will click, it will execute.

Execute a function, in AngularJS, when a button is clicked:
AngularJS Example
<body ng-app="myApp">

<div ng-controller="myCtrl">
    <button ng-click="myFunc()">OK</button>
    <p>The button has been clicked {{count}} times.</p>
</div>

<script>

angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
    $scope.count = 0;
    $scope.myFunc = function() {
        $scope.count++;
    };
}]);

</script>

</body>

ng-dbclick

The ng-dblclick directive tells AngularJS what to do when an HTML element is double-clicked. The ng-dblclick directive from AngularJS will not override the element's original on dblclick event, both are executed.

Increase the count variable by one, each time the header is double-clicked:
AngularJS Example
<h1 ng-dblclick="count = count + 1" ng-init="count=0">Welcome</h1>

ng-focus

The ng-focus directive tells AngularJS what to do when an HTML element gets focus. The ng-focus directive from AngularJS will not override the element's original onfocus event, both will be executed.

Execute an expression when the input field gets focus:
AngularJS Example
<input ng-focus="count = count + 1" ng-init="count=0" />

<h1>{{count}}</h1>

ng-keys

Like mouse related directives, there are few key related directives also in AngularJS and they are below:
1.ng-keydown - executes when key is starting to press (this executes first and then keypress event executes)
2.ng-keypress - executes when key is pressed
3.ng-keyup - executes when key is left after pressing

In the <script> block, we have defined 3 functions for ng-keydown, ng-keypress and ng-keyup directives. Each function sets respective $scope property with the event name and current time.
AngularJS Example

<script>

    var app = angular.module("app", []);
    app.controller("KeyController", function ($scope) {
        $scope.KeyDown = function () {
            $scope.keydown = " Key down executes " + new Date().getTime();
        }

        $scope.KeyPress = function () {
            $scope.keypress = " Key press executes " + new Date().getTime();
        }

        $scope.KeyUp = function () {
            $scope.keyup = " Key up executes " + new Date().getTime();
        }
    });

</script>
<h2>Key Events</h2>
<div ng-app="app" ng-controller="KeyController">
    <p>Try writing something in the textbox below</p>

    <input type="text"ng-keydown="KeyDown()" ng-keypress="KeyPress()"ng-keyup="KeyUp()" />

    <hr />
    <p>Key down - {{ keydown }}</p>
    <p>Key press - {{ keypress }}</p>
    <p>Key up - {{ keyup }}</p>

</div>

In the HTML block, we have decored a text box with ng-keydown, ng-keypress and ng-keyup directive that calls KeyDown(), KeyPress() and KeyUp() function respectively.

ng-mouse

To perform mouse operations in AngularJS, we can use different mnouse directives available:
1)ng-mousedown - executes when mouse is clicked on the element.
2)ng-mouseenter - executes when mouse enters into the element area.
3)ng-mouseleave - executes when mouse leaves the element area.
4)ng-mousemove - executes when mouse is moved on the element area.
5)ng-mouseover - executes when mouse is kept over the element.
6)ng-mouseup - executes when mouse is left after clicking the element.

In the script block, we have defined various functions/methods for respective mouse events explained above. Each event set its own $scope property with the event name and the current time this event executes.
AngularJS Example
<script>

    var app = angular.module("app", []);
    app.controller("MouseController", function ($scope) {

        $scope.MouseDown = function ($event) {
            $scope.MouseDownDescription = $event + " Mouse down called" + new Date().getTime();
        }

        $scope.MouseEnter = function ($event) {
            $scope.MouseEnterDescription = $event + " Mouse enter called" + new Date().getTime();
        }

        $scope.MouseLeave = function ($event) {
            $scope.MouseLeaveDescription = $event + " Mouse leave called" + new Date().getTime();
        }

        $scope.MouseMove = function ($event) {
            $scope.MouseMoveDescription = $event + " Mouse move called" + new Date().getTime();
        }

        $scope.MouseOver = function ($event) {
            $scope.MouseOverDescription = $event + " Mouse over called" + new Date().getTime();
        }

        $scope.MouseUp = function ($event) {
            $scope.MouseUpDescription = $event + " Mouse up called" + new Date().getTime();
        }
    });

</script>