jsobell/app.html

## app.html
<template>
  <h1>${message}</h1>
  <pre>data:[${data}]</pre>
  <ul>
    <!--
    <li repeat.for="user of users">
      ${user.login}
    </li>
    -->
  </ul>
</template>

## app.js
import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-fetch-client';

@inject(HttpClient)
export class App {
  message = 'Hello World!';
  users = null;
  data = null;
  httpClient;

  token='eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJKVUNoTEVnZkYzNjBXRWg0dzJ4OVFneEhqamhYUzN6Y0gyLW5helQ1clNnIn0.eyJqdGkiOiI2MWMwNjE1Yy1kMmM0LTQ3YTUtYWFlNy05YzdiNzc3ZDk5NTYiLCJleHAiOjE1MTM2Mzc5OTMsIm5iZiI6MCwiaWF0IjoxNTEzNjM3MDkzLCJpc3MiOiJodHRwczovL2F1dGgua29ha2guY29tL2F1dGgvcmVhbG1zL0RlbW8tUmVhbG0iLCJhdWQiOiJ0dXRvcmlhbC1mcm9udGVuZCIsInN1YiI6ImU5ZTNhMzA5LTM5MGEtNDMyYy1iMTY0LThjNzYyYjcxNzM0YyIsInR5cCI6IkJlYXJlciIsImF6cCI6InR1dG9yaWFsLWZyb250ZW5kIiwibm9uY2UiOiI0YzA4NjU1ZTgzMWQ0ZGY5ODQ5NTk4Yjc2NThhZjIzZiIsImF1dGhfdGltZSI6MTUxMzYzNzA5Mywic2Vzc2lvbl9zdGF0ZSI6IjRmYjJiOTVkLTNkYTEtNDBlNy1iMjVmLTRhN2VkMDVlMDI5YiIsImFjciI6IjEiLCJjbGllbnRfc2Vzc2lvbiI6IjYwM2Q0NjUxLThkZDMtNDE0ZS1iOTdlLTA1ODlkZTc4ODY0MCIsImFsbG93ZWQtb3JpZ2lucyI6WyJodHRwczovL2F1dGgua29ha2guY29tIl0sInJlYWxtX2FjY2VzcyI6eyJyb2xlcyI6WyJyZWFkLXRva2VuIiwibWFuYWdlciIsImFkbWluIiwidW1hX2F1dGhvcml6YXRpb24iXX0sInJlc291cmNlX2FjY2VzcyI6eyJicm9rZXIiOnsicm9sZXMiOlsicmVhZC10b2tlbiJdfSwiYWNjb3VudCI6eyJyb2xlcyI6WyJtYW5hZ2UtYWNjb3VudCIsInZpZXctcHJvZmlsZSJdfX0sImFkZHJlc3MiOnt9LCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiZ2VuZGVyIjoibWFsZSIsInByb2ZpbGUiOiJodHRwczovL3BsdXMuZ29vZ2xlLmNvbS8xMDA0NzY4NTE4NDAwNTkzMDY5ODUiLCJuYW1lIjoiTcOhcmlvIE1vbnRlaXJvIiwicHJlZmVycmVkX3VzZXJuYW1lIjoibWFyaW9hbW1vbnRlaXJvQGdtYWlsLmNvbSIsImxvY2FsZSI6InB0LVBUIiwiZ2l2ZW5fbmFtZSI6Ik3DoXJpbyIsImZhbWlseV9uYW1lIjoiTW9udGVpcm8iLCJlbWFpbCI6Im1hcmlvYW1tb250ZWlyb0BnbWFpbC5jb20iLCJwaWN0dXJlIjoiaHR0cHM6Ly9saDYuZ29vZ2xldXNlcmNvbnRlbnQuY29tLy1DSlBXcTdSd3pMVS9BQUFBQUFBQUFBSS9BQUFBQUFBQUFhVS9IQUtnT2JZNmJNYy9waG90by5qcGc_c3o9NTAifQ.Olrpjui3KXoX2ecPtHgn_thKn2QdIMZzqFMxHtdJMkNAC0oS_e0z7BviacvyJU4v4Z7QXbMP8Y7KUSYpAZK3B8luum5S4SfqlFhkFbFx34etzm4jQs8l5_UwFW9QkXcNeax_t90aWbNXW9AzvAtJg_CMfEG_9uwtywJTH1VIQrr-J4A--4cMIw5WC0dKVJ4JSTB9Um7vHXjgvd8IqKkxVUw1x7lS1x-VWiqcctwHL9-7sOpk_VUermUtgjx-PmYER2jtqyAem8nyxELLZJdUIQHG4yG7MbaIVjqskONtgZ6EayssmfL3KczU41M31VOeqvqKlSE4WRoZDnXbHYF31Q';

