Tech Altum :- Angular introduction, Installation and directives

Address :- 501, Om Complex, 5th Floor, Naya Bans,
Sec-15, Noida-201301 (U.P.)
Tel: +91(0)-0120-4280181,9015041412
Email: info@techaltum.com Website:-www.techaltum.com
What is AngularJS
AngularJS is an open source JavaScript framework to develop web based
applications. AngularJS is having two versions i.e. AngularJS 1 and
AngularJS 2.
Advantage of AngularJS
 Easy to Code
 Best framework to create SPA(Single Page Application)
 It supports MVC(Model View Controller) concept
 It supports routing
 It provides dependency injection
1

Sec-15, Noida-201301 (U.P.)
Tel: +91(0)-0120-4280181,9015041412
How to Set AngularJS environment
As we know AngularJS is JavaScript framework so first we need to add
javascript file which AngularJS is using. It is using angular.js file to work.
Go to the angularJS official website to download angular.js file
https://angularjs.org/
How to Add angular.js in View
We need to add the Script tag in HTML file (Any UI which you are using) in which we
add source of angular.js file.
<script src="angular.min.js"></script>
2

Sec-15, Noida-201301 (U.P.)
Tel: +91(0)-0120-4280181,9015041412
Directives
Directives in angularJS extends HTML code to provide new behaviour.
In angularJS we use ng keyword which means angular. All directives in angularJS starts from ng.
3
Types of
Directives
Built-in
Custom

Sec-15, Noida-201301 (U.P.)
Tel: +91(0)-0120-4280181,9015041412
Ng-app Directives
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.
When angularJS application loads it will first search for ng-app directives.
In other words, you can say that it is used to inform angularJS framework from where it has to
initiate.
Syntax of ng-app
Add ng-app tag in body tag in the following manner:-
<body data-ng-app>
</body>
4

Sec-15, Noida-201301 (U.P.)
Tel: +91(0)-0120-4280181,9015041412
Binding Expression
In angularJS we use {{ }} for binding expression. For any kind of evaluation, we can
perform inside this binding expression
Example of ng-app
<body ng-app>
<p>The sum of 20 and 30 is </p>
<p>{{20+30}}</p>
</body>
In this example it will simply evaluate the sum and display.
Note :- We use data-ng-app directives to validate HTML5. it will consider data-ng-app as custom
attribute.
5

Sec-15, Noida-201301 (U.P.)
Tel: +91(0)-0120-4280181,9015041412
Module in AngularJS
Module in angularjs is just like container which is having the business logics,
controllers, services etc.
How to declare Module
To create module, we use angular.module function. In this function we pass first parameter as module
name and second parameter is dependent module. If do not have any dependent module then we can
leave it as blank.
var angmodule= angular.module('mymodule',[ ])
in this code mymodule is module name and empty array represents that there is no dependency on
module.
We can use this module with ng-app in the following manner
ng-app="mymodule"
6

Sec-15, Noida-201301 (U.P.)
Tel: +91(0)-0120-4280181,9015041412
MVC Architecture
MVC Stands for Model View Controller. In MVC view represents the user interface and model is the
data. Both view and model is independent to each other. Controller is like bridge between model and
view.
What is Controller
In angularJS controller is JavaScript function object. We need to create controller inside module. We use
ng-controller directive to add controller.
7
What is $scope
$scope is the kind of object which represents the application model. It is used to pass data between
view and controller. We can add properties and function in this scope and we can use it in View.

Sec-15, Noida-201301 (U.P.)
Tel: +91(0)-0120-4280181,9015041412
Email: info@techaltum.com Website:- www.techaltum.com
Example of MVC
In this example we are creating a controller in which we need to pass data to view i.e. the name of the
course along with the fees. So we will write the code in the following manner
8
<!DOCTYPE html>
<html>
<head>
<script>
var angmodule=
angular.module('mymodule',[]).controller('course',
function($scope){ $scope.coursename='Asp.net';
$scope.fees='15000';
});
</script>
</head>
<body ng-app="mymodule">
<div ng-controller="course">
<p>Course: {{ coursename }}</p>
<p>Fees: {{ fees }}</p>
</div>
</body>
</html>

Sec-15, Noida-201301 (U.P.)
Tel: +91(0)-0120-4280181,9015041412
Multiple controller
In angularjs we have learnt how to create controller now we are going to add multiple controllers in
single module. We can add multiple controllers to the single module. So I am going to create new
controller with the name of trainer in which I want to show the trainer details.
9
var angmodule= angular.module('mymodule',[])
.controller('course', function($scope){
$scope.coursename='Asp.net';$scope.fees='15000'; });
angmodule.controller("trainer", function($scope){
var trainerdetail=[
{ name:'isha', age:'27' },{ name:'avinash', age:'32' },
{ name:'priya', age:'34' }];
$scope.trainerdata=trainerdetail;});

