Skip to content

Instantly share code, notes, and snippets.

@bigopon
Last active January 26, 2024 01:33
Show Gist options
  • Save bigopon/a8814b72be66a6619386554cef20cc54 to your computer and use it in GitHub Desktop.
Save bigopon/a8814b72be66a6619386554cef20cc54 to your computer and use it in GitHub Desktop.
Aurelia v1 projection content DI example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dumber Gist</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<base href="/">
</head>
<!--
Dumber gist uses dumber bundler, the default bundle file
is /dist/entry-bundle.js.
The starting module is pointed to aurelia-bootstrapper
(data-main attribute on script) for Aurelia,
The aurelia bootstrapper then loads up user module "main"
(aurelia-app attribute on <body>) which is your src/main.js.
-->
<body aurelia-app="main">
<script src="/dist/entry-bundle.js" data-main="aurelia-bootstrapper"></script>
</body>
</html>
{
"dependencies": {
"aurelia-bootstrapper": "latest"
}
}
<template>
<!-- Try to create a css/scss/sass/less file then require it here -->
<h1>${message}</h1>
<el1>
<el2>
<el3></el3>
</el2>
</el1>
</template>
export class App {
message = 'Hello Aurelia!';
}
<template>
<slot></slot>
</template>
import { Container } from 'aurelia-framework';
import { Foo } from './service';
export class El1 {
static inject = [Container]
constructor(c) {
this.foo = c.invoke(Foo);
c.registerInstance(Foo, this.foo);
console.log(c)
}
}
<template>
el2 foo: ${foo.id}
<hr>
<slot>
</slot>
</template>
import { Foo } from './service';
export class El2 {
static inject = [Foo]
constructor(foo) {
this.foo = foo;
}
}
<template>
el3 foo: ${foo.id}
</template>
import { Foo } from './service';
export class El3 {
static inject = [Foo]
constructor(foo) {
this.foo = foo;
}
}
import { El1 } from './el1';
import { El2 } from './el2';
import { El3 } from './el3';
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.globalResources(
El1,
El2,
El3
)
.developmentLogging('info');
aurelia.start().then(() => aurelia.setRoot());
}
export class Foo {
id = ++id;
}
let id = 0;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment