$location hash prefix

Question

I'm just starting out with Angular, so this might be a common newbie mistake but I am trying to achieve the following url format:

http://myapp.localhost/index.html#!/about

Which I believe should be the default for Angular?

This is my configuration:

angular.module('App', []).config(function($routeProvider, $locationProvider, VIEWS_ROOT) {
    $locationProvider.html5Mode(false);
    $locationProvider.hashPrefix = '!';

    // Routing
    $routeProvider.when('/', {templateUrl: './welcome.html', controller: 'WelcomeController'});
   $routeProvider.when('/about', {templateUrl: './about.html', controller: 'AboutController'});
})
.run(function($rootScope) {
    //...
});

In my html I have a simple anchor like so:

<a href="#!/about">About</a>

However when I click that anchor, the resulting URL constructed is:

http://myapp.localhost/index.html#/!/about

Which obviously fails to match any of my routes... a bit stumped on what's actually happening here, or what I'm doing wrong. I'm running off my local Apache instance under a vhost. There's nothing going on with mod_rewrite - so it looks like Angular is doing this.

Answer 1

It's a method to set the hashPrefix, not a property. $locationProvider.hashPrefix('!');