Chapter 6The missing bits in the handcrafted navigation
The ad-hoc solution presented here is not very robust, and should not be used as
it is in real-life applications. Although incomplete, it illustrates several interesting
features of the $location service.
To start with, the $location service API provides an excellent wrapper around
various raw APIs exposed by browsers. Not only is this API consistent across
browsers, but it also deals with different URL modes (hashbang and HTML5 history).
Secondly, we can really appreciate the facilities offered by AngularJS and its services.
Anyone who had tried to write a similar navigation system in vanilla JavaScript would
quickly see how much is offered by the framework. Still, there are numerous bits that
could be improved! But instead of continuing with this custom development, based
on the $location service, we will discuss the built-in AngularJS solution to these
navigation-related issues: the $route service.
Using built-in AngularJS routing services
The AngularJS framework has a built-in $route service that can be configured to
handle route transitions in single-page web applications. It covers all the features
that we were trying to handcraft using the $location service and additionally offers
other very useful facilities. We are going to get familiar with those step-by-step.
Starting from Version 1.2, AngularJS will have its routing system
delivered in a separate file (angular-route.js) with its own module
(ngRoute). When working with the latest version of AngularJS, you
will need to remember to include the angular-route.js file and
declare a dependency on the ngRoute module.Basic routes definition
Before diving into more advanced usage scenarios, let's abandon our naïve
implementation by converting our route definitions to the syntax used by the
$route service.