oneillci/app.html

## app.html
<template>
  <require from="./my-control"></require>
  <require from="./my-other"></require>
  <h1>${message}</h1>

  <my-control></my-control>
  <br/>
  <my-other></my-other>

</template>

## app.js
export class App { message = 'Hello World'; }

## base.js
import {inject} from "aurelia-framework";
import {Service} from "./service";

@inject(Service)
export class Base {
  selectedItem: any;
  service;

  constructor(service) {
    console.log("base constructor", this);
    this.service = service;
  }

  created() {
    console.log("Created in base")
    console.log(this.service.getStuff());
  }
}

## 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://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## my-control.js
import {Base} from "./base";
import {bindable, inlineView, inject} from "aurelia-framework";
import {Service} from "./service";

@inject(Service)
@inlineView(`
<template>
  my-control: <input type="text" value.bind="name" />
  <div repeat.for="i of items" click.trigger="clicked(i)">\${i}</div>
</template>
`)
export class MyControl extends Base {
  @bindable items = [1, 2, 3];
  @bindable selectedItem;
  name = "ciaran";
  service;

  constructor(service) {
    super(service);
    this.service = service;
  }

  created() {
    super.created();
    console.log("created in my control", this.items, this.name)
  }

  selectedItemChanged() {
    console.log("mycontrol selected item is", this.selectedItem);
  }

  clicked(i){
    console.log(i);
    this.selectedItem = i;
    console.log(this.service.getStuff());
  }
}

## my-other.js
import {Base} from "./base";
import {bindable, inlineView, inject} from "aurelia-framework";
import {Service} from "./service";

@inject(Service)
@inlineView(`
<template>
  my-other: <input type="text" value.bind="name" />
  <div repeat.for="i of items" click.trigger="clicked(i)">\${i}</div>
</template>
`)
export class MyOther extends Base {
  @bindable items = [6,7,8];
  @bindable selectedItem;
  name = "poppy";
  service;

  constructor(service) {
    super(service);
    this.service = service;
  }

  created() {
    super.created();
    console.log("created in my other", this.items, this.name)
  }

  selectedItemChanged() {
    console.log("myother selected item is", this.selectedItem);
  }

  clicked(i){
    console.log(i);
    this.selectedItem = i;
    console.log(this.service.getStuff());
  }
}

## service.js
export class Service {
  getStuff() {
    return [9,0,8];
  }
}
	<template>
	<require from="./my-control"></require>
	<require from="./my-other"></require>
	<h1>${message}</h1>

	<my-control></my-control>
	<br/>
	<my-other></my-other>

	</template>
	import {inject} from "aurelia-framework";
	import {Service} from "./service";

	@inject(Service)
	export class Base {
	selectedItem: any;
	service;

	constructor(service) {
	console.log("base constructor", this);
	this.service = service;
	}

	created() {
	console.log("Created in base")
	console.log(this.service.getStuff());
	}
	}
	<!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://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	import {Base} from "./base";
	import {bindable, inlineView, inject} from "aurelia-framework";
	import {Service} from "./service";

	@inject(Service)
	@inlineView(`
	<template>
	my-control: <input type="text" value.bind="name" />
	<div repeat.for="i of items" click.trigger="clicked(i)">\${i}</div>
	</template>
	`)
	export class MyControl extends Base {
	@bindable items = [1, 2, 3];
	@bindable selectedItem;
	name = "ciaran";
	service;

	constructor(service) {
	super(service);
	this.service = service;
	}

	created() {
	super.created();
	console.log("created in my control", this.items, this.name)
	}

	selectedItemChanged() {
	console.log("mycontrol selected item is", this.selectedItem);
	}

	clicked(i){
	console.log(i);
	this.selectedItem = i;
	console.log(this.service.getStuff());
	}
	}