آموزش عملیات CRUD با استفاده از HTTP در انگولار ۲

آموزش عملیات CRUD با استفاده از HTTP در انگولار ۲

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش عملیات CRUD با استفاده از HTTP در انگولار ۲ خواهیم پرداخت.

عملیات اصلی CRUD که در این درس به آن می پردازیم، خواندن داده های یک سرویس وب با استفاده از Angular 2 است.

مثال

در این مثال، ما قصد داریم یک منبع داده را تعریف کنیم که یک فایل json ساده از محصولات است. در مرحله بعد ، ما قصد داریم سرویسی را تعریف کنیم که برای خواندن داده ها از فایل json استفاده می شود. و بعد ، ما از این سرویس در فایل اصلی app.component.ts خود استفاده می کنیم.

مرحله ۱ – ابتدا فایل product.json خود را در کد ویژوال استودیو تعریف کنیم.

در فایل products.json، متن زیر را وارد کنید. این داده هایی است که از برنامه Angular JS گرفته می شود.

[{
   "ProductID": 1,
   "ProductName": "ProductA"
},

{
   "ProductID": 2,
   "ProductName": "ProductB"
}]

مرحله ۲ – واسطی را تعریف کنید که تعریف کلاس برای ذخیره اطلاعات فایل product.json ما باشد. فایلی به نام products.ts ایجاد کنید.

مرحله ۳ – کد زیر را در فایل وارد کنید.

export interface IProduct {
   ProductID: number;
   ProductName: string;
}

رابط فوق دارای تعریف ProductID و ProductName به عنوان خواص رابط می باشد.

مرحله ۴ – در فایل app.module.ts کد زیر را وارد کنید –

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { HttpModule } from '@angular/http';

@NgModule ({
   imports:      [ BrowserModule,HttpModule],
   declarations: [ AppComponent],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

مرحله ۵ – یک فایل products.service.ts را در کد ویژوال استودیو تعریف کنید

مرحله ۶ – کد زیر را در فایل وارد کنید.

import { Injectable } from '@angular/core';
import { Http , Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import { IProduct } from './product';

@Injectable()
export class ProductService {
   private _producturl='app/products.json';
   constructor(private _http: Http){}
   
   getproducts(): Observable<IProduct[]> {
      return this._http.get(this._producturl)
      .map((response: Response) => <IProduct[]> response.json())
      .do(data => console.log(JSON.stringify(data)));
   }
}

نکات زیر باید در مورد برنامه فوق ذکر شود.

• دستور {Http، Response} از ‘@angular/http’ برای اطمینان از اینکه می توان از تابع http برای دریافت داده ها از فایل products.json  استفاده می شود.
• جملات زیر برای استفاده از چارچوب Reactive استفاده می شود که می تواند برای ایجاد یک متغیر مشاهده پذیر استفاده شود. چارچوب Observable برای تشخیص هرگونه تغییر در پاسخ http استفاده می شود که می تواند به برنامه اصلی ارسال شود.

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';

• عبارت private _producturl = ‘app/products.json’ در کلاس برای تعیین محل منبع داده ما استفاده می شود. همچنین در صورت نیاز می تواند محل سرویس وب را مشخص کند.
• در مرحله بعد، یک متغیر از نوع Http تعریف می کنیم که برای دریافت پاسخ از منبع داده استفاده می شود.
• هنگامی که داده ها را از منبع داده دریافت می کنیم ، سپس از دستور JSON.stringify (data) برای ارسال داده ها به کنسول در مرورگر استفاده می کنیم.

مرحله ۷ – اکنون در فایل app.component.ts کد زیر را قرار دهید.

import { Component } from '@angular/core';
import { IProduct } from './product';
import { ProductService } from './products.service';
import { appService } from './app.service';
import { Http , Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component ({
   selector: 'my-app',
   template: '<div>Hello</div>',
   providers: [ProductService]
})

export   class   AppComponent  {
   iproducts: IProduct[];
   constructor(private _product: ProductService) {
   }
   
   ngOnInit() : void {
      this._product.getproducts()
      .subscribe(iproducts => this.iproducts = iproducts);
   }
}

در اینجا، نکته اصلی در کد گزینه subscribe است که برای گوش دادن به تابع ()Observable getproducts  برای گوش دادن به داده ها از منبع داده استفاده می شود.

اکنون همه کدها را ذخیره کرده و برنامه را با استفاده از npm اجرا کنید. به مرورگر بروید، خروجی زیر را مشاهده می کنیم.

در کنسول مشاهده خواهیم کرد که داده ها از فایل products.json بازیابی می شوند.

منبع.

لیست جلسات قبل آموزش آنگولار ۲

1. آموزش انگولار ۲
2.  مرور کلی آنگولار ۲
3. آموزش محیط انگولار ۲ 
4. آموزش Hello World در انگولار ۲
5. آموزش ماژول ها در انگولار ۲
6. آموزش معماری در انگولار ۲
7. آموزش کامپوننت ها در انگولار ۲
8. آموزش قالب ها در انگولار ۲
9. آموزش دستورالعمل ها در انگولار ۲
10. آموزش متادیتا در انگولار ۲
11. آموزش اتصال داده ها در انگولار ۲