AppModule, AppRoutes

* 영어표기가 디폴트, 이하 한글표기

---

0. 기초 개념

       1). Module

              - 프로그램을 구성하는 구성 요소

              - 한개 이상의 특정한 기능을 수행할 수 있는 단위

 

       2). routing

              - 네트워크에서 경로를 선택하는 프로세스

---

1. AppModule

- 쉽게 설명하면 각각의 컴포넌트(모듈)들의 묶음

- 각 컴포넌트들을 import 하여 연결

 

      1). 각각 파라미터별 사용할 수 있는 요소

             (1). declarations

             - component, directive, pipe

             (2). imports

             - 다른 모듈

             (3). providers

             - 전역에서 접근 가능한 서비스

             (4).bootstrap

             - 루트 모듈에만 존재, 메인 뷰 지정 (초기화면)

 

import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { NewCompComponent } from './comp/new-comp/new-comp.component'; import { BrowserModule } from '@angular/platform-browser'; @NgModule({   declarations: [     AppComponent,     NewCompComponent   ],   imports: [     BrowserModule   ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { }

---

2. AppRoutes

- 화면 이동

 

      1). 파라미터 설명

             (1). export const routes

             - 각각 페이지별 경로를 지정

             (1-1). canActivate

             - 해당 경로로 이동할 경우 발동되는 클래스

             - 개인페이지 접근시 로그인 여부 확인 등, 체크가 필요한 페이지에 세팅

 

import { Routes } from '@angular/router'; import { GuardsGuard } from './guards/auth.guard'; import { BoardComponent } from './comp/board/board.component'; import { NewCompComponent } from './comp/new-comp/new-comp.component'; export const routes: Routes = [     { path: 'main-board', component: BoardComponent, canActivate: [GuardsGuard] },     { path: 'new-comp', component: NewCompComponent }, ];

       2). 사용방법

       - 페이지 이동을 원하는 시점에서 this.router.navigate(['이동을 원하는 컴포넌트의 path 입력']);

 

//로그인 버튼 클릭시 발동되는 메서드 setLogin() {      ....       if (result == "SUCCESS") this.router.navigate(['/main-board ']); }