Angular 路由不正确。 URL 是 localhost:8081/#!/#pageName

Question

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

选择项目后浏览器中显示的 URL 是 localhost:8081/#!/#pageName。我不知道'！'在哪里来自，在 pageName 之前不应该有散列。我期望的 URL 是 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 之前有一个散列（我希望是一个散列，而不是两个）。

Answer 1

为什么其他视图没有加载？
您的视图未加载的原因是因为您到达了路线。您使用 1.6 angular 并期待 1.5 的行为。位置发生了变化 hash-prefix:

Due to aa077e8, the default hash-prefix used for $location hash-bang URLs has changed from the empty string ('') to the bang ('!'). If your application does not use HTML5 mode or is being run on browsers that do not support HTML5 mode, and you have not specified your own hash-prefix then client side URLs will now contain a ! prefix. For example, rather than mydomain.com/#/a/b/c the URL will become mydomain.com/#!/a/b/c.

If you actually want to have no hash-prefix, then you can restore the previous behavior by adding a configuration block to you application:

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

怎么办？
1。设置 HTML5mode true

$locationProvider.html5Mode(true);

并在 html 中设置基数 html header:

<base href="/">

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

<a ng-href="pagename">

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

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

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

Angular 路由不正确。 URL 是 localhost:8081/#!/#pageName

Angular not routing properly. URL is localhost:8081/#!/#pageName

html

javascript

routing

views

angularjs