Discover the Power of Angular’ s Advanced Features – PART 1

Today we will talk about some advanced angular concepts which comes handy while development apart from components, directives or pipes.

When I have started learning angular every single tutorial only talks about components, directives and pipes. The most advanced concept which I have seen many places was how to share data between components or how to create services.

There are other courses available which talk about the architecture of an application but it was too costly. you should invest your time and money on those courses if you feel it is beneficial for you. but at moment I wasn’t sure about that. So, I learned about these architecture and few extra concepts which comes really handy and beneficial while development.

There is something more which we can achieve from this powerful framework like – 

• How to implement authentication and authorization inside an application?
• How to intercept every HTTP request and add JWT token in headers?  
• How to add loader without loading data inside application?
• How to implement producer/consumer pattern in application using RxJS?
• How to optimize the application?

These are few basic requirements which every developer feels after learning any language, framework or library. 

And angular does provide all these things to 

Let’s start with the topics which we gonna cover here – 

• Route Resolvers
• HTTP Interceptors
• Auth guards in angular
• Basics of subject and behavior subject
•  HMR in angular
• Optimization options in angular

Route Resolvers

Suppose a scenario where you are calling an API and while calling the API you want to show a loader in UI.

Resolvers act as an intermediate code which gets the data before you load your component.

So, the first step to create a resolver is to create a class which implements Resolve from @angular/core.

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { Http } from '@angular/http';
import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ScoreResolver implements Resolve<Observable<string>> {
  constructor(private http: Http){
  }
  
  resolve(): Observable<string> {
    return this.http.get("http://example.com/currentScores");
  }
}

After creating ScoreResolver class we will will define this resolver in our app routing.

Note: code below is a part of app-routing module.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ScoreResolver } from './score.resolver';
import { LiveScoresComponent } from './liveScores/livescores.component';

const routes: Routes = [
  {
    path: 'top',
    component: LiveScoresComponent,
    resolve: { message: ScoreResolver }
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

After adding our resolver to the main routing module. let’s go to the main component where we have see route resolver in action.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { LiveScoresComponent } from './liveScores/livescores.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [LiveScoresComponent]
})
export class AppModule { }

here we can see we have a reference of app-routing module in main app module.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({ ... })
export class LiveScoresComponent implements OnInit {
  data: any;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.data = this.route.snapshot.data;
  }
}

We can see we have injected object of activated route which will provide the data which can be shown right before the component load.

In this case I am showing the time, date, timer and the teams which the app shows score.

right before the component has been loaded I will show this data to the user.

I picked up a basic example to implement this concept. you can use your own scenarios and use this.

More concepts to come in upcoming posts.

STAY TUNED