Chapter 8. Adding Angular components to an Express application

 

This chapter covers

  • Getting to know Angular
  • Adding Angular to an existing page
  • Filtering lists of data
  • Using an API for reading data
  • Some Angular jargon: controllers, scope, filters, directives, services

Here it comes. It’s now time to take a look at the final part in the MEAN stack: Angular! We’re going to look at how to include Angular into the Express application, and develop a couple of components to improve our existing Loc8r application. As we go we’ll discuss some of the semantics and key technical terms found in the Angular world. Unlike the other parts of the stack, Angular is opinionated, meaning that things have to be done in a certain way.

Figure 8.1 shows where we are in the overall plan, adding Angular into the front end of the existing Express application.

Figure 8.1. Chapter 8 focuses on adding Angular to the front end of the existing Express application.

The approach taken in this chapter is what you’d do if you wanted to enhance a page, project, or application with a bit of Angular. Building a full application entirely in Angular is coming up in chapters 9 and 10. We’ll use this chapter to get to know Angular a bit too.

8.1. Getting Angular up and running

8.1.1. Uncovering two-way data binding

8.1.2. Setting up for greatness (and JavaScript code)

8.2. Displaying and filtering the homepage list

8.2.1. Adding Angular to an Express application

8.2.2. Moving data delivery from Express to Angular

8.2.3. Using Angular filters to format data

8.2.4. Using Angular directives to create HTML snippets

8.3. Getting data from an API

8.3.1. Using services for data

8.3.2. Making HTTP requests from Angular to an API

8.3.3. Adding HTML geolocation to find places near you

8.4. Ensuring forms work as expected

8.5. Summary

sitemap