killerchip

export interface IAction {
    type: number;
    payload: any;
}

killerchip

Nested Routes

The following describes how to create and use nested routes in Angular.

Example:

We have an e-shop with two main areas, the Home area and the Special Offers area. In special offers page we have two sub-pages: Today's Offers and Last Pieces offers.

Define which root routes will have child routes

killerchip

Route Guards

Route guards are services that implement logic to allow or not fulfilling a route.

generate a guard

You can generate a guard with angular-cli:

> ng generate guard Auth

killerchip

Grabbing URL parameters

When 'routing' with Angular you can also have the traditional URL parameters like ?category=toys?maxprice=23.

ActivatedRoute can return those as observables.

...
import { ActivatedRoute } from '@angular/router';

killerchip

Route parameters

Defining and reading route parameters

Define the parameter in routes

app.component.ts:

const routes: Routes = [
  {path: 'products/:id', component: ProductsComponent }
];

killerchip

Switching to Hash-based routing

By default Angular is using HTML5 routing (like https://shop.example.com/products/ab34e). If you wish you can switch easliy switch to Hash based routing (https://shop.example.com/#/products/ab34e).

in app.module.ts

import { LocationStrategy, HashLocationStrategy } from '@angular/common';

@NgModule ({

killerchip

Angular Basic Routing

The following is an example on how to setup basic routing

import RouterModule and Routes

app.module.ts:

import { RouterModule, Routes } from '@angular/router';

killerchip

Launch a series of requests one after the other

In this example we launch a series of requests from information derived from an array. The requests are launched one after the other. This means a "next" request is launched only when the "previous" has been resolved.

The trick here is done by concatMap operator which does exactly what we want. So we create an Observable based on an array of initial values. Then concatMap will render them into a single stream the way we described above.

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/from';
import { concatMap } from 'rxjs/operators';

killerchip

Gather up info from APIs

In this example we gather up information from two different API endpoints, combine them and present them as one object to the subscriber.

Explanation:

• We create an observable that queries the 1st endpoint.
• With mergeMap operator we trigger query for the 2nd endpoint. The 2nd query depends on the results of the 1st query.
• Finally we combineLatest the two observables into one that emits the combination of the two.

killerchip

Monitor until condition

In this scenario we want to repeatedly monitor an API endpoint, until it retuns a specific value (or condition).

Explanation:

• We use interval operator to create an observable that emits a dummy event (a counter) on specific intervals.
• We use these dummy events to trigger calls to remove API, and merge the result back to the stream, with mergeMap.
• Finally with takeWhile we check if the condition we want is met. If the conidition is met then
  • the particular event is not emitted
  • the transmition stops