UNIT - IV
AngularJS Routing
If you want to navigate to different pages in your application, but you also want the application
to be a SPA (Single Page Application), with no page reloading, you can use
the ngRoute module.
The ngRoute module routes your application to different pages without reloading the entire
application. The ngRoute module helps your application to become a Single Page Application.
Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js">
</script>
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to
"main.htm"</p>
</body>
</html>
Output
What do I Need?
To make your applications ready for routing, you must include the AngularJS Route module:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
Then you must add the ngRoute as a dependency in the application module:
var app = angular.module("myApp", ["ngRoute"]);
Now your application has access to the route module, which provides the $routeProvider.
Use the $routeProvider to configure different routes in your application:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
Where Does it Go?
Your application needs a container to put the content provided by the routing.
This container is the ng-view directive.
There are three different ways to include the ng-view directive in your application:
1. <div ng-view></div>
2. <ng-view></ng-view>
3. <div class="ng-view"></div>
Applications can only have one ng-view directive, and this will be the placeholder
for all views provided by the route.
$routeProvider
With the $routeProvider you can define what page to display when a user clicks a link.
Example:
Define a $routeProvider:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!london">City 1</a>
<a href="#!paris">City 2</a>
<p>Click on the links to read about London and Paris.</p>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
</script>
</body>
</html>
Output
Define the $routeProvider using the config method of your application. Work registered in
the config method will be performed when the application is loading.
Controllers
With the $routeProvider you can also define a controller for each "view".
Example:
Add controllers:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!london">City 1</a>
<a href="#!paris">City 2</a>
<p>Click on the links.</p>
<p>Note that each "view" has its own controller which each gives the "msg" variable a
value.</p>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm",
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
app.controller("londonCtrl", function ($scope) {
$scope.msg = "I love London";
});
app.controller("parisCtrl", function ($scope) {
$scope.msg = "I love Paris";
});
</script>
</body>
</html>
Output
The "london.htm" and "paris.htm" are normal HTML files, which you can add AngularJS
expressions as you would with any other HTML sections of your AngularJS application.
The files looks like this:
london.htm
<h1>London</h1>
<h3>London is the capital city of England.</h3>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13
million inhabitants.</p>
<p>{{msg}}</p>
paris.htm
<h1>Paris</h1>
<h3>Paris is the capital city of France.</h3>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million
inhabitants.</p>
<p>{{msg}}</p>
Template
In the previous examples we have used the templateUrl property in
the $routeProvider.when method.
You can also use the template property, which allows you to write HTML directly in the
property value, and not refer to a page.
Example:
Write templates:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!banana">Banana</a>
<a href="#!tomato">Tomato</a>
<p>Click on the links to change the content.</p>
<p>The HTML shown in the ng-view directive are written in the template property of the
$routeProvider.when method.</p>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Click on the links to change this content</p>"
})
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
});
});
</script>
</body>
</html>
The otherwise method
In the previous examples we have used the when method of the $routeProvider.
You can also use the otherwise method, which is the default route when none of the others get a
match.
Example:
If neither the "Banana" nor the "Tomato" link has been clicked, let them know:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!banana">Banana</a>
<a href="#!tomato">Tomato</a>
<p>Click on the links to change the content.</p>
<p>Use the "otherwise" method to define what to display when none of the links are
clicked.</p>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
})
.otherwise({
template : "<h1>Nothing</h1><p>Nothing has been selected</p>"
});
});
</script>
</body>
</html>
Output
AngularJS API
API stands for Application Programming Interface.
AngularJS Global API
The AngularJS Global API is a set of global JavaScript functions for performing common tasks
like:
Comparing objects
Iterating objects
Converting data
The Global API functions are accessed using the angular object.
Below is a list of some common API functions:
API Description
angular.lowercase() Converts a string to lowercase
angular.uppercase() Converts a string to uppercase
angular.isString() Returns true if the reference is a string
angular.isNumber() Returns true if the reference is a number
angular.lowercase( )
Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.x1 = "DAVID";
$scope.x2 = angular.lowercase($scope.x1);
});
</script>
</body>
</html>
Output
DAVID
david
angular.uppercase( )
Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.x1 = "John";
$scope.x2 = angular.uppercase($scope.x1);
});
</script>
</body>
</html>
Output
John
JOHN
angular.isString()
Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.x1 = "JOHN";
$scope.x2 = angular.isString($scope.x1);
});
</script>
</body>
</html>
Output
JOHN
true
angular.isNumber()
Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.x1 = "JOHN";
$scope.x2 = angular.isNumber($scope.x1);
});
</script>
</body>
</html>
Output
JOHN
false
AngularJS and W3.CSS
What is W3.CSS?
W3.CSS is a modern framework with built-in responsiveness and easy to learn and use
compared to other CSS framework.
Its aim is to speed up and simplify web development and support modern responsive
devices like Mobile, Laptop, Tablet and Desktop
W3.CSS was designed to be a high quality alternative to Bootstrap and is developed by
w3school.com
Most important part of W3.CSS :
1. w3-container: adds a 16px left and right padding to any HTML element.
2. w3-fontSize : w3-tiny, w3-small, w3-medium(default), w3-large, w3-xlarge, w3-xlarge,
w3-xxlarge, w3-xxxlarge, w3-jumbo.
3. w3-text: It provides css features like alignment, opacity, shadow, special effect.
4. w3-input: It provides input cards, coloured labels, border, checkbox, radio buttons, etc
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style>
.pad {
margin: 0 0 0 0;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="w3-container ">
<p class="w3-jumbo w3-text-green pad"
align="center">GeeksforGeeks</p>
<p class="w3-large w3-text-green pad"
align="center" >
A computer science portal for geeks</p>
<form>
<h3 align="center" > Enter user details </h3>
<label>First Name:</label>
<input class="w3-input w3-border w3-round-xxlarge"
type="text"
ng-model="fname"
placeholder="First Name"></br>
<label>Last Name:</label>
<input class="w3-input w3-border w3-round-xxlarge"
type="text"
ng-model="lname"
placeholder="Last Name"></br>
<label>Email id:</label>
<input class="w3-input w3-border w3-round-xxlarge"
type="email"
ng-model="mail"
placeholder="Email id"></br>
<label>Password:</label>
<input class="w3-input w3-border w3-round-xxlarge"
type="password"
ng-model="pass"
placeholder="Password"></br>
<p align="center">
<button class="w3-btn w3-green w3-ripple " >
Save </button></p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.fname = "Fname";
$scope.lname = "Lname";
$scope.mail = "[email protected]";
$scope.pass = "password";
});
</script>
</body>
</html>
Output:
AngularJS Animations
AngularJS provides animated transitions, with help from CSS.
An animation is when the transformation of an HTML element gives you an illusion of motion.
Example:
<!DOCTYPE html>
<html>
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
width: 100%;
position: relative;
top: 0;
left: 0;
}
.ng-hide {
height: 0;
width: 0;
background-color: transparent;
top:-200px;
left: 200px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
<body ng-app="ngAnimate">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
</body>
</html>
Output
What do I Need?
To make your applications ready for animations, you must include the AngularJS Animate
library:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
Then you must refer to the ngAnimate module in your application:
<body ng-app="ngAnimate">
Or if your application has a name, add ngAnimate as a dependency in your application module:
Example
<!DOCTYPE html>
<html>
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
width: 100%;
position: relative;
top: 0;
left: 0;
}
.ng-hide {
height: 0;
width: 0;
background-color: transparent;
top:-200px;
left: 200px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<scrip src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
<body ng-app="myApp">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
</body>
</html>
What Does ngAnimate Do?
The ngAnimate module adds and removes classes.
The ngAnimate module does not animate your HTML elements, but when ngAnimate notice certain
events, like hide or show of an HTML element, the element gets some pre-defined classes which can
be used to make animations.
The directives in AngularJS who add/remove classes are:
ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch
The ng-show and ng-hide directives adds or removes a ng-hide class value.
The other directives adds a ng-enter class value when they enter the DOM, and a ng-leave attribute
when they are removed from the DOM.
The ng-repeat directive also adds a ng-move class value when the HTML element changes position.
In addition, during the animation, the HTML element will have a set of class values, which will be
removed when the animation has finished. Example: the ng-hide directive will add these class
values:
ng-animate
ng-hide-animate
ng-hide-add (if the element will be hidden)
ng-hide-remove (if the element will be showed)
ng-hide-add-active (if the element will be hidden)
ng-hide-remove-active (if the element will be showed)
Animations Using CSS
We can use CSS transitions or CSS animations to animate HTML elements. This tutorial will show
you both.
CSS Transitions
CSS transitions allows you to change CSS property values smoothly, from one value to another, over
a given duration:
Example:
When the DIV element gets the .ng-hide class, the transition will take 0.5 seconds, and the height
will smoothly change from 100px to 0:
<!DOCTYPE html>
<html>
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide {
height: 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
<body ng-app="myApp">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
</body>
</html>
CSS Animations
CSS Animations allows you to change CSS property values smoothly, from one value to another,
over a given duration:
Example:
When the DIV element gets the .ng-hide class, the myChange animation will run, which will
smoothly change the height from 100px to 0:
<!DOCTYPE html>
<html>
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck">
</div>
</body>
</html>
Output
AngularJS Application
t is time to create a real AngularJS Application.
Make a Shopping List
Lets use some of the AngularJS features to make a shopping list, where you can add or remove
items:
Next ❯
Application Explained
Step 1. Getting Started:
Start by making an application called myShoppingList, and add a controller named myCtrl to it.
The controller adds an array named products to the current $scope.
In the HTML, we use the ng-repeat directive to display a list using the items in the array.
Example
So far we have made an HTML list based on the items of an array:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products = ["Milk", "Bread", "Cheese"];
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
</div>
<p>So far we have made an HTML list based on the items of an array.</p>
</body>
</html>
Output
Milk
Bread
Cheese
So far we have made an HTML list based on the items of an array.
Step 2. Adding Items:
In the HTML, add a text field, and bind it to the application with the ng-model directive.
In the controller, make a function named addItem, and use the value of the addMe input field to
add an item to the products array.
Add a button, and give it an ng-click directive that will run the addItem function when the button
is clicked.
Example
Now we can add items to our shopping list:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products = ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.products.push($scope.addMe);
}
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
</div>
<p>Write in the input field to add items.</p>
</body>
</html>
Output
Step 3. Removing Items:
We also want to be able to remove items from the shopping list.
In the controller, make a function named removeItem, which takes the index of the item you
want to remove, as a parameter.
In the HTML, make a <span> element for each item, and give them an ng-click directive which
calls the removeItem function with the current $index.
Example
Now we can remove items from our shopping list:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products = ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.products.push($scope.addMe);
}
$scope.removeItem = function (x) {
$scope.products.splice(x, 1);
}
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}<span ng-click="removeItem($index)">×</span></li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
</div>
<p>Click the little x to remove an item from the shopping list.</p>
</body>
</html>
Output
Step 4. Error Handling:
The application has some errors, like if you try to add the same item twice, the application
crashes. Also, it should not be allowed to add empty items.
We will fix that by checking the value before adding new items.
In the HTML, we will add a container for error messages, and write an error message when
someone tries to add an existing item.
Example
A shopping list, with the possibility to write error messages:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products = ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.errortext = "";
if (!$scope.addMe) {return;}
if ($scope.products.indexOf($scope.addMe) == -1) {
$scope.products.push($scope.addMe);
} else {
$scope.errortext = "The item is already in your shopping list.";
}
}
$scope.removeItem = function (x) {
$scope.errortext = "";
$scope.products.splice(x, 1);
}
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}<span ng-click="removeItem($index)">×</span></li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
<p>{{errortext}}</p>
</div>
<p>Try to add the same item twice, and you will get an error message.</p>
</body>
</html>
Output
Step 5. Design:
The application works, but could use a better design. We use the W3.CSS stylesheet to style our
application.
Add the W3.CSS stylesheet, and include the proper classes throughout the application, and the
result will be the same as the shopping list at the top of this page.
Example
Style your application using the W3.CSS stylesheet:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products = ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.errortext = "";
if (!$scope.addMe) {return;}
if ($scope.products.indexOf($scope.addMe) == -1) {
$scope.products.push($scope.addMe);
} else {
$scope.errortext = "The item is already in your shopping list.";
}
}
$scope.removeItem = function (x) {
$scope.errortext = "";
$scope.products.splice(x, 1);
}
});
</script>
<div ng-app="myShoppingList" ng-cloak ng-controller="myCtrl" class="w3-card-2 w3-margin"
style="max-width:400px;">
<header class="w3-container w3-light-grey w3-padding-16">
<h3>My Shopping List</h3>
</header>
<ul class="w3-ul">
<li ng-repeat="x in products" class="w3-padding-16">{{x}}<span ng-
click="removeItem($index)" style="cursor:pointer;" class="w3-right w3-margin-
right">×</span></li>
</ul>
<div class="w3-container w3-light-grey w3-padding-16">
<div class="w3-row w3-margin-top">
<div class="w3-col s10">
<input placeholder="Add shopping items here" ng-model="addMe" class="w3-input w3-
border w3-padding">
</div>
<div class="w3-col s2">
<button ng-click="addItem()" class="w3-btn w3-padding w3-green">Add</button>
</div>
</div>
<p class="w3-text-red">{{errortext}}</p>
</div>
</div>
</body>
</html>
Output
