ngRoute不指向其他頁面

我想通過導航欄使用ngRoute導航到其他HTML頁面，但是當我點擊導航欄上的不同按鈕時頁面上不顯示任何內容。ngRoute不指向其他頁面

index.html文件：

<!DOCTYPE html> 
<html> 

<style> 
table, th , td { 
    border: 1px solid grey; 
    border-collapse: collapse; 
    padding: 5px; 
} 
table tr:nth-child(odd) { 
    background-color: #f1f1f1; 
} 
table tr:nth-child(even) { 
    background-color: #ffffff; 
} 
</style> 

<head> 
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Brazil Healthcare Project</title> 
    <link type="text/css" rel="stylesheet" href="css/bootstrap.css"> 
    <link type="text/css" rel="stylesheet" href="css/bootstrap-formhelpers.css"> 
    <link type="text/css" rel="stylesheet" href="css/main.css"> 
</head> 

<body ng-app="brazilApp" > 
    <div class="container"> 
     <nav class="navbar navbar-default main-nav" role="navigation"> 
       <!-- Met HI Lab Logo -->   
     <div class="navbar-header"> 
      <a href="http://www.met-hilab.org/"><img src="img/hilab-logo.png" alt="MET HiLab"></a> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#antidote-navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button>   
      </div>   
     <!-- Navigation Tabs --> 
     <div class="collapse navbar-collapse" id="antidote-navbar"> 
      <ul class="nav nav-tabs main-nav-ul"> 
       <li><a href="#/home" id="tab-home"><img src="img/home.jpg">Home</a></li> 
       <li><a href="#/brazil" id="tab-brazil"><img src="img/health.png">Brazil</a></li> 
       <li><a href="#/toxin" id="tab-toxin"><img src="img/toxin.jpg">Analysis</a></li> 
       <li><a href="#/FAQ" id="tab-FAQ"><img src="img/FAQ.jpg">FAQ</a></li> 
      </ul> 
     </div> 
      </nav> 



     <!-- Website Footer --> 
     <footer id="footer"> 
      <div class="text-center"> 
       <img src="img/bu-logo-small.gif"> 
      <div> 
       <ul class="list-inline"> 
      <li><a href="http://www.met-hilab.org/" target="_blank">MET HI Lab</a></li> 
      </ul> 
       </div> 
     </div> 
     <!-- Disclaimer --> 
     <div class="col-lg-offset-2 col-lg-8 main-disclaimer"> 
      <p> 
      DISCLAIMER: This educational program is not intended for individual patient care. If you are caring for a known or suspected poisoned patient, please contact your regional poison control center for patient specific management by dialing 1-800-222-1222. 
     </p> 
     </div> 
    </footer> 
    </div> <!-- /container --> 


    <script type="text/javascript" src="js/framework/bootstrap.min.js"></script> 
    <script type="text/javascript" src="js/framework/angular.js"></script> 
    <script type="text/javascript" src="js/framework/angular-route.js"></script> 
    <script type="text/javascript" src="js/controller/RoutingCtrl.js"></script> 

</body> 
</html>

RoutingCtrl.js文件：

var app = angular.module('brazilApp', ['ngRoute']) 

app.config(['$routeProvider', "$locationProvider", 
    function($routeProvider, $locationProvider) { 
     $locationProvider.hashPrefix(""); 
     $routeProvider. 
     when('/home', { 
      templateUrl: 'view/home.html' 
     }). 
     when('/brazil', { 
      templateUrl: 'view/brazil.html' 
     }). 
     when('/toxin', { 
      templateUrl: 'view/toxin.html' 
     }). 
     when('/FAQ', { 
      templateUrl: 'view/FAQ.html', 
      controller:"AlgorithmListCtrl" 
     }). 
     otherwise({ 
      redirectTo: '/home' 
     }); 
}]);

任何人都可以幫我嗎？

來源

2017-04-17 Yashvardhan Nanavati

什麼錯誤？ –

你能否提供一個可用的JSfiddle，以便它更容易調試和提供幫助。 –

您是否包含在Angular中運行路由所需的腳本文件？ –

你需要在你的index.html文件中包含ng-view指令。

<div ng-view> </div>

來源

2017-04-17 06:53:34

<body ng-app="myApp"> 

    <ul class="nav nav-tabs main-nav-ul"> 
    <li> 
     <a href="#home">Home</a> 
    </li> 
    <li> 
     <a href="#brazil">Brazil</a> 
    </li> 
    <li> 
     <a href="#toxin">Analysis</a> 
    </li> 
    </ul> 

    <div ng-view></div> 

</body>

這裏是工作Plunkr

來源

2017-04-17 07:22:47

ngRoute不指向其他頁面

回答

相關問題