CODEWITHSUNDEEP
javascriptangularjsangularjs-routinggithub-pages
eat-sleep-code
eat-sleep-code

Reputation: 4855

AngularJS, HTML5 mode routing not working

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) {});

Upvotes: 2

Views: 1708

Answers (2)

eat-sleep-code
eat-sleep-code

Reputation: 4855

@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.

Upvotes: 3

a better oliver
a better oliver

Reputation: 26828

The problem is in your render.min.js script. When you click on a link then the URL of the current window is changed:

window.top.location.href=e

Without that it works fine.

Upvotes: 1

Related Questions