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>
~                  

Answer 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>