AngularJS hashbang mode duplicating URL path

Question

I'm working on a AngularJS app with a Laravel 4 backend. I've recently had to switch to hashbang mode from html5 in the $locationProvider service in order to support IE. The application works, but the URL paths are duplicating after the hashbang in all browsers.

Ex. - http://domain.com/resources/resource is displaying as http://domain.com/resources/resource#!/resources/resource

I've listed my main module below. Any assistance will be greatly appreciated.

angular.module('agent', ['agent.controllers', 'agent.directives', 'ngRoute']).
    config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        //   

        $locationProvider.hashPrefix('!');

        $routeProvider
            .when('/resources/resource', {
                template: templatePath,
                controller:  'ResourcessController'
            })
            .otherwise({redirectTo: '/resources/resource'});
    }]);

drew_w drew_w · Accepted Answer · 2013-12-04T16:02:07

I have seen this issue a number of times. The only thing I have found as a work around is to forward to the angular page directly. Take the following as an example:

http://example.com/product/1234#/1234

If this came from another page, you could instead link directly to the hash link:

http://example.com/product#/1234

Now the URL doesn't repeat and routine still works as expected. Basically the point here is to route based on whether this is a server/controller page versus a client/angular page. I'm not sure that this really is the best answer since I am still learning angular. Hopefully others have excellent suggestions as well!

AngularJS hashbang mode duplicating URL path

1 Answers