Angular : Email Client - 1-3. 인증모듈작성 - 라우팅 설정하기

1. 이 포스트는 Email Client를 작성하는 시리즈의 일부이다

 

2. 이제 전반적인 라우팅을 정리해야 한다.

  2-1 기본적으로 inbox와 auth 두 부분으로 나누어져 있다.

  2-2 /inbox는 이메일 모듈이 로딩되도록, /auth에는 인증모듈이 실행되도록 한다.

  2-3 '' 루트의 경우 Home 컴포넌트가 보여질도록 한다.

 

3. 루트 경로에서 보여질 페이지가 필요하다.

  3-1 첫 페이지에서 보여질 Home 컴포넌트를 하나 생성한다.

  3-2 일치하지 않는 경로를 입력했을 때를 위해서 NotFound 컴포넌트도 하나 생성한다.

 

  3-3 그냥 지금 app template에 있는 콘텐츠 부분의 값을 cut해서 복사했다.

 

<p>
  These steps were used to create this responsive navbar.
</p>

<ol>
  <li>
    Add a property to the component to track whether the menu is open.
    In this example, the property is called <code>isMenuCollapsed</code>.
  </li>
  <li>
    Add an <code>ngbCollapse</code> directive to the element
    with the <code>navbar-collapse</code> CSS class. Use the
    property in the component as the value for the directive.
  </li>
  <li>
    When the navbar toggler button is clicked, toggle the
    value of the property in the component.
  </li>
  <li>
    If you would like the menu to close when a link is clicked,
    add a <code>(click)</code> handler to each link and set the
    property on the component to true to hide the menu.
  </li>
</ol>

<p>
  Resize your browser window to see it in action!
</p>

 

  3-4 이제 app template에 라우팅 페이지를 보여줄 router-outlet을 지정한다.

    3-4-1 각 메뉴에는 적절한 url을 입력한다.

    3-4-2 inbox를 누르면 /inbox로 간다.

    3-4-3 SignOut 버튼은 /auth/signOut, SignIn 버튼은 /auth/signIn, SignUp은 /auth/signUp으로 연결된다.

    3-4-4 각 경로에는 activeLinkActive 속성이 지정되어 활성화 된 경로를 표시하도록 하였다.

 

<nav class="navbar navbar-expand-lg navbar-light bg-light mb-3">
  <a class="navbar-brand" [routerLink]="'.'">
    EM<i class="fas fa-paper-plane bg-dark text-white m-0"></i>IL
  </a>

  <!-- Step 3: Toggle the value of the property when the toggler button is clicked. -->
  <button class="navbar-toggler" type="button" (click)="isMenuCollapsed = !isMenuCollapsed">
    &#9776;
  </button>

  <!-- Step 2: Add the ngbCollapse directive to the element below. -->
  <div [ngbCollapse]="isMenuCollapsed" class="collapse navbar-collapse">
    <ul class="navbar-nav">
      <li class="nav-item">
        <!-- Step 4: Close the menu when a link is clicked. -->
        <a class="nav-link" [routerLink]="'/inbox'" (click)="isMenuCollapsed = true"
          [routerLinkActive]="'active'">Inbox</a>
      </li>
    </ul>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <!-- Step 4: Close the menu when a link is clicked. -->
        <a class="nav-link" [routerLink]="'/auth/signOut'" (click)="isMenuCollapsed = true"
          [routerLinkActive]="'active'" *ngIf="signedIn$ | async">Sign Out</a>
      </li>
      <ng-container *ngIf="!(signedIn$ | async)">
        <li class="nav-item">
          <a class="nav-link" [routerLink]="'/auth/signUp'" (click)="isMenuCollapsed = true"
            [routerLinkActive]="'active'">Sign Up</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [routerLink]="'/auth/signIn'" (click)="isMenuCollapsed = true"
            [routerLinkActive]="'active'">Sign In</a>
        </li>
      </ng-container>
    </ul>
  </div>
</nav>

<div class="container">
  <router-outlet></router-outlet>
</div>

 

