CODEWITHSUNDEEP
javascripthtmlangularjs
Débora
Débora

Reputation: 5952

RouteProvider does not work

I am learnig how navigate pages.
Here is my html page 

<html lang="en">

AngularJS Routing example 

<body data-ng-app="sampleApp">


<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"> Show Order </a></li>
        </ul>
    </div>
    <div>
        <div data-ng-view></div>
    </div>
    </div>
</div>



 </body>


<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>    

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.js"></script> 
<script src="rout.js"></script>

rout.js is where I have written all configuringn part. 

var sampleApp = angular.module("sampleApp", []);

sampleApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/AddNewOrder', {
        templateUrl: '/add_order.html',
        controller: 'AddOrderController'
    }).
      when('/ShowOrders', {
        templateUrl: '/show_orders.html',
        controller: 'ShowOrdersController'
      }).
      otherwise({
        redirectTo: '/route-paging.html'
      });
}]);

sampleApp.controller('AddOrderController', function($scope) {
    $scope.message = 'This is Add new order screen';
});


sampleApp.controller('ShowOrdersController', function($scope) { 
    $scope.message = 'This is Show orders screen';
});

This is one of navigating page add_order.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>Add New Order</h2>

{{ message }}
</body>
</html>

Other page Show_orders.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>Show Orders</h2>

{{ message }}
</body>
</html>

I took this this code from an example. The same functionality was tried my self. But not worked. Any one know where can be wrong.

Upvotes: 0

Views: 49

Answers (1)

Patrick Evans
Patrick Evans

Reputation: 42736

AngularJS has moved their routerProvider stuff to a separate module since version 1.2, called ngRoute. So if you are using version 1.2 or later you have to include the additional js file (ie angular-route.min.js) and inject the module

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

Upvotes: 1

Related Questions