Angular Fundamentals: Communicating with the Server Using HTTP, Observables, and Rx
Welcome back to this review of the Pluralsight course Angular Fundamentals by Jim Cooper and Joe Eames. Excluding the 2 minute course overview, there are 16 modules in this course and we have reached the 13th module: Communicating with the Server using HTTP, Observables and Rx
The previous modules are:
- Getting Started With Angular
- Creating and Communicating Between Angular Components
- Exploring the Angular Syntax
- Creating Reusable Angular Services
- Routing and Navigating Pages
- Collecting Data with Angular Forms and Validation
- Communicating Between Components
- Reusing Components with Content Projection
- Displaying Data With Pipes
- Understanding Angular’s Dependency Injection
- Creating Directives and Advanced Components in Angular
The Angular Fundamentals course is an intermediate level course and is the 5th course on the Angular Learning Path.
The source code accompanying this course is found on GitHub here.
Introduction
Joe introduces the module by briefly discussing the history of doing asynchronous communication with the server.
In ye olde days we did everything with callbacks, like this:
Server.request(requestData, function(responseData) {
// asynchronously handle data
});//this will be called before the callback
doSomethingElse();
This was fine for very simple apps, but for more complex apps we suffered nested callback hell!
Then with ES2015 (or ES6 if you prefer) we got Promises.
var promise = http.get(url, data);
promise.then(function(responseData) {
// handle response
});//this will be execute before the then function
doSomethingElse();
return promise;
With RxJs, we can use observables
var obs= http.get(url, data);
obs.subscribe(function(responseData) {
// handle response
});doSomethingElse();
return obs;
He explains the main differences between promises and observables. In the above examples you can see they are similar syntactically (with observables using subscribe instead of then), but the feature set is significantly different.
Promises represent a single value which will be returned in the future.
Observables represent 0 or more values, returned either immediately or in the future. They can either be synchronous or asynchronous, and can be closed independently of returning a value. The have improved error handling over promises.
There are also several other advantages that Joe explains. Some of the advanced operations that are supported by observables in RxJS are:
However, a promise handles HTTP communication well enough for most purposes, because we usually only get one response to a server request. Observables are of the highest value when we are using sockets and are retrieving a stream of data from the server.
Angular uses observables, but RxJS has the toPromise() method for converting them to a promise. We’ll only be using observables in this module but Joe warns us not to write off promises altogether.
Try the turning an observable into a promise exercise.
Preparing to Store Data on the Server
We install the custom API server ngf-server for the purposes of demonstrating communication with the server without having to write a lot of server-side code.
After setting up the package.json file we add a proxy.conf.json file which points API calls to localhost:8808 where our ngf-server is running.
Regardless of your HTTP server, in order to do HTTP communication in Angular you’ll need to import the HttpClientModule into app.module.ts
Moving Data Storage to the Server
Up to now, our EventService had been supplying data from a local, hard-coded array
We start by injecting HttpClient into our EventService constructor.
constructor(private http: HttpClient) {}We are already importing IEvent from our event model, and next we implement getEvents, returning
this.http.get<IEvent[]>(‘api/events’)Joe also creates a method for handling any errors. This example uses the RxJS of operator. It just logs the error to the console.
We call this new handleError method like so:
this.http.get<IEvent[]>(‘api/events’)
.pipe(catchError(handleError<IEvent[]>(‘getEvents’,[])))We also learn that with HTTP observables, no HTTP request gets made until someone subscribes to that observable. Joe describes this as a common gotcha!
Making an HTTP Get request practice exercise — Your task is to output the Star Wars film titles that are returned by https://swapi.co/api/films/
Massaging requested data with map practice exercise — Map the stream, so that each key press is turned into its upper case version.
Listening to Resolved Data Changes
In the last clip we implemented getEvents. Implementing getEvent is similar but instead of an array of IEvent it returns just a single IEvent.
The url also includes the id of the event that we want.
In a previous module we created an event route activation guard. This no longer works because we are using an observable now (instead of the actual event object).
Joe deletes the EventRouteActivator service and creates event-resolver.service.ts. This is quite fiddly because several different files need updates before this all works as we want.
Using POST and PUT
Now we re-implement the saveEvent method as
this.http.post(‘/api/events’, event, options)Joe explains that we don’t need to re-implement the updateEvent method, but we see that the signature of http.put is identical to http.post.
Using QueryString Parameters
In our Event service we have a searchSessions method and we re-implement this with a call to the server in this clip.
We use a query string parameter for our search term.
Using DELETE
In this clip we update our voter service, importing HttpClient, injecting it into our constructor, and adding http.post in the addVoters method.
This walkthrough of the addVoters method takes up most of the clip, and the changes to deleteVoters method begin 4 and a half minutes in.
Integrating Authentication with the Server
9m 23s
Persisting Authentication Status Across Page Refreshes
5m 21s
Saving User Data to the Server
2m 59s
Implementing Logout
4m 31s
