What are Observables

Observables provide a new way of passing data asynchronously between a publisher and a subscriber. Observables can be used to pass multiple values from a publisher to its subscribers over time.

A publisher creates an instance of Observable and defines a subscribe() function. When a subscriber subscribes to the publisher this function will get executed. The function will not get executed till a subscriber subscribers.

Observables are like an array of items which are delivered to the subscribers over a period of time. Angular uses observables internally in its event system and in the Http service. Observables are not built into Angular, instead Angular uses a library RxJs to implement observables.

Promises can also be used to make asynchronous Http calls. The advantage of observables over promises is that promise can deliver only one value, while observables can deliver a list of values over time. Also promises cannot be cancelled once initiated, while observables can be cancelled at any time.

Angular Routing

Routing in Angular is used to load different components based on the route selected by the user. Routing is essential for medium to larger size applications since we cannot load all the components in a single view.

If you have worked on MVC applications you know that there is a route handler which parses the request route and redirect to the corresponding view. Angular Routing is similar the Routing module handles the request route and loads the corresponding component.

The routing services in Angular are present in the package @angular/router, we need to import RouterModule, Routes from this package to implement routing in Angular.

JIT vs AOT compiler in Angular

Angular applications consists of components and service classes written in TypeScript and HTML templates. Browsers cannot understand TypeScript hence they need to be compiled into JavaScript.

Angular provides 2 types of compilers for this compiling process.

1. Just-In-Time (JIT) compiler.
2. Ahead-of-Time (AOT) compiler

Angular AOT Compiler

AOT stands for Ahead of Time. AOT compiler helps pre-compile Angular applications so that they can be rendered faster in the browser.

We know that Angular applications consists of components and service classes written in TypeScript and HTML templates. Browsers cannot understand TypeScript hence they need to be compiled into JavaScript.

Angular provides 2 types of compilers for this compiling process.

Eager loading Module example in Angular 6

Eager loading is the default type of module loading in Angular, this approach is suitable for smaller applications where all the dependent modules are loaded initially when the application is loaded in the browser.

In eager loading we import all the dependent components into the main module and map the components to different routes in the module routing. When a specific route is invoked the corresponding component is loaded in the root component.

This example is similar to the one which we saw in the Routing example. We import 2 components About & Contact in the application module and map them in the modules routing configuration.