Від автора: основна операція CRUD, яку ми розглянемо в цій главі — читання даних з веб-сервісу. Розберемося, як використовується для цієї операції CRUD Angular 2.
Приклад
У цьому прикладі ми визначимо джерело даних, це буде простий json-файл товарів. Потім ми визначимо службу, яка буде використовуватися для читання даних з json-файлу. Потім, ми використовуємо цю службу в нашому основному файлі app.component.ts.
Крок 1 — Спочатку давайте в Visual Studio code визначимо файл product.json.
У файлі products.json введіть наступний текст. Це дані, які будуть взяті з додатка Angular JS.
[{
“ProductID”: 1,
“ProductName”: “ProductA”
},
{
“ProductID”: 2,
“ProductName”: “ProductB”
}]
Крок 2 — Визначте інтерфейс, який буде задавати клас для зберігання інформації з файлу products.json. Створіть файл з ім’ям products.ts.
Крок 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.
Крок 6 — Вставте цей файл наступний код.
import { Injectable } from ‘@angular/core’;
import { Http Response } from ‘@angular/http’;
import { Вами } from ‘rxjs/Вами’;
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(): Вами {
return this._http.get(this._producturl)
.map((response: Response) => response.json())
.do(data => console.log(JSON.stringify(data)));
}
}
Слід відзначити наступні моменти.
Імпорт {Http Response} оператора ‘@angular/http’ використовується, щоб функція http могла використовуватися для отримання даних з файлу products.json.
Наступні оператори використовуються, щоб задіяти фреймворк Reactive, через який можна створити змінну Вами. Фреймворк Вами використовується для виявлення будь-яких змін в HTTP відповіді, які потім можуть бути відправлені назад в основну програму.
import { Вами } from ‘rxjs/Вами’;
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 { Вами } from ‘rxjs/Вами’;
import ‘rxjs/add/operator/map’;
@Component ({
selector: ‘my-app’,
template: ‘
‘,
providers: [ProductService]
})
export class AppComponent {
iproducts: IProduct[];
constructor(private _product: ProductService) {
}
ngOnInit() : void {
this._product.getproducts()
.subscribe(iproducts => this.iproducts = iproducts);
}
}
Основне в цьому коді — опція subscribe , яка використовується для прослуховування функції Вами getproducts() і отримання даних із джерела даних. Тепер збережіть всі коди і запустіть додаток, використовуючи npm. Ви повинні побачити наступне.
В консолі ми побачимо, що дані витягуються з файлу products.json.
