Bootstrap.navbar + Angular.routeProvider 不工作也没有在 chrome 中给出任何错误

Question

我已经使用 bootstrap 导航栏发布了 routeProvider 和导航的配置，但它也不起作用我在 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

根据您当前的设置，您要求 angular 查找名为 #collegeCap 的路由（该路由不存在）。将您的 link 更改为使用 #!/routeName 例如：

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

这告诉 angular 在 #!/ 之后的 部分应该由它的路由系统处理，并允许它选择正确的路由。

另一个修复 是通过将 $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' }); });

然后您的 link 将变为：

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

Bootstrap.navbar + Angular.routeProvider 不工作也没有在 chrome 中给出任何错误

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

navbar

twitter-bootstrap

angularjs

route-provider