Angularjs 2

Angularjs 2

It is very powerful and latest advanced language makes easy development;it gives full control on business logic which is related to specific HTML page. It provides predefined directives and makes developers job easy. It is simply like Java. This language is very easy for java developers to learn.
It is streamlined front end development and editor support to show compilation errors.

It provides library modules. These starts with @angular prefix and these should be installed using npm package manager Ex: npm install --save react

Each and every angularjs 2 application have a bootstrap root component it hosts all the application views and this should be specify with @NgModule under meta-data.

Sample bootstrap root component:
import { NgModule }      from '@angular/core';
...other imports...
@NgModule({
  imports:        [ imported components with comma separated ],
  providers:     [ providers with comma separated ],
  declarations: [ ------------------------------ ],
  exports:         [ ------------------------------ ],
  bootstrap:      [ ------------------------------ ]
})
export class AppModule { }

Angulajs 2 uses type script so files will be saved with .ts extension. File contains might three sections
such as 1) imports - we will import pre defined angularjs directives and user defined components  etc, 2) meta-data - this information is about class 3) class - it contains member variables, constructor, life cycle methods and user defined  methods.

This is component based language and it separates clearly HTML code and model code.

Component:

Component through which we can access html elements. Implement html elements events methods in component. Component is similar to class only but it has life cycle methods and constructor. Angularjs2 provides predefined directives and we can import them on demand to use.

Component controls the view and provides functional support for events of view. Need to define for functionality for each and every event of the view in component.

Client side business logic can be implemented  as service which we can use wherever we want.

Member variables of the component can be mapped to html controls.

The class must be annotated with @Component in the meta data section then only AngularJs treats as component otherwise it is a simple class

Sample component syntax:

import { Component, OnInit, ngAfterViewInit,ngOnDestroy } from '@angular/core';


import { HelloService } from './hello.service';

@Component({
  selector: 'hello-world-app',
  templateUrl: 'hell-world-app.html',
  styleUrls: ['hell-world-app.css'],
  providers: [HelloService]
})

export class HelloWorldAppComponent implements OnInit {
  var title:string = 'Hello World';

  constructor(private _helloService: HelloService) { }

  userdefeined methods  to handle html events

  ngOnInit() {// Initializes the component
     ---------------
     ---------------
     ---------------
  }
  ngAfterViewInit() { //this method will be called after rendering component and its child components
--------------
--------------
--------------
  }
  ngOnDestroy() {// this method will be called before destroying component
--------------
--------------
--------------
  }
}

component have name, member variables which are available to all component methods and can be linked to html elements, and member methods which can be linked to html element events.

Angulajs-2 files need to save with .ts as it uses typescript.

 selector: 'hello-world-app'
        hello-world-app will be used to include this component in other html pages.

class HelloWorldAppComponent
       HelloWorldAppComponent it will be used to include this component in other components.

 template : It allows to write html code in the component between backticks. This is not good pactice.
templateUrl : it will be used to specify html file

providers: we have to specify here with comma separated if component required any other services.

export: if you want import this component in other components then then it must be defined with export key word.

Development story starts using npm install, npm start commands and visualstudio editor

Life cycle hooks:


ngOnInit:
------------
It will executed only once in the component creation to do initialize; It will be executed after constructor and after first ngOnChanges execution.

ngOnChanges :
--------------------

This method will be execute whenever input data properties resets and this method will be called before ngOnInit. Previous and current values are available for this method.

ngAfterViewInit:
----------------------
In Parent component - This method will be called after rendering child components and parent component.

In Child component -
      Case 1: This method will be called after rendering child component
      Case 2: Special case suppose in your application back and forward buttons implemented and     while navigating between components and changed input then it renders child components again
  so then also it will be executed (We used this functionality in child components only).

Routes in angularjs2:
----------------------------

We have to put base anchor tag in index.html, need to pass as array ROUTER_PROVIDERS to bootstrap in boot.ts, need to define router links and router outlet in app component, need import ROUTER_DIRECTIVES and RouterConfig in app component, need to define RouterConfig which is decorator with all the routes.

step 1: <base href="/">       in index.html

step 2: bootstrap(AppComponent, [ROUTER_PROVIDERS]     in boot.ts

step 3: In app component html under header need to specify router links
            <nav>
                <a [routerLink='routerLink1']> Click Link1</a>
                <a [routerLink='routerLink2']> Click Link2</a>
            </nav>

step 4: In app component html need to specify router outlet
            <div>
               <router-outlet></router-outlet>
           </div>
step 5: Need to mention ROUTER_DIRECTIVES in directives section.

step 6: Need to define RouteConfig decorator in app component
         
           @RootConfig([

                     {path:"link1", name:"routerLink1", component:"UserDefinedComponent1", useAsDefault:"true" },

                    {path:"link2", name:"routerLink2", component:"UserDefinedComponent2", }

             ])

Site for complete documentation: https://angular.io