Question

我正在尝试使用AngularJS构建一个示例应用程序，其中我通过REST接口使用一些Spotify服务。要在家庭和搜索页面之间切换，我使用ngRoute服务。这是我的index.html：

<html lang="en" data-ng-app="spotifinder">
<head>...</head>

<body>
    <!-- Navigation -->
    <nav id="main-navbar" class="navbar navbar-default navbar-inverse">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar-collect" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a id="to-home" class="navbar-brand" href="#/">Search anything in Spotify</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div id="main-navbar-collect" class="collapse navbar-collapse">
                <div class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search" data-ng-model="searchText">
                        <a id="to-search" href="#/search" class="btn btn-primary">
                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        </a>
                    </div>

                </div>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    <!-- Results -->
    <div class="container">
        <div data-ng-view></div>
    </div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
    <!-- Bootstrap JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <!-- Angular JS -->
    <script src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.6.4/angular-resource.min.js"></script>
    <script src="https://code.angularjs.org/1.6.4/angular-route.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

然后我的app.js（片段）：

// MAIN MODULE
var spotifinder = angular.module('spotifinder', ['ngRoute', 'ngResource']);


// ROUTES
spotifinder.config(['$routeProvider', function(routeProvider) {

    routeProvider

    .when('/', {
        templateUrl: 'pages/home.html',
        controller: 'homeController'
    })

    .when('/search', {
        templateUrl: 'pages/search.html',
        controller: 'searchController'
    })
}]);

控制器在此代码下面的app.js中正确定义。当我打开应用程序时（我在Brackets中显示它但在本地打开文件时它是一样的）我在地址栏中得到以下URL

http://127.0.0.1:57612/spotifinder/index.html#!/

（注意最后一个斜杠前的#!）。当我再次导航到搜索页面或主页时，我得到以下网址

搜索页面（使用a#to-search链接）

http://127.0.0.1:57612/spotifinder/index.html#!/#%2Fsearch

首页（使用a#to-home链接）

http://127.0.0.1:57612/spotifinder/index.html#!/#%2F

问题是：为什么应用会在网址中添加#%2F（%2F对应/个字符？我错过了什么？

提前感谢您的回答。

Answer 1

％2F是正斜杠/字符的百分比编码。你可以在这里看到 https://en.wikipedia.org/wiki/Percent-encoding

这个问题是因为AngularJS 1.6更改了$ location服务中hash-bang url的默认值。

要恢复到之前的行为：

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

AngularJS导航路径失败

1 个答案: