Angular 4-1. 게시판 만들기 (화면 생성)

1. routing, modue, component 생성

ng g module board --routing
ng g component board
ng g component board/board-list
ng g component board/board-edit
ng g component board/board-detail

• 글 목록, 상세보기, 등록&수정 화면 생성

 

• board.module.ts

@NgModule({
  declarations: [
    BoardComponent,
    BoardListComponent,
    BoardDetailComponent,
    BoardEditComponent
  ],
  imports: [
    CommonModule,
    BoardRoutingModule
  ]
})
export class BoardModule { }

 

• board.component.ts

@Component({
  selector: 'app-board',
  template: '<router-outlet></router-outlet>'
})

 

• board-routing.module.ts

const BoardRoutes: Routes = [
  {
    path: '',
    component: BoardComponent,
    children: [
      {path: 'list', component: BoardListComponent},
      {path: 'detail', component: BoardDetailComponent},
      {path: 'edit', component: BoardEditComponent},
      {path: '', redirectTo: 'list', pathMatch: 'full'}
    ]
  }
];

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

 

• main-routing.module.ts

const MainRoutes: Routes = [
  {
    path: '', 
    component: MainComponent,
    children: [
      {path: 'dashboard', loadChildren: () => import('../dashboard/dashboard.module').then((m) => m.DashboardModule), },
      {path: 'board', loadChildren: () => import('../board/board.module').then((m) => m.BoardModule), },
      {path: '', redirectTo: 'dashboard', pathMatch: 'full'}
    ]
  }
];

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

    - path board 추가

 

• left-menu.component.html

<a class="nav-link" routerLink="board">
    <div class="sb-nav-link-icon"><i class="fa-solid fa-pen-to-square"></i></div>
    게시판
</a>

    - 게시판 메뉴 추가

    - Dashboard, 게시판 외의 메뉴 제거

 

• 현재까지의 결과 화면 - 게시판 클릭

 

 

 

2. 게시판 리스트 화면 구성

 

https://material.angular.io/

Angular Material

 

• material 설치

ng add @angular/material

 

• Packages installation failed 한 번 뜨더니 재 설치 시도하니까 잘 설치가 됐습니다.

 

https://material.angular.io/components/table/examples

Angular Material

• 위 URL에 있는 table 샘플 코드 복사해줬습니다.

 

• material 사용해주려면 Module을 import 해줘야 합니다.
• board.module.ts

import { MatTableModule } from '@angular/material/table';

@NgModule({
  declarations: [
    BoardComponent,
    BoardListComponent,
    BoardDetailComponent,
    BoardEditComponent
  ],
  imports: [
    CommonModule,
    BoardRoutingModule,
    MatTableModule ////추가
  ]
})
export class BoardModule { }

 

• 결과 화면