How Route Work on AnuglarJs

on
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 - http://embed.plnkr.co/CjfYdldPXOdB0G6ZH2b9/preview

------------------------------------------------------------------------------------------------
Index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>AngularJS Routing Example</title>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
      <script src="app.js"></script>
  </head>
  <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">
<thead>
 <tr>
<th></th><th>Customer Id</th><th>Customer Name</th><th></th>
 </tr>
</thead>
<tbody>
 <tr>
<td>1</td><td>1111</td><td>Ravi</td>
<td><a href="#CustomerDetails/1001/Ravi">Details</a></td>
 </tr>
 <tr>
<td>2</td><td>2222</td><td>Dinesh</td>
<td><a href="#CustomerDetails/1002/Dinesh">Details</a></td>
 </tr>
 <tr>
<td>3</td><td>3333</td><td>Raj</td>
<td><a href="#CustomerDetails/1003/Raj">Details</a></td>
 </tr>
</tbody>
 </table>
  <div ng-view></div>
</div>
</div>
    </div>
  </body>
</html>
------------------------------------------------------------------------------------------------

App.js

 var routingApp = angular.module('routingApp', []);
routingApp.config(['$routeProvider',
  function($routeProvider) {
    $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;
});

 ------------------------------------------------------------------------------------------------
Show_Customer.html
<div>
<h2>Customer Id  - {{customer_Id}}</h2>
Customer Name <b>#{{customer_Name}}</b>
</div>

Comments

Post a Comment