Giống như Vue và React, Angular vẫn là một trong những framework hoặc thư viện JavaScript phổ biến nhất. Với Angular, việc viết mã có thể tái sử dụng, dễ bảo trì, dễ đọc trở nên dễ dàng hơn;

Trong bài viết này, bạn sẽ tìm hiểu cách lấy dữ liệu JSON từ API và hiển thị dưới dạng HTML trong thời gian nhanh chóng mà không phải viết nhiều mã

Bạn sẽ hiển thị dữ liệu JSON trong HTML bằng cách thực hiện như sau

• Tạo một ứng dụng từ đầu bằng cách sử dụng Angular
• Sử dụng HTTPClient
• Tạo ứng dụng thư viện hình ảnh để tìm nạp và hiển thị hình ảnh từ API
• Tạo kiểu cho ứng dụng bằng Cascading Style Sheets

Ở cuối bài viết này, bạn sẽ có một trang HTML trông như thế này

Bạn còn nhiều việc phải làm để có một trang HTML tương tự như trang trên, chúng ta hãy tìm hiểu sâu về mọi thứ

Mục lục

#1 Cài đặt CLI góc

Trước khi bạn có thể tạo Dự án góc, bạn cần cài đặt CLI góc. Để cài đặt Angular, bạn sẽ cần NodeJS và NPM có thể tải xuống và cài đặt

Khi bạn có NPM trên máy tính của mình, bạn có thể tiến hành cài đặt Angular CLI bằng cách nhập nội dung sau vào thiết bị đầu cuối

npm install -g @angular/cli

Thao tác này sẽ tải xuống và cài đặt Angular CLI mới nhất cho hệ thống của bạn. Sau khi cài đặt, bạn có thể kiểm tra phiên bản của mình bằng cách nhập

ng version

Điều này sẽ xác nhận nếu nó được cài đặt trên toàn cầu trên hệ thống của bạn và hiển thị phiên bản đã cài đặt (phiên bản mới nhất)

#2 Tạo một dự án góc sử dụng CLI góc

Giờ đây, Angular-CLI đã được cài đặt, bạn có thể tạo dự án bằng cách nhập

ng new image-gallery

Lệnh này tạo một ứng dụng có tên là 'image-gallery' trong thư mục làm việc hiện tại của bạn;

> Would you like to install Angular routing?
> Which stylesheet format would you like to use?

Trả lời không với Định tuyến góc và chọn CSS thông thường làm định dạng biểu định kiểu

Bây giờ ứng dụng sẽ được tạo;

cd image-gallery
ng serve

Bạn sẽ thấy một cái gì đó như thế này

URL cho ứng dụng có thể khác nhau trên máy của bạn, vì vậy hãy mở URL được cung cấp trên trình duyệt của bạn và bạn sẽ thấy trang chủ mặc định của Angular cho CLI

#3 Thiết lập HTTPClient

Có một số cách để tương tác hoặc lấy dữ liệu từ API, bao gồm sử dụng đối tượng yêu cầu

ng version

4 khét tiếng hoặc sử dụng phiên bản sáng bóng mới hơn có tên là API tìm nạp

May mắn thay, Angular cung cấp một mô-đun

ng version

5 cung cấp một trình bao bọc xung quanh

ng version

4 cho chúng tôi. Bạn có thể sử dụng mô-đun

ng version

5 để thực hiện tất cả các yêu cầu động từ HTTP như POST, GET, PUT, DELETE, v.v.  

Đã đến lúc viết một số mã. mở trình soạn thảo văn bản yêu thích của bạn;

Trước khi bạn có thể sử dụng mô-đun

ng version

8, bạn cần nhập nó trên toàn cầu vào mô-đun ứng dụng chính. Mở

ng version

9 và thêm câu lệnh nhập và đưa nó vào phần nhập

Đây là một ví dụ về việc làm như vậy dưới đây

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from "@angular/common/http";

import { AppComponent } from './app.component';

@NgModule({
 declarations: [
   AppComponent
 ],
 imports: [
   BrowserModule,
   HttpClientModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

Bây giờ bạn có thể bắt đầu sử dụng mô-đun

ng version

8 trong dự án của mình

#4 Tìm nạp dữ liệu từ API

Trong hướng dẫn này, bạn sẽ tìm nạp dữ liệu từ https. //jsonplaceholder. đánh máy. com/photos?albumId=1; . Bạn có thể tìm hiểu thêm về JSON tại đây

Đây là một ví dụ về tải trọng JSON mà bạn sẽ nhận được

[
  {
    "albumId": 1,
    "id": 1,
    "title": "accusamus beatae ad facilis cum similique qui sunt",
    "url": "https://via.placeholder.com/600/92c952",
    "thumbnailUrl": "https://via.placeholder.com/150/92c952"
  },
  {
    "albumId": 1,
    "id": 2,
    "title": "reprehenderit est deserunt velit ipsam",
    "url": "https://via.placeholder.com/600/771796",
    "thumbnailUrl": "https://via.placeholder.com/150/771796"
  },
 .
 .
//Truncated for brevity
]

Bạn nên mở AppComponent

ng new image-gallery

1 và nhập HttpClient và khởi tạo nó trong hàm tạo ứng dụng

Bạn có thể làm điều này với mã dưới đây

Tiếp theo, bạn có thể tạo một phương thức có tên

ng new image-gallery

2 để lấy dữ liệu từ URL API

import { Component } from '@angular/core';
import { HttpClient } from "@angular/common/http";

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})

export class AppComponent {
 title = 'image-gallery';
 private data:any = []
 constructor(private http: HttpClient) {
   
 }

 getData(){
   const url ='https://jsonplaceholder.typicode.com/photos?albumId=1'
   this.http.get(url).subscribe((res)=>{
     this.data = res
     console.log(this.data)
   })
 }
}

ng new image-gallery

3 tạo một mảng trống nơi các hình ảnh nhận được từ API sẽ được lưu trữ

Trong phương thức

ng new image-gallery

2, bạn đã chuyển URL vào phương thức

ng new image-gallery

5, phương thức này sẽ gửi yêu cầu GET tới URL

Phương thức

ng new image-gallery

6 lắng nghe và đợi phản hồi, sau đó dữ liệu phản hồi, res, khi có sẵn được lưu trong mảng dữ liệu đã tạo. Bạn cũng có thể đăng nhập dữ liệu trong Bảng điều khiển dành cho nhà phát triển để xác nhận xem có dữ liệu hay không

Một cách để tìm nạp dữ liệu từ API là tạo một nút gọi hàm hàm getData. Để thực hiện việc này, hãy mở

ng new image-gallery

7 và thay thế mọi thứ trong đó bằng mã bên dưới

 

   Welcome!
 
 Fetch Data

Bây giờ bạn sẽ có một trang trống với Lời chào mừng. Tiêu đề và nút “Tìm nạp dữ liệu”. Khi nhấp vào nút, bạn sẽ thấy năm mươi hình ảnh từ API đã đăng nhập trong bảng điều khiển

Tuyệt vời

Bây giờ đã xác nhận rằng chức năng

ng new image-gallery

2 hoạt động, đã đến lúc hiển thị các hình ảnh được tìm nạp trong HTML. Mở

ng new image-gallery

9 và thêm đoạn mã bên dưới

.
Fetch Data

{{ image.title }}