Http Service
giúp chúng tôi 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 nhập mô-đun http. Hãy cùng đi vào một vài ví dụ cụ thể để hiểu rõ hơn về Http Service
nhé
Bài viết này đã được đăng tại freetuts. net , không được sao chép dưới mọi hình thức.
Các bước sử dụng Http Service
Để sử dụng dịch vụ http, trước tiên ta cần thực hiện 2 bước
Bước 1. Nhập
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 HttpClient] { } ngOnInit[] { this.http.get["//jsonplaceholder.typicode.com/users"].subscribe[data => { console.log[data]; this.results = data; }]; } }2 vào mô-đun
Bước 2. Khai báo và sử dụng
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 HttpClient] { } ngOnInit[] { this.http.get["//jsonplaceholder.typicode.com/users"].subscribe[data => { console.log[data]; this.results = data; }]; } }3 trong thành phần
Bài viết này đã được đăng tại [free tuts. bọc lưới]
Ví dụ sử dụng dịch vụ http
Trong ví dụ này, chúng tôi sẽ lấy dữ liệu từ trang - dữ liệu mô phỏng trang để chúng tôi kiểm tra, sau đó đăng nhập vào bảng điều khiển và hiển thị lên giao diện
Nhập dịch vụ http
ứng dụng. mô-đun. 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 dịch vụ http trong thành phần ứng dụng
Edit content of file app. thành phần. ts as after
ứng dụng. thành phần. 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 HttpClient] { } ngOnInit[] { this.http.get["//jsonplaceholder.typicode.com/users"].subscribe[data => { console.log[data]; this.results = data; }]; } }
Phương thức
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 HttpClient] { } ngOnInit[] { this.http.get["//jsonplaceholder.typicode.com/users"].subscribe[data => { console.log[data]; this.results = data; }]; } }4 tạo ra 1 get request to address. Khi dữ liệu được trả về, ta thực hiện xử lý dữ liệu thông qua phương thức
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 HttpClient] { } ngOnInit[] { this.http.get["//jsonplaceholder.typicode.com/users"].subscribe[data => { console.log[data]; this.results = data; }]; } }0
get and handle data
this.http.get["//jsonplaceholder.typicode.com/users"].subscribe[data => { console.log[data]; this.results = data; }];
Khi thực hiện xong yêu cầu thì phương thức
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 HttpClient] { } ngOnInit[] { this.http.get["//jsonplaceholder.typicode.com/users"].subscribe[data => { console.log[data]; this.results = data; }]; } }0 chịu trách nhiệm xử lý tiếp. Tại đây,
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 HttpClient] { } ngOnInit[] { this.http.get["//jsonplaceholder.typicode.com/users"].subscribe[data => { console.log[data]; this.results = data; }]; } }0 sẽ ghi dữ liệu ra bảng điều khiển như hình bên dưới
Show data ra view
Để hiển thị dữ liệu ra chế độ xem, hãy thực hiện 2 bước
Bước 1. Khai báo biến để chứa dữ liệu mà dịch vụ http trả về
Bước 2. Bind data ra view
Ở phần trên, dữ liệu trả về của
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 HttpClient] { } ngOnInit[] { this.http.get["//jsonplaceholder.typicode.com/users"].subscribe[data => { console.log[data]; this.results = data; }]; } }3 đã được lưu vào biến
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 HttpClient] { } ngOnInit[] { this.http.get["//jsonplaceholder.typicode.com/users"].subscribe[data => { console.log[data]; this.results = data; }]; } }4. Nhiệm vụ của chúng ta time is display data it ra
Cùng nhìn vào dữ liệu của một bản ghi
Dữ liệu có id, tên, email, điện thoại, tên người dùng, trang web và địa chỉ. Địa chỉ 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é
Edit nội dung file app. thành phần. html
ứng dụng. thành phần. html
________số 8Ta sử dụng kỹ thuật liên kết dữ liệu kỹ thuật đã học trong bài trước để liên kết dữ liệu từ mảng kết quả ra chế độ xem. Đối với công ty và địa chỉ 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 ô