angular2 – Tech Notes

One of the major module in angular 2 is router module, it will handle application navigation, authorization and application modularity.
Definition [Angular 2 router by @vsavkin]:
A router state is an arrangement of application components that defines what is visible on the screen.
Router is a tree of components, which will be navigable by user actions and based on URL segments it will move from one route to other route.
Sample routes: it’s an array of routes.

[{path: '', pathMatch: 'full', redirectTo: '/home'},
{ path: 'home', component: GoGreenAgriHome }
{ path: 'farms', component: AgriFarms },
{ path: 'agri-tech', component: AgriTech
children: [
{ path: ':id', component: AgriTechTypes}
]
}
]

A example code you can find at Github.

Finally angular js 2 shipped with the new web components. It’s modular based framework, which contains compiler, core, common, http and etc…
After Adobe Flex SDK, Angular is the first framework to address rapid fast development application needs, with the addition of angular material components it will become one of the best frameworks to build applications with new web standards.
To avoid complexity of setting up environment I made system config, which look for dependencies on UNPKG npm cdn network. So, it will avoid you all the process to setup your environment. Lets enter into application example.

Angular 2 is simple, latest web standards, lightning fast and works everywhere.
Angular with TypeScript will give us good application code maintenance, great editor support.
Angular-cli will help to create and build apps.

Angular2 With TypeScript Hello Word example:

First we need a application root component, in our example we are using AppComponent as root component.
A NgModule to initialize our app.
Finally need to bootstrap our app by mentioning root module.
Need a html wrapper to instantiate html component in the browser. i.e. <app></app>
SystemJS config to find required module loading.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {Component} from '@angular/core';
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//Root Component
@Component({
    selector: 'app',
    template: `&lt;h1&gt;Hello {{ name }}!&lt;/h1&gt;`
})
export class AppComponent {
    name: string;
    constructor() {
        this.name = 'Angular 2';
    }
    //Lifecycle init method
    ngOnInit() {
      console.log('AppComponent initialisation');
    }
}
//Root Module: NgModule to bootstrap your application
@NgModule({
    imports:      [ BrowserModule ], /*Allows your app’s module to use code from another module.*/
    declarations: [ AppComponent ],  /*Declares all components used in the  module.*/
    bootstrap:    [ AppComponent ]   /*Tells Angular 2 to bootstrap the 'Appcomponent' as the root of the application.*/
})
export class AppModule { }
//Bootstrap Angular 2 with the 'AppModule' NgModule.
platformBrowserDynamic().bootstrapModule(AppModule);

HTML wrapper:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Angular seed project&lt;/title&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;script src="https://unpkg.com/typescript@2.0.0/lib/typescript.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/core-js/client/shim.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/zone.js/dist/zone.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/systemjs@0.19.37/dist/system.src.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    var rxjsVer = "5.0.0-beta.12";
    //System Js Config, you may move it into systemjs.config.js
    System.config({
      transpiler: 'typescript',
      typescriptOptions: {emitDecoratorMetadata: true},
      map: {
        'app': './main.ts',
        '@angular': 'https://unpkg.com/@angular',
        'rxjs': 'https://unpkg.com/rxjs@' + rxjsVer
      },
    });
    //Load application root component file
    System.import('app').catch(function(err) {
      console.error(err);//If any eerors while loading root module
    });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;app&gt;Loading...&lt;/app&gt;
&lt;/body&gt;
&lt;/html&gt;

Working Plunker: http://embed.plnkr.co/prB7BO
Angular 2 ES5 Example:
working plunker:
http://embed.plnkr.co/y5tuUIBEBDWO3d254pCf

Category: angular2

Angular 2 – Router – Well usage of Depth first search (DFS)

Angular 2.0 Hello World in 2 min