Angular Stack -Introduction

Angular releases are making a massive amount of concern and breakdown changes on developer world. They have released the latest version as Angular 4. The major breakdown happens on Angular 2 and it completely changes the architecture of Angular. You don't need to know any syntax or concept from Angular 1 to be a fresh Angular 2 developer.

What’s new on Angular 2

Modular Architecture: This gives easy to create a big application in modular basis, this makes easier to divide works to work in parallel. This modularity makes easier to maintenance and scales up the project easier.

Better performance comparing with Angular 1:

1. The change detection is improved and AOT compiler to big deals with the browser. 
2. It made to scale:
   The core is module system
   Dependency injection
3. Supporting to the Typescript and tooling
4. Supports to CLI, Native script and more.
5. A complete solution for production ready

Structure of Angular 2 Application

The structure of the Angular application module is pretty clear. The application contains encapsulated as Root module and it contains for major parts, they are components, pipes, services and directives. We’ll go to see each and every part deeper in later sessions.  Also, Angular root module contains able to import components, they are feature module and built-in modules.

Angular 2 Modules

These are the so-called collection of components, directives, pipes and services. The modules are as known as elements of Angular 2. There are four types of modules in Angular 2, They are:

1. Root module - The application only able to have one and only root module.
2. Built-in-modules - These are modules supports you to access the complete application workflow, Example of built-in modules are BrowserModule, Forms Module and etc.
3. Feature Module - these modules can able to create by you to give a clear explanation of the encapsulation of your project. This is an optional one. You don’t need to have it on your project all time.
4. Third party modules - This is some additional modules getting from the community or corporate to use in your application. Angular Material, UIGrid are some famous third party modules.

Angular 2 application is the collection of modules. Which begins from the root modules. You can able to import other modules to your application and extend the functionalities from there to you.

When we see the generic structure of the module

The structure tells you to need to import the NgModule from the @angular/core and define the objects on @NgModule

As from the above code you don’t need to set all properties. You can properties what you need really.

The usage of these properties are here:

1. imports: This is the property of array module you are importing from other modules like built-in-modules, feature modules, and third party modules.
2. declarations: components, directives, and pipes defined in our modules.
3. providers: services defined in our module
exports: components, directives, pipes available for other modules bootstrap:
4. the root component of the application.

We have seen the generic structure of the module and we know there is a different kind of modules.

Now we look on to the structure of the root module

This is the same as the generic structure we cover earlier. You may notice on your Angular applications, The Root Module is called AppModule in applications. This is the convention used by Angular Team.

Also, the root module doesn't use the property called exports. That mean root module could not able to reuse within the application. Only one root module in an application.

The root module always imports BrowserModule. The way to differentiate with Feature module, the feature module usually import the module called Common Module, not the Browser Module. Why we import Browser Module inside the root module? The reason is you can access easily the ngIf, ngFor like common elements.

Now we are going to cover the Feature Module.

Here in feature module you use import, declarations, providers and exports. Here all the elements are by default private. if you want to make public you put them into the exports. Here I add MyComponent and MyDirective on exports array. That means any of the module can access this.

Services are public by default. Please keep it in mind. Services is a only type element always available everywhere.