Angular2: Данные через ajax запрос

После того, как мы сделали загрузчик данных как сервис, нас собственно нужно сделать его загрузчиком — чтобы данные приходили к нам через запрос к json api. В серверной части — можем хоть php, хоть golang — главное чтобы давало данные)

Данные и «начинаем с тестов»

Заплатка для тестирования апи очень удобная в реализации как «статичный» файлик, реально лежащий в api_test/store/items.json

[
	{ "id": 11, "name": "Product 112667777"},
	{ "id": 12, "name": "Product 12266777" },
	{ "id": 13, "name": "Product 13366777" },
	{ "id": 14, "name": "Product 14666777" },
	{ "id": 15, "name": "Product 15666777" },
	{ "id": 16, "name": "Product 16666777" },
	{ "id": 17, "name": "Product 17666777" },
	{ "id": 18, "name": "Product 18666777" },
	{ "id": 19, "name": "Product 19666777" },
	{ "id": 20, "name": "Product 20666777" }
]

Сервис с запросом данных

Собственно к прошлому примеру мы из документации вытянули кусочек с Http

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
 
import 'rxjs/add/operator/toPromise';
 
export class Item {
	id: number;
	name: string;
}
 
@Injectable() class StoreItemsService {
	private items:Item[];
	private apiUrl = 'api_test/store/items.json';  // URL to web api
 
	constructor(private http: Http) { }
 
	load() {
		return this.http.get(this.apiUrl)
			.toPromise()
			.then(response => response.json() as Item[])
			.catch(this.handleError);
	}
 
	private handleError(error: any) {
		console.error('An error occurred', error);
		return Promise.reject(error.message || error);
	}
}
export {StoreItemsService};

Преодоление трудностей

Все было бы прекрасно — но нас ждет маленькая, упущенная из доков деталька — провайдеры нужно определить как минимум на уровне компонента

No provider for Http!
No provider for ConnectionBackend!

Решение проблемы

import {HTTP_PROVIDERS} from '@angular/http';
...
@Component({
	...
	providers: [... HTTP_PROVIDERS]
})

Оставить комментарий

XHTML: Вы можете использовать такие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">