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.

Angularjs interview questions for Freshers and Experienced

Below are the list of Angularjs interview questions for Freshers and Experienced  -


1) What are modules in AngularJS?

2)  How AngularJS application works?

3) What is the use of "$scope" in AngularJS?

4) How the Routing works in AngularJS?

5) What is the need of "service" in AngularJS?

6) How we can declare constant variables in AngularJS?

7) How we can "$http" methods in AngularJS?

8) Explain Dependency Injection in AngularJS?

9) List all the directives in AngularJS?

10) What are filters in AngularJS?

11) How the validation works in AngularJS?

12) Explain AngularJS booting process?

13) Why to use "ng-disable" directive in AngularJS?

14) How to implement a custom directive in AngularJS?

15) What is the use of "Controller as" syntax in AngularJS?