javascript - $locationProvider.html5Mode(true) 在 SPA Angularjs 中无法正常工作

Question

我是 AngularJs 初学者，我想根据 single-page-apps-with-angularjs-routing-and-templating 创建一个简单的基础 SPA 来自 https://scotch.io/ .

在使用 $locationProvider 之前一切正常，通过点击任何链接，相关页面调用并显示在主模板中:

这是我的 index.html 主页:

    <div class="container" style="width: 960px;" ng-controller="mainController">

    <div class="row">
        <div class="col-xs-3">
            <ul class="nav nav-pills nav-stacked">
                <li>
                    <a href="#">Main</a>
                </li>
                <li>
                    <a href="#about">About Us</a>
                </li>
                <li>
                    <a href="#contact">Contact Us</a>
                </li>
            </ul>
        </div>
        <div class="col-xs-9">

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

        </div>
    </div>

</div>

这是我的 Angular 代码，包括路由和其他配置:

    var mySPA = angular.module('SPA', ['ngRoute']);

mySPA.config(['$routeProvider' , '$locationProvider' ,function ($routeProvider , $locationProvider) {

    $routeProvider
        .when('/', {
            templateUrl: 'pages/home.html',
            controller: 'mainController'
        })
        .when('/about', {
            templateUrl: 'pages/about.html',
            controller: 'aboutController'
        })
        .when('/contact', {
            templateUrl: 'pages/contact.php',
            controller: 'contactController'
        });
    $locationProvider.html5Mode(true);
}]);

mySPA.controller('mainController', ['$scope', function ($scope) {
    $scope.message  =   'I am a Message in Home Page';
}])
.controller('aboutController',['$scope', function ($scope) {
    $scope.message  =   'Here is About Us page';
}])
.controller('contactController',['$scope', function ($scope) {
    $scope.message  =   'Here is Contact Us page';
}]);

我的 index.html 页面在我本地服务器上的 Angular.dev/SPA 目录中，我的服务器配置与 this Page 中描述的相同像这样:

<VirtualHost *:80>
    ServerName Angular.dev

    DocumentRoot 'D:\wamp\www\Angular'

    <Directory D:\wamp\www\Angular>
        RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html to allow html5 

state links
        RewriteRule ^ index.html [L]
    </Directory>
</VirtualHost>

但是当我将 $locationProvider.html5Mode(true); 添加到 .config() 方法的末尾并且在所有路由定义之后，我的应用程序无法正常工作。

我还像这样在 head 元素中添加了 base 标签:

<base href="/SPA/index.html">

但是通过点击链接，没有任何反应。

当然，当我将例如 http://angular.dev/SPA/index.html#about url 复制到单独的浏览器选项卡中时，重定向到 http://angular.dev/SPA/about 并显示所需的页面但是其他链接同样不起作用，并且在不重新加载的情况下无法打开。

什么是问题，如何解决？

Answer 1

我可以通过以下内容在路由服务器目录中创建一个 htaccess 文件来解决问题:

RewriteEngine on

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ SPA/index.html [L]

然后我像这样更改链接(我从这些链接的开头删除了#):

<div class="container" style="width: 960px;" ng-controller="mainController">

    <div class="row">
        <div class="col-xs-3">
            <ul class="nav nav-pills nav-stacked">
                <li>
                    <a href="./">Main</a>
                </li>
                <li>
                    <a href="about">About Us</a>
                </li>
                <li>
                    <a href="contact">Contact Us</a>
                </li>
            </ul>
        </div>
        <div class="col-xs-9">

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

        </div>
    </div>

</div>

同样在 head 中将 base 标记更改为:

<base href="/SPA/">

我的 SPA 工作正常。