Basic utilization of Observables with HTTP

In Angular 2, the Http module now by default utilizes the Observable pattern to wrap XMLHttpRequest. For developers that are familiar with the pattern, it readily translates to the asynchronous nature of requests to remote resources. For developers that are newer to the pattern, learning the ins and outs of Http Observables is a good way to wrap your head around this new paradigm.

Note

The code, links, and a live example related to this are available at http://ngcookbook.herokuapp.com/4121.

Getting ready

For the purpose of this example, you'll just serve a static JSON file to the application. However note that this would be no different if you were sending requests to a dynamic API endpoint.

Begin by creating a skeleton component, including all the necessary modules for making HTTP requests:

[app/article.component.ts] 
 
import {Component} from '@angular/core'; 
import {Http} from '@angular/http'; 
         
@Component({ 
...