Bootstrap.navbar + Angular.routeProvider не работает и не выдает никаких ошибок в Chrome

Question

Я разместил конфигурацию для routeProvider и навигацию по ней с помощью загрузочной навигационной панели, но она не работает, также я не получаю никаких ошибок в Google-Chrome, URL http://localhost:8080/collegeCap/ заменяется на соответствующая ссылка, но не отображает содержимое страницы.

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

С вашей текущей настройкой вы просите угловой найти маршрут с именем #collegeCap (которого не существует). Измените ваши ссылки, чтобы использовать #!/routeName например:

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

Это говорит угловой, что часть после #!/ должен обрабатываться системой маршрутизации и позволять ему подобрать правильный маршрут.

Другим исправлением является сброс хеш-префикса обратно в пустую строку путем введения $locationProvider в ваш модуль config заблокировать, а затем установить префикс хеша следующим образом:

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'
        });

});

и тогда ваша ссылка станет:

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