Angularjs is an open source JavaScript framework to develop web based applications. Angularjs is usually used to create Single Page Application. It is easy to code in AngularJS. Angular JS was build by google in 2011.
Directives in angularJS extends HTML code to provide new behaviour.
ng-app directive is the beginning directive of angularJS. It is used to auto bootstrap angularJS application. We generally use this directive at root level like inside html tag or in body tag.
ng-model is used to bind input fields, select and textarea with model and we can use this model in page. Ng-model provides the facility of two-way data binding.
As we know angularjs support mvc architecture which stands for model view controller. In mvc view represents the user interface and model is the data.
As we know angularjs support mvc architecture which stands for model view controller. In mvc view represents the user interface and model is the data.
Ng-init directive is used to initialize a variable, which will allows evaluating an expression in given scope. According to angular official document, this directive is abused as it adds unnecessary business logic in the application. Still to evaluate an expression we required that directive.
ng-include directive is used to add external html files into application. This directive helps us to create common page of website.
These both directives ng-show and ng-hide are used to manage the visibility of html controls. Both directives take true and false value to display or hide the html control.
Ng-if directive is condition based directive which removes or recreates the DOM portion according to condition.
Ng-switch is conditional directives which swap (show and hide) DOM elements according to expression. We use ng-switch-when to check conditions and ng-switch-default to put default condition.
Ng-src directive is used to bind dynamic image url. When we use src at img tag it will not work properly as it will fetch image before angularjs replace expression with url and 404 error occurred.
Ng-click directive provides the custom behaviour when an element is clicked. When elements clicked, it will call the event handler function, which bind to ng-click.
angularJS provides us the facility to create our own directives which is called custom directives. We have to register this directive in a module. We create directives in camel case. However, when we apply in the html code we use hyphen (-). Custom directives are the function, which return JSON Objects.
//custom directive
var x=angular.module('m1',[]);
x.directive('ngHello',function(){
return{
template:"hello world"
}
});
{{data}}
In angularjs controller is javascript function object which works as a mediator between view and model. Controller collects data from Model and pass it to View, i.e html in this case.
//scope and controler
var angmodule=angular.module('m1',[]).controller('course',function($scope){
$scope.courseName='angular';
$scope.fees='10000';
});
output :
Course :{{courseName}}
Course fees :{{fees}}
//custom directive
var x=angular.module('m1',[]);
x.directive('ngHello',function(){
return{
template:"hello world"
}
});
//scope and controler
var angmodule=angular.module('m1'[]).controller('course',function($scope){
$scope.courseName='angular';
$scope.fees='10000';
});
//another controller
angmodule.controller('trainer',function($scope){
var trainerDetail=[
{name:"ashish",age:"23"},
{name:"manish",age:"22"},
{name:"satish",age:"21"},
{name:"archana",age:"18"}
];
$scope.trainerdata=trainerDetail;
})
output :
trainer name | trainer age |
{{x.name}} | {{x.age}} |
As you can see that we have used ng-repeat at tr tag as we want to repeat tr tag accruing to data returned by the controller. ng-repeat syntax is almost similar to foreach loop.
//ng repeat exception
angmodule.controller('arrray',function($scope){
$scope.result=[1,2,4,4,5,6,7];
});
duplicates in repeater are not allowed
for this we use this for repeation "z in result track by $index"
z in result track by $index
output :
<body ng-app >
<div>
<input type="text" ng-model="number">
<p>Square is {{number*number}} </p>
</div>
</body>
output :
Square is {{number*number}}
Ng-init directive is used to initialize a variable, which will allows evaluating an expression in given scope. According to angular official document, this directive is abused as it adds unnecessary business logic in the application. Still to evaluate an expression we required that directive.
<div data-ng-init="name='Ashish Kumar'; empid=102 ">
<p>{{name}}</p>
<p>{{empid}}</p>
</div>
output :
{{name}}
{{empid}}
ng-include directive is used to add external html files into application. This directive helps us to create common page of website. Internally tis feature is using JavaScript Ajax to load another page in homepage.
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
<a href="">home</a>
<a href="">about</a>
<a href="">services</a>
<a href="">tutorial</a>
</body>
</html>
<section data-ng-include="'nav.html'">
</section>
These both directives ng-show and ng-hide are used to manage the visibility of html controls. Both directives take true and false value to display or hide the html control.
Ng-if directive is condition based directive which removes or recreates the DOM portion according to condition. It evaluates expression as true or false. If ng-if evaluates to a false it will remove from the DOM element and if it is true, then element is reinserted into the DOM
Even Number
Odd Number
Ng-switch is conditional directives which swap (show and hide) DOM elements according to expression. We use ng-switch-when to check conditions and ng-switch-default to put default condition.
<input type="text" data-ng-model="n1">
<div data-ng-switch="n1">
<div data-ng-switch-when="a">It is vowel</div>
<div data-ng-switch-when="i">It is vowel</div>
<div data-ng-switch-when="e">It is vowel</div>
<div data-ng-switch-when="o">It is vowel</div>
<div data-ng-switch-when="u">It is vowel</div>
<div data-ng-switch-default>It is constant</div>
</div>
Ng-src directive is used to bind dynamic image/audio/video/iframe url. When we use src at img tag it will not work properly as it will fetch image before angularjs replace expression with url and 404 error occurred.
<section ng-controller='srcc'>
<table border="1">
<tr><td>sno</td>
<td>id</td>
<td>name</td>
<td>age</td>
<td>image</td>
</tr>
<tr ng-repeat="m in con1 ">
<td>{{$index+1}}</td>
<td>{{m.id}}</td>
<td>{{m.name}}</td>
<td>{{m.age}}</td>
<td><img src='{{m.image}}' alt="{{m.name}}"></td>
</tr>
</table>
</section>
angmodule.controller("srcc",function($scope){
$scope.con1=[
{id:1,name:'Ashish',age:22,image:'img1.jpg'},
{id:1,name:'Ashish1',age:23,image:'img2.jpg'},
{id:1,name:'Ashish2',age:24,image:'img3.jpg'},
{id:1,name:'Ashish3',age:20,image:'img4.jpg'},
]
})
sno | id | name | age | image |
{{$index+1}} | {{m.id}} | {{m.name}} | {{m.age}} |
Ng-click directive provides the custom behaviour when an html element is clicked. When elements clicked, it will call the event handler function, which bind to ng-click.
<div ng-controller="clickme">
<button class="btn-lg btn-primary" ng-click="alertt()">alert</button>
</div>
//angular
angmodule.controller('clickme',function($scope){
$scope.alertt=function(){
alert("nice !! you have almost done the angular js");
}
})