Json 바인딩

=========== html

<div *nfIf="articles">

<ul>

<li *nfFor="let article of articles">

<a href="#">{{article.title}}</a></li>

</ul>

</div>

=========== ts

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

import {Http} from '@angular/http';

interface IArticles{

id : number;

title : string;

}

@Component({

selector:'webcamp'

template : requier('./exam.component.html')

})

export class WebCampComponent{

private API: string = "http://localhost:8080/testService";

public title:string = "TEST";

/*

public articles: any[] = [

{"id":1, title:"test"}

{"id":2, title:"test"}

]

*/

public articles: IArticles[];

constructor(private _http:HTTP){

_http.get(this.API).subscribe(result => {

this.articles = result.json();

});

}

}

=========== ngModule.ts

import {FormsModule} from "@angular/forms"

import {WebCampComponent} from './components/webcamp/webcamp.component'

@NgModule({

declarations :[

WebCampComponent,

],

imports :[

FormsModule,

RouterModule.forRoot([

path : 'webcamp', component:WebCampComponent},

])

]

})

=========== LeftMenu.html

<li [routerLinkActive]="['link-active']"

<a [routeLinnk] = "['/webcamp']">WebCamp</a>

</li>