Sec-15, Noida-201301 (U.P.)
Tel: +91(0)-0120-4280181,9015041412
JSON Object
JSON stands for JavaScript Object Notation. In JSON object, we store value in
key value pair in the following manner
Syntax of JSON Object
{ ‘key’:’value’, ‘key’:’value’ }
10
Example of JSON Object
var x={ ‘id’:101, ‘name’:’isha’, ‘age’:29 }
We can also store the array of JSON Object in the following manner:-
var x=[{ ‘id’:101, ‘name’:’isha’, ‘age’:29 }, {‘id’:102, ‘name’:’avinash’, ‘age’:33 }]

Sec-15, Noida-201301 (U.P.)
Tel: +91(0)-0120-4280181,9015041412
Ng-repeat in angularjs
Ng-repeat is one of the directive in angularjs. It is used to looping the given object. When we need to display, the set of
html in repeated mode with some data or collection then we can use ng-repeat directive.
11
<head>
<script src="angular.js"></script>
<script>
var p=
angular.module('mymodule',[]).controller('courses',functi
on($scope){
var result=[{ name:'Asp.net', fees:'15000'}
,{ name:'php', fees:'17000'},
{ name:'AngularJS', fees:'8000' } ] ;
$scope.data=result;
});
</script>
/head>
<body ng-app="mymodule">
<div ng-controller="courses">
<table border="1">
<tr> <td>Course Name</td> <td>Course
Fees</td> </tr>
<tr ng-repeat="x in data">
<td> {{x.name}} </td> <td> {{x.fees}} </td>
</tr>
</table> </div> </body>

Sec-15, Noida-201301 (U.P.)
Tel: +91(0)-0120-4280181,9015041412
Ng-repeat with track by
Let us take another example. Suppose we have following index array with repeating records:-
12
<script>
var x=angular.module("module1",[]);
x.controller("con1",function($scope){
$scope.result=[2,4,4,4,5,6,7]; });
</script>
Now traverse this array using ng-repeat and you will
get following error:-
To traverse duplicate records in ng-repeat we
will use $index in the following code:-
<body ng-app="module1">
<div ng-controller="con1">
<div ng-repeat="k in result track by
$index">
<p>{{k}}</p>
</div>
</div>
</body>

Sec-15, Noida-201301 (U.P.)
Tel: +91(0)-0120-4280181,9015041412
Ng-model in angularJS
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.
13
<head>
</head>
<body ng-app>
<input type="text" ng-model="t1">
<p>{{ t1 }}</p>
</body>
Example of Ng-model
We have following textbox. And we want as user will type the data it will show in paragraph tag. If we have to do this task
without angularJS then we have to use JavaScript and need to use the event on which it will display textbox text in
paragraph. But with the help of ng-model we will bind this input control with model and after that we can use this model
anywhere.

Sec-15, Noida-201301 (U.P.)
Tel: +91(0)-0120-4280181,9015041412
Ng-model example with input fields
14
<body ng-app>
<div>
<input type="text" ng-model='tbox'>
<br>
Male<input type='radio' name='n1' value='male' ng-model='tradio'>
Female<input type='radio' name='n1' value='female' ng-model='tradio'>
<br>
<select ng-model='tselect'> <option>18</option> <option>19</option> <option>20</option>
</select><br>
<input type="checkbox" ng-true-value="'books'" ng-false-value='' ng-model='ch1.tcheck1' > books
<input type="checkbox" ng-true-value="'food'" ng-false-value='' ng-model='ch1.tcheck2' > food
<input type="checkbox" ng-true-value="'mobile'" ng-false-value='' ng-model='ch1.tcheck3' > mobile </div>
<div> Name :- {{tbox}} <br> gender :- {{tradio}} <br> age :- {{tselect}} <br>
products are :-<div ng-repeat='x in ch1'>{{x}}</div></div>

Sec-15, Noida-201301 (U.P.)
Tel: +91(0)-0120-4280181,9015041412
Ng-init in angularJS
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.
In the following example, I have created ng-init, assign value in it, and simply print it.
15
<body ng-app ng-init="name='isha'">
<div> {{name}} </div>
</body>
We can also bind this ng-init variable in ng-model and can use it in application in the following manner
<body ng-app ng-init="number=‘6'">
<div>
<input type="text" ng-model="number">
<p>Square is {{number*number}} </p>
</div>
</body>

Sec-15, Noida-201301 (U.P.)
Tel: +91(0)-0120-4280181,9015041412
Ng-if in angularJS
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. We can also use and (&&) or (||) operator in
ng-if to evaluate the expression. We can also use nested ng-if in angularjs.
16
<body ng-app>
Enter your number: - <input type="text" ng-
model="n1" placeholder="9">
<div ng-if="n1%2=='0'">
<p>Even Number</p>
</div>
<div ng-if="n1%2! ='0'">
<p>Odd Number</p>
</div>
</body>

