How Route Work on AnuglarJs

by Virender
November 17, 2014

Route is used for linking URL to controllers and views. In large application we need many controllers and views . Based on request (URL) we can show different views. Route divide a single page application into many views. Its make application more manageable. 

For define route we need to use $route syntax

$route dependent on $location and $routeParms directives.

Demo –


<!DOCTYPE html>
<html lang=”en”>
    <title>AngularJS Routing Example</title>
      <script src=””></script>
      <script src=”app.js”></script>
  <body ng-app=”routingApp”>
    <div class=”container”>
<div class=”row”>
<div class=”col-md-9″>
          <h1>  AngularJS Routing Example</h1>
<table class=”table table-striped”>
<th></th><th>Customer Id</th><th>Customer Name</th><th></th>
<td><a href=”#CustomerDetails/1001/Ravi”>Details</a></td>
<td><a href=”#CustomerDetails/1002/Dinesh”>Details</a></td>
<td><a href=”#CustomerDetails/1003/Raj”>Details</a></td>
  <div ng-view></div>



 var routingApp = angular.module(‘routingApp’, []);
  function($routeProvider) {
      when(‘/CustomerDetails/:customerId/:customerName’, {
templateUrl: ‘Templates/Show_Customer.html’,
controller: ‘CustomerDetailsController’
routingApp.controller(‘CustomerDetailsController’, function($scope, $routeParams) {
$scope.customer_Id = $routeParams.customerId;
    $scope.customer_Name = $routeParams.customerName;


<h2>Customer Id  – {{customer_Id}}</h2>
Customer Name <b>#{{customer_Name}}</b>

Leave a Reply

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