AngularJS，HTML5模式路由不起作用

Question

我正在尝试摆脱Hashbangs的站点，但似乎无法完全正确。 例如，如果我登陆我的主页，然后单击“ CSS”菜单并选择“ Origami Element”菜单选项，则在转到GitHub 404页面之前，我会短暂地看到页面加载。

如果直接输入网址（ 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) {});

Answer 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角路由将接管并加载我的404视图。 可能不是最优雅的解决方案，但它似乎在无法重写URL的情况下有效。

Answer 2

问题出在您的render.min.js脚本中。 当您单击链接时，当前窗口的URL会更改：

window.top.location.href=e

没有它，它工作正常。

AngularJS，HTML5模式路由不起作用

问题描述

2 个解决方案

解决方案1
3 已采纳 2014-11-25 21:21:32

解决方案2
1 2014-11-25 15:07:43

AngularJS，HTML5模式路由不起作用

问题描述

2 个解决方案

解决方案1 3 已采纳 2014-11-25 21:21:32

解决方案2 1 2014-11-25 15:07:43

解决方案1
3 已采纳 2014-11-25 21:21:32

解决方案2
1 2014-11-25 15:07:43