Let's say Hello to the World... the Angular 2 way...

With the onset of journey towards Angular 2, some quick tit-bits are always helpful, to get you going and making your development life bit easier.

We shall target few upcoming posts to have working components in place and to use these plugins to chip off coding duration. They might not be the complete tutorials for you, but will be quite beneficial in providing some hands on experience.

Your suggestions for corrections and improvements are always welcome.

Let’s start with the basic one, following the old-school tradition, i.e. ‘Hello World’.

What we need to kick off -

1. Eclipse CLI – can be installed as plugin in your favorite eclipse flavor, and can be it can be used for around a fortnight as freely available.

2. Webpack – alternative to the above, since once trial expires we have to switch to the next best player out there. A pointer for this can be -

https://www.npmjs.com/package/angular-webpack-starter-kit

3. NPM – we should better keep ourselves acquainted with the npm magic words like – npm install, npm update, npm start, to run the NG2 apps.

We are here assuming that the basic documentations and key notes about NG2 are already well versed with us, and the minds are having clarity for the why’s and what’s.

We have the basic project structure similar to the below one -

Main action players are -

a. app module for registering – app.module.ts

import { NgModule } from '@angular/core';

@NgModule({

declarations: [

AppComponent

],

imports: [],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

b. component ts – app.component.ts

import { Component, Input, Output } from '@angular/core';

import { Router, Routes } from '@angular/router';

@Component({

selector: 'app-root',

providers: [],

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

constructor() { }

init() {

}

}

c. component html – app.component.html

hello world !

Action behind the scenes is -

1  Index.html has app-root defined.

2. app.component.ts has the above as the selector -

3. there corresponding tenplateurl or template is picked up i.e. html content

Hitting npm start command loads the NG2 app on the npm server and hit localhost:8080 for this example and BOOM -

.