HTML Advance
Html5 Grid
Html5 Graphics
Html5 Media
Introduction to AngularJS
AngularJS Tutorial
There are certain directives available in angularJS to provide custom behavior to Dom Elements such as:
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. |
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>
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>
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>
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>
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>
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. In the HTML block, we have decored a text box with
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>
ng-keydown
, ng-keypress
and ng-keyup
directive that calls KeyDown(), KeyPress() and KeyUp() function respectively.
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>