Chapter
6
Using HTTP in Angular
While the chat example in Chapter 5, 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 a glue connecting your application together, and no one wants to live in a house made entirely of glue.
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 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 screenshot.
Using the Code Provided for this Section | |
|---|---|
|
All of the code for this section resides in the ng2 folder of the code you downloaded from The Pragmatic Bookshelf site. For most projects in this section, you’ll build things from scratch (the exception is the performance demo in Chapter 8, Advanced Angular). The complete apps are in the folder if you get stuck. Don’t forget to run npm install in each project, if you want to run it live. |
This is the first chapter about Angular, so you’ll be introduced to a few concepts from that world. While this book covers many Angular concepts, it’s not a comprehensive introduction. Some Angular experience is helpful, but not required to understand this section. First, let’s learn about generating new projects with the Angular CLI.
Confusingly, two different frameworks are named Angular. In short, Angular 1 (now known as AngularJS) was first released in October of 2010. There have been many releases since then. Google then took the lessons of AngularJS and wrote a new framework, named Angular (note the lack of “JS” at the end), starting with major version 2. Colloquially, this became known as Angular 2. However, Google’s engineers wanted to maintain Semantic Versioning with this new framework, which requires that the major version be incremented for each breaking change. In the case of this section of the book, we’ll use Angular, specifically version 6.0.3.
Alas, this is confusing, but as AngularJS’ popularity wanes, things will become clearer, and we can all take advantage of the security in knowing that non-major releases won’t break our apps.