AngularJs 2 - template.html 분리 & 변수 치환

이전글에서 app.component.ts의 template라는 필드를 정의 했었다. 이것은 보여지는 html 코드인데 이는 별도의 파일로 분리가 가능하다.

app.component.ts

template라는 필드가 templateUrl이라는 필드로 바뀌었고 내용은 새로만들 app.component.html이라는 파일명이다.

AppComponent라는 클래스 안에 title이란 필드의 값을 html에서 변환할 값으로 정의했다.

이제 app.component.html 파일을 만들어보자.

이전 app.component.ts파일에 template 필드의 내용과 같지만 {{title }}이라는 부분이 보일 것이다.

AngularJs에서는 "{{}}"를 사용하여 치환될 변수를 지정한다. 이제 이 {{title}}이라는 부분은 위에서 정의한 AppComponent의 title이라는 필드값으로 치환되어 표시된다.