Sec-15, Noida-201301 (U.P.)
Tel: +91(0)-0120-4280181,9015041412
Ng-Switch in angularJS
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.
17
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
</head>
<body ng-app>
<input type="text" ng-model="n1">
<div ng-switch="n1">
<div ng-switch-when="a">It is vowel</div>
<div ng-switch-when="i">It is vowel</div>
<div ng-switch-when="e">It is vowel</div>
<div ng-switch-when="o">It is vowel</div>
<div ng-switch-when="u">It is vowel</div>
<div ng-switch-default>It is constant</div>
</div>
</body>

Sec-15, Noida-201301 (U.P.)
Tel: +91(0)-0120-4280181,9015041412
Ng-show and ng-hide
These both directives are used to manage the visibility of html controls. Both directives take true and false
value to display or hide the html control.
18
<head>
<title>ng-hide and ng-show example</title>
</head>
<body ng-app>
<input type="checkbox" ng-
model="textbox" value="show textbox"/>Show
Textbox
<br> <input type="text" ng-
show="textbox"/>
</body>
Example of ng-show
In this example we have created checkbox and bind it with ng-
model. And used this ng-model in ng-show directives. When page
load it would not be true so it will not display textbox. But when we
checked the checkbox then it would be true and it will display the
textbox.

Sec-15, Noida-201301 (U.P.)
Tel: +91(0)-0120-4280181,9015041412
Example of ng-hide
19
<input type="checkbox" ng-
model="textbox" value="show
textbox"/>Hide Textbox
<br>
<input type="text" ng-hide="textbox"/>

Sec-15, Noida-201301 (U.P.)
Tel: +91(0)-0120-4280181,9015041412
Ng-include in angularjs
This directive is used to add external html files into application. This directive helps us to create common
page of website.
20
Create a html file for header menu
Header.html
<div><a href="home.html">Home</a> |
<a href="about.html">About us</a> |
<a href="contact.html">contact</a>|
<a href="login.html">Login</a>
</div>
Example of ng-include
<head>
</head>
<body ng-app>
<div id="headermenu" ng-include="'header.html'"></div>
<div>This is home page dummy content</div>
</body>

Sec-15, Noida-201301 (U.P.)
Tel: +91(0)-0120-4280181,9015041412
Ng-src in angularjs
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.
21
<head><script src="angular.js"></script>
<script>
var x=angular.module("module1",[]);
x.controller("con1",function($scope){
$scope.data=[
{id:101,name:'isha',age:28,image:'ng-1.jpg'},
{id:102,name:'neha',age:53, image:'ng-2.jpg'},
{id:103,name:'seema',age:56, image:'ng-1.jpg'},
{id:104,name:'avinash',age:32, image:'ng-2.jpg'},
{id:105,name:'ranjay',age:25, image:'ng-1.jpg'}
]; });</script> </head>
Example of ng-src
<body ng-app="module1">
<div ng-controller="con1"><table border="1">
<tr><th>S.No</th><th>Employee
Id</th><th>Employee Name</th><th>Employee
Age</th><th>Marks</th><th>Picutre</th></tr>
<tr ng-repeat="p in data" >
<td>{{$index+1}}</td> <td>{{p.id}}</td>
<td>{{p.name}}</td> <td>{{p.age}}</td>
<td>{{p.marks | m1}}</td> <td><img
src='{{p.image}}' alt={{p.name}}></td></tr>
</table> </div></body>

Sec-15, Noida-201301 (U.P.)
Tel: +91(0)-0120-4280181,9015041412
Ng-src in angularjs
When we will execute this code, it will generate 404 error, as it will try to load p.image, which is not available.
Image will be loaded but with 404 error which is not good practice.
22
Now replace src with ng-src and again execute the code.

Sec-15, Noida-201301 (U.P.)
Tel: +91(0)-0120-4280181,9015041412
Ng-click in angularjs
Ng-click provides the custom behaviour when an element is clicked. When elements clicked, it will call the
event handler function, which bind to ng-click.
23
<head>
<script>
var x =angular.module('abc',[])
x.controller('abc1',function($scope){
$scope.add=function(n1,n2){
$scope.data=parseInt(n1)+parseInt(n2);
}
});
</script> </head>
Example of ng-click
<body ng-app='abc'>
<div ng-controller='abc1'>
enter 1st value: <input type="text" ng-
model='n1'><br>
enter 2nd value: <input type="text" ng-
model='n2'><br>
<input type="button" value="sum" ng-
click='add(n1,n2)'>
<div> {{data}} </div> </div>
</body>

Tech Altum :- Angular introduction, Installation and directives

Recommended

Recommended

More Related Content

Similar to Tech Altum :- Angular introduction, Installation and directives

Similar to Tech Altum :- Angular introduction, Installation and directives (20)

Recently uploaded

Recently uploaded (20)

Tech Altum :- Angular introduction, Installation and directives