проблема с маршрутизацией в 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' 
     }); 
}); 

Я загружая предварительный просмотр с помощью глотка. Когда я загружаю страницу и нажимаю ссылки, я не могу изменить шаблоны на странице. Я попытался найти ответы, но не смог найти их. Может ли кто-нибудь помочь мне в этом? И когда я нажимаю на ссылки, URL-адрес отображается как But isn't it supposed to be "index.html#/contactus"

Однако, я попытался вручную изменить url (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>