Skip to content

Instantly share code, notes, and snippets.

@orgbx
Created May 20, 2016 06:54
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save orgbx/7dfdbfdc0831f4d9d5f47d2fe996937d to your computer and use it in GitHub Desktop.
Angular 2 RC.1 Legacy webapp: multiple angular applications/components sharing injector without a root component
import {Component, Injectable} from '@angular/core'
import {Http} from '@angular/http'
import {ReplaySubject, Subject, Observable} from 'Rxjs';
// SERVICES
@Injectable()
export class CompService {
private _counter:number = 0;
private _commonCounter:Subject<number> = new ReplaySubject<number>();
private cachedResponse:any;
private getDataObservable:Observable<any>;
constructor(private http:Http) {
this._commonCounter.next(0);
}
get counter() {
return this._counter++;
}
getCommonCounter() {
return this._commonCounter.asObservable().do(x=> console.log('getCommonCounter', x));
}
incrementCommonCounter(x:number) {
console.log('incrementCommonCounter', x);
this._commonCounter.next(x);
}
getDataStream() {
if (this.cachedResponse) {
return Observable.of(this.cachedResponse);
} else if (this.getDataObservable) {
return this.getDataObservable;
} else {
this.getDataObservable = this.http.get('http://echo.jsontest.com/key/value/one/two')
.map(res => res.json())
.do(val => {
this.cachedResponse = val;
this.getDataObservable = null;
})
.share();
return this.getDataObservable;
}
}
}
// COMPONENTS
let commonTemplate = `
<div>
<h2>Hello {{name}}</h2>
<h3>Common counter {{commonCounter}}</h3>
<button (click)="increment()">Increment by {{incrementor}}!</button>
<pre>{{serverResponse | json }}</pre>
</div>
`;
class CommonComp {
private name:string;
private commonCounter:number;
incrementor:number = 1;
private serverResponse:string;
constructor(private service:CompService) {
this.name = `${this.constructor['name']} - ${service.counter}`;
service.getCommonCounter().subscribe(
x => this.commonCounter = x
);
}
ngOnInit() {
this.service
.getDataStream()
.subscribe(response=>this.serverResponse = response);
}
increment() {
this.service.incrementCommonCounter(this.commonCounter + this.incrementor)
}
}
@Component({
selector: 'comp1',
providers: [],
template: commonTemplate,
directives: []
})
export class Comp1 extends CommonComp {
constructor(service:CompService) {
super(service);
}
}
@Component({
selector: 'comp2',
providers: [],
template: commonTemplate,
directives: []
})
export class Comp2 extends CommonComp {
constructor(service:CompService) {
super(service);
this.incrementor = 2;
}
}
import {createPlatform, coreLoadAndBootstrap, ReflectiveInjector} from '@angular/core';
import {BROWSER_APP_DYNAMIC_PROVIDERS} from '@angular/platform-browser-dynamic';
import {BROWSER_PROVIDERS} from "@angular/platform-browser";
import {HTTP_PROVIDERS} from '@angular/http';
var appProviders:any[] = [HTTP_PROVIDERS, CompService];
var platform = createPlatform(ReflectiveInjector.resolveAndCreate(BROWSER_PROVIDERS));
var appInjector = ReflectiveInjector.resolveAndCreate([BROWSER_APP_DYNAMIC_PROVIDERS, appProviders], platform.injector);
coreLoadAndBootstrap(appInjector, Comp1);
coreLoadAndBootstrap(appInjector, Comp2);
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<table>
<tr>
<th>Component1</th>
<th>Component2</th>
</tr>
<tr>
<td><comp1>comp1...</comp1></td>
<td><comp2>comp2...</comp2></td>
</tr>
</table>
<script src="polyfills.bundle.js"></script>
<script src="vendor.bundle.js"></script>
<script src="app.bundle.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment