6 Templates, Location, and Routing

WHAT YOU WILL LEARN IN THIS CHAPTER:            

  • Templating using the ngInclude directive
  • Performance implications of templating
  • Using $location to save page state
  • Routing between different views with ngView
  • Single-page apps with ngView
  • Search engine integration for single-page apps
  • Animating transitions between views

WROX.COM CODE DOWNLOADS FOR THIS CHAPTER

You can find the wrox.com code downloads for this chapter at http://www.wrox.com/go/proangularjs on the Download Code tab.

In this chapter, you learn how to use AngularJS’s templating system, the $location service, and AngularJS’s client-side routing system. Using these building blocks, you create a single-page application (or SPA for short). The SPA paradigm is about building a fully functional web application that never reloads the page. SPAs offer you incredibly fine-grained control over your site’s user experience (UX) by eliminating the ever-painful page reload in favor of loading Hypertext Markup Language (HTML) from the server via JavaScript.

To fully understand how SPAs in AngularJS work, you need to understand how templating, location, and routing work. This chapter is broken into three parts—one for each of these three building blocks. The templating and location sections are mostly independent of each other, so if you want to learn about templating but not the $location service or vice versa, feel free to skip to your desired section. However, the third section, about using ...

Get Professional AngularJS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.