2-2 영웅편집기 만들기

영웅편집기 만들기

폴더구조는 위와 같이 진행할 예정이다.

 

먼저 프로젝트를 생성하고, 서버를 구동한다.

ng new angular-tour-of-heroes cd angular-tour-of-heroes ng serve -open

 

@Component, select 메타데이타, template 메타데이타, {{}}(표현식)

app/app.component.ts

import { Component } from '@angular/core';   @Component({   selector: 'app-root',   template: `     <h1>{{title}}</h1>     <h2>{{hero.name}}</h2>     <div><label>id: </label>{{hero.id}}</div>     <div>       <label>이름: </label>       <input [(ngModel)]="hero.name" placeholder="이름">     </div>   `,   styleUrls: ['./app.component.css'] }) export class AppComponent {   title = '영웅 여행';   hero:Hero = {     id: 1,     name: '이순신'   } }   export class Hero{   id: number;   name: string; }

 

모듈 전체내역은 위와 같다.

영웅 인터페이스를 생성하여 오브젝트를 관리하려고 한다.

영웅인터페이스에는 id와 name속성을 부여하였다.

 

앵귤러컴포넌트 데코레이터내에 selector는 컴포넌트의 directive를 지정하는 것으로 여기에서 my-app으로 하였다.

Template은 표시할 html템플릿을 기재한다. 여기에서 한 줄html을 사용할 때에는 작은따옴표(‘)를 이용하고, 여러줄을 사용할 때에는 그래이브문자(`)를 이용한다.

템플릿 내에 중괄호2개({{ }})를 사용한 expression(표현식)을 사용하여 데이터를 html과 연결한다.

 

[(ngModel)]은 Two-way 바인딩으로 텍스트박스에 hero.name속성을 바인딩하는 앵귤러 구문이다.

[(ngModel)]을 사용하기 위해서는 모듈에 FormsModule을 임포트해야 한다.

export는 타모듈에서의 사용을 허용하기 위함이다.

 

FomrsModule임포트

app/app.module.ts

import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { NgModule } from '@angular/core';   import { AppComponent } from './app.component';   @NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     FormsModule   ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { }

 

결과가 화면에 나타난다.