욱'S 노트

유저가 링크를 클릭하거나 버튼을 눌렀을때 혹은 텍스트를 입력했을때, 우리는 그것에 대해 알고 싶을때가 있다. 이러한 유저 액션은 DOM 이벤트로서 일어난다. 이번 챕터에서는 Angular 이벤트 바인딩 문법을 활용해 이러한 이벤트를 처리하는 방법에 대해서 알아보자. 유저 입력 이벤트 바인딩우리는 DOM 이벤트에 응답하는 Angular 이벤트 바인딩을 사용할 수 있다.문법은 간단하다. DOM 이벤트명을 괄호로 둘러싸고 템플릿 문장으로 할당하면 된다. 다음 예는 click hander를 구현하기 위해 이벤트 바인딩을 한 예이다.Click me! (click)은 바인딩의 타겟을 의미한다. 따옴표안의 문자는 오른편은 컴포넌트 이벤트의 응답으로 컴포넌트 메소드 onClickMe를 할당했다는 것을 의미한다. 바인딩..

우리는 Angular 컴포넌트의 프로퍼티들을 HTML template에 표현하기 데이터를 바인딩할 수 있다. 이 예제를 따라하기 위해서는 먼저 quick-start를 설치해야 한다. angular 공식 사이트를 방문하여 quick-start를 먼저 설치하기를 바란다. 히어로 리스트들을 출력하는 페이지를 만들어 볼 것이다. 최종 UI는 다음과 같다. 보여지는 컴포넌트에 프로퍼티 삽입하기컴포넌트 프로퍼티를 출력하기 위한 가장 쉬운 방법은 삽입을 이용해서 프로퍼티 이름을 주입하는 방법이다. 삽입을 위해 view 템플릿에 프로퍼티 이름을 명시하자. {{myHero}}app.component.ts 파일을 아래와 같이 변경해보자.import { Component } from '@angular/core';@Compo..

Angular는 HTML과 JavaScript나 JavaScript로 컴파일될 수 있는 다른 언어(Dart or TypeScript)로된 클라이언트 어플리케이션을 생성하기 위한 프레임워크이다. 프레임워크는 몇몇의 라이브러리로 구성되는데, 코어와 몇몇의 옵션 라이브러리들이다.당신은 Angularized 마크업으로 HTML 템플릿을 구성하고 그러한 템플릿을 관리하기 위해 컴포넌트 클래스를 작성하고 서비스의 어플리케이션 로직을 추가하고 모듈내의 서비스와 컴포넌트를 boxing한다.그렇게하면 루트 모듈이 기동되어 당신의 어플리케이션이 기동된다. Angular는 당신의 어플리케이션 컨텐츠를 브라우저에 표시하고 당신이 제공한 지시에 따라 사용자 상호작용에 응답한다.물론 이것보다 더 많은 것들이 있다. 자세한 내용은..