티스토리 뷰

Angular

Angular QuickStart - 0. QuickStart

한장현 2017. 1. 4. 20:23

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로도 작성할 수 있고, 자세한 내용은 이곳을 참고하라.

'Angular' 카테고리의 다른 글

Angular QuickStart - 2. 환경설정  (0) 2017.01.05
Angular QuickStart - 1. 살펴보기  (4) 2017.01.04
Angular 1 + ES6  (1) 2016.12.07
Angular 3 걱정은 이제 그만 하자.  (5) 2016.11.27
Angular 2 : 어디까지 왔을까  (13) 2016.11.05
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함