Routing In AngularJS For Single Page Application

Vivek Kumar
8y
8.8k
0
2

Article

Nowadays, AngularJS is a very popular framework for the single page application and also we can get many benefits while using AngularJS. I am assuming that before reading this article, you have basic knowledge on AngularJS, so I am only focusing on routing concept in AngularJS.

Routing is a process in which we can manage our URLs for the showing contents in AngularJS. We can achieve single page application (SPA) using routing technique in AngularJS.

We don’t need to refresh the page while changing one page to another page. This is the main benefit of using routing in angularJS.

Here I am taking a sample application for describing the routing mechanism in AngularJS.

First of all, I am adding four HTML pages and one JavaScript file for that sample application as below,

index.html
home.html
aboutUs.html
contactUs.html
app.js

In Index.html page, we are adding CDN for AngularJS and angular routing and also adding app.js in the head section of the page as below,

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="app.js"></script>

And inside the body tag we are writing the following lines of code,

<div ng-app="myApp">
<div id="topLinks">
<a href="#/home">Home</a>
<a href="#/aboutUs">About Us</a>
<a href="#/contactUs">Contact Us</a>
</div>
<div ng-view></div>
</div>

AngularJS application starts from creating the module. We are using ng-app=”myApp” for our application. Here I am using ng-view directive for showing the content from the other HTML template.

In the app.js page we are writing the following lines of code,

var app = angular.module("myApp", ['ngRoute']);
app.controller('myCtrl', function ($scope) {
$scope.message = "Thank you for visiting our website";
})
app.config(function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'myCtrl'
})
.when('/aboutUs', {
templateUrl: 'aboutUs.html',
controller: 'myCtrl'
})
.when('/contactUs', {
templateUrl: 'contactUs.html',
controller: 'myCtrl'
})
.otherwise({
redirectTo: '/home'
});
});

In the app.js, we created our module as myApp and then we created controller as myCtrl and we configured the route provider using app.config() and it is taking the function and injected the $routeProvider in that function for routing in angularJS.

$routeProvider is accepting when() and otherwise() method.

In the when() method, we are defining the url of the site which is coming after # as #/aboutUs. In this case it will show the aboutUs.html content inside the ng-view directive div.

We are using templateUrl for the path of targeted html page which we want to show in the ng-view directive div and giving controller to every template page.

Another one is otherwise() method. If any route is not matching then it will go to the specified route which is mentioned in the redirectTo. In this example, we are using ‘/home’ so it will show the home page.

In the home.html page we are writing the below lines of code