4. 루트 라우팅 테이블 설정이다.

  4-1 인증과 이메일 모듈은 둘다 lazy loading 방식으로 처리한다.

  4-2 루트 경로가 지정되면 프로그램 전체 Landing 페이지인 home 컴포넌트가 로딩된다.

  4-3 경로 매핑이 없는 경우는 NotFound 컴포넌트를 보여준다.

  4-4 아래의 매핑 테이블은 프로젝트 생성 시에 --routing 옵션을 주어 기본적으로 app.module.ts에 import 되어 있다.

 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { NotFoundComponent } from './not-found/not-found.component';


const routes: Routes = [
  { path: 'auth', loadChildren: ()=> import('./auth/auth.module').then(module=> module.AuthModule )},
  { path: 'inbox', loadChildren: ()=> import('./email/email.module').then(module=> module.EmailModule )},
  { path: '', component: HomeComponent  },
  { path: '**', component: NotFoundComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

 

5. email, auth 모듈의 동적 라우팅 테이블을 설정한다.

  5-1 각 모듈 마다 라우팅 모듈을 설정하고, 그 라우팅 모듈을 모듈파일에 import 시킨다.

  5-2 처음 생성할 때 --routing 을 빼 먹어 파일을 생성해 주어야 한다.

    5-2-1 email-routing.module.ts와 auth-routing.module.ts 파일을 생성하고 라우팅을 지정한다.

    5-2-2 각 모듈의 모듈 파일에 라우팅 테이블을 import한다.

  5-3 email-routing 설정하기

    5-3-0 아래의 코드는 email-routing.module.ts 파일이다.

    5-3-1 email은 경로 선택시에 첫 포스트에서 생성한 Home 컴포넌트가 표시되도록 한다. 루트의 Home과 다르다.

    5-3-2 Home을 만든 이유는 이메일 페이지는 목록과 콘텐츠로 구분되어 하나 이상의 컴포넌트가 표시되는데,

      5-3-2-1 그런 컴포넌트를 담는 container로 동작할 것이다.

 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';


const routes: Routes = [
  { path: '', component: HomeComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class EmailRoutingModule { }

 

    5-3-2 위에서 설정한 routing 모듈을 email.module.ts에 등록해야 한다. 생성 시 --routing을 빠뜨려 수동으로 한다.

      5-3-2-1 import에 라우팅 모듈을 추가한다.

 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';
import { EmailRoutingModule } from './email-routing.routing.module';


@NgModule({
  declarations: [HomeComponent],
  imports: [
    CommonModule,
    EmailRoutingModule
  ]
})
export class EmailModule { }

 

  5-4 보안 모듈도 같은 작업을 한다.

    5-4-1 보안 라우팅 모듈을 생성하고 아래처럼 작성한다.

      5-4-1-1 여기에서는 기본 컴포넌트가 필요없다. 한 페이지 한 컴포넌트를 사용할 예정이다.

 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SignUpComponent } from './sign-up/sign-up.component';
import { SignInComponent } from './sign-in/sign-in.component';


const routes: Routes = [
  { path: 'signUp', component: SignUpComponent },
  { path: 'signIn', component: SignInComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AuthRoutingModule { }

 

    5-4-3 이메일 모듈에서 한 것처럼 이 라우팅 모듈을 보안 모듈에 등록한다.

 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SignInComponent } from './sign-in/sign-in.component';
import { SignUpComponent } from './sign-up/sign-up.component';
import { AuthRoutingModule } from './auth.routing.module';


@NgModule({
  declarations: [SignInComponent, SignUpComponent],
  imports: [
    CommonModule,
    AuthRoutingModule
  ]
})
export class AuthModule { }

 

6. 경로에 따른 페이지들이다.

  6-1 루트 페이지 - 루트 경로로 진입하면 루트의 Home 컴포넌트가 표출된다.

 

 

  6-2 /inbox - inbox로 가면 inbox 모듈의 Home 컴포넌트가 로딩된다.

 

  6-3 /auth/signUp - Sign Up 버튼을 눌렀을 경우이다. auth 모듈의 SignUp 컴포넌트가 표출된다.

 

 

  6-4 /auth/SignIn - Sign In 버튼을 눌렀을 경우이다. auth 모듈의 SignIn 컴포넌트가 화면에 나온다.