راه اندازی 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 خدمتتون مطرح کنم.
ممنون از توجهتون :)
مطلبی دیگر از این انتشارات
ng-content
مطلبی دیگر از این انتشارات
چگونه از AJAX برای بارگذاری فایل استفاده می کنید ؟
مطلبی دیگر از این انتشارات
|آموزش طراحی سایت|دستورات if .. else در جاوا اسکریپت|