Http Client در انگولار 7 – آموزش انگولار 7

یکشنبه ۲۷ مرداد ۱۳۹۸
بازدید ۱,۳۹۹ نفر
یعثوب سیفی زاده
(9 امتیاز از 2 رای)
Loading...

تصویر angular7-http-client_6628 Http Client در انگولار 7 - آموزش انگولار 7

Http Client در انگولار 7

HttpClient در انگولار 7 به ما کمک می کند تا داده ها را از یک منبع خارجی دریافت/ارسال کنیم. برای استفاده از HttpClient باید ماژول مربوط به آن را اضافه کنیم. در این بخش نحوه استفاده از قابلیت HttpClient انگولار 7 را بررسی خواهیم کرد.

همانطور که در بالا گفته شد برای استفاده از HttpClient باید ابتدا ماژول مربوط به آن را به فایل app.module.ts اضافه کنید.

مانند نمونه زیر:

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 { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

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 { ChangeTextDirective } from './change-text.directive';

import { SqrtPipe } from './app.sqrt';

import { MyserviceService } from './myservice.service';

import { HttpClientModule } from '@angular/common/http';

@NgModule({

declarations: [

SqrtPipe,

AppComponent,

NewCmpComponent,

ChangeTextDirective,

RoutingComponent

imports: [

BrowserModule,

AppRoutingModule,

HttpClientModule

providers: [MyserviceService],

bootstrap: [AppComponent]

})

export class AppModule { }

در کد فوق ماژول HttpClientModule از @angular/common/http وارد کرده و آن را به بخش imports اضافه کرده ایم. ما برای گرفتن داده ها از سرور، از ماژول httpclient که در بالا اعلان شده است، استفاده می کنیم.

محتوای فایل 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 http: HttpClient) { }
   getData() {
      return this.http.get(this.apiurl);
   }
}

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 http: HttpClient) { }

getData() {

return this.http.get(this.apiurl);

}

در کد فوق ما یک متد به نام getData تعریف کرده ایم که اطلاعات را از URL مشخص شده گرفته و باز میگرداند. این متد در داخل فایل 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) => {
         this.persondata = Array.from(Object.keys(data), k=>data[k]);
         console.log(this.persondata);
      });
   }
}

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) => {

this.persondata = Array.from(Object.keys(data), k=>data[k]);

console.log(this.persondata);

});

}

در کد فوق متد getData که یک خروجی از نوع observable باز میگرداند، فراخوانی شده است. متدی که برای subscribe مشخص شده است، اطلاعات را میگیرد و در کنسول چاپ می کند.

خروجی برنامه در مرورگر:

تصویر angular7-http-client_6628_1 Http Client در انگولار 7 - آموزش انگولار 7

شما می توانید به این اطلاعات در فایل html دسترسی داشته باشید.

مانند نمونه زیر:

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

<h3>Users Data</h3>

<ul>

<li *ngFor="let item of persondata; let i = index"<

</li>

</ul>

خروجی:

تصویر angular7-http-client_6628_2 Http Client در انگولار 7 - آموزش انگولار 7

انگولار 7 - دستورات CLI انگولار 7 - سرویس ها (Services)

دسته ها: آموزش ها - زبان برنامه نویسی Angular

آموزش ساخت وب سایت رمز ارز با پایتون (نمایش نرخ تبادل رمز ارزها)

آموزش مقدماتی فریم ورک ReactJS به صورت فیلم آموزشی

آموزش برنامه نویسی PHP از مقدماتی تا پیشرفته (فیلم آموزشی)

فیلم آموزش JQuery (جی کوئری)

فیلم آموزش AngularJS (انگولار جی اس) به زبان فارسی

فیلم آموزش WPF در سی شارپ به صورت پروژه محور | مدیریت بخشنامه تحت شبکه

آموزش CSS به زبان ساده در قالب فیلم | دوره مقدماتی

آموزش Angular 7

مباحث پایه Angular 7

مثال های کاربردی Angular 7

Http Client در انگولار 7 – آموزش انگولار 7

Http Client در انگولار 7

پروژه سیستم مدیریت شکایات با پایتون و جنگو (Django)

سورس بازی غذا خور تحت شبکه به زبان سی شارپ

آموزش ساخت برنامه دسکتاپ با React و Electron

سورس نرم افزار پیام رسان به زبان سی شارپ

سورس فروشگاه آنلاین با اندروید استودیو (Android Studio) به همراه پنل مدیریت

سورس برنامه ذخیره استوری اینستاگرام با اندروید استودیو (Android Studio)

سورس برنامه معرفی جاذبه های گردشگری با اندروید استودیو به همراه پنل مدیریت

سورس تاکسی آنلاین با اندروید استودیو (Android Studio) به همراه پنل مدیریت