ngRoute 다른 페이지로 이동하지 않습니다.

navbar를 통해 ngRoute를 사용하여 다른 HTML 페이지로 이동 하려는데 nav-bar의 다른 버튼을 클릭해도 페이지에 아무 것도 표시되지 않습니다.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을 제공 할 수 있습니까? –

라우팅을 실행하는 데 필요한 스크립트 파일을 각도로 포함 시켰습니까? –

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 다른 페이지로 이동하지 않습니다.

답변

관련 문제