Chapter 6By doing these configuration changes, we gain manual control over when
scrolling takes place. We can trigger scrolling by invoking the service's function
($anchorScroll()) at any chosen point of time.
Configuring the HTML5 mode for URLs
By default AngularJS is configured to use hashbang mode for URLs. To enjoy
nice-looking URLs in HTML5 mode, we need to change the default AngularJS
configuration, as well as set up our server to support bookmarkable URLs.
Client side
Changing to HTML5 URL mode in AngularJS is trivial. It boils down to calling
the html5Mode() method on $locationProvider with an appropriate argument
as follows:
angular.module('location', [])
.config(function ($locationProvider) {
$locationProvider.html5Mode(true);
})Server side
For HTML5 mode to work correctly in all cases, we need a little help from the
server that is responsible for serving the AngularJS application files to the browser.
In a nutshell, we need to set up redirections on the web server, so that requests
to any deep-linking application URL will be responded with the single-page web
application's starting page (the one that contains the ng-app directive).
To understand why such redirections are needed, let's examine a situation where
a user uses a bookmarked URL (in HTML5 mode) pointing to a product backlog of
a specific project. Such a URL could look as follows:
http://host.com/projects/50547faee4b023b611d2dbe9/productbacklog
To the browser, such a URL looks like any other normal URL and the browser will
issue a request to the server. Obviously such a URL only makes sense in the context
of the single-page web application, at the client side. The /projects/50547faee4
b023b611d2dbe9/productbacklog resource doesn't exist physically on the server
and can't be generated by the server dynamically. The only thing that a server can
do with such URLs is to redirect them to the starting point of the application. This
will result in the AngularJS application being loaded into the browser. When the
application starts, the $location service will pick up the URL (still present in the
browser's address bar), and this is where the client-side processing can take over.