在AngularJS SPA中路由的問題

Question

我是AngularJS的初學者，並試圖構建我的第一個SPA。我創建了幾頁的路線並指定了導航欄中的鏈接。索引文件是

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#/"><img src="images/logo.png" height=30 width=41></a> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#/"> 
         <span class="glyphicon glyphicon-home" 
         aria-hidden="true"></span> Home</a></li> 
        <li><a href="#/aboutus"> 
         <span class="glyphicon glyphicon-info-sign" 
         aria-hidden="true"></span> About</a></li> 
        <li><a href="#/menu"> 
         <span class="glyphicon glyphicon-list-alt" 
         aria-hidden="true"></span> 
         Menu</a></li> 
        <li><a href="#/contactus"> 
        <i class="fa fa-envelope-o"></i> Contact</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 

`

的routeProvider代碼，

angular.module('confusionApp', ['ngRoute']) 
.config(function($routeProvider) { 
    $routeProvider 
     // route for the contactus page 
     .when('/contactus', { 
      templateUrl : 'contactus.html', 
      controller : 'ContactController' 
     }) 
     // route for the menu page 
     .when('/menu', { 
      templateUrl : 'menu.html', 
      controller : 'MenuController' 
     }) 
     // route for the dish details page 
     .when('/menu/:id', { 
      templateUrl : 'dishdetail.html', 
      controller : 'DishDetailController' 
     }) 
     .otherwise({ 
      redirectTo: '/menu' 
     }); 
}); 

我一直用一口加載預覽。當我加載頁面並單擊鏈接時，我無法更改頁面上的模板。我試圖尋找一些答案，但找不到一個。有人能幫我解決這個問題嗎？當我點擊鏈接時，網址顯示爲 But isn't it supposed to be "index.html#/contactus"

但是，我試過手動更改網址（index.html＃！/ menu），它工作正常。但問題是我不明白爲什麼在URL中有！/。任何幫助，將不勝感激。

Answer 1

檢查這方面的工作演示：

var app = angular.module('Routing', []); 
 

 
app 
 
.controller('HomeController', function ($scope) {}); 
 

 
app 
 
.controller('AboutController', function ($scope) {}); 
 

 
app 
 
.config(function ($routeProvider) { 
 
    $routeProvider. 
 
    when('/home', { 
 
     templateUrl: 'home.html', 
 
     controller: 'HomeController' 
 
    }). 
 
    when('/aboutus', { 
 
     templateUrl: 'about.html', 
 
     controller: 'AboutController' 
 
    }). 
 
    otherwise({ 
 
     redirectTo: '/home' 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="Routing"> 
 
<script type="text/ng-template" id="home.html"> 
 
    <h1> Home </h1> 
 
</script> 
 

 
<script type="text/ng-template" id="about.html"> 
 
    <h1> About </h1> 
 
</script> 
 

 
<div> 
 
    <div id="navbar" class="navbar-collapse collapse"> 
 
       <ul class="nav navbar-nav"> 
 
        <li><a href="#/home"> Home</a></li> 
 
        <li><a href="#/aboutus">About</a></li> 
 
       </ul> 
 
      </div> 
 
    <div ng-view></div> 
 
</div> 
 
    </div>

Answer 2

試試這個。而且應該有ng-view中的index.html

 <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#"> 
        <span class="glyphicon glyphicon-home" 
        aria-hidden="true"></span> Home</a></li> 
       <li><a href="#aboutus"> 
        <span class="glyphicon glyphicon-info-sign" 
        aria-hidden="true"></span> About</a></li> 
       <li><a href="#menu"> 
        <span class="glyphicon glyphicon-list-alt" 
        aria-hidden="true"></span> 
        Menu</a></li> 
       <li><a href="#contactus"> 
       <i class="fa fa-envelope-o"></i> Contact</a></li> 
      </ul> 
     </div>