앵귤러 튜토리얼 (Angular tutorial) -27 정리

 

* 제가 다시 작성한 최신 튜토리얼 수정본 입니다. 아래 주소를 통해서 진행하시는 것을 권장 드립니다. ^^

lts0606.tistory.com/328

앵귤러 튜토리얼(Angular tutorial) - 1 : 소개

앵귤러의 기능은 크게 2가지로 구분되어 진다.
1. 화면 구성을 담당하는 컴포넌트
2. 컴포넌트를 관리하는 모듈
3. 공유의 목적으로 사용되는 서비스
4. 컴포넌트에게 가기전 동작하는 가드(CanActivate)
5. 라우터 기능

컴포넌트와 모듈은 각각 n개씩 가질 수 있다.
모듈은 메인모듈을 가지고 있으며 메인모듈에서 여러개의 모듈, 컴포넌트를 관리 한다.
메인모듈이라는 것은 가장 먼저 동작하여 컴포넌트관리 및 다른 모듈을 관리 해 주는 모듈을 의미한다.

그러한 메인 모듈은 앵귤러 프로젝트에서 main.ts파일에서 정의 할 수 있다.

앵귤러는 2.0 이상부터 타입스크립트로 개발이 되어지며, 대부분의 형태가 class 형태로 구분되어 진다.
또한 모듈, 컴포넌트를 구분짓는 것은 데코레이터(@)에 의해서 구분되어 진다.
앵귤러는 컴포넌트, 모듈, 서비스 등 여러의 기능을 정의할 때 이러한 데코레이터를 사용하며, 데코레이터는 json 형식으로 내용을 설정 할 수 있다.
예를들어 컴포넌트를 사용한다하면 아래처럼 사용하여야 한다.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

* 관련글
https://lts0606.tistory.com/119


1. 모듈
모듈에서는 각종 사용할 라이브러리, 공용으로 사용되는 서비스 및 형태를 정의할 수 있다.
모듈 데코레이터의 주요 기능은 아래처럼 구분되어 지며 대부분 값 형태가 배열로 되어 있다.
 1) declarations
  - 화면을 구성하는 컴포넌트를 등록한다. 추가되지 않는 컴포넌트는 동작하지 않는다.
 2) imports
  - 외부에서 사용할 모듈을 등록한다. ngFor, ngIf 등 이러한 지시자도 등록된 모듈에서 가져온 기능이다.
 3) providers
  - 자원, 객체 등을 서로 공유한다. 모듈이나 컴포넌트가 동작을 할 때 필요한 정보를 스스로 넣어주는 역할을 한다.
    의존성을 주입하는 개념으로 볼 수 있다.
 4) bootstrap
  - 모듈이 동작시에 사용할 메인 형태의 컴포넌트를 등록한다.
* 관련글
https://lts0606.tistory.com/121

 

2. 컴포넌트
컴포넌트는 화면구성을 담당한다. 마찬가지로 데코레이터에서 각종 환경설정을 할 수 있다.
컴포넌트 데코레이터에서 사용되는 주요 기능이다.
 1) selector 
  - 지시자를 의미한다. 해당 컴포넌트의 별칭을 의미하며 해당 지시자를 테그(<>)에 넣으면 다른 컴포넌트에서 사용 할 수 있다.
 2) templateUrl 
  - 컴포넌트가 사용 할 html 파일 위치를 의미한다. 해당 위치의 파일을 읽어와서 화면을 구성하여 준다.
    templateUrl 말고도 template를 사용 할 수 있으며 template를 사용하는 경우 문자열로 html 요소를 입력 하여야 한다.
 3) styleUrls
 - 해당 화면이 사용 할 css를 정의한다. styles를 사용 할 수도 있다.
* 관련글
https://lts0606.tistory.com/121


3. 서비스
서비스는 대부분 모듈에서 등록해서 여러 컴포넌트에게 전달될 때 사용된다.
자주 사용되는 기능이나, 정보를 공유 하는 경우 사용 된다.
서비스 형태의 기능을 사용하려면 Injectable 데코레이터를 사용해야 한다.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor() { }

}

 

*관련글
https://lts0606.tistory.com/126


4. 가드(CanActivate)
컴포넌트에게 가기전 동작하는 기능은 guard, CanActivate라는 인터페이스를 상속받은 클래스를 만들어야 한다.
해당 기능은 통상적으로 인터셉터 같은 역할을 하게 되며 서비스와 마찬가지로 Injectable 데코레이터를 사용해야 한다.
CanActivate 인터페이스를 상속 받으면 canActivate 라는 함수를 사용 할 수 있는데, 컴포넌트의 접근 여부를 Boolean 값을 통해서 허용/거부 할 수 있다.
또한 생성자를 통해서 router 객체를 상속받으면 redirect 같은 기능도 구현 할 수 있다.

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class InterceptorGuard implements CanActivate {
  constructor(private rout : Router){  

  }
  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    if(조건){
      this.rout.navigateByUrl("로그인화면이동");
      return false;  
    }
    return true;
  }
  
}

 

* 관련글
https://lts0606.tistory.com/177


5. 라우터
라우터 기능은 여러개의 화면을 요청(Request)에 의해 다르게 보여주는 경우 사용된다.
모듈에서 설정하여 사용하며, 라우터에서는 요청에 따라 원하는 컴포넌트로 이동시켜 준다.

const router : Routes = [  //라우팅
  {path : 'login' , component : 원하는컴포넌트},  
  {path : 'main' , component : 원하는컴포넌트, canActivate : [인터셉터역할을하는가드]},
  {path : '', redirectTo : '/리다이렉션하는기능',  pathMatch : 'full'}  
]

 

* 관련글
https://lts0606.tistory.com/169


이정도 까지가 앵귤러에서 주로 사용되는 기능을 의미한다. 어려운부분이 있으면 다시 돌아가 직접 페이지를 제작 해 보도록 하자.
마지막으로 빌드를 통해서 다른 서버에 사용 가능한 html 형태로 배포하는 방법에 대해서 알아보도록 하자.