  constructor(httpClient) {
    this.httpClient = httpClient;

    this.httpClient.configure(config => {
      config
        .withBaseUrl('https://koakh.com:8084/api/')
        .withInterceptor({
          request(request) {
            console.log(`Requesting ${request.method} ${request.url}`);
            let authHeader = `Bearer ${this.token}`;
            request.headers.append('Authorization', authHeader);
            return request;
          },
          response(response) {
            console.log(`Received ${response.status} ${response.url}`);
            return response;
          }
        });
    });
  }

  activate() {
    console.log('Activate');
    return this.httpClient.fetch('user')
      .then(response => response.json())
      .then(data => {
          //this.users = users
          this.data = data;
        })
      .catch(error => {
        this.data = error;
      });
  }

  fetch() {
    this.httpClient.fetch('user')
      .then(response => response.json())
      .then(data => {
          //this.users = users
          this.data = data;
        })
      .catch(error => {
        this.data = error;
      });
  }
}

## 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>
      require.config({
        paths: {
          "aurelia-fetch-client": "https://jdanyow.github.io/rjs-bundle/node_modules/aurelia-fetch-client/dist/amd/aurelia-fetch-client"
        }
      })
    </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>
	<template>
	<h1>${message}</h1>
	<pre>data:[${data}]</pre>
	<ul>
	<!--
	<li repeat.for="user of users">
	${user.login}
	</li>
	-->
	</ul>
	</template>
	import {inject} from 'aurelia-framework';
	import {HttpClient} from 'aurelia-fetch-client';

	@inject(HttpClient)
	export class App {
	message = 'Hello World!';
	users = null;
	data = null;
	httpClient;

	token='eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJKVUNoTEVnZkYzNjBXRWg0dzJ4OVFneEhqamhYUzN6Y0gyLW5helQ1clNnIn0.eyJqdGkiOiI2MWMwNjE1Yy1kMmM0LTQ3YTUtYWFlNy05YzdiNzc3ZDk5NTYiLCJleHAiOjE1MTM2Mzc5OTMsIm5iZiI6MCwiaWF0IjoxNTEzNjM3MDkzLCJpc3MiOiJodHRwczovL2F1dGgua29ha2guY29tL2F1dGgvcmVhbG1zL0RlbW8tUmVhbG0iLCJhdWQiOiJ0dXRvcmlhbC1mcm9udGVuZCIsInN1YiI6ImU5ZTNhMzA5LTM5MGEtNDMyYy1iMTY0LThjNzYyYjcxNzM0YyIsInR5cCI6IkJlYXJlciIsImF6cCI6InR1dG9yaWFsLWZyb250ZW5kIiwibm9uY2UiOiI0YzA4NjU1ZTgzMWQ0ZGY5ODQ5NTk4Yjc2NThhZjIzZiIsImF1dGhfdGltZSI6MTUxMzYzNzA5Mywic2Vzc2lvbl9zdGF0ZSI6IjRmYjJiOTVkLTNkYTEtNDBlNy1iMjVmLTRhN2VkMDVlMDI5YiIsImFjciI6IjEiLCJjbGllbnRfc2Vzc2lvbiI6IjYwM2Q0NjUxLThkZDMtNDE0ZS1iOTdlLTA1ODlkZTc4ODY0MCIsImFsbG93ZWQtb3JpZ2lucyI6WyJodHRwczovL2F1dGgua29ha2guY29tIl0sInJlYWxtX2FjY2VzcyI6eyJyb2xlcyI6WyJyZWFkLXRva2VuIiwibWFuYWdlciIsImFkbWluIiwidW1hX2F1dGhvcml6YXRpb24iXX0sInJlc291cmNlX2FjY2VzcyI6eyJicm9rZXIiOnsicm9sZXMiOlsicmVhZC10b2tlbiJdfSwiYWNjb3VudCI6eyJyb2xlcyI6WyJtYW5hZ2UtYWNjb3VudCIsInZpZXctcHJvZmlsZSJdfX0sImFkZHJlc3MiOnt9LCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiZ2VuZGVyIjoibWFsZSIsInByb2ZpbGUiOiJodHRwczovL3BsdXMuZ29vZ2xlLmNvbS8xMDA0NzY4NTE4NDAwNTkzMDY5ODUiLCJuYW1lIjoiTcOhcmlvIE1vbnRlaXJvIiwicHJlZmVycmVkX3VzZXJuYW1lIjoibWFyaW9hbW1vbnRlaXJvQGdtYWlsLmNvbSIsImxvY2FsZSI6InB0LVBUIiwiZ2l2ZW5fbmFtZSI6Ik3DoXJpbyIsImZhbWlseV9uYW1lIjoiTW9udGVpcm8iLCJlbWFpbCI6Im1hcmlvYW1tb250ZWlyb0BnbWFpbC5jb20iLCJwaWN0dXJlIjoiaHR0cHM6Ly9saDYuZ29vZ2xldXNlcmNvbnRlbnQuY29tLy1DSlBXcTdSd3pMVS9BQUFBQUFBQUFBSS9BQUFBQUFBQUFhVS9IQUtnT2JZNmJNYy9waG90by5qcGc_c3o9NTAifQ.Olrpjui3KXoX2ecPtHgn_thKn2QdIMZzqFMxHtdJMkNAC0oS_e0z7BviacvyJU4v4Z7QXbMP8Y7KUSYpAZK3B8luum5S4SfqlFhkFbFx34etzm4jQs8l5_UwFW9QkXcNeax_t90aWbNXW9AzvAtJg_CMfEG_9uwtywJTH1VIQrr-J4A--4cMIw5WC0dKVJ4JSTB9Um7vHXjgvd8IqKkxVUw1x7lS1x-VWiqcctwHL9-7sOpk_VUermUtgjx-PmYER2jtqyAem8nyxELLZJdUIQHG4yG7MbaIVjqskONtgZ6EayssmfL3KczU41M31VOeqvqKlSE4WRoZDnXbHYF31Q';

	constructor(httpClient) {
	this.httpClient = httpClient;

	this.httpClient.configure(config => {
	config
	.withBaseUrl('https://koakh.com:8084/api/')
	.withInterceptor({
	request(request) {
	console.log(`Requesting ${request.method} ${request.url}`);
	let authHeader = `Bearer ${this.token}`;
	request.headers.append('Authorization', authHeader);
	return request;
	},
	response(response) {
	console.log(`Received ${response.status} ${response.url}`);
	return response;
	}
	});
	});
	}

	activate() {
	console.log('Activate');
	return this.httpClient.fetch('user')
	.then(response => response.json())
	.then(data => {
	//this.users = users
	this.data = data;
	})
	.catch(error => {
	this.data = error;
	});
	}

	fetch() {
	this.httpClient.fetch('user')
	.then(response => response.json())
	.then(data => {
	//this.users = users
	this.data = data;
	})
	.catch(error => {
	this.data = error;
	});
	}
	}
	<!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>
	require.config({
	paths: {
	"aurelia-fetch-client": "https://jdanyow.github.io/rjs-bundle/node_modules/aurelia-fetch-client/dist/amd/aurelia-fetch-client"
	}
	})
	</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>