ngRoute ne pas diriger vers d'autres pages

J'essaie de naviguer vers d'autres pages HTML en utilisant ngRoute via une barre de navigation, mais rien n'apparaît sur la page lorsque je clique sur différents boutons de la barre de navigation.ngRoute ne pas diriger vers d'autres pages

fichier 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>

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

Quelqu'un peut-il s'il vous plaît me aider?

Source

2017-04-17 Yashvardhan Nanavati

Quelle est l'erreur? –

pourriez-vous fournir un JSfiddle de travail afin qu'il soit plus facile de déboguer et d'aider. –

Avez-vous inclus le fichier de script nécessaire pour exécuter le routage dans Angular? –

Vous devez inclure la directive ng-view dans votre fichier index.html.

<div ng-view> </div>

Source

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>

est ici le travail Plunkr

Source

2017-04-17 07:22:47

ngRoute ne pas diriger vers d'autres pages

Répondre

Questions connexes