Angular QuickStart - 0. QuickStart

Angular 기본 훑어보기

 Angular 어플리케이션은 컴포넌트들로 이루어진다. 각 컴포넌트는 HTML 템플릿과 화면의 일부를 제어하는 컴포넌트 클래스로 구성된다. 간단한 문자열을 출력하는 컴포넌트는 아래와 같다.

- app/app.component.ts

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

@Component({
  selector: 'my-app',
  template: `
Hello {{name}}
`
})
export class AppComponent { name = 'Angular'; }

아무 것도 설치하지 않은 상태에서 Plunker를 사용해서 QuickStart 예제를 실행해 볼 수 있다. 로컬 환경에서는 실제 Angular 어플리케이션을 실행하려면 QuickStart 기본코드를 받아서 실행할 수 있다.

 모든 컴포넌트는 @Component 장식자로 시작하며 메타데이터 객체를 사용한다. 이 메타데이터 객체는 HTML 템플릿과 컴포넌트 클래스가 어떻게 동작하는지 기술한다.

 메타데이터의 selector 항목은 index.html 파일 안에서 <my-app> 태그 안에 해당 컴포넌트가 위치한다는 것을 나타낸다.

- index.html (body 중 일부)

<my-app>Loading AppComponent content here ...</my-app>

 메타데이터의 template 프로퍼티는 <h1> 헤더와 문자열을 정의하고 있다. 이 문자열은 "Hello"로 시작하며 {{name}}으로 끝나는데, 이 방식은 템플릿에 새로운 내용을 삽입하는 Angular 인터폴레이션 바인딩(interpolation binding)이다. Angular는 런타임 시점에 {{name}} 코드를 컴포넌트의 name 프로퍼티로 치환한다. 인터폴레이션 바인딩은 Angular의 수많은 기능 중 하나이며, 이후 문서에서도 찾아볼 수 있을 것이다.

 이 예제에서 name 프로퍼티를 'Angular' 에서 'World'로 바꾸면 어떻게 되는지 확인해보자.

 이 예제는 JavaScript의 상위 집합인 TypeScript로 작성되었다. Angular는 TypeScript를 사용하는데, 명시적인 타입 지정방식은 개발자 도구에 추가적인 정보를 전달하여 개발자 생산성 향상에 도움을 주기 때문이다. Angular 코드는 JavaScript로도 작성할 수 있고, 자세한 내용은 이곳을 참고하라.