Organizing Navigation

In previous chapters, we've learnt how to fetch data from a back-end, edit those
data using AngularJS-powered forms, and display the data on individual pages by
employing various directives. In this chapter, we will see how to organize separate
screens into a fully functional, easy-to-navigate-through application.

Well-designed and easy-to-remember URLs (Uniform resource locators) play
a vital role in structuring an application for our users. It allows them to move
effectively between different screens, using browser features with which they are
comfortable. AngularJS includes various services and directives that bring URL
support found in Web 1.0 applications to single-page web applications, most
notably the following ones:

• Deep-linking URLs refer to a specific feature within a single-page web
  application. They can then be bookmarked or passed around (for example
  in an e-mail or in an instant message).


• The back and forward buttons in a browser behave as expected, allowing
  users to move between different screens of a single-page web application.


• URLs can have a nice, easy-to-remember format in browsers that support
  HTML5 history API.


• URL support in AngularJS is consistent across browsers, the same application
  code works correctly in browsers with full support for the HTML5 history
  API as well as in older browsers.

AngularJS has sophisticated machinery to handle URLs. In this chapter, we are going
to learn about the following topics:

• The use of URLs in single-page web applications,


• The AngularJS approach to URLs and its abstractions over URLs: the
  $location and $anchorScroll services