Question

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

选择项目后在浏览器中显示的网址为localhost:8081/#!/#pageName。我不知道＆＃39;！＆＃39;是来自，并且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之前有一个哈希值（我希望有一个哈希值，而不是两个哈希值）。

Answer 1

为什么其他观点没有加载？
未加载视图的原因是因为您点击了路径。你使用1.6角度，并期望1.5的行为。位置hash-prefix发生了变化：

由于aa077e8，用于$ location hash-bang的默认哈希前缀   网址已从空字符串（''）更改为bang（'！'）。如果你的   应用程序不使用HTML5模式或正在浏览器上运行   不支持HTML5模式，并且您尚未指定自己的模式   hash-prefix然后客户端URL现在包含一个！字首。对于   例如，URL将成为mydomain.com/#/a/b/c而不是   mydomain.com /＃！/ A / B / C

如果你真的想要没有hash-prefix，那么你可以恢复   通过向您的应用程序添加配置块来执行以前的行为：

appModule.config（['$ locationProvider'，function（$ locationProvider）{
  $ locationProvider.hashPrefix（ ''）; }]）; Source

怎么办？
的 1。设置HTML5mode为真

$locationProvider.html5Mode(true);

并在html set base in html header：

<base href="/">

最后将<a ng-href="#pagename">更改为

<a ng-href="pagename">

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

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

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

Angular没有正确路由。 URL为localhost：8081 /＃！/ #pageName

1 个答案: