راه اندازی HttpClient برای دریافت اطلاعات از api برای انگولار
در این مقاله قصد راه اندازی HttpClient در یک سرویس برای انگولار 8 به بعد جهت برقراری ارتباط با api ها دارم.برای این کار اول از همه یه پروژه انگولار ایجاد می کنیم بعد میایم مرحله به مرحله کارهای خودمون جلو می بریم.
قدم 1- افزودن ماژول HttpClient
توی قدم اول app.module.ts توی این مسیر برید src/app/app.module.ts و این تغییرات اضافه کنید:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
قدم 2- یه سرویس جدید بسازید
ترمینال باز کنید و این دستور ایجاد سرویس توش بنویسید.
ng generate service backend
قدم 3- Importing and Injecting HttpClient
بعد از ساخت سرویس HttpClient بهش import کنید و بعد در constructor این سرویس HttpClient inject یا تزریق کنید. و در ادامه متد get برای گرفتن اطلاعات از rest api داخل این سرویس اضافه کنید:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class BackendService {
constructor(private httpClient: HttpClient) { }
public get(){
return this.httpClient.get("آدرس سرویس api");
}
}
قدم 4- ساخت یک component
ng generate component home
برای صدا زدن HttpClient باید یه component داشته باشیم تا اطلاعات ازش بگیریم و به کاربر خودمون نشون بدیم،به کمک این دستور توی ترمینال یک component به نام home می سازیم.
قدم 5- افزودن سرویس HttpClient و دریافت داده
حالا به فایل src/app/home/home.component.ts میریم و این اطلاعات بهش اضافه می کنیم.
import { Component, OnInit } from '@angular/core';
import { BackendService } from '../backend.service';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
data= [];
constructor(private backendService: BackendService) { }
ngOnInit() {
this.backendService.get().subscribe((ret: any[])=>{
console.log(ret);
this.data = ret;
})
}
}
همینجور که مشاهده می کنید بعد از اضاف کردن سرویس BackendService فایل home.component.ts و inject اون به constructor من اومدم برای دریافت اطلاعات از api داخل ngOnInit ، اطلاعات از سرویس مد نظر با متد get که به صورت observable هم هست subscribe کردم و اون داخل متغیری به نام data که توی همین component تعریفش کردم، مقدار دهی کردم.
من قبلا توی این مقاله درباره قرار دادن اطلاعات باید ها و نباید های نوشتن در Constructor و ngOnInit در انگولار صحبت کردم.
قدم 6- نمایش اطلاعات
حالا نوبت به نمایش اطلاعات رسیده از api برای کاربر هستش، میرم به سراغ فایل src/app/home/home.component.html و به کمک ngFor داخل یه تگ li اونها نمایش می دم:
<div>
<ul>
<li *ngFor="let item of data">
{{item.name}}
</li>
</ul>
</div>
تو اینجا فرض بر این گذاشتم که name یکی از property ها object item هستش.
به انتهای این مقاله آموزشی رسیدم سعی کردم به صورت مختصر و قدم به قدم کار کردن با دستور HttpClient برای گرفتن اطلاعات از api service خدمتتون مطرح کنم.
ممنون از توجهتون :)
مطلبی دیگر از این انتشارات
8 روش استفاده از اپراتور Spread در JavaScript
مطلبی دیگر از این انتشارات
10 ترفند کمکی برای کوتاه کردن کدهای جاوا اسکریپتی قسمت دوم
مطلبی دیگر از این انتشارات
تفاوت Arrow فانکشن ها و توابع معمولی در جاوااسکریپت - بخش دوم