Angular

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.

 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs