Angular 11 Shopping Mall Basic(1)

Shopping mall 을 Angular 프로그래밍으로 구현하는 기본적인 예시를 제공드리겠습니다. 여기서는 간단한 쇼핑몰 구조를 만들어보는데, Angular의 기본 구조와 몇 가지 기능을 포함하여 설명하겠습니다.

1. Angular 프로젝트 생성

먼저, Angular CLI를 사용하여 새 프로젝트를 생성합니다. 터미널에서 다음 명령어를 실행하세요:

ng new shopingmall

이 명령어는 shopingmall이라는 이름의 Angular 프로젝트를 생성합니다. 프로젝트 생성 과정에서 라우팅 여부와 스타일시트 포맷을 물어볼 때, 라우팅을 Yes, 스타일시트는 CSS나 SCSS로 선택하세요.

2. 기본 구조 설정

프로젝트가 생성되면, 기본적인 쇼핑몰을 위한 몇 가지 컴포넌트를 생성할 필요가 있습니다. 가장 먼저, 메인 페이지, 상품 목록 페이지, 상품 상세 페이지를 만들어보겠습니다.

ng generate component pages/home
ng generate component pages/product-list
ng generate component pages/product-detail

3. 라우팅 설정

Angular에서는 SPA(Single Page Application)를 지원하기 위해 라우팅을 사용합니다. src/app/app-routing.module.ts 파일을 열고 다음과 같이 수정합니다:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';
import { ProductListComponent } from './pages/product-list/product-list.component';
import { ProductDetailComponent } from './pages/product-detail/product-detail.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'products', component: ProductListComponent },
  { path: 'product/:id', component: ProductDetailComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

4. 간단한 상품 데이터 모델 생성

상품 정보를 다루기 위한 간단한 모델을 src/app/models/product.ts에 생성합니다:

export interface Product {
  id: number;
  name: string;
  price: number;
  description: string;
  imageUrl: string;
}

5. 상품 목록 서비스 생성

상품 데이터를 관리할 서비스를 생성합니다:

ng generate service services/product

src/app/services/product.service.ts 파일을 열고 다음과 같이 수정합니다:

import { Injectable } from '@angular/core';
import { Product } from '../models/product';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private products: Product[] = [
    { id: 1, name: 'Product 1', price: 100, description: 'A great product', imageUrl: 'https://via.placeholder.com/150' },
    { id: 2, name: 'Product 2', price: 200, description: 'Another great product', imageUrl: 'https://via.placeholder.com/150' }
  ];

  constructor() { }

  getProducts(): Product[] {
    return this.products;
  }

  getProductById(id: number): Product | undefined {
    return this.products.find(product => product.id === id);
  }
}

6. 상품 목록 페이지 구현

src/app/pages/product-list/product-list.component.ts 파일을 수정하여 상품 목록을 표시하도록 합니다:

import { Component, OnInit } from '@angular/core';
import { ProductService } from '../../services/product.service';
import { Product } from '../../models/product';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
  products: Product[] = [];

  constructor(private productService: ProductService) { }

  ngOnInit(): void {
    this.products = this.productService.getProducts();
  }
}

src/app/pages/product-list/product-list.component.html 파일을 수정하여 상품 목록을 표시합니다:

<div class="product-list">
  <div *ngFor="let product of products" class="product-item">
    <h2>{{ product.name }}</h2>
    <img [src]="product.imageUrl" alt="{{ product.name }}">
    <p>{{ product.price | currency }}</p>
    <p>{{ product.description }}</p>
    <a [routerLink]="['/product', product.id]">View Details</a>
  </div>
</div>

7. 상품 상세 페이지 구현

src/app/pages/product-detail/product-detail.component.ts 파일을 수정합니다:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ProductService } from '../../services/product.service';
import { Product } from '../../models/product';

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {
  product: Product | undefined;

  constructor(
    private productService: ProductService,
    private route: ActivatedRoute
  ) { }

  ngOnInit(): void {
    const productId = parseInt(this.route.snapshot.paramMap.get('id')!, 10);
    this.product = this.productService.getProductById(productId);
  }
}

src/app/pages/product-detail/product-detail.component.html 파일을 수정합니다:

<div *ngIf="product; else noProduct">
  <h2>{{ product.name }}</h2>
  <img [src]="product.imageUrl" alt="{{ product.name }}">
  <p>{{ product.price | currency }}</p>
  <p>{{ product.description }}</p>
</div>
<ng-template #noProduct><p>Product not found!</p></ng-template>

8. 홈 페이지 및 스타일링

src/app/pages/home/home.component.html를 간단히 수정합니다:

<div class="home">
  <h1>Welcome to the Shopingmall!</h1>
  <a routerLink="/products">View Products</a>
</div>

스타일은 각 컴포넌트의 CSS 파일에 추가할 수 있습니다.

9. 앱 실행

이제 앱을 실행하려면 다음 명령어를 사용하세요:

ng serve

브라우저에서 http://localhost:4200을 열어 결과를 확인합니다.

완성된 기본 쇼핑몰

위 단계를 완료하면, Angular로 간단한 쇼핑몰 애플리케이션이 구성됩니다. 상품 목록과 상품 상세 정보를 볼 수 있으며, 홈 페이지에서는 전체 상품 목록으로 넘어갈 수 있는 링크가 있습니다. 이 예제를 바탕으로 더 많은 기능과 복잡한 로직을 추가하여 개발을 계속할 수 있습니다.