>

Home.html

>SinceAngular2doesnthavemoduleloaderweareusingSystem.js

whichissimilartotherequirejsformoduleloading.

wedefinetheconfiguration..here

baseUrl
:
"/node_module"
,

paths
:{

'*'
:
'node_modules/*'
,

'app/*'
:
'./src/*'

},

"defaultJSExtensions"
:
true
})
System
.
import
(
"app/BootStrap"
)

>

Bootstap.jsiscalled..whichisloadingAPP.js

Bootstrapping:

GettingreferenceofAppinhtmlpageandsettingthereferences

App.ts

useDefault:trueforthedefaultroute

Insidetheselector
Allthedirecticesarementioned

Allthedirectivesusedinthetemplatearedefinedhereinthedirectives.

>

App.html

<routeroutlet>isequivalenttothengview


nameoftherouteshouldbementioendinthe

[routerLink]isequivalenttotherouterhref

Userscomponent

mport
{
Component
,
View
}
from
'angular2/core'

import
{hyphenSeparatorPipe}
from
'app/pipes/hyphenSeparator'

@
Component
({

selector
:
"users"
})
@
View
({

template
:
"<ul><li*ngFor='#userofUsers'>{{user|hyphenSeparator}}</li></ul>"
,

pipes
:[hyphenSeparatorPipe]
})
exportclass
Users{

Users
:Array<
string
>

constructor
(){

this
.
Users
=[
"Nag"
,
"Raj"
,
"CNU"
]
}
}

ABoveexamplewherewearecreatingcomponentandthentheclass
Soeachofthe

>

MaketheserviceasInjectable..sothatitcanbeinjectedinsteadofthe

>
this.httpreturnsapromiseischangedasobservable

ExampleofDatabiniding

Catalog.ts

roundedbracketsforevents
(keyup)

squarebrancketsforproperitiesdatabinding
[value]

ExampleofPipes

nameofthePipe
classnameisusedforimportingpurposes..hwowver

Pipewillhavethetransformmethodwhichtranformthevalue.

Pipesforthetransformation

>

System.Confif