Angular 2 - Operazioni CRUD che utilizzano HTTP

L'operazione CRUD di base che esamineremo in questo capitolo è la lettura dei dati da un servizio web utilizzando Angular 2.

Esempio

In questo esempio, definiremo un'origine dati che è un semplice file jsonfile di prodotti. Successivamente, definiremo un servizio che verrà utilizzato per leggere i dati dal filejsonfile. Successivamente, utilizzeremo questo servizio nel nostro file principale app.component.ts.

Step 1 - Per prima cosa definiamo il nostro file product.json nel codice di Visual Studio.

Nel file products.json, inserisci il testo seguente. Questi saranno i dati che verranno presi dall'applicazione Angular JS.

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

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

Step 2- Definire un'interfaccia che sarà la definizione della classe per memorizzare le informazioni dal nostro file products.json. Crea un file chiamato products.ts.

Step 3 - Inserisci il seguente codice nel file.

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

L'interfaccia precedente ha la definizione per ProductID e ProductName come proprietà per l'interfaccia.

Step 4 - Nel file app.module.ts includere il seguente codice -

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 { }

Step 5 - Definisci un file products.service.ts nel codice di Visual Studio

Step 6 - Inserisci il seguente codice nel file.

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)));
   }
}

I seguenti punti devono essere annotati sul programma di cui sopra.

• L'istruzione import {Http, Response} da '@ angular / http' viene utilizzata per garantire che la funzione http possa essere utilizzata per ottenere i dati dal file products.json.

• Le seguenti affermazioni sono usate per fare uso del framework Reactive che può essere usato per creare una variabile Observable. Il framework Observable viene utilizzato per rilevare eventuali modifiche nella risposta http che possono quindi essere rimandate all'applicazione principale.

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

• L'istruzione private _producturl = 'app / products.json' nella classe viene utilizzata per specificare la posizione della nostra origine dati. Può anche specificare la posizione del servizio web, se necessario.

• Successivamente, definiamo una variabile del tipo Http che verrà utilizzata per ottenere la risposta dall'origine dati.

• Una volta ottenuti i dati dall'origine dati, utilizziamo il comando JSON.stringify (data) per inviare i dati alla console nel browser.

Step 7 - Ora nel file app.component.ts, inserisci il seguente codice.

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);
   }
}

Qui, la cosa principale nel codice è l'opzione di sottoscrizione che viene utilizzata per ascoltare la funzione Observable getproducts () per ascoltare i dati dall'origine dati.

Ora salva tutti i codici ed esegui l'applicazione usando npm. Vai al browser, vedremo il seguente output.

Nella console, vedremo i dati recuperati dal file products.json.