SeekU

                 var tmpVar = {};

                angular.copy($scope.query, tmpVar);

                tmpVar.energyGroupId = obj.energyGroupId;

talks-ncc3-demo-master.zip

install typings globally like:-

npm install -g typings

to check if tpyings is installed globally or not

npm list -g

once typings installed write:-

typings install dt~angular --save

it will add some of files in your project to make angular globally.

then install angular like:-

npm install angular --save

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

FormsModule 에 들어있는 기본 제공 디렉티브

AppModule 에 등록필요

바인딩전 반드시 name 특성필요

<input name="txtName" ngModel />

단방향 바인딩

<input name="txtName" [ngModel] = "txtName" />

양방향 바인딩 [()] 표현식 사용

[(ngModel)] = '속성'

<input name="txtName" [ngModel] = "txtName" 

(ngModelChange) = "txtName= $event" />

<input name="txtName" [(ngModel)] = "txtName" />

---------------------------------------------------------

import {FormsModule} from '@angular/forms';

@NgModule({

imports : [FormsModule]

})

property 바인딩 : []

요소 : [src]

컴포넌트 속성: [m_field]

디렉티브 속성 : [ngClass], [ngStyle]

컴포넌트 => DOM

속성의 값을 DOM 의 영역에 출력

컴포넌트의 값을 DOM 에 출력

<img [src] = 'maxim.imageUrl'>

<img [src] = {{maxim?.imageUrl}}>

<img [style.width.px] = 'imageSize' />

<img src = {{maxim.imageUrl}}>

#이름지정

특정 폼 컨트롤에  #별칭 형태로 ID 속성을 지정가능

<input #txtName />

txtName.value 로 값 접근 가능

ex) <select #select (change)="selection(select.value)">

<option>RED</option>

<option>GREEN</option>

</select>

selection(select.value) => selection($event.target.value)

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

@Component({

selector : "idea-manager",

template : requier('/IdeaManagerComponent.html')

})

export class IdeaManagerComponent {

public ideas : any[] = [];

API_URI = "/api/IdeaService";

constructor(private http:Http){

//출력

this.http.get(this.API_URI).subscribe(r=>{

this.ideas = r.json();

});

}

//입력

btnSave(formValue){

var headers = new Headers();

headers.append("Content-Type", "application/json");

this.http.post(

this.API_URI, JOSN.stringify(formValue), {headers:headers})

.subscribe(r => {

this.ideas.push(r.json());

});

}

}

-------------------------------------------------

<form role="form" #form="ngForm">

<div>

<label for="note">아이디어</label>

<div>

<input type="text" id="note" name="note"

[(ngModel)] = "note" />

</div>

</div>

<div>

<div>

<button (click)="btnSave(form.value)">저장</button>

</div>

</div>

</form>

npm install -g angular-cli

ng new myApp

cd myApp

ng serve