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라는 이름의 경로를 찾기 위해 각 요구하고 설정합니다.

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

이것은 #!/가 처리해야 후 일부 시스템을 라우팅 있다는 각도 말한다 : #!/routeName 예컨대을 사용하고 올바른 경로를 선택할 수 있도록하기 위해 링크를 변경합니다.

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

}); 

을 다음 링크가 될 것입니다 :

또 다른 수정 다음과 같이 해시 접두사를 설정 한 다음 모듈의 config 블록에 $locationProvider을 주입하여 다시 빈 문자열로 해시 접두사를 재설정하는 것입니다 :

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