Angular2 +PHP: создание сайта своими руками Сервис под PHP

Продолжая самоучитель по быстрому созданию сайта в связке ангуляра и PHP создадим «место», где должен потом наш маленький серверный php код отрабатывать. Репозиторий примера BlogDemo.

Создание структуры данных

Представим, что у нас уже есть серверная часть — и по адресу запроса к ней — разместим заплатку данных. Соответствующую структуре данных, которые мы в клиенте опишем. В дальнейшем эту заплатку мы и заменим кодом php.

api/data.json

{
	"data" : [
		{
			"id" : 1,
			"date" : "2016-08-30",
			"title" : "Blog Entry 1",
			"intro" : "Blog Intro for Entry Number 1"
		},
		{
			"id" : 2,
			"date" : "2016-08-31",
			"title" : "Blog Entry 2",
			"intro" : "Blog Intro for Entry Number 2"
		},
		{
			"id" : 3,
			"date" : "2016-08-31",
			"title" : "Blog Entry 3",
			"intro" : "Blog Intro for Entry Number 3"
		}
	],
	"total" : 100,
	"code" : 200
}

app.data.ts

export class Record {
	id:string;
	date:string;
	title:string;
	intro:string;
}
export class DataResponse {
	data:Record[];
	total:number;
	code:number;
}

Запрос данных через Ajax, Promise и Angular2

Простейший вариант запроса — прямой запрос к адресу (в дальнейшем мы его расширим, впишем поиск и фильтры над запросами также в него)

app.service.ts

 
import {Injectable, Inject} from '@angular/core';
import {Http} from '@angular/http';
 
 
import {Subject} from 'rxjs/Subject';
import 'rxjs/add/operator/toPromise';
 
@Injectable()
class AppService {
 
	constructor(private http:Http) {
 
	}
 
	public get(url:string) {
		return this.http.get(url).toPromise();
	}
 
	public handleError(error:any) {
		console.error('An error occurred', error);
		return Promise.reject(error.message || error);
	}
}
 
export {AppService};

Работа с данными из запроса в компоненте

Соединим данные с выводом — и все, магия прошла через промисы и все отработало, как будто у нас настоящий серверный ответ)

app.component.ts

import {Component} from '@angular/core';
 
import {HTTP_PROVIDERS} from '@angular/http';
import {AppService} from './app.service';
import {DataResponse} from './app.data';
 
@Component({
	selector: 'my-app',
	template: `<h1>My First Angular 2 App</h1>
			<div *ngIf="result.data">
				<div *ngFor="let entry of result.data">
					<h2>{{entry.title}}</h2>
					<p>{{entry.intro}}</p>					
				</div>
			</div>
 
	`,
	providers: [AppService, HTTP_PROVIDERS],
})
class AppComponent {
	public result : DataResponse;
	constructor(private appService:AppService) {
		this.result = new DataResponse();
		this.appService.get('api/data.json')
			.then(response => this.setResponse(response.json() as DataResponse))
			.catch(this.appService.handleError);
	}
 
	public setResponse(result:DataResponse) {
		this.result = result;
	}
}
 
export {AppComponent};