AngularJS 시작하기 - 웹 서버 개발 기초 (2/3)

오늘은 저번 포스팅에 이어 AngularJs + Node를 이용하여 웹 서버를 개발하는 기초 of 기초를 진행하도록 하겠습니다.

AngularJS 시작하기 - 환경 구성 (1/3)

 

먼저 아래의 명령어를 통하여 새로운 Component를 생성해주세요. 참고로 Component는 View를 생성 및 관리하는 역할을 합니다.

$ cd .\src\app\
$ ng g component second
$ ng g component thrid

 

생성된 파일들에 대한 간략한 설명은 다음과 같으며, 아래의 Component들을 이용하여 View를 구성할 수 있습니다.

second.component.html : 화면에 보여지는 HTML 파일

second.component.ts : 기능을 담당하는 TypeScript Code

second.component.css : second Component에만 적용되는 CSS 파일

second.component.spec.ts : 단위 테스트를 위한 파일

 

생성이 완료되었다면, 새로 추가된 Component들을 app.module.ts에 추가 시켜줍니다.

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
// add Line
import { SecondComponent } from './second/second.component';
import { ThridComponent } from './thrid/thrid.component';

@NgModule({
  declarations: [
    AppComponent,
    // add Line
    SecondComponent
    ThridComponent
  ],
  imports: [
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

 

이번에는 해당 Component들을 연결 시켜주기 위해 Routing Moudle을 만들어보겠습니다.

$ cd .\src\app\
$ ng g class app.router.module
CREATE src/app/app.router.module.spec.ts (192 bytes)
CREATE src/app/app.router.module.ts (33 bytes)

 

 

생성된 app.router.module.ts 파일에 Routing 관련 설정들을 입력해준 뒤, app.module.ts 파일에 Routing Module을 추가해줍니다.

src/app/app.router.module.ts

import { RouterModule, Routes } from "@angular/router";
import { SecondComponent } from "./second/second.component";
import { ThridComponent } from "./thrid/thrid.component";

const AppRoutes: Routes = [
    {path:"second", component:SecondComponent},
    {path:"thrid", component:ThridComponent},
    {path:"test", redirectTo:"/second", pathMatch:"full"}
];

export const AppRouterModule = RouterModule.forRoot(AppRoutes, {useHash:true});

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SecondComponent } from './second/second.component';
import { ThridComponent } from './thrid/thrid.component';
// Add Line
import { AppRouterModule } from './app.router.module';

@NgModule({
  declarations: [
    AppComponent,
    SecondComponent,
    ThridComponent
  ],
  imports: [
    BrowserModule,
    // Add Line
    AppRouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

그리고 마지막으로 index.html의 Body Tag에 해당하는 app.component.html 파일을 수정합니다.

src/app/app.component.html

<div class="app-wrapper">
  <router-outlet></router-outlet>
</div>

 

이후 ng serve 명령어를 이용하여 서버를 열고 아래의 URL로 접속을 시도하면, SPA 방식으로 페이지가 작동하는 것을 확인할 수 있습니다. 실제로 서버로부터 페이지를 받아오는 것은 최초에 한해서만 받아오고 있습니다.

$ ng serve --open

second 접속 화면

thrid 접속 화면

 

지금까지 AngularJS를 이용하여 개발을 하는 기본적인 방법에 대해서 알려드렸습니다.

 

다음 포스팅에서는 더욱 더 다양한 기능들을 이용하여 웹을 개발하는 방법에 대해서 공유드리겠습니다.