AngularJS allow you to extend HTML with new attribute call Directive. AngularJS support two type of directives , inbuilt and custom . Several number of inbuilt directive are in the AngularJs, custom directive also can be design in AngularJS. Below is the list of commonly used inbuilt directives.
| List of Inbuilt Directives | ||
|---|---|---|
| ng-app | ng-bind | ng-bind-template |
| ng-change | ng-checked | ng-class |
| ng-[dbl]click | ng-cloak | ng-controller |
| ng-disabled | ng-hide | ng-show |
| ng-href | ng-include | ng-init |
| ng-model | ng-mousedown | ng-mouseenter |
| ng-mouseleave | ng-mousemove | ng-mouseover |
| ng-mouseup | ng-non-bindable | ng-options |
| ng-pluralize | ng-readonly | ng-repeat |
| ng-src | ng-style | ng-submit |
| ng-switch | ng-switch | ng-switch |
| ng-transclude | ng-view | ng-bind-html |
ng-app: ng-app define an application. It is the root element of an application.ng-app automatically load when the page is load. You can declare number of controller and models under a single application.ng-app is auto-bootsrap (automatic load). Manual loading is also possible.
Example (A simple example with multiplication)
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<script>
var
app = angular.module("myApp",
[]);
</script>
<div
ng-app="myApp"
ng-init="a=10;b=10;c=5">
{{
a*b*c }}
</div>
500
Example (A simple manual load)
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<script>
angular.element(document).ready(function
()
{
angular.bootstrap(document);
});
</script>
<div
ng-app=""
>
{{5*2}}</br>{{5-2}}
</div>
Output:
10
3
ng-init: Define the initial values of AngularJS variables. Variable like string, integer, object, array can be declared. Generally place ng-app tag.
Example (A simple example with multiplication)
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<script>
var
app = angular.module("myApp",
[]);
</script>
<div
ng-app="myApp"
ng-init="x=10;y=10;z=5">
{{
x*y }}<br/>{{
y*z }}
</div>
Output:
100
50
Example (A simple example with array)
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<script>
var
app = angular.module("myApp",
[]);
</script>
<div
ng-app="myApp"
ng-init="obj=[2,3,5]">
{{obj[1]}}X{{obj[2]}}={{
obj[1]*obj[2] }}
</div>
Output :
3X5=15
ng-model: ng-model bind HTML with values. It is a two way binding . Change in one contol will be effect other control and vice versa. ng- model support validation directives . ng- model support validation like (number, email, required). ng- model support status data (invalid, dirty, touched, error). Below are some directives, that ng-model support.
-
ng-not-empty
-
ng-touched
-
ng-untouched
-
ng-valid
-
ng-invalid
-
ng-dirty
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
mypartone = angular.module("myApp",
[]).controller("myController",
function($scope)
{
var
students = {
Name:
"Student1",
Age:
12,
Address:
"kolkata",
};
$scope.student
= students;
});
</script>
<div
ng-app="myApp">
<div
ng-controller="myController">
<table>
<tr>
<td>
Name
:
</td>
<td>
<input
type="text"
ng-model="student.Name"
/>
</td>
</tr>
<tr>
<td>
Age
:
</td>
<td>
<input
type="text"
ng-model="student.Age"
/>
</td>
</tr>
<tr>
<td>
Address
:
</td>
<td>
<input
type="text"
ng-model="student.Address"
/>
</td>
</tr>
</table>
<br
/>
<br
/>
<br
/>
<table>
<tr>
<td>
Name
:
</td>
<td>
{{student.Name}}
</td>
</tr>
<tr>
<td>
Age
:
</td>
<td>
{{student.Age}}
</td>
</tr>
<tr>
<td>
Address
:
</td>
<td>
<input
type="text"
ng-model="student.Address"
/>
</td>
</tr>
</table>
</div>
Output :
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body
ng-app="">
<span>If
the input is blank then , validation false, else true</span>
<form
name="myForm">
<input
name="myInput"
ng-model="myInput"
required
>
</form>
<span>
{{myForm.myInput.$valid}}</span>
</body>
</html>
Example (A simple example of ng-model to work with scope)
<!DOCTYPE
>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
angular.module("myapp",
[]).controller("myController",
function
($scope) {
$scope.person
= 'This
is a simple example';
});
</script>
<div
ng-app="myapp">
<div
ng-controller="myController">
<input
type="text"
ng-model="person"
/>
</div>
</div>
Example (A simple example of repeat)
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<html
ng-app>
<div
ng-init="Student=[{name:'Student1',Age:12},
{name:'Student2',Age:15},{name:'Student3',Age:18}]">
<ul>
<li
ng-repeat="obj
in Student">Name
: {{obj.name}} | Age : {{obj.Age}}</li></font>
</ul>
</div>
</html>
- Name : Student1 | Age : 12
- Name : Student2 | Age : 15
- Name : Student3 | Age : 18
Example (A simple example of nested loop)
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body
ng-app="myapp">
<script>
angular.module("myapp",
[])
.controller("myController",
function
($scope) {
$scope.person
= [
{
name: "User
1",
age: 12, mark: [{ lang: 50, math: 80, geo: 60}] },
{
name: "User
2",
age: 18, mark: [{ lang: 60, math: 90, geo: 70}] },
{
name: "User
3",
age: 20, mark: [{ lang: 70, math: 100, geo: 80}] }
];
});
</script>
<div
ng-controller="myController">
<table
border="1">
<tr
ng-repeat="obj
in person">
<td
bgcolor="#00FF00">
<span>Name
: {{obj.name}}</span>
<span>Age
: {{obj.age}}</span>
<span
ng-repeat="subobj
in obj.mark">
<table>
<tr>
<td>
Language
:
</td>
<td>
{{subobj.lang}}
</td>
</tr>
<tr>
<td>
Math
:
</td>
<td>
{{subobj.math}}
</td>
</tr>
<tr>
<td>
Geography
:
</td>
<td>
{{subobj.geo}}
</td>
</tr>
</table>
</span>
</td>
</tr>
</table>
</div>
</body>
Output :
Example (A simple example of loop from a given data)
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body
ng-app="myapp">
<script>
var
data= [
{
name: "User
1",
age: 12, mark: [{ lang: 50, math: 80, geo: 60}] },
{
name: "User
2",
age: 18, mark: [{ lang: 60, math: 90, geo: 70}] },
{
name: "User
3",
age: 20, mark: [{ lang: 70, math: 100, geo: 80}] }
];
angular.module("myapp",
[])
.controller("myController",
function
($scope) {
$scope.person
= data;
});
</script>
<div
ng-controller="myController">
<table
border="1">
<tr
ng-repeat="obj
in person">
<td
bgcolor="#00FF00">
<span>Name
: {{obj.name}}</span>
<span>Age
: {{obj.age}}</span>
<span
ng-repeat="subobj
in obj.mark">
<table>
<tr>
<td>
Language
:
</td>
<td>
{{subobj.lang}}
</td>
</tr>
<tr>
<td>
Math
:
</td>
<td>
{{subobj.math}}
</td>
</tr>
<tr>
<td>
Geography
:
</td>
<td>
{{subobj.geo}}
</td>
</tr>
</table>
</span>
</td>
</tr>
</table>
</div>
</body>
Example (A simple example of repeat using track by )
track
by $index is applied when your data source has duplicate identifiers .track
by
is used in order to link your data with the DOM generation made by ng-repeat
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<html
ng-app>
<div
ng-init="Student=[{name:'Student1',Age:12},
{name:'Student2',Age:15},{name:'Student3',Age:18}]">
<ul>
<li
ng-repeat="obj
in Student track by $index ">{{$index}}.
Name : {{obj.name}} | Age : {{obj.Age}}</li></font>
</ul>
</div>
</html>
Output
- 0. Name : Student1 | Age : 12
- 1. Name : Student2 | Age : 15
- 2. Name : Student3 | Age : 18
A
directive can be made custom.Below is a example of Custom Directive.An AngularJS can create the custom directive for the following types
of elements.Restrict mode ensure that directive will activate with
the matching element only.
Element
directives : Restriction mode 'E'. This mode activate for
type element only.
Example
:
Attribute : Restriction mode 'A'.This mode activate for type attribute only.
Example
:
CSS
:
Restriction mode 'C'.This
mode activate for class only.
Example
:
Comment
: Restriction mode 'M'.This
mode activate for comments only.
Below
is a example of custom directives with retriction
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<style>
.myClass
{
background-color:
red;
font-size:
large;
height:
100px;
width:
200px;
color:
aqua;
}
</style>
<script>
var
app = angular.module("myApp",
[]);
app.directive('myCustomDirective',
function
()
{
return
{
link:
function
($scope, element, attrs)
{
restrict:
'A',
element.bind('click',
function
()
{
element.html('This
is simple Custom Directive');
});
}
};
});
</script>
<div
ng-app="myApp">
<div
my-custom-directive>Click
Me!</div>
</div>
</body>
Output :
Click Me!-->>Click-->This is simple Custom Directive
No comments:
Post a Comment