Router Test

//Define an angular module for our app
var sampleApp = angular.module('fruitApp', []);
 
//Define Routing for app
sampleApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/AddNewOrder', {
        templateUrl: 'add_order.html',
        controller: 'AddOrderController',
        customData: 'customData'
    }).
      when('/ShowOrders/:orderId', {
        templateUrl: 'show_orders.html',
        controller: 'ShowOrdersController'
      }).
      otherwise({
        redirectTo: '/AddNewOrder'
      });
}]);
 
 
sampleApp.controller('AddOrderController', function($scope,$route) {    
    
     //access the foodata property using $route.current
    var customData = $route.current.customData;
    $scope.message = customData;
});
 
 
sampleApp.controller('ShowOrdersController', function($scope,$routeParams) {
 
    $scope.message = 'This is Show orderId screen';
    $scope.order_id = $routeParams.orderId;
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>AngularJS Routing example</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
  </head>
 
  <body ng-app="fruitApp">
 
    <div class="container">
        <div class="row">
        <div class="col-md-3">
            <ul class="nav">
                <li><a href="#AddNewOrder"> Add New Order </a></li>
                <li><a href="#ShowOrders/1"> Show Order </a></li>
            </ul>
        </div>
        <div class="col-md-9">
            <div ng-view></div>
        </div>
        </div>
    </div>  

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

/* Put your css in here */

<h2>Add New Order</h2>
 
{{ message }}

<h2>Show Orders</h2>
 
{{ message }}<br>

Here are the details for order <b>#{{order_id}}</b>.