<!DOCTYPE html>
<html ng-app="demoApp">
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.20.19/system.js"></script>
<script>
	System.config({
    map: {
    'plugin-babel': 'https://cdn.rawgit.com/systemjs/plugin-babel/master/plugin-babel.js',
    'systemjs-babel-build': 'https://cdn.rawgit.com/systemjs/plugin-babel/master/systemjs-babel-browser.js',
    'angular': 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.js'
    },
    transpiler: 'plugin-babel'
    });
</script>
<script>
	System.import('script.js');
</script>

<body>
	<h1>Demo</h1>
  <app></app>
</body>

</html>
import 'angular';

import { appComponent } from './app.component.js';
import { leakyComponent } from './leaky.component.js';
import { nonLeakyComponent } from './nonLeaky.component.js';

angular.module('demoApp', [])
  .component('app', appComponent)
  .component('leaky', leakyComponent)
  .component('nonLeaky', nonLeakyComponent);
/* Styles go here */

class AppController {
  constructor() {
    this.page = 0;
  }
}

export const appComponent = {
  template: `
    <a href ng-click="$ctrl.page = 0">Reset</a> |
    <a href ng-click="$ctrl.page = 1">Leaky Component</a> |
    <a href ng-click="$ctrl.page = 2">Non-Leaky Component</a>

    <div ng-if="$ctrl.page === 1">
      <leaky></leaky>
    </div>

    <div ng-if="$ctrl.page === 2">
      <non-leaky></non-leaky>
    </div>
  `,
  controller: AppController
};
class NonLeakyController {
  constructor() {
    this.options = [
      {
        category: 'category 1',
        id: 1
      },
      {
        category: 'category 2',
        id: 2
      }
    ];
  }
}

export const nonLeakyComponent = {
  template: `
    <p>This component does NOT leak</p>
    <div ng-repeat="option in $ctrl.options">
      {{option.category}}
    </div>
  `,
  controller: NonLeakyController
};
class LeakyController {
  constructor() {
    this.options = [
      {
        category: 'category 1',
        id: 1
      },
      {
        category: 'category 2',
        id: 2
      }
    ];
  }
}

export const leakyComponent = {
  template: `
    <p>This component leaks</p>
    <div ng-repeat="option in $ctrl.options track by option.id">
      {{option.category}}
    </div>
  `,
  controller: LeakyController
};