AngularJS，HTML5模式路由不工作

我想擺脫我的Hashbangs網站，但我似乎無法得到它很正確。例如，如果我着陸在home page上，然後單擊「CSS」菜單並選擇「摺紙元素」菜單選項，我會在導向到GitHub 404頁面之前簡要查看頁面加載情況。AngularJS，HTML5模式路由不工作

如果我把直接在網址（http://eat-sleep-code.com/css/origami），我得到直接發送到GitHub的404

我缺少什麼，或者這是不可能在GitHub的網頁託管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) {});

來源

2014-11-25 eat-sleep-code

如果您只是請求http：//.../css/origami，服務器不會讀取您的javascript。服務器不知道如何用你的js定義來路由它。這是＃＃（http：//.../#/css/origami）的目的;它打破了網址，所以它加載了JavaScript的初始頁面，然後加載正確的路線。 – kingdamian42 2014-11-25 14:48:41

相關http://stackoverflow.com/questions/19211576/enabling-html-5-mode-in-angularjs-1-2 – kingdamian42 2014-11-25 14:55:20

@zeroflagL建議讓我知道了我的第一個障礙。我有一些特別針對hashbang網址發佈的代碼。我沒有更新該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重寫不是一種選擇的情況下工作。

來源

2014-11-25 21:21:32

的部分chunck的問題是在你的render.min.js腳本。當你點擊一個鏈接時，當前窗口的URL被改變：

window.top.location.href=e

沒有這個工作正常。

來源

2014-11-25 15:07:43 zeroflagL

AngularJS，HTML5模式路由不工作

回答

相關問題