Như ở đề bài đã nói là dùng
ng serve --open
8 để lấy dữ liệu từ export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
2 thì tất nhiên là phải cần đến export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
2 và dự án ng serve --open
8 rồiapi
Mình sẽ sử dụng mockpi để tạo api nhé mọi người vào đây tạo dự án mới ấn
5 đặt tên cho export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
6 rồi thêm các trường, kiểu dữ liệu, cuối cùng ấn export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
7, sau đó ấn vào tên export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
6 để nó hiển thị . Vậy là chúng ta đã tạo được data, Nhưng các bạn chỉ cần quan tâm đến địa chỉ trên URL để tí còn dùng đến.export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
góc cạnh
Thế là đã xử lý xong bên
export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
2 bây giờ chuyển sang ng generate service product
0. Để cài đặt ng generate service product
0 trước hết chúng ta phải cài đặt ng generate service product
2. Các bạn có thể lên trang chủ để cài đặt ng generate service product
2 tại đây. Sau khi cài xong ng generate service product
2 thì đến lúc cài đặt ng serve --open
8 bằng lệnhexport class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
5Tiếp theo là tạo một dự án mới
export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
6with
ng generate service product
6 is the project name that you want to set next to the cd to project just doing commandng serve --open
Add --open để có thể tự động mở trình duyệt của bạn đến
ng generate service product
7. Nó sẽ giống như thế này export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
05theo dõi sự thay đổi của dữ liệu để thực hiện một hàm nào đó và cuối cùng là nhập lớp export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
06 từ các mô hình bênexport class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
2quy định kiểu trả về của dữ liệu ở đây là kiểu
export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
07export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
4tạo 1 biến là
export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
08 chính là đường dẫn khi chúng ta tạo api trên mockapiTiếp theo là
export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
6lớp
export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
09 với phương thức khởi tạo và hàm export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
20 với phương thức export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
21 để lấy dữ liệu từ đường dẫn export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
08. Như đã nói ở trên mình đã tạo thêm thành phần để thực hiện chức năng tải danh sách sản phẩm và xem chi tiết, bây giờ chúng ta cùng vào thư mục export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
23 của thành phần export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
24ng serve --open
3Ở đây mình cũng nhập dịch vụ
export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
09 ở bên mình vừa tạo mô hình bên trên và bên export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
06, tiếp theo là gán dữ liệu bằng một mảng export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
01 trống. Hàm khởi tạo export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
28. Tạo một phương thức export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
20 gọi đến phương thức export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
20 bên export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
28 và export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
42 sẽ được gán bằng dữ liệu trả về của hàm export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
20. Tiếp theo sẽ là phần hiển thị dữ liệu được lấy lên để xem, chúng ta sẽ vào tệp export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
44 để tiến hành kết xuất dữ liệu ra. Chúng ta sẽ sử dụng export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
45 để tải ra danh sách sản phẩmexport class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
60khai báo một biến mục thuộc mảng
export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
42 chúng ta đã lấy được ở bên tệp export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
23, chỉ cần mục. [thuộc tính tên] muốn hiển thị là được, nhớ là phải đặt trong dấu {{}}. Như vậy là xong rồi, hơi xấu mong mọi người thông cảm nhé. Tiếp theo mình sẽ làm thêm chức năng xem chi tiết sản phẩm
Để xem được chi tiết sản phẩm thì mình phải lấy id của nó vì thế phần
export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
48 sẽ khác một chút so với phần export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
48 của danh sách sản phẩmexport class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
61dòng trên là định tuyến của danh sách sản phẩm còn phần dưới là của chi tiết sản phẩm. các bạn nhớ là phải import 2 thành phần
export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
60 và export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
61 vào nhé. Ở bên export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
62 cũng xây dựng một hàm find[] để lấy id tương tự như hàm export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
20 bên trênexport class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
62Tiếp theo sẽ là vào tệp
export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
64 của thành phần export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
65export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
63Cũng tương tự như bên
export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
23 nhưng thay vì gọi đến export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
20 và trả về một mảng dữ liệu thì export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
64 gọi đến export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
69 và dữ liệu trả về là một đối tượng. Bây giờ chúng ta chỉ cần sang tệp ng serve --open
30 để hiển thị thông tin sản phẩm phầm vừa lấy được. Thay vì phải tạo một biến ng serve --open
31 thuộc mảng export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
42 như bên danh sách sản phẩm thì chúng ta chỉ cần ng serve --open
33 muốn hiển thị là được. À các bạn nhớ thêm ng serve --open
34 vào thẻ ng serve --open
35 ở bên file export class Product{
id:number;
name:string;
price: number;
quantity: number;
img: string;
description: string;
}
44 nữa nhé để khi click vào 1 sản phẩm thì sẽ vào được trang chi tiết của sản phẩm đó. Đây là kết quả của trang chi tiết sản phẩmNhư vậy là mình đã giới thiệu cho các bạn bằng cách lấy dữ liệu từ api bằng
ng generate service product
0 hiện ra trang danh sách sản phẩm và trang chi tiết sản phẩm. Còn những phần thêm, sửa, xóa sản phẩm nếu các bạn quan tâm thì hãy comment cho mình biết để mình có thể làm ở bài tiếp theo. Các bạn có thắc mắc hay bổ sung gì thì comment xuống bên dưới để mình được biết nhé. Cảm ơn các bạn