角度未正确路由。 URL 是 localhost:8081/#!/#pageName答案

【问题标题】：Angular not routing properly. URL is localhost:8081/#!/#pageName角度未正确路由。 URL 是 localhost:8081/#!/#pageName
【发布时间】：2017-01-15 20:23:33
【问题描述】：

我正在制作一个简单的 Angular 应用程序，它有一个 index.html，它根据选择的导航栏项目将其他 HTML 页面加载为视图；但是，路由没有按预期工作。 main.html 视图加载正常，但没有加载其他视图，并且 URL 不是我所期望的。

选择项目后在浏览器中显示的 URL 是 localhost:8081/#!/#pageName。我不知道在哪里'！来自，并且在 pageName 之前不应该有哈希。我期待的网址是localhost:8081/#/pageName

app.js：

'use strict';

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

app.config(function($routeProvider) {                                                            
    $routeProvider
        .when('/', {
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        })
        .when('/rankedLists', {
            templateUrl: 'views/rankedLists.html',
            controller: 'RankedListsCtrl'
        })
        .when('/addGame', {
            templateUrl: 'views/addGame.html',
            controller: 'AddGameCtrl'
        })
        .when('/contact', {
            templateUrl: 'views/contact.html',
            controller: 'ContactCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });
});

app.controller('MainCtrl', function($scope) {
    $scope.message = 'THIS IS THE MAIN PAGE';
});
app.controller('RankedListsCtrl', function($scope) {
    $scope.message = 'THIS IS THE RANKED LISTS PAGE';
});
app.controller('AddGameCtrl', function($scope) {
    $scope.message = 'THIS IS THE ADD GAME PAGE';
});
app.controller('ContactCtrl', function($scope) {
    $scope.message = 'THIS IS THE CONTACT PAGE';
});

index.html:

<!doctype html>                                                                                  
<html ng-app="videoGamesApp">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="styles/main.css">
        <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.css">
    </head>

    <body ng-controller="MainCtrl">
    <header>
        <nav class="navbar navbar-inverse">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">GAMING </a>
                </div>

                <ul class="nav navbar-nav">
                    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                    <li><a href="#rankedLists"><i class="fa fa-trophy"></i> Ranked Lists</a></li>
                    <li><a href="#addGame"><i class="fa fa-gamepad"></i> Add a Game</a></li>
                    <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
                </ul>
                <div class="col-sm-3 col-md-3 pull-right">
                    <form class="navbar-form" role="search">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search" name="sr    ch-term">
                            <div class="input-group-btn">
                                <button class="btn btn-default" type="submit">
                                    <i class="glyphicon glyphicon-search"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>  
        </nav>  
    </header>

    <div id="main"> 
        <div ng-view=""></div>  
    </div>    

    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="scripts/app.js"></script>
    </body>
</html>

为什么其他视图没有加载？ URL中的感叹号来自哪里？为什么在 pageName 之前有一个哈希（我希望一个哈希，而不是两个）。

【问题讨论】：

标签： javascript html angularjs routing views

【解决方案1】：

为什么其他视图没有加载？
您的视图未加载的原因是因为您击中了路线。您使用 1.6 角度并期望 1.5 的行为。位置哈希前缀发生了变化：

由于 aa077e8，用于 $location hash-bang 的默认哈希前缀 URL 已从空字符串 ('') 更改为 bang ('!')。如果你的应用程序不使用 HTML5 模式或在浏览器上运行不支持 HTML5 模式，并且你没有指定你自己的 hash-prefix 那么客户端 URL 现在将包含一个 !字首。为了例如，URL 将变为而不是 mydomain.com/#/a/b/c mydomain.com/#!/a/b/c.

如果你真的不想有哈希前缀，那么你可以恢复通过向您的应用程序添加配置块来实现之前的行为：

appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix(''); }]); Source

怎么办？
1.设置 HTML5mode 为真

$locationProvider.html5Mode(true);

并在 html 中设置基在 html 标头中：

<base href="/">

最后把<a ng-href="#pagename">改成

<a ng-href="pagename">

2。从 1.5 返回旧行为 - 手动设置哈希前缀这将使您的应用程序按照您在问题中的预期工作。

app.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

为什么在 pageName 之前有一个哈希？
您链接的方式被视为主题标签锚标签。它将向下滚动到具有给定 id 的当前 div。如果您解决了上述原因之一的问题，这也将得到解决。

【讨论】：

感谢您的精彩解释！使用您的第一个建议就可以了。