Angular 2 — Операции CRUD с помощью HTTP

Angular 2 — Операции CRUD с помощью HTTP

От автора: основная операция CRUD, которую мы рассмотрим в этой главе — чтение данных с веб-сервиса. Разберемся, как используется для этой операции CRUD Angular 2.

Пример

В этом примере мы определим источник данных, это будет простой json-файл товаров. Затем мы определим службу, которая будет использоваться для чтения данных из json-файла. Затем, мы используем эту службу в нашем основном файле app.component.ts.

Шаг 1 — Сначала давайте в Visual Studio code определим файл product.json.

Angular 2 — Операции CRUD с помощью HTTP

В файле products.json введите следующий текст. Это данные, которые будут взяты из приложения Angular JS.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
[{
  "ProductID": 1,
  "ProductName": "ProductA"
},
 
{
  "ProductID": 2,
  "ProductName": "ProductB"
}]

Шаг 2 — Определите интерфейс, который будет задавать класс для хранения информации из файла products.json. Создайте файл с именем products.ts.

Angular 2 — Операции CRUD с помощью HTTP

Шаг 3 — Вставьте в файл следующий код.

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

Вышеупомянутый интерфейс содержит определение для ProductID и ProductName, в качестве свойств интерфейса.

Шаг 4 — Добавьте в файл 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 { }

Шаг 5 — Определите через Visual Studio code файл products.service.ts.

Angular 2 — Операции CRUD с помощью HTTP

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Шаг 6 — Вставьте в этот файл следующий код.

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. Фреймворк 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) для отправки данных в консоль браузера.

Шаг 7 — Теперь поместите следующий код в файле 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. Вы должны увидеть следующее.

Angular 2 — Операции CRUD с помощью HTTP

В консоли мы увидим, что данные извлекаются из файла products.json.

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree