Angular에서 기능 구현하는 방식

 

💡 Angular 프레임 워크로 특정한 기능을 구현할때 어떤 방식을 사용하는지 표 형식으로 정리하였는데 표에 설명하는내용이 Angular 프레임워크에서 제공되는 기능의 전부가 아니고 큰 그림을 보았을때 진행 순서로 보면된다.

표 보기전 참조

---

• 아래의 표현에서 어노테이션이라고 표현하는것은 (angular에서는 데코레이션이라고 표현됩니다.)
• 아래에서는 양방향 바인딩에 대해서 적혀있지만 Angular는 사실 양방향 바인딩을 지원하지 않는다고합니다 [( )] (banana in a box)에서 추측하면 양방향 바인딩은 이벤트 바인딩과 프로퍼티 바인딩의 축약표현일 뿐이므로 양방향 바인딩의 실제 동작은 이벤트 바인딩과 프로퍼티 바인딩의 조합으로 이루어지는 것일뿐이라고 합니다. (출처. 모던자바스크립트 저자 이웅모 블로그)
• 예시는 예시로 볼뿐이고 Angular.io에 starting 으로 연습해보시면 이해가 빠를것같습니다!
• 표는 'Yakov Fain, Anton Moiseev'저자의 Angular Devlopment with TypeScript를 참고하여 만들어 보았습니다!
  
  
  
  

작업	구현방식
업무 로직 구현	클래스를 사용한다. 클래스가 의존성으로주입되는 경우 Angular 프레임워크에서 인스턴스(객체)를 생성해서 해당 컴포넌트에 주입시킨다.
UI 컴포넌트 구현	클래스에 @Component 어노테이션을 붙여서 생성한다.
컴포넌트에 렌더링 될 HTML 템플릿 정의	인라인 HTML 코드를 사용할 때는 @Component 어노테이션에 template 항목을 사용하고, 외부 파일에서 불러올 때는 templateUrl을 사용한다
HTML 조작	*ngIf 나 *NgFor과 같은 HTML 조작 디렉티브를 사용하거나 @Directive를 사용해서 별개의 클래스를 만든다.<br />(자바 진영에서 JSP를 사용해보셨으면 JSTL과 비슷하다고 생각하면 편할것 같습니다!)
현재 객체에서 클래스 변수 참조	this 키워드를 사용한다(ex: this.userName = "ISSAC";)
단일 페이지 앱에서 내비게이션 구현	라우터(Router)를 사용해서 컴포넌트와 URL을 연결하고 컴포넌트의 템플릿이<router-outlet>태그로 지정한다.
컴포넌트 프로퍼티를 UI에 표시	템플릿의 이중 중괄호 안에 클래스 프로퍼티를 사용한다( ex: {{customerName}} )
컴포넌트 프로퍼티를 UI와 바인딩	대괄호를 사용해서 프로퍼티를 바인딩한다. ( ex : <input [value] = " binding"> )
UI 이벤트 처리	이벤트의 이름을 괄호로 감싸고 핸들러를 지정한다. ( ex: <button (click)="onClickEvent()"> Get Products </button>)
양방향 바인딩	[( )] 표기를 사용한다( ex : <input [( ngModel)] = "myComponentProperty"/>)
컴포넌트에 데이터 전달하기	컴포넌트 프로퍼티를 선언할 때에는 @Input 어노테이션을 사용하여 외부에 값과 연결한다.
컴포넌트에서 데이터 받기	컴포넌트 프로퍼티를 선언할 때 @Output 어노 테이션을 사용하여 EventEmitter를 이용해서 이벤트를 발생시킨다.
HTTP 요청	컴포넌트에 Http 객체를 주입하고 HTTP 함수를 사용한다. (ex : this.http.get('products') )
HTTP 응답처리	subscribe() 함수를 사용해서 옵저버블 스트림을 처리한다.(ex : this.http.get('products').subscribe(---); )
HTML 일부를 자식 컴포넌트에 전달하기	자식 템플릿에 <ng-content> 태그를 사용한다.
컴포넌트 상태가 변경 되는 것을 가로채기	컴포넌트 생명주기 함수를 사용한다.
배포	WebPack과 같은 번들러로 애플리케이션 파일과 프레임워크,라이브러리를 JavaScript로 번들링한다(TypeScript)