CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangular-uiangular-ui-router
namrathu1
namrathu1

Reputation: 347

AngularJS router code not working

I have checked Stack overflow and many other blogs but I was not able to resolve the routing issue that I have in my AngularJS code. I'm not getting any error but the routing doesn't seem to be happening at all. Can anyone please help me fix this issue? The main index.html is here 

<!DOCTYPE html>

<html lang="en">
<head>
<title>AngularJS Routing example</title>
</head>

<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 class="col-md-9">
            <div data-ng-view></div>
        </div>
    </div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>

I have uploaded the complete code to Plunker AngularJS Routing

Any help would be greatly appreciated.

Thanks, Smitha

Upvotes: 0

Views: 187

Answers (2)

V&#237;ťa Plšek - angular.cz
V&#237;ťa Plšek - angular.cz

Reputation: 1503

The plunker doesnt work because of missing angular-route.js. But What can I see you have forgotten to give angular dependency - ngRoute

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

This oficial tutorial shows how to use the router https://docs.angularjs.org/tutorial/step_07

I have updated your plunker with changes which works

http://plnkr.co/edit/BBG3XH3akxfAKMzjT71E?p=preview

Main problem - version mishmash - uploaded angular - 1.3.x, uploaded angular-rout - 1.2-x linked angular to html - 1.0-7

I have changed them to cdn 1.3.3

Next thing - wrong links to templates - even if it could work on localhost - in plunker there cant be / on begining of templates name.

I have changed also links it should start # in ng-href.

Thats basically all.

Upvotes: 3

Aditya Sethi
Aditya Sethi

Reputation: 10586

You will need to remove / from templateUrl

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

} ]);

Upvotes: 1

Related Questions