angularjs - ngRoute not working properly

Question

ngRoute was previously working fine and is stopped working now ater added few files and controllers. In The browser I get URL as http://localhost/#browsefp instead of http://localhost/#/browsefp

below is my code, please help. Learning AngularJS and keep getting weird issues. No errors seen in JS console.

app.js

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

 app.config(function($routeProvider){
 $routeProvider 
   .when('/', {templateUrl : 'views/main.html', controller : 'mainController' })
   .when('/addnew', {templateUrl : 'views/addnew.html', controller : 'homeController', css : 'css/screen.css'})
   .when('/addnewfp', {templateUrl : 'views/addnewfeeprogram.html', controller : 'homeController', css : 'css/screen.css'})
   .when('/addnewcm', {templateUrl : 'views/addnewcustomermapping.html', controller : 'aboutController', css : 'css/screen.css'})
.when('/browsefp', {templateUrl : 'views/browseprogram.html', controller : 'browseprogramController', css : 'css/screen.css'})
.otherwise({ redirectTo : '/' })
 });

index.html

<!doctype html>
<!-- define angular app -->
<html ng-app="DevStreamApp">
<head>
<titleFee </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css" media="screen">
   @import url("/css/screen.css");
   @import url("/js/yui/container.css");
</style>

<!-- load angular and angular route via CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js">        </script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
  <script src="js/app.js"></script>
</head>
<body>
<hr noshade/>
 <!-- MAIN CONTENT AND INJECTED VIEWS -->
    <div id="main">
        <!-- angular templating -->
        <!-- this is where content will be injected -->
        <a href="#addnew">Add new </a><br/>  
        <a href="#addnewfp">Add new Fee Program</a><br/>  
        <a href="#addnewcm">Add new Customer mapping</a><br/> 
        <a href="#browsefp">Browse Fee Program</a>
        <div ng-view></div>
    </div>
</body>
<script src="js/app.js"></script>
<script src="js/controllers/mainController.js"></script>
<script src="js/controllers/homeController.js"></script>
<script src="js/controllers/aboutController.js"></script>
<script src="js/controllers/contactController.js"></script>
<script src="js/controllers/browseprogramController.js"></script>
</html>

mainController.js

 //create the controller module 
 angular.module('DevStreamApp').controller('mainController', function($scope) {

// create a message to display in our view
$scope.message = 'Everyone come in Main Controller!';
});

Just as an aside I would recommend ui-router It is much more robust and not any harder to use than the out of the box angular router — Malkus
– Malkus, Commented Dec 28, 2015 at 16:42

Vanojx1 · Accepted Answer · 2015-12-28 16:40:21Z

1

Remove the # from the href, as you can see in doc they configure it as follow:

<a href="Book/Moby">Moby</a>

.when('/Book/:bookId', {
      ....
});

so in your case it would be:

    <a href="addnew">Add new </a><br/>  
    <a href="addnewfp">Add new Fee Program</a><br/>  
    <a href="addnewcm">Add new Customer mapping</a><br/> 
    <a href="browsefp">Browse Fee Program</a>

answered Dec 28, 2015 at 16:40

Vanojx1

5,5842 gold badges25 silver badges37 bronze badges

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

1 Comment

Vanojx1 Over a year ago

post what you got in the console log

Victor de Andres · Accepted Answer · 2015-12-28 18:56:50Z

0

By default, AngularJS will route URLs with a hashtag, but you can remove it with $locationProvider.

You will use the $locationProvider module and set html5Mode to true.

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

 app.config(function($routeProvider,  $locationProvider){
     $locationProvider.html5Mode(true);

     ... your code ...

And in your index.html the link must be

<a href="addnew">Add new </a><br/>

edited Dec 28, 2015 at 18:56

answered Dec 28, 2015 at 16:59

Victor de Andres

686 bronze badges

3 Comments

user5636236 Over a year ago

any idea why it is not working hashtag? I dont have $locationProvider in my app.js

user5636236 Over a year ago

It was working properly until I added more code files

Victor de Andres Over a year ago

Just add $locationProvider in your app.js file. The line will be as follow <code>app.config(function($routeProvider, $locationProvider){</code>, remember add <code>$locationProvider.html5Mode(true);</code>. Your line now is <code>app.config(function($routeProvider){</code>

Collectives™ on Stack Overflow

angularjs - ngRoute not working properly

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related