Bootstrap.navbar + Angular.routeProviderも動作しません。クロムでエラーが発生しません。

Question

routeProviderの設定と、ブートストラップnav-barを使用したナビゲーションを投稿しましたが、機能しません。 google- chrome、url http://localhost:8080/collegeCap/#!/#collegeCapは対応するhrefに置き換えられますが、ページの内容は表示されません。

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> 

を使用するようにリンクを変更します。

もう一つは、を修正し、あなたのモジュールのconfigブロックに$locationProviderを注入し、その後、次のようにハッシュプレフィックスを設定することにより、バックに空の文字列にハッシュプレフィックスをリセットすることです：

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>