От автора: основная операция CRUD, которую мы рассмотрим в этой главе — чтение данных с веб-сервиса. Разберемся, как используется для этой операции CRUD Angular 2.
Пример
В этом примере мы определим источник данных, это будет простой json-файл товаров. Затем мы определим службу, которая будет использоваться для чтения данных из json-файла. Затем, мы используем эту службу в нашем основном файле app.component.ts.
Шаг 1 — Сначала давайте в Visual Studio code определим файл product.json.
В файле products.json введите следующий текст. Это данные, которые будут взяты из приложения Angular JS.
|
1 2 3 4 5 6 7 8 9 |
[{ "ProductID": 1, "ProductName": "ProductA" }, { "ProductID": 2, "ProductName": "ProductB" }] |
Шаг 2 — Определите интерфейс, который будет задавать класс для хранения информации из файла products.json. Создайте файл с именем products.ts.
Шаг 3 — Вставьте в файл следующий код.
|
1 2 3 4 |
export interface IProduct { ProductID: number; ProductName: string; } |
Вышеупомянутый интерфейс содержит определение для ProductID и ProductName, в качестве свойств интерфейса.
Шаг 4 — Добавьте в файл app.module.ts следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 |
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.
Шаг 6 — Вставьте в этот файл следующий код.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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 ответе, которые затем могут быть отправлены обратно в основное приложение.
|
1 2 3 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
