Skip to content

Instantly share code, notes, and snippets.

@djedi

djedi/app.html

Last active June 6, 2019 06:32
Show Gist options
  • Save djedi/060f4d1db4bf7679af00296c0fdd8e5b to your computer and use it in GitHub Desktop.
Save djedi/060f4d1db4bf7679af00296c0fdd8e5b to your computer and use it in GitHub Desktop.
Download ZIP
Basic Dependency Injection Example
Raw
app.html
<template>
<require from="./comp1"></require>
<require from="./comp2"></require>
<comp1></comp1>
<comp2></comp2>
</template>
Raw
app.js
export class App {
}
Raw
comp1.html
<template>
<require from="./comp1child"></require>
<div>
Comp1: ${shared.val}<br>
<button click.delegate="setVal()">Set Value</button>
</div><br>
<comp1child></comp1child>
</template>
Raw
comp1.js
import {inject} from 'aurelia-framework';
import {Shared} from 'shared-service';
@inject(Shared)
export class Comp1 {
constructor(shared) {
this.shared = shared;
}
setVal() {
this.shared.val = 'Component 1 set value';
}
}
Raw
comp1child.html
<template>
<div>
Child component, edit value:
<input type="text" value.bind="shared.val">
</div><br>
</template>
Raw
comp1child.js
import {inject} from 'aurelia-framework';
import {Shared} from 'shared-service';
@inject(Shared)
export class Comp1child {
constructor(shared) {
this.shared = shared;
}
}
Raw
comp2.html
<template>
<require from="./comp2child.html"></require>
<div>
Comp2: ${shared.val}
</div>
<button click.delegate="setVal()">Set Value</button><br><br>
<comp2child val.two-way="shared.val"></comp2child>
</template>
Raw
comp2.js
import {inject} from 'aurelia-framework';
import {Shared} from 'shared-service';
@inject(Shared)
export class Comp2 {
constructor(shared) {
this.shared = shared;
}
setVal() {
this.shared.val = 'Component 2 set value';
}
}
Raw
comp2child.html
<template bindable="val">
<div>
Comp2 Child component with no view-model.<br>
Edit here too: <input type="text" value.bind="val">
</div>
</template>
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
<script>
require(['aurelia-bootstrapper']);
</script>
</body>
</html>
Raw
shared-service.js
export class Shared {
constructor() {
this.val = 'Initial value.';
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment