Why MEAN.js applications'URL start with #!

Question

I just started my first MEAN application build with MEAN.JS. After discovering how mean.js organise the application, I wonder why URLs start with /#!/.

For example for the login page I would like to have:

http://example.com/login

instead of:

http://example.com/#!/login

So I looked to the Express, and Angular docs and found nothing about it. I also read the full MEAN.JS docs but still found nothing.

On the Angular's modules configuration routes file, URLs are not prefix with #!:

users.client.routes.js:

...
state('login', {
    url: '/login',
    templateUrl: 'modules/users/views/authentication/login.client.view.html'
}).
...

So I end up with two questions:

1. Why the URLs start like this ? Is there a good practice behind this ?
2. If it's not a bad thing, how and where can I change these URLs ?

Answer 1

Angular, like all Single Page App Frameworks, uses the hash # anchor to trick the browser into redirecting client links back to the JavaScript rather than making a server request. The $location service is used to manage this process.

The $location service parses the URL in the browser address bar (based on window.location) and makes the URL available to your application. Changes to the URL in the address bar are reflected into the $location service and changes to $location are reflected into the browser address bar.

Other frameworks use hashbang, or #! to allow you to still use the # for actual page anchors. The angular location service can be customized to enable this feature, and also customized to allow you to not use # at all, if your intended audience is using an HTML 5 compliant browser, and you have configured the additional redirects on your server.

The Mean.js development team chose to enable the hashbang format as their standard. In https://github.com/meanjs/mean/blob/master/public/application.js you will see $locationProvider.hashPrefix('!');

You can also override this with your own customization (e.g. $ for #$ paths), remove this line and revert to the default of # instead of #! for angular, or enable HTML 5 mode.

it is a good idea to read the documentation for the $location service thoroughly, as it talks about page refresh impact, web crawlers, server configuration options, caveats for HTML 5 mode, etc.

Answer 2

Angular uses hashtag in the url for non HTML5 browsers.

This can be solved by:

angular.module('yourapp').config(function($locationProvider) {
    $locationProvider.html5Mode(true); 
}));