AngularJS Routing Simple Example

Introduction to AngularJS Routing

AngularJS allows us to divide the page into multiple sections or views. So for redirecting between the views we use AngularJS Routing. These views can be bind to different controllers or same controller.

AngularJS Routing Patterns

Below are the sample route patterns in AngularJS if you are running the application in local machine -

http://localhost/index.html#electronics
http://localhost/index.html#furniture
http://localhost/index.html#books

As you can see all the urls have "#" sign, which is used to denote the view name. So our parent view name here is - "Index.html" and child view names are - "electronics", "furniture" and "books".

AngularJS Routing Library

Now lets create a sample e commerce AngularJS application for AngularJS Routing demo -
First lets create a module for our AngularJS application -

var myApp = angular.module('myApp', ['ngRoute']);

For routing to work we need to have module - 'ngRoute' so its added as dependency module above.
"$routeProvider" is also used for configuring the routes in AngularJS.

So for these routing configurations include library - "angular-route.js" -

<script src="scripts/angularJS/angular.min.js" type="text/javascript"></script>
<script src="scripts/angularJS/angular-route.js" type="text/javascript"></script>

AngularJS Routing Code

Below is the sample code for routing -

myApp.config(function ($routeProvider) {
 $routeProvider
    .when('/Electronics',
         {
          templateUrl: 'views/electronics.html',
          controller: 'catgrController'
         })
    .when('/Men',
        {
         templateUrl: 'views/men.html',
         controller: 'catgrController'
        })
    .when('/Women',
    {
     templateUrl: 'views/women.html',
     controller: 'catgrController'
    })
     .when('/Furniture',
    {
     templateUrl: 'views/furniture.html',
     controller: 'catgrController'
    })
  .when('/Books',
    {
     templateUrl: 'views/books.html',
     controller: 'catgrController'
    })
  .otherwise('/',
  {
   templateUrl: 'Index.html',
   controller: 'catgrController'
  });
});

The above code looks straightforward. Based on the url view has been displayed. Below is my HTML for routing -

<div class="page-content" ng-controller="hmcontroller">
<div class="row">
  <div class="col-md-2">
    <div class="sidebar content-box" style="display: block;">
        <ul class="nav">
          <!-- Main menu -->
          <li><a href="#/Electronics" ng-click="getSelectedText('Electronics')"><i class="glyphicon glyphicon-home"></i> Electronics</a></li>
          <li><a href="#/Men" ng-click="getSelectedText('Men')"><i class="glyphicon glyphicon-edit"></i> Men</a></li>
          <li><a href="#/Women" ng-click="getSelectedText('Women')"><i class="glyphicon glyphicon-list"></i> Women</a></li>
          <li><a href="#/Furniture" ng-click="getSelectedText('Furniture')"><i class="glyphicon glyphicon-list"></i>Furniture</a></li>
          <li><a href="#/Books" ng-click="getSelectedText('Books')"><i class="glyphicon glyphicon-list"></i> Books</a></li>
        </ul>
    </div>
  </div>
  <div class="col-md-10">
    <div class="content-box-header panel-heading">
        <div class="panel-title">{{pageTitle}}</div>
    </div>
  <div class="row">
  <div class="col-md-12 panel-info">
      <div class="content-box-large box-with-header">
        <div ng-view></div>
      </div>
   </div>
 </div>
</div>
</div>
</div>

As you can see in the above code snippet menu options are in "<li>" tag. "hmcontroller" is my controller script, which is used for displaying the page name clicked.

hmcontroller.js -

myApp.controller('hmcontroller', ['$scope', function ($scope) {

 $scope.getSelectedText = function (selectedText) {
  $scope.pageTitle = selectedText;
 };

}]);

Below is the output -

Hope this post is useful. Please put your thoughts in the comment section below.