Question

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

在使用buildscript({ it -> delegate.repositories({delegate.mavenCentral()}) delegate.dependencies({delegate.classpath([group:'commons-codec', name:'commons-codec', version:'1.2'])}) })之前一切正常，意味着点击任意链接，相关的页面调用并显示在主模板中：

这是我的$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>

我的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目录中，我的服务器配置与this Page上描述的相同，如下所示：

Angular.dev/SPA

但是当我将<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);方法的结尾并且在所有路由定义之后，我的应用程序无法正常工作。

我还在head元素中添加了.config()标记，如下所示：

base

但点击链接，没有任何事情发生。

当然，当我将<base href="/SPA/index.html">个网址复制到单独的浏览器标签中时，会重定向到http://angular.dev/SPA/index.html#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工作正常。

$ locationProvider.html5Mode（true）在SPA Angularjs中无法正常工作

1 个答案: