Thực tập Angular

Đôi điều về Angular – P2

12/02/2023

Đôi điều về Angular – P2 đề cập cơ bản một số vấn đề như JSon-Server, sử dụng http service, interface, lấy tham số từ url , tạo service mới…

Đôi điều về Angular

Sử dụng json-server
Sử dụng http service
Sử dụng Interface trong Angular
Lấy tham số từ url vào component để dùng
Tạo và sử dụng service mới của bạn

Sử dụng json-server

Json-server là api server đóng vai trò backend cho các lập trình viên front-end. Cụ thể: Json-server đóng vai web server và database server cung cấp các tác vụ dữ liệu ở phía server

1. Cài đặt Json server

Chạy lệnh npm install -g json-server

Tài liệu hướng dẫn json server là đây, bạn xem để biết chi tiết cách dùng : https://www.npmjs.com/package/json-server#getting-started

2. Database cho json server

Json server hoạt động như database server. Mặc định database của nó là file có tên là db.json. Để tạo database này đơn giản là bạn tạo file db.json (đặt file ở đâu cũng được, nhưng nên đặt trong folder project) có cấu trúc như sau:

  {
    "posts": [
      { "id": 1, "title": "json-server1", "author": "typicode" },
      { "id": 2, "title": "json-server2", "author": "typicode2" },
      { "id": 3, "title": "json-server3", "author": "typicode3" }
    ],
    "comments": [
      { "id": 1, "body": "some comment1", "postId": 1 },
      { "id": 2, "body": "some comment2", "postId": 11 }
    ],
    "profile": { "name": "typicode" }
  }

Database như trên thì json-server hiểu có các bảng posts và comments.Mỗi record cách nhau bởi dấu phẩy. Các record có cột id là khoá chính tăng tự động. Mỗi post có id, title, author.

3. Các thao tác với json server

Chạy json- server: trong folder chứa file db.json, chạy lệnh json-server -w db.json
Test json-server: trong trình duyệt gõ http://localhost:3000

4. Các chức năng của json-server

Json có chức năng trả về danh sách record, filter (lọc) record theo điều kiện, sắp xếp, phân trang, có thể trả về 1 record chi tiết theo id…

Json cũng hỗ trợ đủ các method http như get (trả về) , post (thêm mới), put (cập chật), delete (xóa). Hỗ trợ sắp xếp theo nhiều field. Lọc record theo nhiều toán tử

5. Tạo database để thực tập

Xóa hết dữ liệu trong db.json và nhập lại như sau

{
"sanpham": [
 {"id": 1, "tensp": "Xiaomi Redmi Note 11", "giasp": "5490000", "solanxem": 45, "hot": 1,
  "mota": "Xiaomi Redmi Note 11 được xem như chiếc smartphone có giá tầm trung ấn tượng, với 1 cấu hình mạnh, cụm camera xịn sò, pin khỏe, sạc nhanh mà giá lại rất phải chăng.",
  "hinh": "https://cdn.tgdd.vn/Products/Images/42/245261/Xiaomi-redmi-note-11-blue-600x600.jpg", "ngay": "2024-04-01","idLoai": "1"},
 { "id": 2, "tensp": "Phone 13 Pro Max 128GB", "giasp":"33490000", "solanxem":13,"hot": 0,
   "mota": "Máy thiết kế không mấy đột phá khi so với người tiền nhiệm, màn hình siêu đẹp, tần số quét nâng cấp lên 120 Hz mượt mà, cảm biến camera có kích thước lớn hơn",
   "hinh": "https://cdn.tgdd.vn/Products/Images/42/230529/iphone-13-pro-max-xanh-la-thumb-600x600.jpg","ngay": "2024-04-02","idLoai": "1" },
  { "id": 3, "tensp": "Vivo Y33s", "giasp": "6990000","solanxem": 133, "hot": 0,
    "mota": "Vivo Y33s thiết kế trẻ trung với màu đen tráng gương và xanh mộng mơ. Phiên bản màu đen được phủ lớp tráng gương sáng bóng, có thể trở thành chiếc gương tiện lợi",
    "hinh": "https://cdn.tgdd.vn/Products/Images/42/249102/Vivo-y33s-yellow-thumb-600x600.jpg",
    "ngay": "2024-04-03", "idLoai": "1"},
  { "id": 4, "tensp": "OPPO Reno7 Z 5G", "giasp": "10490000", "solanxem": 321, "hot": 1,
   "mota": "Sản phẩm có thiết kế OPPO Glow độc quyền, camera mang hiệu ứng như máy DSLR chuyên nghiệp cùng viền sáng kép, có cấu hình mạnh mẽ và đạt chứng nhận xếp hạng A về độ mượt.",
   "hinh": "https://cdn.tgdd.vn/Products/Images/42/271717/oppo-reno7-z-5g-thumb-1-1-600x600.jpg", "ngay": "2024-04-04", "idLoai": "1"},
  { "id": 5,"tensp": "Samsung Galaxy A03 3GB", "giasp": "2990000", "solanxem": 5, "hot": 1,
   "mota": "Là điện thoại Galaxy A đầu tiên của nhà Samsung trong năm 2022 tại VN. Sản phẩm có giá dễ tiếp cận, camera chính đến 48 MP, pin 5000 mAh thoải mái sử dụng cả ngày.",
   "hinh": "https://cdn.tgdd.vn/Products/Images/42/251856/samsung-galaxy-a03-xanh-thumb-600x600.jpg", "ngay": "2024-04-02", "idLoai": "1"},
  { "id": 6,"tensp": "Samsung Galaxy A52s 5G","giasp": "10990000","solanxem":34,"hot": 1,
   "mota": "Điện thoại Galaxy A52s 5G là phiên bản nâng cấp của Galaxy A52 5G, với ngoại hình không đổi nhưng được nâng cấp đáng kể về thông số cấu hình bên trong.",
   "hinh": "https://cdn.tgdd.vn/Products/Images/42/247507/samsung-galaxy-a52s-5g-mint-600x600.jpg", "ngay": "2024-04-07", "idLoai": "1" },
  { "id": 7,"tensp":"Laptop Acer TravelMate","giasp":"5490000","solanxem": 77, "hot": 1,
   "mota": "Laptop Acer TravelMate B3 TMB311 31 C2HB (NX.VNFSV.006) nhắm đến phân khúc laptop học tập - văn phòng, phục vụ cho các nhu cầu cơ bản trên laptop, với kích thước nhỏ gọn và hiệu năng đủ dùng, là sự lựa chọn tốt cho học sinh, sinh viên. Thiết kế nhỏ gọn, tính di động cao. Acer TravelMate B3 có khối lượng máy chỉ 1.4 kg, độ dày 20.99 mm, thiết kế thanh lịch, đẹp mắt với lớp vỏ nhựa màu đen đơn giản kèm logo hãng tinh tế ở góc trái trên mặt lưng, dễ dàng cùng bạn xuất hiện ở mọi nơi.",
  "hinh": "https://cdn.tgdd.vn/Products/Images/44/265015/Slider/vi-vn-acer-travelmate-b3-tmb311-31-c2hb-nxvnfsv006-thumbvideo.jpg","ngay": "2024-04-07","idLoai": "2" },
  { "id": 8,"tensp": "MacBook Pro 14 M1 Pro","giasp":"42490000","solanxem": 231,"hot": 0,
    "mota": "Apple đã giới thiệu MacBook Pro 14 inch vào tháng 10/2023, mang một diện mạo mới cùng bộ vi xử lý do hãng tự phát triển, không chỉ cho hiệu năng vượt trội mà còn sở hữu màn hình với khả năng hiển thị thực sự ấn tượng, khiến mình mê mẩn khi cầm trên tay trải nghiệm. Sức mạnh hiệu năng đỉnh cao hơn bao giờ hết. MacBook Pro 14 inch mang trong mình bộ vi xử lý M1 Pro được sản xuất bằng tiến trình 5 nm hiện đại, tích hợp 8 lõi CPU với 6 lõi hiệu suất cao và 2 lõi tiết kiệm điện năng, hứa hẹn khả năng xử lý nhanh hơn tới 70% so với CPU của M1, đồng thời giảm điện năng tiêu thụ đáng kể để kéo dài thời lượng pin.",
    "hinh": "https://cdn.tgdd.vn/Products/Images/44/253581/Slider/vi-vn-macbook-pro-14-m1-pro-2021-8-core-cpu-thumbvideo.jpg", "ngay": "2024-04-02", "idLoai": "2" },
  { "id": 9, "tensp": "Laptop HP 15s i3", "giasp": "9990000","solanxem":672,"hot": 1,
  "mota": "Laptop HP 15s fq2662TU i3 (6K795PA) sẽ là sự lựa chọn phù hợp cho học sinh, sinh viên muốn tìm kiếm một chiếc laptop học tập - văn phòng sở hữu cấu hình ổn định, đáp ứng tốt mọi nhu cầu cơ bản cùng một mức giá lý tưởng, dễ dàng tiếp cận. Laptop HP cơ bản được bao bọc bởi lớp vỏ nhựa màu bạc, mang đến vẻ đẹp tối giản nhưng cũng không kém phần thanh lịch, tao nhã. Khối lượng 1.7 kg hỗ trợ bạn bỏ vào balo dễ dàng và mang đến khắp mọi nơi để học tập, làm việc. Các cổng kết nối như USB Type-C, USB A, HDMI, khe đọc thẻ nhớ SD và Jack tai nghe 3.5 mm được trang bị xung quanh laptop cho phép bạn kết nối với các thiết bị ngoại vi khác như loa, chuột, máy chiếu,... nhanh chóng hơn mà không cần đến dây cáp rườm rà.",
 "hinh":"https://cdn.tgdd.vn/Products/Images/44/284190/Slider/vi-vn-hp-15s-fq2662tu-i3-6k795pa-1.jpg", "ngay": "2024-05-01", "idLoai": "2" },
 {"id": 10,"tensp":"Lenovo Ideapad 15IAU7", "giasp": "12690000", "solanxem": 14, "hot": 0,
  "mota": "Laptop Lenovo Ideapad 3 15IAU7 i3 (82RK005LVN) sẽ là một người bạn đồng hành đắc lực cho các bạn học sinh, sinh viên hay dân văn phòng với ngoại hình thanh lịch, hiện đại cùng hiệu năng mạnh mẽ đến từ con chip Intel Gen 12 tân tiến. Laptop Lenovo Ideapad giải quyết tốt mọi tác vụ của một chiếc laptop học tập - văn phòng từ cơ bản đến nâng cao nhờ sự kết hợp của bộ vi xử lý Intel Core i3 1215U cùng card đồ họa Intel UHD Graphics. Vừa chạy file Excel nặng vừa xem phim giải trí đa nhiệm vẫn rất mượt mà nhờ bộ nhớ RAM 8 GB. Không gian lưu trữ rộng rãi nhờ ổ cứng SSD 256 GB có thể lắp thanh khác tối đa 1 TB. Sắc xám đơn giản nhưng không kém phần hiện đại, tao nhã giúp chủ nhân sở hữu nó nổi bật ở khắp mọi nơi. Laptop có bàn phím số giúp bạn dễ dàng nhập liệu hơn. ",
 "hinh": "https://cdn.tgdd.vn/Products/Images/44/287769/Slider/vi-vn-lenovo-ideapad-3-15iau7-i3-82rk005lvn-thumbvideo.jpg", "ngay": "2024-05-01","idLoai": "2" },
 {"id": 11, "tensp": "Asus Vivobook 14X i3","giasp": "12590000","solanxem": 97, "hot": 1,
  "mota": "Nếu bạn là học sinh, sinh viên hay nhân viên văn phòng thì không nên bỏ qua chiếc laptop Asus Vivobook 14X  A1403ZA i3 (LY143W) - một phiên bản laptop học tập - văn phòng của nhà Asus đáp ứng tốt các tác vụ thiết yếu hằng ngày nhờ sở hữu con chip Intel Gen 12 mạnh mẽ. Sự xuất hiện của bộ vi xử lý Intel Core i3 1220P đã giúp chiếc laptop Asus giải quyết hoàn hảo mọi tác vụ học tập, làm việc hằng ngày, kèm theo đó là card Intel UHD Graphics thỏa mãn đam mê sáng tạo của người dùng với các công việc chỉnh ảnh, thiết kế cơ bản. RAM 8 GB mang đến khả năng đa nhiệm mượt mà cùng lúc nhiều cửa sổ trình duyệt khác nhau, đồng thời tăng tốc độ đọc ghi nhanh hơn đáng kể so với thế hệ tiền nhiệm nhờ ổ cứng SSD 512 GB.",
 "hinh": "https://cdn.tgdd.vn/Products/Images/44/285770/Slider/vi-vn-asus-vivobook-14x-a1403za-i3-ly143w-1.jpg", "ngay": "2024-05-02","idLoai": "2"},
 { "id": 12, "tensp": "MSI Modern 14 i3","giasp": "12190000","solanxem": 189,"hot": 1,
  "mota": "Laptop MSI Modern 14 B11MOU i3 (1027VN) là phiên bản laptop phổ thông được nhà MSI cho ra mắt với sứ mệnh phục vụ tốt mọi tác vụ thiết yếu cơ bản hằng ngày của người dùng khi sở hữu cấu hình ổn định đến từ con chip Intel Gen 11 cùng ngoại hình trang nhã, thời thượng và mang tính di động cao. Thu hút mọi ánh nhìn với lối thiết kế sang trọng. Lớp vỏ kim loại bền chắc có gam màu xám chủ đạo đã toát lên vẻ sang trọng và thời thượng cho laptop MSI Modern, giúp cho chủ nhân sở hữu nó nổi bật hơn hẳn dù làm việc trong văn phòng hay những quán cafe đông người. Độ linh hoạt được hoàn thiện đáng kể khi máy sở hữu khối lượng chỉ vỏn vẹn 1.3 kg, cho phép bạn di chuyển đến bất cứ mọi không gian bạn muốn mà không lo cồng kềnh, nặng nhọc.",
   "hinh": "https://cdn.tgdd.vn/Products/Images/44/266898/Slider/vi-vn-msi-modern-14-b11mou-i3-1027vn-1.jpg", "ngay": "2024-05-02","idLoai": "2"},
 { "id": 13, "tensp": "Acer Aspire 7 Game","giasp": "14990000", "solanxem": 97,"hot": 1,
  "mota": "Laptop Aspire 7 Gaming A715 42G R4XX R5 (NH.QAYSV.008) sở hữu hiệu năng khoẻ cùng thiết kế mạnh mẽ, là bạn đồng hành lý tưởng trong mọi cuộc hành trình. Laptop AMD Ryzen 5 5500U cùng card rời NVIDIA GeForce GTX 1650 4 GB, mang đến khả năng thiết kế 2D, render video ngắn,... ổn định trên các phần mềm Adobe hay giải trí với các tựa game kịch tính trên thị trường hiện nay một cách mượt mà. Chiếc laptop Acer Aspire còn sở hữu RAM 8 GB và SSD 256 GB đáp ứng tốt nhu cầu đa nhiệm, hỗ trợ bạn thao tác mọi việc nhanh chóng và hiệu quả hơn. Phiên bản laptop này với khối lượng 2.1 kg và dày 22.9 mm, được chế tác từ chất liệu nhựa bền bỉ, dễ dàng để bạn mang đi khắp mọi nơi.",
 "hinh": "https://cdn.tgdd.vn/Products/Images/44/268775/Slider/vi-vn-acer-aspire-7-gaming-a715-42g-r4xx-r5-nhqaysv008-1.jpg",
 "ngay": "2024-05-03","idLoai": "2"}
 ],
 "loaisp": [
      { "id": 1,"tenLoai": "Điện thoại di động", "soSP": 190 },
      { "id": 2, "tenLoai": "Laptop","soSP": 178},
      { "id": 3, "tenLoai": "Đồng hồ đeo tay", "soSP": 143},
      { "id": 4, "tenLoai": "Gia dụng","soSP": 781},
      { "id": 5, "tenLoai": "Đồ điện", "soSP": 351 }
 ],
 "profile": { "name": "typicode" }
}

