[Angular] UI 작업, 라우팅 (routing-module)

이미지 출처 : Pixabay

 

지난번에 구성한 오른쪽 레이아웃에 몇 가지 기능을  더 추가하고 라우팅 모듈을 작성할 것입니다.

그 전에 department component를 추가하고 employees component에 몇 가지 속성을 더 추가하겠습니다. 

터미널 상에서 다음 명령어를 입력합니다.

ng generate component departments

그리고 해당 컴포넌트 내에 Department 클래스를 정의합니다.

//department.ts
export class Department {
  id: number;
  name: string;
}

리스트를 작성합니다.

//departmentList.ts
import { Department } from './department';

export const DEPARTMENTS: Department[] = [
  { id: 5101, name: 'IT'},
  { id: 5102, name: 'HR'},
  { id: 5103, name: 'Accounting'},
  { id: 5104, name: 'Environment'}
];

Employee 클래스에 departmentID와 rank를 추가합니다.

//employee.ts
export class Employee {
  id: number;
  name: string;
  departmentID: number;
  rank: string;
}

employeeList를 수정합니다.

//employeeList.ts
import { Employee } from './employee';

export const EMPLOYEES: Employee[] = [
  { id: 11, name: 'Sean', departmentID: 5101, rank: 'Chairman'},
  { id: 12, name: 'Andy', departmentID: 5104, rank: 'Managing Director'},
  { id: 13, name: 'Cindy', departmentID: 5103, rank: 'Manager'},
  { id: 14, name: 'Anne', departmentID: 5102, rank: 'General Manager'},
  { id: 15, name: 'Clara', departmentID: 5103, rank: 'Chief'},
  { id: 16, name: 'Bonnie', departmentID: 5101, rank: 'Assistant Manager'},
  { id: 17, name: 'Jin', departmentID: 5102, rank: 'Deputy General Manager'},
  { id: 18, name: 'Andrew', departmentID: 5103, rank: 'Intern'},
  { id: 19, name: 'Nicolas', departmentID: 5103, rank: 'Staff'},
  { id: 20, name: 'Gary', departmentID: 5104, rank: 'Manager'},
];

위와 같이 작업해주고, employees.component.ts를 다음과 같이 수정합니다.

//employees.component.ts
import { Component, OnInit } from '@angular/core';
import { Employee } from './employee';
import { EMPLOYEES } from './employeeList';
import { Department } from '../departments/department';			//ADDED!
import { DEPARTMENTS } from '../departments/departmentList';		//ADDED!

@Component({
  selector: 'app-employees',
  templateUrl: './employees.component.html',
  styleUrls: ['./employees.component.css']
})
export class EmployeesComponent implements OnInit {
  employees: Employee[] = EMPLOYEES;
  rankList: string[] = ['Chairman', 'Vice Chairman', 'President', 'Senior Executive Vice President', 'Senior Managing Director',
  'Managing Director', 'Department Manager', 'Deputy General Manager', 'General Manager', 'Manager', 'Assistant Manager',
  'Chief', 'Assistant Manager', 'Staff', 'Intern'];		//ADDED!
  departments: Department[] = DEPARTMENTS;			//ADDED!
  selectedEmployee: Employee;

  constructor() { }

  ngOnInit() {
  }

  onSelect(employee: Employee): void {
    this.selectedEmployee = employee;
  }

}

이후 employees.component.html을 다음과 같이 수정합니다.

<!-- employees.component.html -->
<h2>Employees</h2>
<div class="left">
  <div class="list-group" *ngFor="let employee of employees" (click)="onSelect(employee)">
    <a class="list-group-item list-group-item-action">{{employee.name}}</a>
  </div>
</div>
<div class="right" *ngIf="selectedEmployee">
  <h2>{{selectedEmployee.name}}'s Detail</h2>
  <form>
    <div class="form-group row">
      <label for="id" class="col-sm-2 col-form-label">ID</label>
      <div class="col-sm-9">
        <input type="text" readonly class="form-control-plaintext" id="id" #id value="{{selectedEmployee.id}}">
      </div>
    </div>
    <div class="form-group row">
      <label for="deptID" class="col-sm-2 col-form-label">Department</label>
      <select class="form-control col-sm-9" id="deptID" #deptID
              value="{{selectedEmployee.departmentID}}">
        <option *ngFor="let department of departments" [value]="department.id">
          {{department.id}} : {{department.name}}</option>
      </select>
    </div>
    <div class="form-group row">
      <label for="rank" class="col-sm-2 col-form-label">Rank</label>
      <select class="form-control col-sm-9" id="rank" #rank value="{{selectedEmployee.rank}}">
        <option *ngFor="let rank of rankList">{{rank}}</option>
      </select>
    </div>
    <div align="right">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </form>
</div>

여기까지 따라했다면 다음과 같은 화면을 볼 수 있습니다.

 

localhost:4200

 

이제 라우팅을 위해  app-routing.module.ts를 다음과 같이 수정합니다.

//app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {EmployeesComponent} from './employees/employees.component';		//ADDED!
import {DepartmentsComponent} from './departments/departments.component';	//ADDED!


const routes: Routes = [
  {path: '', redirectTo: '/employees', pathMatch: 'full'},	//ADDED!
  {path: 'employees', component: EmployeesComponent},		//ADDED!
  {path: 'departments', component: DepartmentsComponent}	//ADDED!
];

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

그리고 app.component.html을 다음과 같이 수정합니다.

<!-- app.component.html -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">{{title}}</a>
    </div>

    <div class="navbar-collapse collapse" id="collapsingNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" routerLink="/employees">Employees</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/departments">Departments</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<router-outlet></router-outlet>

app-routing.module.ts를 위와 같이 수정함으로써 다른 영역을 그대로 두고 <router-outler></router-outlet> 안의 부분이 /departments, /employees 에 따라 교체됩니다.

기본 경로(path: '')를 /employees 로 지정해 준 덕에 localhost:4200/ 으로 연결을 시도할 시 자동으로 localhost:4200/employees 로 리다이렉팅 됩니다.

 

localhost:4200/employees

 

 

 

localhost:4200/departments