Angular JS routing is not working on below code. URL

Question

** --Routing is not working on Angular JS . Please help. HTML code and js file attached. --** Below is my HTML code

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Routing Examples</title>
    <meta charset="utf-8" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body 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="#ShowOrder">Show Orders</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-9">
                <div ng-view>

                </div>
            </div>
        </div>
    </div>

    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-route.js"></script>
    <script src="script/app.js"></script>
</body>
</html>


/// <reference path="C:\Dev\WebApplication1\WebApplication1\Scripts/angular.js" />
var sampleApp = angular.module('sampleApp', ['ngRoute']);
//Define Routing 
sampleApp.config(function ($routeProvider) {
    $routeProvider.when('/AddNewOrder', {
        templateUrl: 'templates/AddNewOrder.html',
        controller: 'AddOrderController'
    }).when('/ShowOrder', {
        templateUrl: 'templates/ShowOrder.html',
        controller: 'ShowOrderController'
    });
});

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

sampleApp.controller('ShowOrderController', function ($scope) {
    $scope.message = "This is show Order screen";
});

Wrong URL is getting populated on browser addressbar when clicking on the AddNew Order link. http://localhost:63022/Sample1.html#!#AddNewOrder

Please suggest what is wrong here.. Routing is not working at all.

Please help here.. i am not able find why this routing is not working. — Hemant
– Hemant, Commented Feb 20, 2017 at 3:21
Don't prefix your href attributes with #. See the example here ~ docs.angularjs.org/api/ngRoute/service/$route#example — Phil
– Phil, Commented Feb 20, 2017 at 3:33

spilafis · Accepted Answer · 2017-02-20 03:51:40Z

1

Your links are wrong. Try this:

            <li>
                <a href="#/AddNewOrder">Add New Order</a>
            </li>
            <li>
                <a href="#/ShowOrder">Show Orders</a>
            </li>

Or without #/ at all

edited Feb 20, 2017 at 3:51

answered Feb 20, 2017 at 3:43

spilafis

885 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Hemant Over a year ago

<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="#/ShowOrder">Show Orders</a> </li> </ul> </div> <div class="col-md-9"> <div ng-view> </div> </div> </div> </div>

spilafis Over a year ago

So it worked? Don't forget to flag the answer as correct if it did.

Phil Over a year ago

@Hemant try without the #/ prefix as shown in the example in the official documentation

spilafis Over a year ago

Right, try it like I mentioned above (or without #/) <a href="AddNewOrder">Add New Order</a>

spilafis Over a year ago

Also @Hermant, to make sure the routing is good, you can try changing the url manually to the expected url and checking if that works: localhost:63022/#/AddNewOrder

Collectives™ on Stack Overflow

Angular JS routing is not working on below code. URL

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related