Sử dụng http service

Http là service quan trọng có sẵn trong Angular , giúp request đến server ở xa.

1. Nhúng http module vào project

Mở file: app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
  ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

2. Tạo request đến server lấy data

Trong component: tạo đối tượng HttpClient (biến h) , sau đó dùng hàm get/post/put/delete để request đến server, cuối cùng dùng hàm subcribe đề đón response trả về (biến res )

//danhsachsanpham.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({selector: 'app-danhsachsanpham',
  templateUrl: './danhsachsanpham.component.html',
  styleUrls: ['./danhsachsanpham.component.css']
})
export class DanhsachsanphamComponent {
  listSP:any;
  constructor( private h: HttpClient ){
    this.h.get("http://localhost:3000/sanpham").subscribe(
      res => { this.listSP= res; console.log(res); }
    )
  }
} //export class

<!-- danhsachsanpham.component.html-->
<p *ngFor="let sp of listSP" > {{sp.tensp}} </p>

3. Tạo request đến server lấy data và header

Khi tạo request, nếu có tham số ,{observe: ‘response’} thì response từ server về sẽ nhiều thông tin hơn: body, header , ok …

 this.h.get("http://localhost:3000/sanpham",
            {observe: 'response'}
 ).subscribe(
      res => { 
        console.log("ok=", res.ok);
        console.log("body=", res.body);
        console.log("res=", res);
        console.log("Content-Type=", res.headers.get('Content-Type'));
        this.listSP= res.body; 
      }
 )

Sử dụng Interface trong Angular

Interface là nơi khai báo các cấu trúc dữ liệu phức tạp để dùng trong project.

1. Tạo interface

Chạy lệnh : ng g i ISanpham để tạo interface ISanpham

Chạy lệnh : ng g i ILoaisp để tạo interface ILoaisp

2. Định nghĩa cấu trúc dữ liệu trong inerface

Mở file app/iloaisp.ts

export interface ILoaisp {
    id:number;
    tenLoai:string;
    soSP:number;
}

Mở file app/isanpham.ts

export interface ISanpham {
    id:number;
    tensp:string;
    giasp:number;
    solanxem:number;
    hot:number;
    mota:string;
    hinh:string;
    ngay:string;
    idLoai:number;
}

3. Sử dụng interface

Component nào muốn tạo các biến có cấu trúc theo interface đã tạo thì import interface vào rồi khai báo các biến (sp1, sp2, listsp)

//chitietsanpham.component.ts
import { Component } from '@angular/core';
import { ISanpham } from '../isanpham';
@Component({ selector: 'app-chitietsanpham',
  templateUrl: './chitietsanpham.component.html',
  styleUrls: ['./chitietsanpham.component.css']
})
export class ChitietsanphamComponent {
  sp1 = <ISanpham>{};
  sp2: ISanpham = {
    id:1, tensp:"Iphone 14", giasp:32000000, solanxem:420, 
    hot:1, mota:"", hinh:"", ngay:"", idLoai:1
  }
  listsp:ISanpham[] = [
    {id:1, tensp:"AA", giasp:11, solanxem:1, hot:1, mota:"", hinh:"", ngay:"", idLoai:1},
    {id:2, tensp:"BB", giasp:22, solanxem:1, hot:0, mota:"", hinh:"", ngay:"", idLoai:1},
    {id:3, tensp:"CC", giasp:33, solanxem:1, hot:1, mota:"", hinh:"", ngay:"", idLoai:1}
  ];
  ngOnInit(): void {
    this.sp1.tensp="Samsung Galaxy S8";
    console.log("sp1:", this.sp1);
    console.log("sp2:", this.sp2);
  } //ngOnInit
}//export class

