Question

我正在使用AngularJS路由和部分来建立我的网站的页面结构。我正在使用HTML5模式来避免hashbang。通过单击链接从一个页面导航到下一个页面，但是当刷新页面或直接键入URL时，我得到404，页面未找到错误。我该如何解决这个问题？

这是精简的HTML：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8">
    <title>site</title>
    <base href="/">
</head>
<body ng-controller="MyController">
    <a href="/home">Site</a>
    <ul>
        <li><a href="/home">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>

    <div ng-view></div>

    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.min.js"></script>
    <script src="js/app.js"></script>

</body>
</html>

这是我的app.js：

angular.module('myApp', ['ngRoute'])
    .config(function($locationProvider, $routeProvider) {
        $locationProvider.html5Mode(true);
        $routeProvider.
            when('/home', { templateUrl: 'partials/home.html', }).
            when('/about', { templateUrl: 'partials/about.html', }).
            when('/contact', { templateUrl: 'partials/contact.html', }).
            otherwise({ redirectTo: '/home' });
    });

function MyController($scope) {

}

部分页面只发出一行：

home partial

或

about partial

或

contact partial

我在IIS7和Apache上都试过这个，每次都有相同的结果。

非常感谢任何帮助。谢谢你的时间。

Answer 1

此行为听起来好像服务器尚未配置为处理您对html5模式的使用。您的服务器没有资源为/ home，/ about和/ contact等路径上的请求提供服务。（因此404.）您需要配置服务器端重写，以便这些请求只是为您的索引页面提供服务。这样，如果你粘贴url / about，服务器就会提供索引页面（确实存在），你的客户端代码负责显示“about”部分。

即使它是第三方lib，documentation for ui-router也有一些服务器类型（包括Apache）的很好的例子。

AngularJS路线和部分

1 个答案: