<!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
};