AngularJS导航路径失败

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 中正确定义了控制器。当我打开应用程序时（我在括号中显示它，但在本地打开文件时它是一样的）我在地址栏

中得到以下 URL

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

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

Search page (using the a#to-search link)

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

Home page (using the a#to-home link)

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

问题是：为什么应用程序在URL中添加#%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导航路径失败

AngularJS navigation path failure

angularjs

ngroute