Post
Ask Question

Navigation From One Page to Another In AngularJS Page Routing

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:

  1. <script src="../Scripts/angular-route.min.js"></script>  
Source Code:
  1. <!DOCTYPE html>    
  2. <!-- define angular app -->    
  3. <html ng-app="RoutingApp">    
  4. <head>    
  5.     <!-- CSS Files -->    
  6.     <link rel="stylesheet" href="../css/bootstrap.min.css" />    
  7.     <link rel="stylesheet" href="../css/font-awesome.css" />    
  8.     
  9.     <!-- SPELLS -->    
  10.     <script src="../Scripts/angular.min.js"></script>    
  11.     <script src="../Scripts/angular-route.min.js"></script>    
  12.     <script src="PageRouting.js"></script>    
  13. </head>    
  14.     
  15. <body ng-controller="mainController">    
  16.     
  17.     <nav class="navbar navbar-default">    
  18.         <div class="container">    
  19.             <div class="navbar-header">    
  20.                 <a class="navbar-brand" href="/">    
  21.                     Angular Routing Example    
  22.                 </a>    
  23.             </div>    
  24.     
  25.             <ul class="nav navbar-nav navbar-right">    
  26.                 <li><a href="#"><i class="fa fa-home"></i>Home</a></li>    
  27.                 <li><a href="#about"><i class="fa fa-shield"></i>About</a></li>    
  28.                 <li><a href="#contact"><i class="fa fa-comment"></i>Contact</a></li>    
  29.             </ul>    
  30.         </div>    
  31.     </nav>    
  32.     
  33.     <div id="main">    
  34.         <!-- angular templating : This is where content will be injected -->    
  35.         <div ng-view></div>    
  36.     </div>    
  37. </body>    
  38.     
  39. </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:
  1. // create the module and name it scotchApp    
  2. var scotchApp = angular.module('RoutingApp', ['ngRoute']);  
  3.   
  4. // configure our routes    
  5. scotchApp.config(function($routeProvider) {  
  6.     $routeProvider  
  7.   
  8.     // route for the home page    
  9.         .when('/', {  
  10.         templateUrl: 'pages/home.html',  
  11.         controller: 'mainController'  
  12.     })  
  13.   
  14.     // route for the about page    
  15.     .when('/about', {  
  16.         templateUrl: 'pages/about.html',  
  17.         controller: 'aboutController'  
  18.     })  
  19.   
  20.     // route for the contact page    
  21.     .when('/contact', {  
  22.         templateUrl: 'pages/contact.html',  
  23.         controller: 'contactController'  
  24.     });  
  25.   
  26. });  
  27.   
  28. // create the controller and inject Angular's $scope    
  29. scotchApp.controller('mainController', function($scope) {  
  30.     // create a message to display in our view    
  31.     $scope.HomeMessage = 'Home Controller Called !!!';  
  32. });  
  33.   
  34. scotchApp.controller('aboutController', function($scope) {  
  35.     $scope.AboutMessage = 'About Controller Called !!!';  
  36. });  
  37.   
  38. scotchApp.controller('contactController', function($scope) {  
  39.     $scope.ContactMessage = 'Contact Controller Called !!!';  
  40. });  
Home.html

When 'http://localhost:50890/RoutingSinglePage/index.html#/' hits in the browser, home.html file gets loaded.
  1. <!DOCTYPE html>    
  2. <html xmlns="http://www.w3.org/1999/xhtml">    
  3. <head>    
  4.     <title></title>    
  5. </head>    
  6. <body>    
  7.     <div>    
  8.         <h1>Home Page</h1> <br />    
  9.     
  10.         <p>{{ HomeMessage }}</p>    
  11.     </div>    
  12.     
  13. </body>    
  14. </html>  
About.html

When 'http://localhost:50890/RoutingSinglePage/index.html#/about' hits in the browser, about.html file gets loaded.
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4. <head>  
  5.     <title></title>  
  6. </head>  
  7.   
  8. <body>  
  9.     <div>  
  10.         <h1>About Page</h1>  
  11.         <br />  
  12.   
  13.         <p>{{ AboutMessage }}</p>  
  14.     </div>  
  15.   
  16. </body>  
  17.   
  18. </html>  
Contact.html

When 'http://localhost:50890/RoutingSinglePage/index.html#/contact' hits in the browser, contact.html file gets loaded.
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4. <head>  
  5.     <title></title>  
  6. </head>  
  7.   
  8. <body>  
  9.     <div>  
  10.         <h1>Contact Page</h1>  
  11.         <br />  
  12.   
  13.         <p>{{ ContactMessage }}</p>  
  14.     </div>  
  15.   
  16. </body>  
  17.   
  18. </html>  
Thank you! Please mention your queries if you have any.

 


Similar Articles