TIL_171123 Angular Module, Routing
루트 모듈, 컴포넌트 모듈. 프로바이더 위치 차이는?
루트 모듈에 프로바이더를 입력하면, 애플리케이션 전역
(인스턴스를 하나만 만들어서 모든 컴포넌트가 공유함)컴포넌트에 프로바이더를 입력하면, 그 컴포넌트에서만 사용 가능
- 스마트 컴포넌트 & 더미 컴포넌트
- 트리구조가 복잡해질때에, 데이터를 공유하는데에 번거로운 과정이 생김
- 이런 때에 서비스 프로바이더로 변경 추천 (반드시 싱글턴)
- 이 경우, 컴포넌트 들은 viewing 만 하는 역할
싱글턴. 서비스의 인스턴스를 단 하나만 만든다는 것. 그래야만 같은 데이터를 공유할 수 있음
- 서비스의 프로바이더
- 컴포넌트의 프로바이더
- 둘다 쓰는것 (최악)
모듈의 분리
모듈분리 명칭(공유, 핵심 등)에 현혹되지 말고, 기능에 따라 폴더구조를 만든다고 생각하고 이를 모듈화 시킨다고 생각하라
1. 기능 모듈
- 관심사가 유사한 구성요소로 구성한 모듈
- 특정 화면을 구성하는 구성 요소
2. 공유 모듈
- 애플리케이션 전역에서 사용될 구성 요소들로 구성한 모듈
- 기능모듈에 의해 임포트 됨
- 애플리케이션 전역에서 사용할 컴포넌트, 디렉티브, 파이프
3. 핵심 모듈
- 애플리케이션 전역에서 사용될 구성요소들로 구성한 모듈
- 루트 모듈에 등록 하여 싱글턴으로 사용
- 애플리케이션 전역에서 사용하는 데이터 서비스, 인증서비스, 인증 가드 등
루트 모듈과 기능모듈의 내용 차이
####[루트 모듈]
- bootstrap으로 어떤 컴포넌트로 기동시킬 것인가
- import BrowserModule 필수
[기능 모듈]
- export로 어떤 컴포넌트를 먼저 표현할 것인가
- import CommonModule 필수
Routing
- 출발지에서 목적지까지의 경로를 결정하는 것. - 사용자가 어떤 화면에서 다른 화면으로 전환하는 내비게이션을 관리하기 위한 기능
- A태그, 주소창, 히스토리
Ajax 단점
- 화면마다 독립적인 URL을 갖고 있지 않음
- 히스토리 관리 안됨
- SEO 이슈 발생
1. 앵귤러 라우터
- 사용자의 요청 URL패스와 컴포넌트를 쌍으로 구성하여 라우트를 설정
- 앵귤러는 이를 참조하여 뷰를 출력
- ‘**’ 는 else의 의미123456const routes: Routes = [{ path: '', component: HomeComponent },{ path: 'service', component: ServiceComponent },{ path: 'about', component: AboutComponent },{ path: '**', component: NotFoundComponent }];
2. 해쉬 기반 내비게이션 정책
url이 동일한 상태에서 해시뱅을 기반으로 서버에 새로운 요청없이, 즉 페이지 갱신 없이 anchor 기능을 사용하는 정책 (import 프로퍼티 수정 필요)
라우터 구성요소
1. 라우트 구성
- 앱 모듈에 라우트 인터페이스를 사용하여 배열로 구성한 라우트 타입의 쌍을 선언
- 해당 데코레이터 위에 선언해야함
2. 라우트 등록
- 루트모듈에 import { Routes, RouterModule } from ‘@angular/router’;
- @NgModule데코레이터의 imports에 RouterModule.forRoot(선언한값을 인자로)
- forRoot 메소드는 루트 모듈에 라우트 구성을 등록할 때 사용
3. 뷰의 렌더링 위치 지정
- RouterOutlet
- 뷰를 표시할 영역인
을 구현한 디렉티브로 컴포넌트의 뷰를 렌더링할 위치를 설정
4. 내비게이션 작성
- 컴포넌트의 템플릿에 대신 RouterLink 디렉티브 사용 (URL 패스 지정 가능)
RouterLinkeActive 디렉티브는 지정된 URL패스 트리에 포함되는 경우 지정된 클래스명을 DOM에 자동 추가
123456<nav><a routerLink="/">Home</a><a routerLink="/service">Service</a><a routerLink="/about">About</a></nav><router-outlet></router-outlet>옵션을 지정해줘야 루트가 항상 활성화된것으로 인지하는 것을 막을 수 있음
- 즉, 자신이 원하는 해당 사항만 클래스를 갖게 됨123<a routerLink="/service"[routerLinkActiveOptions]="{ exact: true }"routerLinkActive="active">Service</a>
5. navigate 메소드
- a태그 대신 프로그래밍 적으로 라우터를 일으킬때 사용
- 이벤트바인딩으로 함수를 묶어놓고 해당 함수에서 navigate 메소드를 사용하여 패스를 지정123456789101112131415161718import { Component } from '@angular/core';import { Router } from '@angular/router';({selector: 'app-root',template: `<button (click)="gotoTodos()">goto todos</button><router-outlet></router-outlet>`})export class AppComponent {constructor(private router: Router) {}gotoTodos() {// /todos로 이동this.router.navigate(['/todos']);}}
6. 자식 라우트
- 라우트의 router-outlet은 기본적으로 루트 컴포넌트에 표시됨
- 자식이 또 자식(손자)을 갖고 있는 경우에, children이라는 키워드를 활용하여 루트 컴포넌트가 아닌 자식 컴포넌트에 표시 가능
- childeren 설정이 키포인트!
|
|
7. 라우트 가드
- 라우터를 통하여 사용자의 접근을 제어하는 방법
- CanActivate 인터페이스를 구현하여 가드 클래스를 정의
- 해당 인터페이스 클래스에 선언한 메소드는 접근 권한 체크 로직을 수행 -> true/false 반환