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

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 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="" class="navbar-link">CollegeCap </a>
            </li>
            <li>
                <a href="" class="navbar-link"> CollegeCapEvent </a>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
           <li>
               <a href="" class="navbar-link">
               <span class="glyphicon glyphicon-user"></span> Sign up
               </a>
          </li>
          <li>
            <a href="" class="navbar-link">
              <span class="glyphicon glyphicon-login"></span> Login
            </a>
         </li>
       </ul>
     </div>
   </nav>
</div>
~                  


ANSWERS:


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

<a href="" 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="" class="navbar-link">CollegeCap </a>


 MORE:


 ? Angular $location search does not work always
 ? Can we pass two parameters in $routeProvider.when() function in angular js
 ? Angular 1.x/2 Hybrid, karma tests not bootstrapping ng1 app
 ? Node server to intercept all request from angular (http) to java spring backend
 ? Angular change url without executing routeprovider
 ? Angular js - call a route without view
 ? .config $routeprovider angularjs
 ? Angular JS not loading view
 ? AngularJS directive vs routeProvider
 ? controller not found through routeProvider