smithaitufe/app.html

## app.html
<template>
  <require from ='personal-data'></require>
  <require from ='child'></require>
  <require from ='people'></require>
    <h2>Simple App</h2>
    <h5>Hi ${firstName}</h5>
    <div repeat.for="people of peoples">
      <people firstname.bind="people.firstname" lastname.bind="people.lastname"></people>
    </div>

    <people firstname="Smith" lastname="Samuel"></people>
    <personal-data registration-no.bind="reg"></personal-data>
    <child greetings="Hello Friend"></child>
</template>

## app.js
import {autoinject} from 'aurelia-framework';
import {peoples} from 'data'

@autoinject
export class App {

  firstName = 'Jason';
  reg = 'w4r342343'

  constructor() {
    this.peoples = peoples
  }
  attached(){

  }
}

## child.html
<template>
  ${greetings}
</template>

## child.js
import {bindable} from 'aurelia-framework'
export class Child
{
  @bindable greetings = "Hello world"
}

## data.js
export const peoples = [
  {firstname: 'Harry', lastname: 'Gold'},
  {firstname: 'Robbinson', lastname: 'Hood'},
  {firstname: 'Friday', lastname: 'Simons'},
]

## 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>

## people.html
<template>
  <h2>Name: ${fullName()}</h2>
  <strong>firstName: ${firstname}</strong>
  <strong>lastName: ${lastname}</strong>
  <hr/>
</template>

## people.js
import {bindable} from 'aurelia-framework'
export class People{
    @bindable firstname
    @bindable lastname

    fullName(){
      return `${this.firstname} ${this.lastname}`
    }
    FullName(){
      return `${this.firstname} ${this.lastname}`
    }
}

## personal-data.html
<template>
  ${registrationNo}
</template>

## personal-data.js
import {bindable, children} from 'aurelia-framework'
export class PersonalData{
  @bindable registrationNo
}
	<template>
	<require from ='personal-data'></require>
	<require from ='child'></require>
	<require from ='people'></require>
	<h2>Simple App</h2>
	<h5>Hi ${firstName}</h5>
	<div repeat.for="people of peoples">
	<people firstname.bind="people.firstname" lastname.bind="people.lastname"></people>
	</div>

	<people firstname="Smith" lastname="Samuel"></people>
	<personal-data registration-no.bind="reg"></personal-data>
	<child greetings="Hello Friend"></child>
	</template>
	import {autoinject} from 'aurelia-framework';
	import {peoples} from 'data'

	@autoinject
	export class App {

	firstName = 'Jason';
	reg = 'w4r342343'

	constructor() {
	this.peoples = peoples
	}
	attached(){

	}
	}
	import {bindable} from 'aurelia-framework'
	export class Child
	{
	@bindable greetings = "Hello world"
	}
	export const peoples = [
	{firstname: 'Harry', lastname: 'Gold'},
	{firstname: 'Robbinson', lastname: 'Hood'},
	{firstname: 'Friday', lastname: 'Simons'},
	]
	<!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>
	<template>
	<h2>Name: ${fullName()}</h2>
	<strong>firstName: ${firstname}</strong>
	<strong>lastName: ${lastname}</strong>
	<hr/>
	</template>
	import {bindable} from 'aurelia-framework'
	export class People{
	@bindable firstname
	@bindable lastname

	fullName(){
	return `${this.firstname} ${this.lastname}`
	}
	FullName(){
	return `${this.firstname} ${this.lastname}`
	}
	}
	import {bindable, children} from 'aurelia-framework'
	export class PersonalData{
	@bindable registrationNo
	}