Redirect from Hash to HashBang using angular

Question

I have published a website using mvc c# with angular and AJAX calls to create some client side pages. One of my links look like this:

www.website.com/App#/Index

I am trying to setup a hasbang solution to make my site crawlable. I succesfully created the hashbang setup so now a working link will look like this:

www.website.com/App#!/Index

The issue now is that all my links out on Facebook and so on does not contain the bang (!) and therefore those links are dead. How do I redirect from the first link without hashbang to the link with hashbang?

My current routing:

app.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(false).hashPrefix('!');
    $routeProvider
      .when('/Index', {
          templateUrl: '/Apps/Modules/IndexPublicAngular/Index.html', controller: 'IndexPublicController'
      });
}]);

user4890022 user4890022 · Accepted Answer · 2015-09-23T05:46:00

I hit a similar issue that you had where I need to use hashbang instead of just hash. I had to come up with a quick and dirty solution for this:

$rootScope.$watch(function () {
    return window.location.hash;
}, function (value) {
    if (value.indexOf('#!#') == 0) {
      setTimeout(function() {
        window.location.hash = value.replace('#!#','#!');
      })
    }
});

There is probably a better solution out there, but I didn't investigate very deeply since this is only a temporary patch for bookmarked urls etc. Keep in mind since this only fires after angular has already touched the url, '#' is already converted into '#!#' by angular.

Redirect from Hash to HashBang using angular

1 Answers