Project Introduction

Let's get an introduction to Angular and how it can be used with Rx to build an interesting "Photo Gallery" application.

Before starting this, let’s answer some questions:

  • Why do I want to read this?

    • Adding in a full-featured framework changes how things work, mostly for the better. You want your Observable knowledge to be flexible.
  • What will I learn?

    • How to use Angular’s Http tooling.
  • What will I be able to do that I couldn’t do before?

    • Take advantage of the power Rx/Http gives you.
  • Where are we going next, and how does this fit in?

    • Next up, we’ll be learning more Angular/Rx tooling.

While the chat example in Multiplexing Observables was a good chance to stretch your Rx muscles, the lack of a coherent framing to structure the application was already showing.

A list of functions sufficed for a barebones chat, but this would quickly become unwieldy as more pages and functionality were added.

In fact, no serious web application should be built purely with observables. Observables work best as glue connecting your application together, and no one wants to live in a house made entirely of glue.

About Angular

In the next few chapters, you’ll learn how to work with Angular, a modern framework that has RxJS integrated into its core. While these chapters focus on using Angular, the techniques covered are useful regardless of the supporting framework you choose.

The photo gallery project

The project for this chapter covers scaffolding an Angular app, using the Rx-based HttpClient to communicate with a backend, routing through a single page app, and listening in to routing events to collect analytics data.

You’ll build out a Pinterest-like application. The user will search through images, collect the ones they like, and tag them for easier searching later. For an example of what it’ll look like, when you’re finished, see the following screenshot.

Get hands-on with 1400+ tech skills courses.