Angular 2 - Operações CRUD usando HTTP

A operação CRUD básica que examinaremos neste capítulo é a leitura de dados de um serviço da web usando Angular 2.

Exemplo

Neste exemplo, vamos definir uma fonte de dados que é um simples jsonarquivo de produtos. A seguir, vamos definir um serviço que será usado para ler os dados dojsonArquivo. Em seguida, usaremos esse serviço em nosso arquivo app.component.ts principal.

Step 1 - Primeiro, vamos definir nosso arquivo product.json no código do Visual Studio.

No arquivo products.json, insira o seguinte texto. Esses serão os dados que serão retirados do aplicativo Angular JS.

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

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

Step 2- Defina uma interface que será a definição da classe para armazenar as informações de nosso arquivo products.json. Crie um arquivo chamado products.ts.

Step 3 - Insira o seguinte código no arquivo.

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

A interface acima possui a definição para ProductID e ProductName como propriedades da interface.

Step 4 - No arquivo app.module.ts inclua o seguinte 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 - Defina um arquivo products.service.ts no código do Visual Studio

Step 6 - Insira o seguinte código no arquivo.

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

Os seguintes pontos devem ser observados sobre o programa acima.

• A importação {Http, Response} da instrução '@ angular / http' é usada para garantir que a função http possa ser usada para obter os dados do arquivo products.json.

• As instruções a seguir são usadas para fazer uso da estrutura reativa, que pode ser usada para criar uma variável observável. A estrutura Observable é usada para detectar quaisquer alterações na resposta http que podem então ser enviadas de volta para o aplicativo principal.

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

• A instrução private _producturl = 'app / products.json' na classe é usada para especificar a localização de nossa fonte de dados. Ele também pode especificar a localização do serviço da web, se necessário.

• A seguir, definimos uma variável do tipo Http que será usada para obter a resposta da fonte de dados.

• Depois de obter os dados da fonte de dados, usamos o comando JSON.stringify (dados) para enviar os dados para o console no navegador.

Step 7 - Agora, no arquivo app.component.ts, coloque o código a seguir.

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

Aqui, o principal no código é a opção de assinatura, que é usada para ouvir a função getproducts () Observable para ouvir os dados da fonte de dados.

Agora salve todos os códigos e execute o aplicativo usando npm. Vá para o navegador, veremos a seguinte saída.

No console, veremos os dados sendo recuperados do arquivo products.json.