Angular2: Глобальные данные / настройки / переменные в приложение из PHP

Я люблю разные затейливые штуки — например продолжать писать серверную часть скриптов на PHP, а клиентские приложения делать «модно». Суть проблемы иногда маленькая, вроде передать что-то мелкое, но важное из PHP в наше приложение на Angular2.0. Вроде такого. Сходу работать не будет — но дальше в заметке описано как будет и как круто это потом будет для нас)

<script>
var SOME_PARAM = '<?php echo 'blabla'; ?>';
</script>

или даже так

<script>
var SOME_PARAM = '<?php echo json_encode(['name' => 'bla']); ?>';
</script>

Точка входа в наше приложение

Собственно пока без пыха — но идея думаю будет и так понятна (заменим строки потом на переменную или переменные, тк обычно тут явно массивчик больше).

<script>
System.import('app')
	.then(m => m.run('bla'))
	.catch(err => console.error(err));
</script>

main.ts теперь будет с оберткой для функции создания нашего приложения

export function run(name: string) {
	bootstrap(AppComponent, []);
}

Точка инициализации и сервис

Если что-то послали — с этим нужно что-то сделать. В общем случае в ангуляре для повторно используемых данных мы запускаем сервисы и тут не будет исключений

main.ts теперь будет чуть больше

import { bootstrap } from '@angular/platform-browser-dynamic';
 
import { AppComponent } from './app/app.component';
import { ApiSettings } from "./app/api.service";
import { provide } from '@angular/core';
 
export function run(name: string) {
 
	let apiSettings = new ApiSettings;
	apiSettings.name = name;
 
	bootstrap(AppComponent, [
		provide('api.settings', {useValue: apiSettings}),
	]);
}

api.service.ts с прекрасным сервисом

import {Injectable, Inject} from '@angular/core';
 
export class ApiSettings {
	name: string;
}
 
@Injectable() class ApiService {
	constructor(@Inject("api.settings") public apiSettings: ApiSettings) {
 
	}
 
}
 
export {ApiService};

Использование данных (напомню — переданных из PHP в Angular2)

Можно как напрямую использовать, так и в живом другом сервисе — мое личное мнение что это прекрасно и дивно удобно

import { Component } from '@angular/core';
import { OtherService } from './app.other.service';
import { ApiService } from './api.service';
 
@Component({
	selector: 'my-app',
	providers: [OtherService, ApiService]
})
 
class AppComponent {
	private name : string;
 
	constructor(private otherService: OtherService) {
	}
	ngOnInit() {
		this.name = this.otherService.getName();
	}
}
export {AppComponent};
import { Injectable } from '@angular/core';
import { ApiService } from './api.service';
 
@Injectable() class OtherService {
	constructor(private apiService: ApiService) {}
	public getName() {
		return this.apiService.apiSettings.name + 'dfgfh';
	}
}

Результат

Мы на самом деле сделали заглушку для полноценного драйвера api запросов к php из javascript, например чтобы не писать token в заголовок каждый раз ручками)

/**
 * setted externally in the wrapper
 * System.import('app').then(m => m.run('<?php echo SITE_URL;?>', '<?php echo TOKEN;?>')).catch(err => console.error(err));
 */
 
import {Injectable, Inject} from '@angular/core';
 
import { Http, Headers } from '@angular/http';
 
import 'rxjs/add/operator/toPromise';
 
export class ApiSettings {
	apiUrl: string = '/api';
	apiAuthToken: string;
}
 
@Injectable() class ApiService {
	constructor(private http: Http, @Inject("api.settings") private apiSettings: ApiSettings) {
 
	}
 
	public get(url : string) {
		var headers = new Headers();
		headers.append('token', this.apiSettings.apiAuthToken);
		return this.http.get(this.apiSettings.apiUrl + url, {headers : headers}).toPromise();
	}
}
 
export {ApiService};
@Injectable() class OtherService {
...
	constructor(private apiService: ApiService) {}
 
	public load() {
		return this.apiService.get(this.apiUrl)
			.then(response => response.json() as OtherData)
			.catch(this.handleError);
	}
....
}

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

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="">