Angular Features and Important Concepts

Angular has drastic and breakable changes than AngularJS in terms of coding style, speed and performance and mobile support. Angular features like Controllers have been replaced with Components and improved digest cycle along with new feature that make Angular a powerful client side framework.

This post is not to show the basic angular feature or guide through the basic concepts but the concepts that are important to learn and very useful.

 

A Taste from Angular Version 4

https://netbasal.com/a-taste-from-angular-version-4-50be1c4f3550

 

The Ultimate Angular CLI Reference Guide

https://www.sitepoint.com/ultimate-angular-cli-reference/

 

Understanding Angular modules (NgModule) and their scopes

https://medium.com/@cyrilletuzi/understanding-angular-modules-ngmodule-and-their-scopes-81e4ed6f7407

 

How to build and publish an Angular module

https://medium.com/@cyrilletuzi/how-to-build-and-publish-an-angular-module-7ad19c0b4464

 

Injecting components dynamically in Angular

https://medium.com/@tudorgergely/injecting-components-dynamically-in-angular-2-3d36594d49a0

 

Highlight selected row in ngFor – Angular

In this Angular2 tutorial, we will see how to highlight selected row in a table using ngFor & ngClassdirective.

https://ciphertrick.com/2016/10/26/highlight-selected-row-in-ngfor-angular-2/

 

Angular ngFor – Learn all Features including trackBy, why is it not only for Arrays ?

http://blog.angular-university.io/angular-2-ngfor/

 

Http Interceptor : Intercepting HTTP requests and response in Angular

http://array151.com/blog/http-interceptor-angular4/

Http Interceptor : Intercepting HTTP requests and response in Angular4

In the previous post, we have seen how to intercept the http request and response by extending Http class from @angular/http module.
To recall an http interceptor is

Interceptors are components that intercept calls and are used for logging, auditing, security and to implement authentication.

An Http interceptor is a middleware that can hijack http request/call before it reaches to the server and its response before it reaches the actual targeted function.

In Angular2 there was no cleaner way to implement interceptors, But Angular4 has an elegant and cleaner way to do this.  

What are we going to do?

We will create an interceptor class that will intercept the response object to check if the response status is 401 that is Unauthorized then the user will be redirected to the login page.

How?

To Create interceptor we will create a class HttpServiceInterceptor that will implement the HttpInterceptor interface from @angular/common/http module and register the same as providers in app.modules.ts. Following are simple steps to achieve the same

1) Create a class (HttpServiceInterceptor) and implement HttpInterceptor interface

@Injectable()
export class HttpServiceInterceptor implements HttpInterceptor { }

2) Provide definition to intercept method of HttpInterceptor interface

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
}

And the full code

// http-service-interceptor.ts
import { Injectable, Inject } from "@angular/core";
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse, HttpErrorResponse } from "@angular/common/http";
import { DOCUMENT } from "@angular/common";
import { Observable } from "rxjs/Observable";
import "rxjs/add/operator/do";
@Injectable()
export class HttpServiceInterceptor implements HttpInterceptor {
    constructor( @Inject(DOCUMENT) private document: any) { }
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(req).do(
            (event: HttpEvent<any>) => {
                if (event instanceof HttpResponse) {
                    return event;
                }
            },
            (err) => {
                if (err instanceof HttpErrorResponse) {
                    if (err.status === 401) {
                        this.document.location.href =
                        `${this.document.location.protocol}//${this.document.location.hostname}:${this.document.location.port}/login`;
                    }
                }
            });
    }
}

3) Import HttpClientModule and HTTP_INTERCEPTORS from @angular/http/common module

import { HttpClientModule,HTTP_INTERCEPTORS } from "@angular/common/http"; // to make http request
import { HttpServiceInterceptor } from "../interceptors/http-service-interceptor"; // response interceptor

4) Make an entry for HttpClientModule in imports array

imports: [
  HttpClientModule
]

5) Add provider for HTTP_INTERCEPTORS and use the class (HttpServiceInterceptor) that we created for interception

providers: [{
   provide: HTTP_INTERCEPTORS,
   useClass: HttpServiceInterceptor,
   multi: true
}],

6) Then use HttpClient instead of http as your http service

import { HttpClient } from "@angular/common/http";

7) Inject in the constructor

constructor(private http: HttpClient) { }

That’s all folks!! Isn’t it easy? Oh yes..

Http Interceptor : Hijack http request and response in Angular 2

Interceptors are components that intercept calls and are used for logging, auditing, security and to implement authentication.

An Http interceptor is a middleware that can hijack http request/call before it reaches to the server and its response before it reaches the actual targeted function.

One of the most famous usages is to implement authentication. Interceptors are very useful when one wants to append a header in each request or want to manipulate the response before it reaches the actual calling party. It can also be used to show and hide loader on the screen based on http call.

Another use is to return json object as response as we use the .map method in every request’s response to return res.json, so the response can be hijacked or intercepted to do the same for all the requests.

Angular2  has not implemented the concept of interceptor but this can be done by extending the HTTP service. There are few steps that you need to follow to make this working.

1) Extend Http Service to provide your own functionality

