Post
Ask Question

Routing In AngularJS For Single Page Application

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,
  1. <!--Using CDN for angularjs and angular js routing-->  
  2. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>  
  3.   
  4. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>  
  5.   
  6. <!--Adding javaScript file for angularJs coding-->  
  7. <script src="app.js"></script>  
And inside the body tag we are writing the following lines of code,
  1. <div ng-app="myApp">  
  2. <div id="topLinks">  
  3. <a href="#/home">Home</a>  
  4. <a href="#/aboutUs">About Us</a>  
  5. <a href="#/contactUs">Contact Us</a>  
  6. </div>  
  7. <div ng-view></div>   
  8. </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,
  1. var app = angular.module("myApp", ['ngRoute']);  
  2.   
  3. app.controller('myCtrl', function ($scope) {  
  4.     $scope.message = "Thank you for visiting our website";  
  5. })  
  6.   
  7. app.config(function ($routeProvider) {  
  8.     $routeProvider  
  9.         .when('/home', {  
  10.             templateUrl: 'home.html',  
  11.             controller: 'myCtrl'  
  12.         })  
  13.         .when('/aboutUs', {  
  14.             templateUrl: 'aboutUs.html',  
  15.             controller: 'myCtrl'  
  16.         })  
  17.         .when('/contactUs', {  
  18.             templateUrl: 'contactUs.html',  
  19.             controller: 'myCtrl'  
  20.         })  
  21.         .otherwise({  
  22.             redirectTo: '/home'  
  23.         });  
  24. });  
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
  1. <div>  
  2.     <h1>Welcome to Home page</h1>  
  3.     {{message}}  
  4. </div>  
Below is the image for same.

output
In the aboutUs.html page we are writing the below lines of code,
  1. <div>  
  2.     <h1>Welcome to About us page</h1>  
  3.     {{message}}  
  4. </div>  
Below is the image for same.

output
In the contactUs.html page we are writing the below lines of code,
  1. <div>  
  2.     <h1>Welcome to Contact us page</h1>  
  3.     {{message}}  
  4. </div>  
Below is the image for same.

output
Here we are using same controller for every page but as per our requirement we can change the controller for every template as per our requirement.
 
Read more articles on AngularJS:


Similar Articles