morrissinger/application-controller.js

## application-controller.js
export class ApplicationController {
	constructor() {
		this.foo = 'bar';
	}
}

## application-module.js
import 'angular-ui-router';
import { ApplicationController } from './controllers/application-controller';
import tpl from 'modules/application/templates/application-template.html!'

angular.module('Application', ['ui.router'])
		.config(($stateProvider) => {

			$stateProvider.state('home', {
				url: '/home',
				views: {
					application: {
						template: tpl,
						controller: ApplicationController,
						controllerAs: 'controller'
					}
				}
			});

		})
		.controller('ApplicationController', ApplicationController);

## application-template.html
Hello, {{controller.foo}}!

## html.js
export function instantiate(load) {
	return load.source;
}

## index.html
<!doctype html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles/styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

    <ui-view name="application"></ui-view>

    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
        System.config({
            "paths": {
                "*": "dist/*.js"
            }
        });
    </script>
    <script>
        System.import('index');
    </script>
</body>
</html>

## index.js
import angular from 'angular';
import 'modules/application/application-module';

angular.element(document).ready(function() {
    angular.bootstrap(document, ['Application']);
});
	export class ApplicationController {
	constructor() {
	this.foo = 'bar';
	}
	}
	import 'angular-ui-router';
	import { ApplicationController } from './controllers/application-controller';
	import tpl from 'modules/application/templates/application-template.html!'

	angular.module('Application', ['ui.router'])
	.config(($stateProvider) => {

	$stateProvider.state('home', {
	url: '/home',
	views: {
	application: {
	template: tpl,
	controller: ApplicationController,
	controllerAs: 'controller'
	}
	}
	});

	})
	.controller('ApplicationController', ApplicationController);
	<!doctype html>
	<html>
	<head>
	<link rel="stylesheet" type="text/css" href="styles/styles.css">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>

	<ui-view name="application"></ui-view>

	<script src="jspm_packages/system.js"></script>
	<script src="config.js"></script>
	<script>
	System.config({
	"paths": {
	"": "dist/.js"
	}
	});
	</script>
	<script>
	System.import('index');
	</script>
	</body>
	</html>
	import angular from 'angular';
	import 'modules/application/application-module';

	angular.element(document).ready(function() {
	angular.bootstrap(document, ['Application']);
	});