ANGULAR 4X
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Http service trong Angular 4

Http Service giúp chúng ta thực hiện các phương thức GET, POST với dữ liệu thông qua giao thức HTTP. Để sử dụng Http Service, chúng ta cần import http module . Hãy cùng đi vào một vài ví dụ cụ thể để hiểu hơn về Http Service nhé.

Các bước sử dụng Http Service

Để sử dụng http service, trước tiên ta cần thực hiện 2 bước:

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Bước 1: Import HttpClientModule vào module

Bước 2: Khai báo và sử dụng HttpClient trong component

Ví dụ sử dụng http service

Trong ví dụ này, chúng ta sẽ lấy dữ liệu từ trang http://jsonplaceholder.typicode.com/users - một trang mockup dữ liệu cho chúng ta test, sau đó log ra console và hiển thị lên giao diện.

Import http service

app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router'
// Import http module
import {HttpClientModule} from '@angular/common/http';

import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { FormsModule } from '@angular/forms';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
  declarations: [
    AppComponent,
    NewCmpComponent,
    ChangeTextDirective,
    SqrtPipe
  ],
  imports: [
    BrowserModule,
    FormsModule,
    // Khai báo http module
    HttpClientModule,
    RouterModule.forRoot([
      {
        path: 'new-cmp',
        component: NewCmpComponent
      }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Sử dụng http service trong app component

Sửa nội dung của file app.component.ts như sau

app.component.ts
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 {
    results;
    constructor(private http: HttpClient) { }
    ngOnInit() {
        this.http.get("http://jsonplaceholder.typicode.com/users").subscribe(data => {
             console.log(data);
            this.results = data;
        });
    }
}

Phương thức this.http.get() tạo ra 1 get request đến địa chỉ http://jsonplaceholder.typicode.com/users. Khi dữ liệu trả về, ta thực hiện xử lý dữ liệu thông qua phương thức subscribe

get và xử lý dữ liệu
 this.http.get("http://jsonplaceholder.typicode.com/users").subscribe(data => {
            console.log(data);
            this.results = data;
        });

Khi thực hiện được request xong thì phương thức subscribe chịu trách nhiệm xử lý tiếp. Ở đây, subscribe sẽ log dữ liệu ra console như hình dưới

Kết quả hiển thị ở console khi gọi service

Hiển thị dữ liệu ra view

Để hiển thị dữ liệu ra view, ta thực hiện 2 bước:

Bước 1: Khai báo  biến để chứa dữ liệu mà http service trả về.

Bước 2: Bind dữ liệu ra view

Ở phần trên, dữ liệu trả về của http service đã được lưu vào biến results. Giờ nhiệm vụ của chúng ta là hiển thị dữ liệu ấy ra.

Cùng nhìn vào dữ liệu của một bản ghi:

chi tiet ban ghi du lieu png

Dữ liệu có id, name, email, phone, username, website address. Address lại có các thuộc tính city, street, suite. Chúng ta sẽ hiển thị dữ liệu này dưới dạng bảng nhé.

Sửa nội dung file app.component.html

app.component.html
<h2>Dữ liệu lấy từ service</h2>
<table>
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>username</th>
            <th>phone</th>
            <th>address</th>
            <th>company</th>
        </tr>
    </thead>

    <tbody>
        <tr *ngFor="let user of results">
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.username}}</td>
            <td>{{user.phone}}</td>
            <td>
                <p>- Street: {{user.address.street}}</p>
                <p>- City: {{user.address.city}}</p>
                <p>- ZipCode: {{user.address.zipcode}}</p>
            </td>
            <td>
                <p>- Name: {{user.company.name}}</p>
                <p>- bs: {{user.company.bs}}</p>
                <p>- catchPhrase: {{user.company.catchPhrase}}</p>
            </td>
        </tr>
    </tbody>
</table>

Ta sử dụng kĩ thuật data binding đã học trong bài trước để bind dữ liệu từ mảng result ra view. Đối với companyaddress có các dữ liệu con bên trong nên ta sẽ hiển thị trên nhiều dòng của cùng một ô.

Chạy chương trình, ta thu được kết quả

Kết quả hiển thị dữ liệu ra view

Nội dung bài học về http service đến đây là hết rồi. Hẹn gặp lại bạn trong bài sau nhé.

Tổng hợp dữ liệu trong bài:

Cùng chuyên mục:

Thiết lập project với Angular 6

Thiết lập project với Angular 6

Ở bài trước, chúng ta đã tìm hiểu cách cài đặt môi trường cũng như…

Cài đặt môi trường cho Angular 6

Cài đặt môi trường cho Angular 6

Ở bài trước, chúng ta đã tìm hiểu vì sao chọn Angular, Angular 6 là…

Giới thiệu Angular 6x

Giới thiệu Angular 6x

Xin giới thiệu với các bạn tổng quan tất cả các bài viết học về…

Ứng dụng single page Angular 4

Ứng dụng single page Angular 4

Trong bài học này, chúng ta sẽ thực hành tạo một ứng dụng single page…

Angular 4 CLI

Angular 4 CLI

Trong bài này, chúng ta cùng tìm hiểu về Angular CLI, cách cài đặt và…

Angular 4 Material

Angular 4 Material

Trong bài này, chúng ta sẽ tìm hiểu về material - các thành phần được…

Animation trong Angular 4

Animation trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về animation trong Angular 4.

Form trong Angular 4

Form trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về form trong Angular 4, 2 cách…

Service trong Angular 4

Service trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về service trong Angular 4

Routing trong Angular 4

Routing trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về routing - cơ chế kiểm soát…

Pipe trong angular 4

Pipe trong angular 4

Trong bài này, chúng ta sẽ tìm hiểu về pipe trong Angular 4.

Directive trong Angular 4

Directive trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về directive trong Angular 4, cách tạo…

Template trong Angular 4

Template trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về template trong Angular 4

Event binding trong Angular 4

Event binding trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về event binding - cơ chế kiểm…

Data binding trong Angular 4

Data binding trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về data binding - cơ chế lấy…

Module trong Angular 4

Module trong Angular 4

Ở bài này, chúng ta sẽ tìm hiểu về module trong Angular 4: cách khai…

Component trong Angular 4

Component trong Angular 4

Trong bài này, chúng ta sẽ tìm hiểu về component - thành phần được sử…

Tạo project Angular 4 đầu tiên

Tạo project Angular 4 đầu tiên

Ở bài này, chúng ta sẽ đi vào tìm hiểu cách tạo project Angular 4.

Angular 4 - Cài đặt môi trường

Angular 4 - Cài đặt môi trường

Trong bài này mình sẽ hướng dẫn các bạn cài đặt một số phần mềm…

Tổng quan về Angular4

Tổng quan về Angular4

Trong bài này, chúng ta sẽ tìm hiểu tổng quan về Angular 4.

Top