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

我一直在使用 gulp 加载预览。当我加载页面并单击链接时，我无法更改页面上的模板。我试图寻找一些答案，但找不到一个。有人可以帮我解决这个问题吗？当我单击链接时，URL 显示为 But isn't it supposed to be "index.html#/contactus"

但是，我尝试手动更改 url (index.html#!/menu) 并且效果很好。但问题是我不明白为什么 !/ 在网址中。任何帮助将不胜感激。

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

试试这个。而且index.html中应该有ng-view

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