<!DOCTYPE html>
<html ng-app="sieve">
<head>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>
Plumber's Soap!
</h1>
<div ng-controller="NavCtrl">
<button ng-click="goMain()">Good</button>
<button ng-click="goLeak()">Leaky</button>
</div>
<div ui-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17" data-require="angular.js@1.2.17"></script>
<script data-require="ui-router@0.2.10" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
<script>
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var sieve = angular.module("sieve", ["ui.router"]);
sieve.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/main');
$stateProvider.state('main', {
url: '/main',
templateUrl: 'main.html'
}).state('leak',{
url: '/leak',
controller: function($scope, $log){
$scope.cats = [];
for(var i=0; i < 1000; i++){
var size = getRandomInt(1,5) * 100;
$scope.cats.push({src:"http://placekitten.com/g/" + size.toString() + "/" + size.toString() + "?stamp=" + (new Date()).valueOf().toString()});
}
$scope.$on('$destroy', function(){
$scope.cats = null;
})
},
templateUrl: 'leak.html'
})
});
sieve.controller('NavCtrl',function($scope, $state){
$scope.goMain = function(){
$state.go('main');
};
$scope.goLeak = function(){
$state.go('leak');
};
});
</script>
</body>
</html>
// Code goes here
/* Styles go here */
<div>
<h2>Main</h2>
<div>
This page probably leaks as well, but it won't show it like the
leaky page does.
</div>
</div>
<div>
<h2>Leaking cuteness!</h2>
<div ng-repeat="cat in cats">
<h4>URL: {{cat.src}}</h4>
<img src="{{cat.src}}" />
<div>
I feel like I need some different nodes in here for reasons.
</div>
<canvas height="50" width="50">
</canvas>
<p>
How about a paragraph thing
</p>
<pre>
Some preformatted text for you! Hooray!
</pre>
<b>OLD AND BOLD</b>
</div>
</div>