AngularJS，HTML5 模式路由不起作用答案

【问题标题】：AngularJS, HTML5 mode routing not workingAngularJS，HTML5 模式路由不起作用
【发布时间】：2014-11-25 14:45:30
【问题描述】：

我正在尝试删除我的网站上的 Hashbangs，但我似乎无法完全正确。例如，如果我登陆我的home page，然后单击“CSS”菜单并选择“Origami Element”菜单选项，我会在被定向到 GitHub 404 页面之前短暂看到页面加载。

如果我直接输入 url (http://eat-sleep-code.com/css/origami)，我会直接发送到 GitHub 404。

我错过了什么，或者这在 GitHub Pages 托管的 AngularJS 网站上是不可能的？

下面是我的 app.js 的一部分

var app = angular.module('eatsleepcode', ['ngRoute', 'ngSanitize']); 

/* Routing */
app.config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {    
        $routeProvider.      
            when('/', {templateUrl: 'views/blog.html', controller: 'BlogController'}).
            when('/blog', {templateUrl: 'views/blog.html', controller: 'BlogController'}).
            when('/blog/:postID', {templateUrl: 'views/blog.html', controller: 'BlogController'}).
            when('/contact', {templateUrl: 'views/contact.html', controller: 'DefaultController'}).
            when('/privacy', {templateUrl: 'views/privacy.html', controller: 'DefaultController'}).
            when('/resources', {templateUrl: 'views/resources.html', controller: 'DefaultController'}).
            when('/terms', {templateUrl: 'views/terms.html', controller: 'DefaultController'}).
            when('/css/origami', {templateUrl: 'views/css/origami.html', controller: 'DefaultController'}).
            otherwise({
                redirectTo: '/404'
            });
            $locationProvider.html5Mode(true);
}]);  


/* Controllers */
app.controller('DefaultController', function($scope) {});

【问题讨论】：

如果您只是请求 http://.../css/origami，服务器不会读取您的 javascript。服务器不知道如何使用您的 js 定义进行路由。这就是#(http://.../#/css/origami)的目的；它破坏了 url，因此它使用 javascript 加载初始页面，然后加载正确的路由。
相关stackoverflow.com/questions/19211576/…

标签： javascript angularjs angularjs-routing github-pages

【解决方案1】：

@zeroflagL 的建议让我克服了我的第一个障碍。我有一些专门针对 hashbang URL 触发的代码。我未能更新该 IF 条件。

现在，单击所有链接都可以正常工作，但直接输入 URL 会导致 404 错误。如果我在 IIS 或 Apache 上运行此站点，我可以通过实施 URL 重写来纠正解决方案（这将是处理此问题的理想方法）。

但是，唉，我在 GitHub 页面上运行它。他们目前（截至 2014 年 11 月 25 日）不支持设置您自己的 URL 重写配置。

但是，它们允许您设置自定义 404 页面。我在我的 GitHub 页面站点的根目录中设置了一个简单的 404.html 页面。这个 404 页面将 AngularJS 在幕后需要的哈希值插入到 URL 中，然后调用重定向到它。由于我们使用的是 window.location.replace，因此 404.html 页面不会显示在浏览器历史记录中。

<html lang="en" data-ng-app="eatsleepcode">
<head>
    <title><eat-sleep-code /></title>
    <meta charset="utf-8" />
</head>
<body>
    <script type="text/javascript">
        var url = window.location.protocol + '//' + window.location.host + '/#' + window.location.pathname;
        window.location.replace(url);
    </script>
</body>  
</html>

如果页面并不真正存在...即：http://eat-sleep-code.com/somecrazyurl Angular 路由接管并加载我的 404 视图。也许不是最优雅的解决方案，但它似乎在 URL 重写不是一种选择的情况下有效。

【讨论】：

【解决方案2】：

问题出在您的render.min.js 脚本中。当你点击一个链接时，当前窗口的 URL 就会改变：

window.top.location.href=e

没有它就可以正常工作。

【讨论】：