WEB개발이야기/Angular
Angular의 개요
어쩌다보니여기까지~
2018. 7. 10. 23:32
반응형
Angular에 대한 세부적인 포스팅을 하기 전에 먼저 간단하게 개요를 정리 합니다.
Angular란?
- 구글에서 만든 open-souce web application
- SPA(Single Page Application) 개발이 가능
- 다양한 플랫폼에 맞게 개발 가능
- 유지보수, 개발 속도 향상 (데이터 바인딩, 템플릿 등의 문법 제공 )
아키텍쳐
Angular의 구성요소
Angular2를 구성하는 요소는 크게 4가지 입니다.
- 컴포넌트 (Component)
- 모듈 (Module)
- 서비스 (Service)
- 지시자 (Directive)
컴포넌트 (Component)
- Angular는 컴포넌트를 중심으로 개발함
- 컴포넌트는 화면을 구성하기 위한 하나의 단위로 봄
- 기본적으로 템플릿 + 지시자 + 클래스 조합으로 구성
- 템플릿은 컴포넌트의 UI를 담당하며 가상DOM에 저장되므로 컴포넌트간 스타일에 영향을 받지 않음
- 템플릿은 Angular에서 제공하는 HTML 템플릿 문법을 사용하여 클래스와 데이터나 이벤트를 바인딩함
- 클래스는 컴포넌의 로직을 관리함
- 컴포넌트마다 라이프사이클이 있으며 hook이 제공됨
기본구성
import { component } from '@angular/core';
@Compoent({
// component element 이름
selector: 'ex-compoent',
// view html (or templateUrl)
template: '<div>{{msg}}</div>',
// css code (or styleUrls)
styles: [`div {color: red}`]
})
export class MyComponent {
msg: string = "hello";
}
Data binding
바인딩 방향 | 입력방식 | 문법 |
---|---|---|
단방향 | 표현식 | {{표현식}}, [target] = "표현식", bind-target="표현식" |
단방향 | 명령식 | (target) = "명령식", on-target = "명령식" |
양방향 | 표현식 | [(target)] = "표현식", bindon-target = "표현식" |
컴포넌트에서는 템플릿으로 Property값으로 바인딩을 하고 템플릿에서는 컴포넌트로 이벤트로 바인딩을 함.
component에서 template으로 data 바인딩(단방향)
component --> template
import { component } from '@angular/core';
// component
@Compoent({
template: `<div>{{name}}</div>`
})
class ExComponent {
name: string = '아이언맨';
}
// 화면
[propery]=”value”: 해당 propery에 data 바인딩(단방향)
component --> template
// parentsComponent
@Compoent({
template: `<exComponent [name]="name"/>`
})
class ParentsComponent {
name: string = '아이언맨';
}
// exComponent
@Compoent({
selector: 'exComponent'
template: `<div>{{name}}</div>`
})
class ExComponent {
@Input() name: string;
}
// exComponent 화면
(event)=”handler”: event를 전달한다.(단방향)
component <-- template
// compoent
@Compoent({
template: `<div (click)="testClick('로보트')">click</div>`
})
class ExComponent {
testClick(name) {
console.log(`나는 ${name}입니다.`);
}
}
// 클릭시 console창에
/* 나는 로보트입니다. 표시 */
[(ng-model)]=”propery”: template과 Compoent의 양방향 바인딩
component <--> template
@Compoent({
template: `<input [(ngModel)]="name"> {{name}}`
})
class ExComponent {
name: string = '로보트'
}
모듈 (Module)
- 모듈은 Angular에서 제공하는 라이브러리 모듈과 사용자 정의 모듈이 있음
- export 키워드를 사용하여 모듈을 정의하고 외부에 노출할 수 있음
- 최소 1개 이상의 모듈이 있어야 함
- component, directive(지시자), 파이프 등이 있음
export class MyComponent { }
- 정의된 모듈은 임포트해서 사용할 수 있음
import { MyComponent } from './MyComponent';
모듈 시스템
- 모듈시스템은
컴포넌트
,지시자
,파이프
와 같은 구성 모듈을 통합적으로 관리할 수 있게 해줌 - 모듈구성은 기본적으로 `애플리케이션 루트 모듈을 이용함
- 규모가 커지면 특징모듈과 같은 하위 모듈 구성을 추가하여 사용함
- 모듈 구성은 기본적을
@NgModule
장식자를 사용함
기본구성
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// ngModule decorator
@NgModule({
// import할 모듈 리스트(Angular 모듈, routing 모듈..)
imports: [ BrowserModule ],
// 모듈에 속하는 컴포넌트, 디렉티브(지시자), 파이프 클래스들의 리스트
declarations: [ AppComponent ],
// DI providers 리스트 (서비스 모듈...)
providers: [ Logger ],
// import하는 모듈이 쓸 수 있는 declarations 리스트
exports: [ AppComponent ],
// bootstrap 가능한 컴포넌트 리스트
bootstrap: [ AppComponent ],
// 어느 템플릿에서도 참조되지 않은 컴포넌트의 리스트
entryComponents: [ AppComponent ]
})
export class AppModule { }
서비스 (Service)
- 재사용 가능한 로직을 정의 하기 위해 사용함 (중복로직을 최소화)
- 컴포넌트에서 직접적으로 관심없는 로직을 정의하고 사용함
- 의존성 주입으로 서비스를 활용함
- @Injectable 장식자를 사용해서 서비스라는 것을 선언함
- 로깅 서비스, 테스트를 위한 목 객체서비스, 애플리케이션 환경설정과 변수관리 서비스등에 주로 사용함
로깅서비스 예제
export class Logger {
log(msg: any) { console.log(msg); }
error(msg: any) { console.error(msg); }
warn(msg: any) { console.warn(msg); }
}
export class HeroService {
private heroes: Hero[] = [];
constructor(
private _backend: BackendService,
private _logger: Logger) { }
getHeroes() {
this.backend.getAll(Hero).then( (heroes: Hero[]) => {
this.logger.log(`Fetched ${heroes.length} heroes.`);
this.heroes.push(...heroes); // fill cache
});
return this.heroes;
}
}
DI (Dependency injection) : 의존성 주입
- 클래스의 새로운 인스턴스에 필요한 종속성을 제공하는 방법.
- @Injectable을 사용하여, Injector에 service들을 등록 시킴.
@Injectable()
class ExService {
plusNumber(a: number, b:number) {
return a + b;
}
}
@Compoent({
...
})
class ExComponent {
// 아래와 같이 의존성 주입을 한다.
constructor(private _exService: ExService) {}
plusNumber(a: number, b: number) {
console.log(this._exService.plusNumber(a, b));
}
}
지시자(Directive)
- Angular에서 제공하는 내장 지시자와 직접 제작해서 사용할 수 있는 커스텀 지시자가 있음
- Component에서 template(view)만 빠진 것이라고 생각하면 된다.
- angular에서 기본으로 제공하는 directive들이 있음
- DOM을 다루는 방식임
import { Directive, ElementRef, Renderer } from '@angular/core';
@Directive ({
selector: '[helloStyle]',
})
export class HelloStyleDirective {
constructor (private el: ElementRef, private renderer: Renderer) { }
...
}
▲ 위의 형태로 지시자를 정의함
@Compoent({
selector: 'my-Component',
template: '<div helloStyle ></div>'
})
▲ 정의된 지시자를 위의 예제처럼 helloStyle
로 사용함.