Thực tập Angular

Hiện sản phẩm mới dùng Angular

19/02/2023

Hiện sản phẩm mới dùng Angular hướng dẫn thực hiện code tạo component để các sản phẩm mới từ Server hiện trong trang chủ.

Yêu cầu:

Lấy 6 sản phẩm điện thoại mới từ server và trình bày trên trang chủ
Trước khi thực hiện bài này, hãy xem bài sau và thực hiện theo đó trước nhé: https://longnv.name.vn/thuc-tap-angular/hien-san-pham-ban-chay

Chuẩn bị thực hiện:

Chạy project Angular : Vào folder project và chạy lệnh sau
ng serve -o
Chạy Json server: Vào folder project và chạy lệnh
json-server -w db.json

Tạo component sản phẩm mới

Việc đầu tiên là bạn cần tạo component.
Thực hiện bằng cách vào folder project và chạy lệnh ng g c SanPhamMoi

Nhúng vào component home

Component home trước đây chúng ta đã routing để hiện ra khi user nhắp vào trang chủ. Giờ thì muốn hiện sản phẩm mới trong trang chủ thì chỉ việc nhúng component vừa tạo vào home là OK. Mở file home.component.html để code :

<!-- home.component.html-->
<app-san-pham-moi></app-san-pham-moi> <hr>
<app-san-pham-ban-chay></app-san-pham-ban-chay>

Tạo hàm trong service để request dữ liệu từ server

Service là class chứa các hàm phục vụ cho các component gọi khi cần. Service giống như Model trong mô hình MVC.

Trong video trước, chúng ta đã tạo service du-lieu, giờ thì mở file du-lieu.service.ts để định nghĩa hàm lấy các điện thoại mới (idLoai=1) , khai báo kiểu dữ liệu trả về từ server sẽ là mảng ISanpham

//du-lieu.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ISanpham } from './isanpham';
@Injectable({ providedIn: 'root'})
export class DuLieuService {
  constructor( private h:HttpClient ) { }
  laySP(id:number=0){
    return this.h.get(`http://localhost:3000/sanpham/${id}`);
  }
  getLaptopBanChay(){
    var url='http://localhost:3000/sanpham?idLoai=2&_sort=solanxem&_order=desc&_limit=6';
    return this.h.get<ISanpham[]>( url );
  }
 getDienThoaiMoi(){
    var url='http://localhost:3000/sanpham?idLoai=1&_sort=ngay&order=desc&_limit=6';
    return this.h.get<ISanpham[]>( url );
  }
}

Gọi hàm trong trong servive từ component

//san-pham-moi.component.ts
import { Component } from '@angular/core';
import { DuLieuService } from '../du-lieu.service';
import { ISanpham } from '../isanpham';
@Component({ selector: 'app-san-pham-moi',
  templateUrl: './san-pham-moi.component.html',
  styleUrls: ['./san-pham-moi.component.css']
})
export class SanPhamMoiComponent {
  constructor( private d:DuLieuService ) { }
  listSanPham:ISanpham[] = [];
  ngOnInit(): void {
    this.d.getDienThoaiMoi().subscribe( d => this.listSanPham = d);
  }
}