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 -
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 -
.
