Navigation From One Page to Another In AngularJS Page Routing

Rupali Shinde
10y
111.1k
0
3

Article

Landing Page

In this example, we are having the following three hyperlinks available at the top of the page: Home, About & Contact.
By default Home.html is landing page as per our code.

When we click About hyperlink, it navigates to the About.html page.

When we click Contact hyperlink, it navigates to the Contact.html page.

home page

Index.html

As per our html design shown below, each hyperlink point to the below mentioned URL when it is running locally.

home.html URL - http://localhost:50890/RoutingSinglePage/index.html#/
about.html URL - http://localhost:50890/RoutingSinglePage/index.html#/about
contact.html URL - http://localhost:50890/RoutingSinglePage/index.html#/contact

In order to perform routing we need to include AngularJS specific JavaScript file reference as given:

<script src="../Scripts/angular-route.min.js"></script>

Source Code:

<!DOCTYPE html>
<html ng-app="RoutingApp">
<head>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/font-awesome.css" />
<script src="../Scripts/angular.min.js"></script>
<script src="../Scripts/angular-route.min.js"></script>
<script src="PageRouting.js"></script>
</head>
<body ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">
Angular Routing Example
</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-home"></i>Home</a></li>
<li><a href="#about"><i class="fa fa-shield"></i>About</a></li>
<li><a href="#contact"><i class="fa fa-comment"></i>Contact</a></li>
</ul>
</div>
</nav>
<div id="main">
<div ng-view></div>
</div>
</body>
</html>

PageRouting.js

For Routing we need to add ' ngRoute' dependent module and we need to configure our route as in the following code snippet:

// create the module and name it scotchApp
var scotchApp = angular.module('RoutingApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
// route for the about page
.when('/about', {
templateUrl: 'pages/about.html',
controller: 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl: 'pages/contact.html',
controller: 'contactController'
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.HomeMessage = 'Home Controller Called !!!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.AboutMessage = 'About Controller Called !!!';
});
scotchApp.controller('contactController', function($scope) {
$scope.ContactMessage = 'Contact Controller Called !!!';
});

Home.html

When 'http://localhost:50890/RoutingSinglePage/index.html#/' hits in the browser, home.html file gets loaded.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div>
<h1>Home Page</h1> <br />
<p>{{ HomeMessage }}</p>
</div>
</body>
</html>

About.html

When 'http://localhost:50890/RoutingSinglePage/index.html#/about' hits in the browser, about.html file gets loaded.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div>
<h1>About Page</h1>
<br />
<p>{{ AboutMessage }}</p>
</div>
</body>
</html>

Contact.html

When 'http://localhost:50890/RoutingSinglePage/index.html#/contact' hits in the browser, contact.html file gets loaded.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div>
<h1>Contact Page</h1>
<br />
<p>{{ ContactMessage }}</p>
</div>
</body>
</html>

Thank you! Please mention your queries if you have any.