ProgrammingFrontendAngular

[Angular] Angular 시작

Angular는 구글이 만든 단일 페이지 웹 애플리케이션 개발을 위한 자바스크립트 프레임워크입니다. 다양한 플랫폼에서 동작할 수 있게 하는 개발 툴과 기능들을 제공합니다.

Module

컴포넌트, 파이프, 서비스 등과 같은 앵귤러 애플리케이션의 주요 부분을 기능단위로 그룹핑하게 해 줍니다.

  • 모든 앵귤러 애플리케이션은 하나의 Root Module을 가집니다.
  • 여러 Feature Module을 가질 수 있습니다.
  • 재사용할 수 있는 기능을 외부에 배포하기 위해 사용되기도 합니다.

Component

  • 빌딩 블록 형식
  • HTML 요소들의 그룹
  • 뷰와 로직으로 구성
1
$ ng g component todo/todos --module todo/todo.module.ts --export

컴포넌트 내부에서 html, css 코드를 작성하도록 생성할 수 있습니다.

1
$ ng g component todos/todo --inline-template --inline-style

Template

  • HTML 코드로서 템플릿을 표현합니다.
  • Template 표현식(Expression)과 Template 문장(Statement)을 가집니다.
  • 바인딩
    • 바인딩의 대상: 속성, 이벤트, ngModel, class, style
1
2
3
4
5
6
7
8
9
10
11
12
<!-- {{ 템플릿 표현식 }} -->
<h1>{{title}}</h1>

<!-- [속성]="템플릿 표현식" -->
<todo [todo]="work"></todo>

<!-- (이벤트)="템플릿 문장(함수)" -->
<button (click)="handle()"></button>

<!-- [(ngModel)]="템플릿 문장" -->
<!-- 양방향 바인딩을 사용할 수 있음 -->
<input type="text" [(ngModel)]="name" />

컴포넌트 간 커뮤니케이션

  • 부모 컴포넌트 -> 자식 컴포넌트

    • @input() 사용
    • ES6 setter 사용 가능
    • @ViewChild() 사용

  • 자식 컴포넌트 -> 부모 컴포넌트

    • @Output() 사용
    • EventEmitter 사용하여 부모에게 이벤트 전달
    • 부모 컴포넌트는 $event로 이벤트의 데이터를 전달받음
    • 자식이 부모 컴포넌트를 직접 주입받을 수 있음

파이프(Pipe)

  • 템플릿(HTML)에서 보이는 데이터를 변환해 줍니다.
  • AngularJs 1.x에서는 필터로 제공되었습니다.
  • 실제 값을 변경하는 것이 아니라 보여주는 값만 바꿔 보여주기 위해 사용합니다.
1
2
3
4
5
6
7
8
9
// 사용법
{{ express | pipeName: paramValue }}

// 예
today: Date = new Date();

{{ today | date }}
{{ today | date:"yy/mm/dd" }} // 날짜 포맷 변환
{{ today | date | uppercase }}
Share