Angular REST API example with observables

An Angular 4 application showing how to use a REST(Restful) API with observables.
Includes Angular v5.0.0-beta.0 (v4.3.2) with new HttpClient.

Framework, Layout and data

• Framework: Angular 4 - Angular is a framework for building client applications in HTML and TypeScript that compiles to JavaScript.
• Layout: Material - Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.
• Data: JSON Placeholder - Fake Online REST API for Testing and Prototyping.

REST API

A REST API is a web service implemented using HTTP and the principles of REST. It is a collection of resources, with four defined aspects:

• The base URI for the web service, such as example.com/resources/
• The Internet media type of the data supported by the web service. This is often JSON, XML or YAML but can be any other valid Internet media type.
• The set of operations supported by the web service using HTTP methods (e.g., POST, GET, PUT, PATCH or DELETE).
• The API must be hypertext driven.

RxJS Observables

The Reactive Extensions for JavaScript (RxJS) is a set of libraries for composing asynchronous and event-based programs using observable sequences and fluent query operators that many of you already know by Array in JavaScript. Using RxJS, developers represent asynchronous data streams with Observables, query asynchronous data streams using many operators, and parameterize the concurrency in the asynchronous data streams using Schedulers. Simply put, RxJS = Observables + Operators + Schedulers.

Whether you are authoring a web-based application in JavaScript or a server-side application in Node.js, you have to deal with asynchronous and event-based programming. Although some patterns are emerging such as the Promise pattern, handling exceptions, cancellation, and synchronization is difficult and error-prone.

RxJS usage

• Observable
• Observable/throw
• Operator/catch
• Operator/map (Not anymore with HttpClient v4.3.2)

Due the RxJS library size, it is necessary to import only the operators you need. Otherwise the launch time of your application will be longer.