Angular 2 - Operaciones CRUD usando HTTP

La operación CRUD básica que veremos en este capítulo es la lectura de datos de un servicio web usando Angular 2.

Ejemplo

En este ejemplo, vamos a definir una fuente de datos que es un simple jsonarchivo de productos. A continuación, vamos a definir un servicio que se utilizará para leer los datos deljsonarchivo. Y luego, usaremos este servicio en nuestro archivo principal app.component.ts.

Step 1 - Primero definamos nuestro archivo product.json en código de Visual Studio.

En el archivo products.json, ingrese el siguiente texto. Estos serán los datos que se tomarán de la aplicación Angular JS.

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

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

Step 2- Definir una interfaz que será la definición de clase para almacenar la información de nuestro archivo products.json. Cree un archivo llamado products.ts.

Step 3 - Inserte el siguiente código en el archivo.

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

La interfaz anterior tiene la definición de ProductID y ProductName como propiedades para la interfaz.

Step 4 - En el archivo app.module.ts incluya el siguiente código -

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 - Definir un archivo products.service.ts en código de Visual Studio

Step 6 - Inserte el siguiente código en el archivo.

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

Es necesario señalar los siguientes puntos sobre el programa anterior.

La instrucción import {Http, Response} de '@ angular / http' se usa para garantizar que la función http se pueda usar para obtener los datos del archivo products.json.
Las siguientes declaraciones se utilizan para hacer uso del marco reactivo que se puede utilizar para crear una variable observable. El marco Observable se utiliza para detectar cualquier cambio en la respuesta http que luego se puede enviar de vuelta a la aplicación principal.

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

La declaración private _producturl = 'app / products.json' en la clase se usa para especificar la ubicación de nuestra fuente de datos. También puede especificar la ubicación del servicio web si es necesario.
A continuación, definimos una variable del tipo Http que se utilizará para obtener la respuesta de la fuente de datos.
Una vez que obtenemos los datos de la fuente de datos, usamos el comando JSON.stringify (data) para enviar los datos a la consola en el navegador.

Step 7 - Ahora en el archivo app.component.ts, coloque el siguiente código.

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

Aquí, lo principal en el código es la opción de suscripción que se usa para escuchar la función Observable getproducts () para escuchar los datos de la fuente de datos.

Ahora guarde todos los códigos y ejecute la aplicación usando npm. Vaya al navegador, veremos el siguiente resultado.

En la consola, veremos los datos que se recuperan del archivo products.json.

↰ Previous page Next page ↱