Skip to content

Instantly share code, notes, and snippets.

@gimerstedt
Created April 22, 2021 19:33
Show Gist options
  • Select an option

  • Save gimerstedt/04f97edc4407306172e6eb82062d7657 to your computer and use it in GitHub Desktop.

Select an option

Save gimerstedt/04f97edc4407306172e6eb82062d7657 to your computer and use it in GitHub Desktop.
service-help
<!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 "main" (data-main attribute on script)
which is your src/main.ts.
-->
<body>
<my-app></my-app>
<script src="/dist/entry-bundle.js" data-main="main"></script>
</body>
</html>
{
"dependencies": {
"aurelia": "latest"
}
}
export class DataService {
data: number | string = 'not data quite yet'
setImportantData(data: 42) {
if(Math.random() > .2) {
this.data = data
} else {
this.data = data * 10
}
}
}
import Aurelia from 'aurelia';
import { MyApp } from './my-app';
Aurelia.app(MyApp).start();
import { customElement } from 'aurelia'
import { TheButton } from './the-button'
import { TheOtherThing } from './the-other-thing'
import template from './my-app.html'
@customElement({
name: 'my-app',
template: `
<h1>\${message}</h1>
<the-button></the-button>
<the-other-thing></the-other-thing>
`,
dependencies: [TheButton, TheOtherThing]
})
export class MyApp {
public message: string = 'Hello Aurelia 2!';
}
import { customElement } from 'aurelia'
import { DataService } from './data-service'
@customElement({
name: 'the-button',
template: `
<button click.delegate="click()">TheButton</button>
`
})
export class TheButton {
constructor(private readonly service: DataService) {}
click() {
this.service.setImportantData(42)
}
}
import { customElement } from 'aurelia'
import { DataService } from './data-service'
@customElement({
name: 'the-other-thing',
template: `<h1>\${service.data}</h1>`
})
export class TheOtherThing {
constructor(private readonly service: DataService) {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment