Created
May 20, 2016 06:54
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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