Question

我已经使用bootstrap nav-bar发布了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

根据您当前的设置，您要求角度找到名为#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>

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

1 个答案: