<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular2 playground</title>
</head>
<body>
<app></app>
</body>
<!-- ES6-related imports -->
<script src="http://cdn.rawgit.com/google/traceur-compiler/90da568c7aa8e53ea362db1fc211fbb4f65b5e94/bin/traceur-runtime.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.js"></script>
<script>
//configure system loader
System.config({
//defaultJSExtensions: true,
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
map: {
typescript: 'https://cdn.rawgit.com/robwormald/9883afae87bffa2f4e00/raw/8bca570a696c47a4f8dd03a52c98734676e94cea/typescript.js',
}
});
</script>
<!-- Angular2 import -->
<script src="http://code.angularjs.org/2.0.0-alpha.35/angular2.js"></script>
<script src="http://code.angularjs.org/2.0.0-alpha.35/router.dev.js"></script>
<script>
//bootstrap the Angular2 application
System.import('./app.ts').catch(console.log.bind(console));
</script>
</html>
{
"stage": 1,
"modules": "system"
}
import {
Component,
View,
bootstrap,
CORE_DIRECTIVES,
ElementRef,
DynamicComponentLoader,
LifecycleEvent,
Attribute
} from 'angular2/angular2';
class MyComponentLoader {
loadComponentConfig(url){
return fetch(url)
.then(res => res.json())
.then(componentList =>
Promise.all(componentList.map(config =>
this.loadComponent(config))))
}
loadComponent(configObject){
return System.import(configObject.path)
.then(componentModule =>
componentModule[configObject.component])
}
}
@Component({
selector: 'widget-container',
bindings: [MyComponentLoader]
})
@View({
template: `<div #content></div>`,
directives: [CORE_DIRECTIVES]
})
export class WidgetContainer {
constructor(
myLoader: MyComponentLoader,
loader: DynamicComponentLoader,
elementRef:ElementRef,
@Attribute('src') configPath) {
myLoader.loadComponentConfig(configPath)
.then(components =>
Promise.all(components.map(comp =>
loader.loadIntoLocation(comp,elementRef,'content'))));
}
}
import {Component, View} from 'angular2/angular2';
@Component({
selector: 'widget1'
})
@View({
template: `<div>i'm widget 1</div>`
})
export class Widget1 {}
import {Component, View} from 'angular2/angular2';
@Component({
selector: 'widget2'
})
@View({
template: `<div>i'm widget 2</div>`
})
export class Widget2 {}
import {Component, View} from 'angular2/angular2';
@Component({
selector: 'widget3'
})
@View({
template: `<div>i'm widget 3</div>`
})
export class Widget3 {}
[
{"component": "Widget1", "path": "./widget1.ts"},
{"component": "Widget2", "path": "./widget2.ts"},
{"component": "Widget3", "path": "./widget3.ts"}
]
import {bootstrap, Component, View} from 'angular2/angular2'
import {WidgetContainer} from './widgetContainer.ts'
@Component({
selector: 'app'
})
@View({
template: '<widget-container src="./config.json"></widget-container>',
directives: [WidgetContainer]
})
class App {}
bootstrap(App)