Angular 프레임워크로 특정 기능을 구현할 때 어떤 방식으로 사용하는지에 대해 알아보겠습니다.
UI Component 구현
클래스에 @Component
Annotation을 붙여서 생성합니다.
HTML 템플릿 정의
인라인 HTML 코드를 사용할 때는 @Component
어노테이션 template
항목을 사용하고, 외부 파일에서 불러올 때는 templateUrl
항목을 사용합니다.
컴포넌트 Property 를 UI에 표시
템플릿의 이중 중괄호 안에 Property를 사용합니다.
1 | <span>{{ customValue }})</span> |
컴포넌트 Property 바인딩
대괄호를 사용해서 Property를 바인딩합니다.
1 | <input [value]="inputValue" /> |
이벤트 처리
이벤트 이름을 괄호로 감싸고 핸들러를 지정합니다.
1 | <button (click)="onClickEvent">Click</button> |
양방향 바인딩
[()] 표기를 사용합니다.
1 | <input [(ngModel)]="componentProperty" /> |
HTML 일부를 자식 컴포넌트에 전달하기
자식 컴포넌트의 템플릿에 <ng-content>
태그를 사용합니다.
내비게이션 구현
라우터를 사용해서 컴포넌트와 URL을 연결하고 컴포넌트의 템플릿이 렌더링될 위치를 <router-outlet>
태그로 지정합니다.
컴포넌트에서 데이터 받기
컴포넌트 프로퍼티를 선언할 때 @Input
어노테이션을 사용해서 외부 값과 연결합니다.
컴포넌트에 데이터 전달하기
컴포넌트 프로퍼티를 선언할 때 @Output
어노테이션을 사용하고 EventEmitter
를 이용해서 이벤트를 발생시킵니다.
HTTP 요청
컴포넌트에 Http 객체를 주입하고 HTTP 함수를 사용합니다.
1 | this.http.get('/users'); |
HTTP 응답 처리
subscribe()
함수를 사용해서 옵저버블 스트림을 처리합니다.
1 | this.http.get('/users').subscribe(() => { |
컴포넌트 상태가 변경되는 것을 가로채기
컴포넌트 생성주기 함수를 사용합니다.