I am trying to rid my site of Hashbangs but I can't seem to get it quite right. For example, if I land on my home page and then click on the "CSS" menu and select the "Origami Element" menu option, I briefly see the page load before I am directed to a GitHub 404 page.
If I put the url (http://eat-sleep-code.com/css/origami) in directly, I get sent directly to the GitHub 404.
What am I missing, or is this not possible on a GitHub Pages-hosted AngularJS site?
Below is a partial chunck of my 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) {});
@zeroflagL suggestion got me over my first hurdle. I had some code that was specifically firing on hashbang URLs. I had failed to update that IF condition.
Now, clicking on all the links worked fine but entering a URL directly resulted in a 404 error. Had I been running this site on IIS or Apache I could have rectified the solution by implementing a URL rewrite (and this would be the ideal way to deal with this).
But alas, I am running this on GitHub pages. They currently (as of 11/25/2014) do not support setting up your own URL rewrite configuration.
They do however, let you setup a custom 404 page. I setup a simple 404.html page in the root of my GitHub pages site. This 404 page, inserts the hash AngularJS needs behind the scenes into the URL and then calls a redirect to it. As we are using a window.location.replace, the 404.html page doesn't show up in the browser history.
<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>
In the event the page doesn't really exist... ie: http://eat-sleep-code.com/somecrazyurl Angular routing takes over and loads my 404 view. Perhaps not the most elegant solution but it appears to have worked in a situation where URL rewriting is not an option.