Bootstrap.navbar + Angular.routeProvider not working also not giving any error in chrome

Question

I have posted configuration for routeProvider and navigation for it using bootstrap nav-bar but its not working also I don't get any error in google-chrome, url http://localhost:8080/collegeCap/#!/#collegeCap replaces with corresponding href but doesn't display content of the page.

var CollegeCapApp = angular.module('CollegeCapApp',
                ['ngAnimate','ngSanitize', 'ui.bootstrap','ngRoute']);


CollegeCapApp.config(function($routeProvider){
        $routeProvider
        .when('/',{
                templateUrl : 'resources/pages/collegeCap.jsp'
        })
        .when('/collegeCap',{
                templateUrl : 'resources/pages/collegeCap.jsp'
        })
        .when('/collegeCapEvent',{
                templateUrl : 'resources/pages/collegeCapEvent.jsp'
        })
        .when('/collegeCapLogin',{
                templateUrl : 'resources/pages/collegeCapLogin.jsp'
        })
        .when('/collegeCapSignUp',{
                templateUrl: 'resources/pages/collegeCapSignUp.jsp'
        });

});


<div>
  <nav class="navbar navbar-inverse">
    <div class="navbar-header">
      <button type="button"
       class="navbar-toggle"
       data-toggle="collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
     </button>
     <a class="navbar-brand"  href="#">
       CollegeCapApplication
     </a>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li>
                <a href="#collegeCap" class="navbar-link">CollegeCap </a>
            </li>
            <li>
                <a href="#collegeCapEvent" class="navbar-link"> CollegeCapEvent </a>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
           <li>
               <a href="#collegeCapSignUp" class="navbar-link">
               <span class="glyphicon glyphicon-user"></span> Sign up
               </a>
          </li>
          <li>
            <a href="#collegeCapLogin" class="navbar-link">
              <span class="glyphicon glyphicon-login"></span> Login
            </a>
         </li>
       </ul>
     </div>
   </nav>
</div>
~

Matthew Cawley · Accepted Answer · 2017-02-14 21:54:14Z

1

With your current set up you're asking angular to find a route named #collegeCap (which does not exist). Change your links to use #!/routeName e.g.:

<a href="#!/collegeCap" class="navbar-link">CollegeCap </a>

This tells angular that the part after the #!/ should be processed by it's routing system and allow it to pick up the correct route.

Another fix is to reset the hash prefix back to the empty string by injecting $locationProvider into your module's config block and then setting the hash prefix as follows:

CollegeCapApp.config(function($routeProvider, $locationProvider){

        // Add this line
        $locationProvider.hashPrefix('');

        $routeProvider
        .when('/',{
                templateUrl : 'resources/pages/collegeCap.jsp'
        })
        .when('/collegeCap',{
                templateUrl : 'resources/pages/collegeCap.jsp'
        })
        .when('/collegeCapEvent',{
                templateUrl : 'resources/pages/collegeCapEvent.jsp'
        })
        .when('/collegeCapLogin',{
                templateUrl : 'resources/pages/collegeCapLogin.jsp'
        })
        .when('/collegeCapSignUp',{
                templateUrl: 'resources/pages/collegeCapSignUp.jsp'
        });

});

and then your link would become:

<a href="#/collegeCap" class="navbar-link">CollegeCap </a>

edited Feb 14, 2017 at 21:54

answered Feb 14, 2017 at 21:42

Matthew Cawley

2,8281 gold badge10 silver badges19 bronze badges

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

5 Comments

lion_pankaj Over a year ago

Thanks.!! Mattew Cawley

Matthew Cawley Over a year ago

It's just a change made in angular v1.6 (assuming that's what you're using) see here

Matthew Cawley Over a year ago

Has this fixed the problem?

lion_pankaj Over a year ago

Yes. href="#!/*" Solved my issue.

Matthew Cawley Over a year ago

Excellent, pleased it helped. Please mark as answer. :)

Collectives™ on Stack Overflow

Bootstrap.navbar + Angular.routeProvider not working also not giving any error in chrome

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