Step 2 Angular, Module, Component 생성

오늘은 모듈(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 파일을 수정하면 됩니다 ^^