Lấy tham số từ url vào component để dùng

Một số route có tham số, giúp xử lý linh động hơn Ví dụ: http://localhost://3000/sanpham/1

//app-routing.module.ts
const routes: Routes = [
  { path:'', component:HomeComponent},
  { path:'sanpham/:id', component:ChitietsanphamComponent},
];

Vậy trong component, làm sao để lấy tham số? Sử dụng activeroute như ví dụ sau

//chitietsanpham.component.ts
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({ selector: 'app-chitietsanpham',
  templateUrl: './chitietsanpham.component.html',
  styleUrls: ['./chitietsanpham.component.css']
})
export class ChitietsanphamComponent {
  constructor( private route:ActivatedRoute ){ }
  idSP:number=0;
  ngOnInit(): void {
    this.idSP = Number( this.route.snapshot.params['id'] );    
    console.log("id = " , this.idSP)
  } //ngOnInit
}//export class

Tạo và sử dụng service mới của bạn

Service được tạo ra để code các function dùng trong các component. Service tương tự model trong mô hình MVC

1. Tạo service

Chạy lệnh: ng g s duLieu để tạo sercive có tên là dữ liệu (đặt tên tùy ý). Tên file là app/du-lieu.service.ts

2. Định nghĩa hàm trong service

Mở file app/du-lieu.service.ts , định nghĩa hàm laySP

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({  providedIn: 'root' })
export class DuLieuService {
  constructor( private h:HttpClient ) { }
  laySP(id:number=0){
    return this.h.get(`http://localhost:3000/sanpham/${id}`);
  }
  //...
}

3. Sử dụng service

Component nào muốn sử dụng các hàm trong service thì nhúng service vào

//chitietsanpham.component.ts
import { Component } from '@angular/core';
import { DuLieuService } from '../du-lieu.service';
import { ActivatedRoute } from '@angular/router';
@Component({ selector: 'app-chitietsanpham',
  templateUrl: './chitietsanpham.component.html',
  styleUrls: ['./chitietsanpham.component.css']
})
export class ChitietsanphamComponent {
  constructor( private d:DuLieuService , private route:ActivatedRoute ){ }
  sp:any;
  ngOnInit(): void {
    var id = Number(this.route.snapshot.params['id']);    
    this.d.laySP(id).subscribe ( 
      res => { this.sp= res; console.log(res);}
    )
  } //ngOnInit
}//export class

Hiện dữ liệu mới lấy được ra view

<!-- sanpham-list.compoment.html-->
<h3>TênSP:  {{sp.tensp }} </h3>
<h3>Giá SP:  {{sp.giasp}} </h3>
<h3>Ngày :  {{sp.ngay|date:'dd/MM/Y'}} </h3>

Đôi điều về Angular – P2 cung cấp cơ bản cho bạn các kiến thức cần thiết để sử dụng trong khi lập trình Angular . Các bài sau cúng ta sẽ vận dụng chúng để thực hiện trong project nhé . Mời xem các link sau để có thêm thông tin: Đôi điều về Angular – P1 hoặc tài liệu chính thức của Angular: https://angular.io/start

Sau đây là các bài trong seris thực tập Angular bạn cần thực hiện tuần tự từ trên xuống để có project nhé: