Interesting features of Angular, I learnt

Whatever I learnt in Angular is mostly by reading the contents from https://angular.io/ . It is the best site to start Angular and get the sample code to play with them. You can also explore other articles/blog posts to understand specific concepts better. Here I will be going through some features that I really like and helped me write modular and extendable code to implement new features in my projects.


Interceptor

Using Interceptor, we can have mechanism to modify or add new features/functions in our outgoing HTTP request or incoming HTTP response. It is really useful in cases like:

1. when we want to do something in between http request like authentication.

2. want to wait till the http request is done.

3. want to know total time taken for response

4. manipulate the request body to send to server.

5. want the progress bar for uploading the file.

6. manipulate the request URL(may be changing http to https).

7. response back directly from the cache (store the expensive get request into cache and return it whenever same request is send).

and so on. It dependence upon the requirement. Check HTTPInterceptor documentation for its new features.


Dependency injection and Lazy Loading module

I had used InjectionToken ‘APP_INITIALIZER’ to load some required data(may be from some api or server) to run application. So basically APP_INITIALIZER is run when application is initialized.

You can find more details about Injection token here and here. So basically dependency injection will provide dependencies in runtime rather than compile time (i.e. initiating the service inside the class we will be providing the corresponding dependency object reference).

If we want to boost our performance and already know when to use which module then we can load the module only when needed. In this cases feature module come into picture. We can create separate module for independent components. Learn more about it in this link.


Observables

If you want to handle asynchronous operations in Angular, you must have good knowledge about Observables. Angular use it in different modules and classes like HTTP module, Form Module, Router module, EventEmitter class.

Main intention of Observables interface is to let all subscribers know about the latest value of the variable. Promise have some of the features of the observables, but it is worth to know when to use promise and observable.We can compare both with respect to features .


DOM element Manipulations

Change detection in Angular using changedetectorRef, changeDetection option in component, Asynchronous updates using behaviourSubjects

Sometime I get some confusion on what is Components , what is directives, what is decorators? Then I remind this line :

‘ Write a component when you want to create a reusable set of DOM elements of UI with custom behaviour. Write a directive when you want to write reusable behaviour to supplement existing DOM elements.’

For decorator you can refer this link and this.

Most of the time we deal with child component, so having knowledge of ViewChild, ViewChildren, ContentChild, ContentChildren is must, when you want to add/edit contents in child component dynamically.

It is also important to know about lifecycle hooks of the component to manipulate DOM elements of the component. It is very helpful in cases like, default operations when component is initialized, want to detect variable value changes, want to have default operations before leaving the component, and so on.

Deploy Angular Application

ng build command generates the static files for the application in dist folder of the project folder. So now our task is to serve this file into some server (it can be node server, python server, ngnix server, ..)

If we are working in node server in the backend side, you can follow this article. In short we should have these lines in server.js

var app = express();
// Point static path to dist
app.use(express.static(path.join(__dirname, '../angular-app/folder/path/dist')));

And it will server the site in localhost:port/ .