Organizing Navigation
- Organizing navigation in a client-side web application using the $route
service (with its provider – $routeProvider) and the ngView directive - Common patterns, tips, and tricks when using URLs in a single-page,
AngularJS-powered web application
URLs in single-page web applications
Navigation between pages was straightforward in the early days of the web. One
could type a URL in the browser's address bar to retrieve a precisely identified
resource. After all, a URL is used to point to a single, physical resource (a file) on
a server. When a page was loaded, we could follow hyperlinks to jump between
resources as well as use the browser's back and forward buttons to move between
visited items.
The rise of dynamically rendered pages broke this simple navigation paradigm. All
of a sudden, the same URL could result in different pages being sent to a browser,
depending on the application's internal state. The back and forward buttons were
the first victims of the highly interactive web. Their usage became unpredictable, and
many websites are still going as far as discouraging the use of the back and forward
navigation buttons (encouraging users to rely on internal navigation links).
Single-page web applications didn't improve the situation, far from it! In modern,
AJAX-heavy applications, it is not uncommon to see only a single URL in the browser's
address bar (the one that was used to initially load the application). Subsequent HTTP
interactions happen through the XHR object, without affecting the browser's address
bar. In this setup, the back and forward buttons are completely useless, since pressing
them would take us to completely different websites, instead of a place within the
current application. Bookmarking or copying and pasting a link from the browser's
address bar is not much use either. A bookmarked link will always point to the starting
page of an application.
But the browser's back and forward buttons and ability to bookmark URLs
are very useful. Users don't want to give them up while working with single-
page web applications! Fortunately, AngularJS is well-equipped to help us handle
URLs with the same efficiency as in the good, olden days of the static resources web!
Hashbang URLs in the pre-HTML5 era
It turns out that there is a trick that can bring back decent support for URLs in
AJAX-heavy web applications.