오늘은 모듈(Module) 과 컴포넌트(Component) 를 생성 해 보도록 하겠습니다.
쉽게말해서 View(Component의 단위) 를 생성한다고 생각하시면 될 것 같습니다.
오늘 우리는 2개의 View ( intro, history ) 를 추가 할 예정입니다 ~~^^
CLI 사용방법은 이전 블로그 포스팅을 참고 해 주세요 !!!
2018/09/11 - Step 1 Development Environment Setting
ng new webProject
새 프로젝트를 생성합니다. 대 소문자로 이루어져야 합니다.
프로젝트 생성 완료
ng generate module app-routing
Routing Module 사용을 위하여 app-routing Module 을 생성
정상적으로 실행되면 src/app/app-routing 폴더가 생성되고 그 안에 app-routing.module.ts 파일이 생성됩니다.
app-routing 생성 완료
ng generate component pages/home
Home 화면은 별다른 기능이 없기 때문에 Module을 따로 생성하지 않고 Component 만 생성합니다.
ng generate module pageIntro
ng generate component pageIntro/pageIntroMain
소개(intro) 페이지를 위하여 Module과 그 안에 Component 를 생성 합니다.
ng generate module pageHistory
ng generate component pageHistory/pageHistoryMain
연혁(histor) 페이지를 위하여 Module과 그 안에 Component 를 생성 합니다
Module 과 Component 생성 완료
이제 Routing Module을 수정하여 Router를 구성합니다. app-routing.module.ts를 다음과 같이 수정합니다.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// Angular Router Module import
import { Routes, RouterModule } from "@angular/router";
// Routing 처리가 필요한 각각의 Compnent import
import { HomeComponent } from "../pages/home/home.component";
import { PageIntroMainComponent } from "../pageIntro/page-intro-main/page-intro-main.component";
import { PageHistoryMainComponent } from "../pageHistory/page-history-main/page-history-main.component";
//Router 생성
const routers : Routes = [
{path : '' , component : HomeComponent},
{path : 'intro' , component : PageIntroMainComponent},
{path : 'history' , component : PageHistoryMainComponent}
]
// RouterModule 추가 및 exports
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routers)
],
declarations: [],
exports: [RouterModule]
})
export class AppRoutingModule { }
Routing Module이 만들어졌으니 이제 Root Module에서 Routing Module을 불러들이는 코드를 작성해야 합니다.
app.module.ts 파일을 다음과같이 수정 합니다.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HomeComponent } from './pages/home/home.component';
// Routing Module import
import { AppRoutingModule } from "./app-routing/app-routing.module";
// Module import
import {PageIntroModule} from "./page-intro/page-intro.module";
import {PageHistoryModule} from "./page-history/page-history.module";
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
AppRoutingModule,
PageIntroModule,
PageHistoryModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
이제 app.component.html 파일을 수정
<nav>
<a routerlink="/">Home</a>
<a routerlink="/intro">소개</a>
<a routerlink="/history">연혁</a>
</nav>
<router-outlet></router-outlet>
app.component.css 파일 수정
nav a {margin: 10px;}
nav a {text-decoration: none;}
완성 되었습니다 ^^ ~~
각 View 의 내용은 해당 page 폴더 안의 main.component.html 파일을 수정하면 됩니다 ^^
2018/09/11 - Step 1 Development Environment Setting