Sense categoria

Angular Restaurant Demo App(Routing, Http)

Routing과 Http Module을 이용해서 Restaurant App을 만들어 보도록 하자.

사람마다 배우는 스타일이 다를거라고 생각한다. (개인적으로 나는 이론적인 부분을 깊에 파고 들어서 이해를 해야 직성이 풀리는 스타일이다)
하지만 개발자라면 대부분 코딩 실습을 통해 본인이 해보지 않으면 안다고 or 공부했다고 생각한게 제대로 한게 아니라는건 동의 하지 않을까 추측해 본다.

이에 Angular의 Routing, Http 를 학습 한 김에 간단한 App을 제작 해 보기로 한다.

Angular Routing, Http 실습: Restaurant App

App

App은 3개의 탭으로 구성되어 있다. Home, Menu Category, About Us
각각의 탭은 Route로 구현한다.

Menu Category 탭에서 메뉴 종류를 선택한 후 메뉴 상세를 볼 수 있다.
Menu Category List 및 메뉴 상세는 HTTP를 통해 정적 데이터를 로드한 후 보여준다.

Angular를 얕게 공부 한 후 처음으로 만들어 보기 딱 좋은 App 이라 생각한다.

구조 생성

Project 생성

1
2
3
4
5
$ ng new RestaurantDemoApp
installing ng
  ...
Project 'RestaurantDemoApp' successfully created.
$ code ./RestaurantDemoApp

Component 생성

1
2
3
$ ng g component Home
$ ng g component AboutUs
$ ng g component MenuCategory

src/app/아래에 about-us, home, menu-category folder가 생긴것을 확인 할 수 있다.
src/app/app.module.ts를 확인 해 보면 아래와 같은 내용이 추가 된 것을 확인 할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
import { AboutUsComponent } from './about-us/about-us.component';
import { HomeComponent } from './home/home.component';
import { MenuCategoryComponent } from './menu-category/menu-category.component';
@NgModule({
  declarations: [
    AppComponent,
    AboutUsComponent,
    HomeComponent,
    MenuCategoryComponent,
  ],

Router

Router Module App에 추가

app.module.ts
1
2
3
4
5
6
7
8
9
10
11
12
import { RouterModule, Routes } from "@angular/router";
const restaurantRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'aboutUs', component: AboutUsComponent },
  { path: 'menu-category', component: MenuCategoryComponent }
];
@NgModule({
  imports: [
    RouterModule.forRoot(restaurantRoutes)
  ]

1 Line: Router를 사용하기 위한 모듈들을 import
3~7 Lines: Restaurant App에서 사용할 route path와 그에따른 component 지정
12 Line: Router를 생성하는 public static method를 이용해서 Router를 생성한다.

이제 우리 앱에서 라우터를 사용 할 수 있다.

간단히 Text 형태로 Routing 을 구현하도록 하겠다.

app.component.html
1
2
3
4
5
6
<div>
<a [routerLink]="['/home']">HOME</a>
<a [routerLink]="['/menu-category']">MENU CATEGORY</a>
<a [routerLink]="['/aboutUs']">ABOUT US</a>
</div>
<router-outlet></router-outlet>

ng new {project name}에 의해 생성되는 기본 Component인 app.component의 기존 코드는 모두 제거하고, 위의 코드를 넣는다.

2 Line: one-time binding을 위해 []로 감싼 [routerLink]에 RouterModule.forRoot()에 파라미터로 전달한 주소중 하나인 home을 넘긴다.
routerLink에 할당하는 값은 string Array이다. (2번째 인자값은 parameter)

Home, MenuCategory, AboutUs는 ng를 이용해 Component를 만들었기 때문에, 각 Component.html 파일에 <p>about-us works!</p> 다음과 같이 작성이 되어 있다.

이제 실행을 시킨 후 웹 브라우저로 확인하면 Routing 된 페이지를 확인 할 수 있다.

1
2
3
4
$ ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
#(중략)
webpack: Compiled successfully.

HTTP

HTTP Module 사용은 조금 더 복잡한 면이 있어서, 이번 예제에서는 Data Model 객체는 사용하지 않는다.

HTTP Module App에 추가

app.module.ts
1
2
3
4
5
6
import { HttpModule, Http } from "@angular/http";
@NgModule({
  imports: [
    HttpModule
  ]

Service 만들기

HTTP를 사용해서 Data를 처리할 Service를 만들고, NgModule.providers에 등록한다.

src/app/menu-category/menu-category.service.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { Injectable } from "@angular/core";
import { Http } from "@angular/http";
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
const CATEGORY_MENU_URL = "https://khackskjs-course5.herokuapp.com/categories.json";
@Injectable()
export class CategoryService {
    constructor(private http: Http) {}
    getCategories(): Observable<any> {
        return this.http.get(CATEGORY_MENU_URL)
        .map(response => response.json());
    }
}
src/app/app.module.ts
1
2
3
4
5
import { CategoryService } from './menu-category/menu-category.service';
@NgModule({
  providers: [CategoryService]
})

Component 만들기

Data를 가져오는 Service를 만들었다면, 이제 Service를 사용하는 Component를 만든다.

1
ng g component menuCategory
src/app/menu-category/menu-category.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { Component, OnInit } from '@angular/core';
import { CategoryService } from "./menu-category.service";
@Component({
  selector: 'app-menu-category',
  templateUrl: './menu-category.component.html',
  styleUrls: ['./menu-category.component.css']
})
export class MenuCategoryComponent implements OnInit {
  categoryList: any[];
  constructor(private categoryService: CategoryService) {}
  ngOnInit() {
    this.categoryService.getCategories()
    .subscribe(res => {
      this.categoryList = res;
    });
  }
}
src/app/menu-category/menu-category.component.html
1
2
3
4
5
6
7
8
9
10
11
12
<table>
  <thead>
    <tr>
      <td>Category Name</td>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let category of categoryList">
      <td> {{ category.name }}</td>
    </tr>
  </tbody>
</table>

정리

Router와 Http를 사용해서 간단한 web App을 구현 해 봤다.

Router와 Http를 사용하기 위해서 어떤 일련의 과정을 해야 하는지를 중점적으로 보기 바란다.

Http Obserable

Compartir