Angular에서 기능 구현하는 방식

Angular에서 기능 구현하는 방식

작업 구현방식

업무 로직 구현 클래스를 사용한다. 클래스가 의존성으로주입되는 경우 Angular 프레임워크에서 인스턴스(객체)를 생성해서 해당 컴포넌트에 주입시킨다.

UI 컴포넌트 구현 클래스에 @Component 어노테이션을 붙여서 생성한다.

컴포넌트에 렌더링 될 HTML 템플릿 정의 인라인 HTML 코드를 사용할 때는 @Component 어노테이션에 template 항목을 사용하고, 외부 파일에서 불러올 때는 templateUrl을 사용한다

HTML 조작 *ngIf 나 *NgFor과 같은 HTML 조작 디렉티브를 사용하거나 @Directive를 사용해서 별개의 클래스를 만든다. (자바 진영에서 JSP를 사용해보셨으면 JSTL과 비슷하다고 생각하면 편할것 같습니다!)

현재 객체에서 클래스 변수 참조 this 키워드를 사용한다(ex: this.userName = "ISSAC";)

단일 페이지 앱에서 내비게이션 구현 라우터(Router)를 사용해서 컴포넌트와 URL을 연결하고 컴포넌트의 템플릿이 태그로 지정한다.

컴포넌트 프로퍼티를 UI에 표시 템플릿의 이중 중괄호 안에 클래스 프로퍼티를 사용한다( ex: {{customerName}} )

컴포넌트 프로퍼티를 UI와 바인딩 대괄호를 사용해서 프로퍼티를 바인딩한다. ( ex : )

UI 이벤트 처리 이벤트의 이름을 괄호로 감싸고 핸들러를 지정한다. ( ex: Get Products )

양방향 바인딩 [( )] 표기를 사용한다( ex : )

컴포넌트에 데이터 전달하기 컴포넌트 프로퍼티를 선언할 때에는 @Input 어노테이션을 사용하여 외부에 값과 연결한다.

컴포넌트에서 데이터 받기 컴포넌트 프로퍼티를 선언할 때 @Output 어노 테이션을 사용하여 EventEmitter를 이용해서 이벤트를 발생시킨다.

HTTP 요청 컴포넌트에 Http 객체를 주입하고 HTTP 함수를 사용한다. (ex : this.http.get('products') )

HTTP 응답처리 subscribe() 함수를 사용해서 옵저버블 스트림을 처리한다.(ex : this.http.get('products').subscribe(---); )

HTML 일부를 자식 컴포넌트에 전달하기 자식 템플릿에 태그를 사용한다.

컴포넌트 상태가 변경 되는 것을 가로채기 컴포넌트 생명주기 함수를 사용한다.

from http://sac4686.tistory.com/41 by ccl(A) rewrite - 2021-08-20 20:00:32