In AngularJS, we consumed services to retrieve data asynchronously using promises in $http. In Angular, we have the Http service over $http, and it returns an observable object instead of a promise as it applies a pattern called the analogous pattern. Angular leverages the Observable class adopted from the ReactiveX library. ReactiveX is an API for asynchronous programming with Observables that is done by applying the observer and iterator patterns and functional programming. You can find more information about Reactive programming at http://reactivex.io/.

Observer pattern will notify the dependents if their dependency object is changed. Iterator pattern will facilitate access to a collection without the need to know about the structure of the element in the collection. Combining these patterns in ReactiveX enables the observer to subscribe to an observable collection objection. The observer doesn't need to wait until the observable collection object is available. Instead, the observer will react when it gets the notification of the changes in the observables.

Angular uses the JavaScript implementation called RxJS, which is a set of libraries rather than a specific API. It uses Observables in the HTTP service and event system. A promise always returns one value.

The http.get() method will return Observables, and this can be subscribed by a client to get the data returned from the service. Observables can handle multiple values. So, we can also call multiple http.get() methods and wrap them under the forkJoin method that is exposed by Observables.

We can also control the service call and delay the call using Observable by applying a rule to call the service only if the previous call to the service was 500 milliseconds ago.

Observables are cancelable. So, it is also possible to cancel the previous request by unsubscribing to it and making a new request. We can cancel any previously unserved call anytime.

Let's modify TodoService to use Observable and replace the hardcoded JSON value with the http.get() call to a todos.json file. The updated TodoService is shown here:

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/toPromise';
@Injectable()
export class TodoService {
constructor(private http: Http) {
this.http = http;
}
getTodos() {
  return this.http.get('/app/todos.json')
  .toPromise()
  .then(response => response.json().data)
  .catch(this.handleError);
}
}

Note that we have imported HTTP modules, response from @angular/http, and the Observable module from rsjs/Rx, which is based on ReactiveX. The getTodos method is updated with an http.get() call that queries todos.json and returns a collection of to-do items.

AppComponent and TodoService are bootstrapped in the app.module.ts file, as shown:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { TodoComponent } from './todo.component';
import { TodoService } from './hero.service';
@NgModule({
  imports: [
  BrowserModule,
  HttpModule,
  AppRoutingModule
  ],
  declarations: [
  AppComponent,
  TodoComponent
  ],
  providers: [ TodoService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Import {bootstrap} from '@angular/platform-browser-dynamic'; the template is updated to render the list of todos, as follows:

import {HTTP_PROVIDERS} from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import {AppComponent} from './app.component'; 
import {TodoService} from './TodoService';
bootstrap(AppComponent, [HTTP_PROVIDERS, TodoService]); 

Running the application will render the data subscribed from Observables that is returned by the methods in TodoService: