VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

Học Node.js

Giới thiệu Angular Cài đặt môi trường Angular7 Tạo dự án đầu tiên trong Angular7 Hướng dẫn lập trình Angular7 với trình soạn thảo Visual Studio Code Angular7 - Components Angular7 - Modules Angular7 - Data Binding Angular7 - Event Binding Angular7 - Templates Angular7 - Directives Angular7 - Pipes Angular7 - Routing Angular7 - Services Angular7 - Http Client Angular7 - CLI Prompts Angular7 - Forms

HttpClient trong Angular 7


Service trong Angular 7
Các lệnh Angular CLI

Nội dung chính

  • HttpClient trong Angular
  • Ví dụ HttpClient trong Angular

HttpClient trong Angular

HttpClient sẽ giúp chúng ta tìm nạp dữ liệu từ các nguồn bên ngoài, v.v. Chúng ta cần module mô-đun http để sử dụng các service của http.



Ví dụ HttpClient trong Angular

Tiếp tục sử dụng project trong các bài trước.

Để bắt đầu sử dụng http service, chúng ta cần import mô-đun HttpClientModule trong app.module.ts như sau:


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule, RoutingComponent } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { AddTextDirective } from './add-text.directive';
import { SqrtPipe, SquarePipe } from './app.sqrt';
import { HomeComponent } from './home/home.component';
import { ContactusComponent } from './contactus/contactus.component';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    NewCmpComponent,
    AddTextDirective,
    SqrtPipe,
    SquarePipe,
    HomeComponent,
    ContactusComponent,
    RoutingComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [MyserviceService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Chúng ta sẽ tìm nạp dữ liệu từ máy chủ bằng mô-đun httpclient. Chúng ta sẽ sử dụng service tạo ở bài trước để thực hiện đọc dữ liệu từ API lấy thông tin user http://jsonplaceholder.typicode.com/users.

myservice.service.ts


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

@Injectable({
  providedIn: 'root'
})
export class MyserviceService {
  private finaldata = [];
  private apiurl = "http://jsonplaceholder.typicode.com/users";
  constructor(private httpClient: HttpClient) { }
  getData() {
     return this.httpClient.get(this.apiurl);
  }
}

Phương thức getData() trả về dữ liệu được tìm nạp cho url đã cho. Phương thức httpClient.get() trả về một Observable bất đồng bộ.

Phương thức getData được gọi từ app.component.ts như sau:

app.component.ts


import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular 7 Project!'; 
  public persondata = [];
  constructor(private myservice: MyserviceService) {}
  ngOnInit() {
     this.myservice.getData().subscribe((data) => {
        Object.keys(data).forEach(key => {
          this.persondata.push(data[key]);
        });
        console.log(this.persondata);
     });
  }
}

Chúng ta gọi phương thức getData() để trả về một kiểu dữ liệu Observable. Phương thức subscribe() được sử dụng để đăng ký - nghĩa hệ thống sẽ lắng nghe khi nào có dữ liệu trả về Observable tương ứng thì hàm này sẽ được gọi.

Ký hiệu => là biểu thức lambda trong TypeScript. Cú pháp chúng ta sử dụng trong lập trình Angular là TypeScript. Sau đó nó được convert thành JavaScript.

Tiếp theo, hiển thị data lên trình duyệt bằng cách cập nhật file view như sau:

app.component.html


<h3>Users Data</h3>
<ul>
   <li *ngFor="let item of persondata; let i = index">
      {{item.name}}
   </li>
</ul>

Kết quả:

HttpClient trong Angular7

Nhấn phím F12, bạn có thể check console log trong trình duyệt Chrome:

HttpClient trong Angular7
Service trong Angular 7
Các lệnh Angular CLI

Recent Updates

HttpClient trong Angular 7Service trong Angular7Routing trong Angular 7Pipe trong Angular 7Directive trong Angular 7Template trong Angular 7Event Binding trong Angular 7Module trong Angular 7Data Binding trong Angular 7Component trong Angular 7Hướng dẫn lập trình Angular 7 với trình soạn thảo Visual Studio CodeTạo dự án Angular đầu tiên

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn

Danh sách bài học

Học java
Học servlet
Học jsp
Học Hibernate
Học Struts2
Học Spring
Học SQL

Câu hỏi phỏng vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

About VietTuts.Vn

Hệ thống bài học trên VietTuts.Vn bao gồm các bài lý thuyết và thực hành về các công nghệ java và công nghệ web. Các bài lý thuyết trên hệ thống VietTuts.Vn được tham khảo và tổng hợp từ các trang http://javatpoint.com, http://www.tutorialspoint.com, http://docs.oracle.com/en …

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | VietTuts.Vn team | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml