AngularJS Routing Examples

In this tutorial, we will see angularJS routing using angular-routing.js.  It required angular-routing.js module dependency that need to be injected in the module. $route Service is for inking of URLs to controllers and views.

JS Files and Versions:

  • angular.min.js – 1.6.2
  • bootstrap.css
  • angular-routing.js
  • bootstrap.js
  • jQuery.js

AngularJS Routing Tutorial:

  • Angular routing required ng-view directive at index.html file
  • $routeProvider watches the url and loads the corresponding template html into ng-view area
  • Lets create routing for the below links. We will use bootstrap for look and fell and have the below paths:
    • home
    • employee
    • payslips
    • admin(create/view/update)AngularJS Routing Examples
  • Lets create the below project structure:AngularJS Routing Examples
  • Index.html file is:
    1. <html>
      <head>
       <link rel="stylesheet" href="css/bootstrap.min.css">
       <style type="text/css">
       .navbar-default {
       background-color: rgba(68, 193, 230, 0.84);
       }
       .navbar-default .navbar-nav>li>a {
       color: #efe2e2;
       }
       </style>
       <title>Angular Routing</title>
      </head>
      <body ng-app="myApp" ng-controller="MainController">
           <div class="navbar navbar-default navbar-fixed-left">
              <div class="container navbar-leftmr">
              <div class="navbar-collapse collapse " id="navbar-main">
               <ul class="nav navbar-nav">
                 <li class="dropdown"> <a href="#home"> Home </a></li>
                 <li class="dropdown"> <a href="#employee"> Employees </a> </li>
                 <li class="dropdown"> <a href="#payslips"> Payslips </a> </li>
                 <li>  <a class="dropdown-toggle" data-toggle="dropdown" id="dashboard">
                     Admin <span class="caret"></span></a>
                    <ul class="dropdown-menu" aria-labelledby="download">
                       <li><a href="#createEmployee">Create Employee</a></li>
                       <li><a href="#viewEmployee">View Empoyee</a></li>
                      <li><a href="#updateEmployee">Update Employee</a></li>
                    </ul>
               </li>
            </div>
          </div>
         </div>
       <div ng-view></div>
       </body>
       <script src="js/jquery.js"></script>
       <script src="js/bootstrap.min.js"></script>
       <script src="js/angular.min.js"></script>
       <script src="js/angular-route.min.js"></script>
       <script type="text/javascript" src="js/app.js"></script>
       </html>
  • app.js is:
    1. var app = angular.module('myApp', ['ngRoute']);
      app.config(function($routeProvider) {
       $routeProvider.when('/', {
       templateUrl: 'resources/home.html'
       }).when('/home', {
       templateUrl: 'resources/home.html'
       }).when('/employee', {
       templateUrl: 'resources/employee.html',
       }).when('/payslips', {
       templateUrl: 'resources/payslips.html',
       }).when('/createEmployee', {
       templateUrl: 'resources/createEmployee.html',
       }).when('/viewEmployee', {
       templateUrl: 'resources/viewEmployeeList.html',
       }).when('/updateEmployee', {
       templateUrl: 'resources/updateEmployee.html',
       });
      });
      app.controller("MainController",['$scope',function($scope){
       
       
       
      }]);
  • home.html is:
    1. <div class="container-fluid">
      
       <h2>This is home page </h2>
      </div>

       

      Download AngularJS Routing Code

Leave a Comment

Your email address will not be published. Required fields are marked *