// http-interceptor.ts
import { Injectable } from'@angular/core';
import { Http, XHRBackend, ConnectionBackend, RequestOptions, RequestOptionsArgs, Response, Headers, Request } from '@angular/http';
import{ Observable } from'rxjs/Observable';
import 'rxjs/Rx';
@Injectable()
export class HttpInterceptor extends Http {
     constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
         super(backend, defaultOptions);
     }
     /**
     * Error handler to handle is there is any error 
     * @param error 
     * @param caught
     * @returns {ErrorObservable}
     */
     private onCatch(error: any, caught: Observable<any>): Observable<any> {
         if (error.status === 500) {
             return Observable.throw(newError(error.status));
         }
         else if (error.status === 401) {
             return Observable.throw(newError(error.status));
         }
     }
      
      // interceptor method to intercept request and response
     get(url: string, options?: RequestOptionsArgs): Observable<any> {
         // options and url can be updated here to append new headers
          options.headers = {'Authorization' : 'token'};
         return super.get(url, options)
                     .catch(this.onCatch)
                     .map((res: Response) => {
                         // on sucess return res.json
                         return res.json();
                      }, (error: any) => {
                           console.log("On error :(");
                      })
                     .finally(() => {
                         console.log('After the requset has been completed :)');
                     });
     }
}

2) Add this extended service in app.module.ts

providers: [{
    provide: HttpInterceptor,
    useFactory: httpInterceptor,
    deps: [XHRBackend, RequestOptions]
}]

Where httpInterceptor is an exported function that returns the new instance of extended HttpInterceptor class.

// to return an instance of HttpInterceptor class
export function httpInterceptor (backend: XHRBackend, defaultOptions: RequestOptions) {
    return new HttpInterceptor(backend, defaultOptions);
}

Instead of creating this function one can directly use the function in provider section but this creates problem while bundling the project. The following error can be encountered

ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference
to an exported function (position 45:5 in the original .ts file), resolving symbol AppModule in D:/SK/Study/Material/MDCAngular/src/app/app.module.ts

Now to use this extended class inject the implementation of HttpInterceptor class like this where you want to inject http service

constructor (private http: HttpInterceptor) { }

Further Reading

http://array151.com/blog/http-interceptor-angular4/

References

https://medium.com/aviabird/http-interceptor-angular2-way-e57dc2842462

AngularJS Interview Questions
Here are AngularJS interview questions that will help you to crack AngularJS technical interview.

1) What is AngularJS ?

2) Features of AngularJS ?

3) Difference between MVVM and MVC and MVP ?

4) What is single page application ?

5) How angular bootstrap ?

6) How to manual bootstrap angularjs ?

7) AngularJS Initialization & rendering process ?

8) Running order of

      Controller

      Filters

      Service

      Factory

      Config

      Run

9) jqLite vs jQuery ?

10) Types of binding ?

11) Two way data binding ?

12) ng-model directive ?

13) Why ng init is used ?

14) Difference Between expression{{}} and ng-bind ?

15) ng-repeat is used for ?

16) What if duplicate element in ng-rpeat ?

17) How to display unique element in ng-repeat ?

18) How to apply switch case in angular ?

19) Difference between service and factory ?

20) Is service and factory singleton object ?

21) How angular has implement singleton pattern in factory and service ?

22) One scanerio where services can’t be used ?

23)What is the meaning of # in the URL?

24) UI Routing ?

25) Abstract state in UI routing ?

26) ng routing vs ui routing ?

27) Authorizaion in ng-routing ?

28) Difference between scope and $scope ?

29) Benfit of controller As ?

30) Lazy loading of controllers ?

31) How to check current running controller ?

32) Communication between two controllers

33) What are the ajax calls?

34) What is asynchronous means?

35) What are promises ?

36) What are interceptors ?

37) What is dependency injection? How to add dependency in angularjs?

38) What is digest cycle and how you can stop it ?

39) How to check digest cycle is in progress ?

40) What is $destroy ?

41) What is ng-transclude ?

42) How you can all method of controller in directive ?

43) Different types of directives ?

44) Controller vs link in directive ?

45) Pre link vs Post Link vs Compile functions ?

46) What is best way to manipulate DOM and how can we do ?

47) Directive restrict type ?

48) Events in angularjs ?

49) Restrict types in angularjs ?

50) Custom exceptions in angularjs ?

51) Filters in angularjs ?

52) Custom filter in angularjs ?

53) What are decorators ?

54) Providers in angularjs ?

55) Session management in angularjs ?

56) Authentication and Authorization in angualrjs?

57) What is localization? How can we achieve the localization ?

58) What is local Storage?

59) What is session storage?

60) What is the difference between the local Storage and session Storage?

61) How to speed up rendering UI ?

62) Directory structure of angular js app ?

63) Best practices of angualrjs ?

64) How to remove ng-classes and directive information from DOM ?

65) What is angular 2 ?

66) Difference between angularjs 1.x and 2 ?

67) How angular 2 is rendering DOM ?

68) What is grunt? Why we use it?

69) Why we use grunt other than minification?

70) What is gulp?

71) What are the new things in available in html5?

So above are the AngularJS interview questions that were asked during the technical round for different companies. For more detail on AngularJS visit official website.

Further Reading

en_USEnglish
en_USEnglish