Augular 개발환경 설정 & 프레임워크 개요

Augular 개발환경 설정 & 프레임워크 개요

Install

• Node.js 설치
• Vscode 설치
• Angular 설치 (npm install -g @angular/cli)
• Typescript 설치 (npm install -g typescript)

 

Angular 프레임워크 아키텍쳐

angular architecture

출처: https://angular.io/guide/architecture

 

 

Angular 구성요소

• component: @Component 장식자 + component 클래스
• template: 화면구성 역할을 담당하고 html로 작성됨
• directive: template의 html 태그내에서 속성 핸들링
• service: 컴포넌트가 공통적으로 사용되는 비지니스 처리 로직 담당
• module: 각 구성요소 관리(component, service, directive 등)

 

Dependency Injection(의존성 주입): 특정 인스턴스가 외부에서 필요한 인스턴스를 주입 받을 수 있음

대부분 외부에서 주입 받는 인스턴스는 service이며 생성자를 통해 주입됨

  예) constructor(private service: HeroService)

 

처음 시작되는 컴포넌트는 루트 모듈인 AppModule의 bootstrap에 등록되어 있어야 함

main.ts에서 root 모듈인 AppModule을 부트스트랩함

 

컴포넌트 데코레이터에서 template을 바로 작성할 수 있음

컴포넌트 생성 명령어 ('ng g c component'명으로 줄여서 호출 가능)

ng generate component [컴포넌트 이름]