mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
build: enable angular formatting on all html files
This should also be safe on any html file that isn't an angular template
This commit is contained in:
committed by
Alex Rickabaugh
parent
253dc95d63
commit
9d1d742f1b
@@ -1,9 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Image Directive Example</title>
|
||||
<base href="/">
|
||||
<base href="/" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- The Angular application will be bootstrapped into this element. -->
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
@@ -1,59 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Zone.js Basic Demo</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="../dist/zone.js"></script>
|
||||
<script src="../dist/long-stack-trace-zone.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Zone.js Basic Demo</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<script src="../dist/zone.js"></script>
|
||||
<script src="../dist/long-stack-trace-zone.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Basic Example</h1>
|
||||
|
||||
<h1>Basic Example</h1>
|
||||
<button id="b1">Bind Error</button>
|
||||
<button id="b2">Cause Error</button>
|
||||
|
||||
<button id="b1">Bind Error</button>
|
||||
<button id="b2">Cause Error</button>
|
||||
<script>
|
||||
|
||||
<script>
|
||||
/*
|
||||
* This is a simple example of async stack traces with zones
|
||||
*/
|
||||
|
||||
/*
|
||||
* This is a simple example of async stack traces with zones
|
||||
*/
|
||||
function main () {
|
||||
b1.addEventListener('click', bindSecondButton);
|
||||
}
|
||||
|
||||
function main () {
|
||||
b1.addEventListener('click', bindSecondButton);
|
||||
}
|
||||
/*
|
||||
* What if your stack trace could tell you what
|
||||
* order the user pushed the buttons from the stack trace?
|
||||
*
|
||||
* What if you could log this back to the server?
|
||||
*
|
||||
* Think of how much more productive your debugging could be!
|
||||
*/
|
||||
|
||||
/*
|
||||
* What if your stack trace could tell you what
|
||||
* order the user pushed the buttons from the stack trace?
|
||||
*
|
||||
* What if you could log this back to the server?
|
||||
*
|
||||
* Think of how much more productive your debugging could be!
|
||||
*/
|
||||
|
||||
function bindSecondButton () {
|
||||
b2.addEventListener('click', throwError);
|
||||
}
|
||||
function bindSecondButton () {
|
||||
b2.addEventListener('click', throwError);
|
||||
}
|
||||
|
||||
|
||||
function throwError () {
|
||||
throw new Error('aw shucks');
|
||||
}
|
||||
function throwError () {
|
||||
throw new Error('aw shucks');
|
||||
}
|
||||
|
||||
/*
|
||||
* Bootstrap the app
|
||||
*/
|
||||
//main();
|
||||
Zone.current.fork(
|
||||
{
|
||||
onHandleError: function (parentZoneDelegate, currentZone, targetZone, error) {
|
||||
console.log(error.stack);
|
||||
/*
|
||||
* Bootstrap the app
|
||||
*/
|
||||
//main();
|
||||
Zone.current.fork(
|
||||
{
|
||||
onHandleError: function (parentZoneDelegate, currentZone, targetZone, error) {
|
||||
console.log(error.stack);
|
||||
}
|
||||
}
|
||||
}
|
||||
).fork(Zone.longStackTraceZoneSpec).run(main);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
).fork(Zone.longStackTraceZoneSpec).run(main);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,65 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Zone.js addEventListenerBenchmark</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script src="../../dist/zone.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Zone.js addEventListenerBenchmark</title>
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<script src="../../dist/zone.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>addEventListener Benchmark</h1>
|
||||
|
||||
<h1>addEventListener Benchmark</h1>
|
||||
<h2>No Zone</h2>
|
||||
<button id="b1">Add/Remove same callback</button>
|
||||
<button id="b2">Add/Remove different callback</button>
|
||||
|
||||
<h2>No Zone</h2>
|
||||
<button id="b1">Add/Remove same callback</button>
|
||||
<button id="b2">Add/Remove different callback</button>
|
||||
<h2>With Zone</h2>
|
||||
<button id="b3">Add/Remove same callback</button>
|
||||
<button id="b4">Add/Remove different callback</button>
|
||||
|
||||
<h2>With Zone</h2>
|
||||
<button id="b3">Add/Remove same callback</button>
|
||||
<button id="b4">Add/Remove different callback</button>
|
||||
<div id="rootDiv"></div>
|
||||
|
||||
<div id="rootDiv"></div>
|
||||
|
||||
<script>
|
||||
b1.addEventListener('click', function () { addRemoveCallback(true, false); });
|
||||
b2.addEventListener('click', function () { addRemoveCallback(false, false); });
|
||||
b3.addEventListener('click', function () { addRemoveCallback(true, true); });
|
||||
b4.addEventListener('click', function () { addRemoveCallback(false, true); });
|
||||
var divs = [];
|
||||
var callbacks = [];
|
||||
var size = 100000;
|
||||
for(var i = 0; i < size; i++) {
|
||||
var div = document.createElement("div");
|
||||
var callback = (function(i) { return function() { console.log(i); }; })(i);
|
||||
rootDiv.appendChild(div);
|
||||
divs[i] = div;
|
||||
callbacks[i] = callback;
|
||||
}
|
||||
|
||||
function addRemoveCallback(reuse, useZone) {
|
||||
var start = performance.now();
|
||||
var callback = callbacks[0];
|
||||
<script>
|
||||
b1.addEventListener('click', function () { addRemoveCallback(true, false); });
|
||||
b2.addEventListener('click', function () { addRemoveCallback(false, false); });
|
||||
b3.addEventListener('click', function () { addRemoveCallback(true, true); });
|
||||
b4.addEventListener('click', function () { addRemoveCallback(false, true); });
|
||||
var divs = [];
|
||||
var callbacks = [];
|
||||
var size = 100000;
|
||||
for(var i = 0; i < size; i++) {
|
||||
var div = divs[i];
|
||||
if (!reuse) callback = callbacks[i];
|
||||
if (useZone)
|
||||
div.addEventListener('click', callback);
|
||||
else
|
||||
div.__zone_symbol__addEventListener('click', callback);
|
||||
var div = document.createElement("div");
|
||||
var callback = (function(i) { return function() { console.log(i); }; })(i);
|
||||
rootDiv.appendChild(div);
|
||||
divs[i] = div;
|
||||
callbacks[i] = callback;
|
||||
}
|
||||
|
||||
for(var i = 0; i < size; i++) {
|
||||
var div = divs[i];
|
||||
if (!reuse) callback = callbacks[i];
|
||||
if (useZone)
|
||||
div.removeEventListener('click', callback);
|
||||
else
|
||||
div.__zone_symbol__removeEventListener('click', callback);
|
||||
}
|
||||
var end = performance.now();
|
||||
console.log(useZone ? 'use zone': 'native', reuse ? 'reuse' : 'new', end - start, 'ms');
|
||||
}
|
||||
function addRemoveCallback(reuse, useZone) {
|
||||
var start = performance.now();
|
||||
var callback = callbacks[0];
|
||||
for(var i = 0; i < size; i++) {
|
||||
var div = divs[i];
|
||||
if (!reuse) callback = callbacks[i];
|
||||
if (useZone)
|
||||
div.addEventListener('click', callback);
|
||||
else
|
||||
div.__zone_symbol__addEventListener('click', callback);
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
for(var i = 0; i < size; i++) {
|
||||
var div = divs[i];
|
||||
if (!reuse) callback = callbacks[i];
|
||||
if (useZone)
|
||||
div.removeEventListener('click', callback);
|
||||
else
|
||||
div.__zone_symbol__removeEventListener('click', callback);
|
||||
}
|
||||
var end = performance.now();
|
||||
console.log(useZone ? 'use zone': 'native', reuse ? 'reuse' : 'new', end - start, 'ms');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,95 +1,96 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Counting Pending Tasks</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="../dist/zone.js"></script>
|
||||
<script src="js/counting-zone.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Counting Pending Tasks</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<script src="../dist/zone.js"></script>
|
||||
<script src="js/counting-zone.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Counting Pending Tasks</h1>
|
||||
|
||||
<h1>Counting Pending Tasks</h1>
|
||||
<p>
|
||||
We want to know about just the events from a single mouse click while a bunch of other stuff
|
||||
is happening on the page
|
||||
</p>
|
||||
|
||||
<p>We want to know about just the events from a single mouse click
|
||||
while a bunch of other stuff is happening on the page</p>
|
||||
<p>
|
||||
This is useful in E2E testing. Because you know when there are no async tasks, you avoid
|
||||
adding timeouts that wait for tasks that run for an indeterminable amount of time.
|
||||
</p>
|
||||
|
||||
<p>This is useful in E2E testing. Because you know when there are
|
||||
no async tasks, you avoid adding timeouts that wait for tasks that
|
||||
run for an indeterminable amount of time.</p>
|
||||
<button id="b1">Start</button>
|
||||
|
||||
<button id="b1">Start</button>
|
||||
<p id="output"></p>
|
||||
|
||||
<p id="output"></p>
|
||||
<script>
|
||||
/*
|
||||
* Zone that counts pending async tasks
|
||||
*/
|
||||
const outputElem = document.getElementById('output');
|
||||
const countingZoneSpec = Zone['countingZoneSpec'];
|
||||
const myCountingZone = Zone.current.fork(countingZoneSpec).fork({
|
||||
onScheduleTask(parent, current, target, task) {
|
||||
parent.scheduleTask(target, task);
|
||||
console.log('Scheduled ' + task.source + ' => ' + task.data.handleId);
|
||||
outputElem.innerText = countingZoneSpec.counter();
|
||||
},
|
||||
onInvokeTask(parent, current, target, task) {
|
||||
console.log('Invoking ' + task.source + ' => ' + task.data.handleId);
|
||||
parent.invokeTask(target, task);
|
||||
outputElem.innerText = countingZoneSpec.counter();
|
||||
},
|
||||
onHasTask(parent, current, target, hasTask) {
|
||||
if (hasTask.macroTask) {
|
||||
console.log("There are outstanding MacroTasks.");
|
||||
} else {
|
||||
console.log("All MacroTasks have been completed.");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
<script>
|
||||
/*
|
||||
* Zone that counts pending async tasks
|
||||
*/
|
||||
const outputElem = document.getElementById('output');
|
||||
const countingZoneSpec = Zone['countingZoneSpec'];
|
||||
const myCountingZone = Zone.current.fork(countingZoneSpec).fork({
|
||||
onScheduleTask(parent, current, target, task) {
|
||||
parent.scheduleTask(target, task);
|
||||
console.log('Scheduled ' + task.source + ' => ' + task.data.handleId);
|
||||
outputElem.innerText = countingZoneSpec.counter();
|
||||
},
|
||||
onInvokeTask(parent, current, target, task) {
|
||||
console.log('Invoking ' + task.source + ' => ' + task.data.handleId);
|
||||
parent.invokeTask(target, task);
|
||||
outputElem.innerText = countingZoneSpec.counter();
|
||||
},
|
||||
onHasTask(parent, current, target, hasTask) {
|
||||
if (hasTask.macroTask) {
|
||||
console.log("There are outstanding MacroTasks.");
|
||||
} else {
|
||||
console.log("All MacroTasks have been completed.");
|
||||
/*
|
||||
* We want to profile just the actions that are a result of this button, so with
|
||||
* a single line of code, we can run `main` in the countingZone
|
||||
*/
|
||||
|
||||
b1.addEventListener('click', function () {
|
||||
myCountingZone.run(main);
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
* Spawns a bunch of setTimeouts which in turn spawn more setTimeouts!
|
||||
* This is a boring way to simulate HTTP requests and other async actions.
|
||||
*/
|
||||
|
||||
function main () {
|
||||
for (var i = 0; i < 10; i++) {
|
||||
recur(i, 800);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
* We want to profile just the actions that are a result of this button, so with
|
||||
* a single line of code, we can run `main` in the countingZone
|
||||
*/
|
||||
|
||||
b1.addEventListener('click', function () {
|
||||
myCountingZone.run(main);
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
* Spawns a bunch of setTimeouts which in turn spawn more setTimeouts!
|
||||
* This is a boring way to simulate HTTP requests and other async actions.
|
||||
*/
|
||||
|
||||
function main () {
|
||||
for (var i = 0; i < 10; i++) {
|
||||
recur(i, 800);
|
||||
function recur (x, t) {
|
||||
if (x > 0) {
|
||||
setTimeout(function () {
|
||||
for (var i = x; i < 8; i++) {
|
||||
recur(x - 1, Math.random()*t);
|
||||
}
|
||||
}, t);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function recur (x, t) {
|
||||
if (x > 0) {
|
||||
setTimeout(function () {
|
||||
for (var i = x; i < 8; i++) {
|
||||
recur(x - 1, Math.random()*t);
|
||||
}
|
||||
}, t);
|
||||
|
||||
/*
|
||||
* There may be other async actions going on in the background.
|
||||
* Because this is not in the zone, our profiling ignores it.
|
||||
* Nice.
|
||||
*/
|
||||
function noop () {
|
||||
setTimeout(noop, 10*Math.random());
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* There may be other async actions going on in the background.
|
||||
* Because this is not in the zone, our profiling ignores it.
|
||||
* Nice.
|
||||
*/
|
||||
function noop () {
|
||||
setTimeout(noop, 10*Math.random());
|
||||
}
|
||||
noop();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
noop();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,21 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Zone.js Examples</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Zone.js Examples</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Examples</h1>
|
||||
|
||||
<h1>Examples</h1>
|
||||
|
||||
<ol>
|
||||
<li><a href="basic.html">Tracing user actions with long stack traces</a></li>
|
||||
<li><a href="counting.html">Counting Tasks</a></li>
|
||||
<li><a href="profiling.html">Profiling Across Tasks</a></li>
|
||||
<li><a href="throttle.html">Throttle</a></li>
|
||||
<li><a href="web-socket.html">WebSocket</a></li>
|
||||
</ol>
|
||||
|
||||
</body>
|
||||
<ol>
|
||||
<li><a href="basic.html">Tracing user actions with long stack traces</a></li>
|
||||
<li><a href="counting.html">Counting Tasks</a></li>
|
||||
<li><a href="profiling.html">Profiling Across Tasks</a></li>
|
||||
<li><a href="throttle.html">Throttle</a></li>
|
||||
<li><a href="web-socket.html">WebSocket</a></li>
|
||||
</ol>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,126 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Zones Profiling</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script>
|
||||
__Zone_disable_Error = true;
|
||||
__Zone_disable_on_property = true;
|
||||
__Zone_disable_geolocation = true;
|
||||
__Zone_disable_toString = true;
|
||||
__Zone_disable_blocking = true;
|
||||
__Zone_disable_PromiseRejectionEvent = true;
|
||||
</script>
|
||||
<script src="../dist/zone.js"></script>
|
||||
<script src="../dist/long-stack-trace-zone.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Zones Profiling</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<script>
|
||||
__Zone_disable_Error = true;
|
||||
__Zone_disable_on_property = true;
|
||||
__Zone_disable_geolocation = true;
|
||||
__Zone_disable_toString = true;
|
||||
__Zone_disable_blocking = true;
|
||||
__Zone_disable_PromiseRejectionEvent = true;
|
||||
</script>
|
||||
<script src="../dist/zone.js"></script>
|
||||
<script src="../dist/long-stack-trace-zone.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Profiling with Zones</h1>
|
||||
|
||||
<h1>Profiling with Zones</h1>
|
||||
<button id="b1">Start Profiling</button>
|
||||
|
||||
<button id="b1">Start Profiling</button>
|
||||
<script>
|
||||
/*
|
||||
* Let's say we want to know the CPU cost from some action
|
||||
* that includes async tasks. We can do this with zones!
|
||||
*/
|
||||
|
||||
<script>
|
||||
/*
|
||||
* Let's say we want to know the CPU cost from some action
|
||||
* that includes async tasks. We can do this with zones!
|
||||
*/
|
||||
|
||||
/*
|
||||
* For this demo, we're going to sort an array using an async
|
||||
* algorithm when a button is pressed.
|
||||
*/
|
||||
function sortAndPrintArray (unsortedArray) {
|
||||
profilingZoneSpec.reset();
|
||||
asyncBogosort(unsortedArray, function (sortedArray) {
|
||||
console.log(sortedArray);
|
||||
console.log('sorting took ' + profilingZoneSpec.time() + ' of CPU time');
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* This is a really efficient algorithm.
|
||||
*
|
||||
* First, check if the array is sorted.
|
||||
* - If it is, call the wrapCallback
|
||||
* - If it isn't, randomize the array and recur
|
||||
*
|
||||
* This implementation is async because JavaScript
|
||||
*/
|
||||
function asyncBogosort (arr, cb) {
|
||||
setTimeout(function () {
|
||||
if (isSorted(arr)) {
|
||||
cb(arr);
|
||||
} else {
|
||||
var newArr = arr.slice(0);
|
||||
newArr.sort(function () {
|
||||
return Math.random() - 0.5;
|
||||
/*
|
||||
* For this demo, we're going to sort an array using an async
|
||||
* algorithm when a button is pressed.
|
||||
*/
|
||||
function sortAndPrintArray (unsortedArray) {
|
||||
profilingZoneSpec.reset();
|
||||
asyncBogosort(unsortedArray, function (sortedArray) {
|
||||
console.log(sortedArray);
|
||||
console.log('sorting took ' + profilingZoneSpec.time() + ' of CPU time');
|
||||
});
|
||||
asyncBogosort(newArr, cb);
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
|
||||
function isSorted (things) {
|
||||
for (var i = 1; i < things.length; i += 1) {
|
||||
if (things[i] < things[i - 1]) {
|
||||
return false;
|
||||
|
||||
/*
|
||||
* This is a really efficient algorithm.
|
||||
*
|
||||
* First, check if the array is sorted.
|
||||
* - If it is, call the wrapCallback
|
||||
* - If it isn't, randomize the array and recur
|
||||
*
|
||||
* This implementation is async because JavaScript
|
||||
*/
|
||||
function asyncBogosort (arr, cb) {
|
||||
setTimeout(function () {
|
||||
if (isSorted(arr)) {
|
||||
cb(arr);
|
||||
} else {
|
||||
var newArr = arr.slice(0);
|
||||
newArr.sort(function () {
|
||||
return Math.random() - 0.5;
|
||||
});
|
||||
asyncBogosort(newArr, cb);
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Bind button
|
||||
*/
|
||||
function main () {
|
||||
var unsortedArray = [3,4,1,2,7];
|
||||
b1.addEventListener('click', function () {
|
||||
sortAndPrintArray(unsortedArray);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* This zone starts a timer at the start of each taskEnv,
|
||||
* and stops it at the end. It accumulates the total run
|
||||
* time internally, exposing it via `zone.time()`
|
||||
*
|
||||
* Note that this is the time the CPU is spending doing
|
||||
* bogosort, as opposed to the time from the start
|
||||
* of the algorithm until it's completion.
|
||||
*/
|
||||
var profilingZoneSpec = (function () {
|
||||
var time = 0,
|
||||
// use the high-res timer if available
|
||||
timer = performance ?
|
||||
performance.now.bind(performance) :
|
||||
Date.now.bind(Date);
|
||||
return {
|
||||
onInvokeTask: function (delegate, current, target, task, applyThis, applyArgs) {
|
||||
this.start = timer();
|
||||
delegate.invokeTask(target, task, applyThis, applyArgs);
|
||||
time += timer() - this.start;
|
||||
},
|
||||
time: function () {
|
||||
return Math.floor(time*100) / 100 + 'ms';
|
||||
},
|
||||
reset: function () {
|
||||
time = 0;
|
||||
function isSorted (things) {
|
||||
for (var i = 1; i < things.length; i += 1) {
|
||||
if (things[i] < things[i - 1]) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
};
|
||||
}());
|
||||
|
||||
|
||||
/*
|
||||
* Bootstrap the app
|
||||
*/
|
||||
Zone.current.fork(profilingZoneSpec).run(main);
|
||||
/*
|
||||
* Bind button
|
||||
*/
|
||||
function main () {
|
||||
var unsortedArray = [3,4,1,2,7];
|
||||
b1.addEventListener('click', function () {
|
||||
sortAndPrintArray(unsortedArray);
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
/*
|
||||
* This zone starts a timer at the start of each taskEnv,
|
||||
* and stops it at the end. It accumulates the total run
|
||||
* time internally, exposing it via `zone.time()`
|
||||
*
|
||||
* Note that this is the time the CPU is spending doing
|
||||
* bogosort, as opposed to the time from the start
|
||||
* of the algorithm until it's completion.
|
||||
*/
|
||||
var profilingZoneSpec = (function () {
|
||||
var time = 0,
|
||||
// use the high-res timer if available
|
||||
timer = performance ?
|
||||
performance.now.bind(performance) :
|
||||
Date.now.bind(Date);
|
||||
return {
|
||||
onInvokeTask: function (delegate, current, target, task, applyThis, applyArgs) {
|
||||
this.start = timer();
|
||||
delegate.invokeTask(target, task, applyThis, applyArgs);
|
||||
time += timer() - this.start;
|
||||
},
|
||||
time: function () {
|
||||
return Math.floor(time*100) / 100 + 'ms';
|
||||
},
|
||||
reset: function () {
|
||||
time = 0;
|
||||
}
|
||||
};
|
||||
}());
|
||||
|
||||
|
||||
/*
|
||||
* Bootstrap the app
|
||||
*/
|
||||
Zone.current.fork(profilingZoneSpec).run(main);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,91 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Zones throttle</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="../dist/zone.js"></script>
|
||||
<script src="../dist/long-stack-trace-zone.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Throttle Example</h1>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Zones throttle</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<script src="../dist/zone.js"></script>
|
||||
<script src="../dist/long-stack-trace-zone.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Throttle Example</h1>
|
||||
|
||||
<button id="b2">Error</button>
|
||||
<button id="b2">Error</button>
|
||||
|
||||
<script>
|
||||
/*
|
||||
* In this example, we have a button that makes some request
|
||||
* to our server. We want to only make the request once per
|
||||
* 1s, so we use a `throttle` helper. If the request fails,
|
||||
* it's difficult to see where the failure originated from.
|
||||
*
|
||||
* Thankfully, we can use zones to preserve the stack even
|
||||
* across async tasks to get a better picture of the control
|
||||
* flow of the app.
|
||||
*/
|
||||
<script>
|
||||
/*
|
||||
* In this example, we have a button that makes some request
|
||||
* to our server. We want to only make the request once per
|
||||
* 1s, so we use a `throttle` helper. If the request fails,
|
||||
* it's difficult to see where the failure originated from.
|
||||
*
|
||||
* Thankfully, we can use zones to preserve the stack even
|
||||
* across async tasks to get a better picture of the control
|
||||
* flow of the app.
|
||||
*/
|
||||
|
||||
var throttleMakeRequest;
|
||||
var throttleMakeRequest;
|
||||
|
||||
/*
|
||||
* Start the app
|
||||
* Bind listeners
|
||||
*/
|
||||
function bootstrap () {
|
||||
b2.addEventListener('click', throttleMakeRequest);
|
||||
}
|
||||
|
||||
/*
|
||||
* Makes a request to the server
|
||||
* Will only make the request once every 1000ms
|
||||
*/
|
||||
throttleMakeRequest = throttle(function () {
|
||||
makeRequestToServer(handleServerResponse);
|
||||
}, 1000);
|
||||
|
||||
|
||||
/*
|
||||
* Pretend this makes a request to a server
|
||||
*/
|
||||
function makeRequestToServer (cb) {
|
||||
setTimeout(cb, 100);
|
||||
}
|
||||
|
||||
|
||||
function handleServerResponse (err, data) {
|
||||
throw new Error('Oops');
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Returns a fn that can only be called once
|
||||
* per `time` milliseconds
|
||||
*/
|
||||
function throttle (fn, time) {
|
||||
var id = null;
|
||||
if (typeof time !== 'number') {
|
||||
time = 0;
|
||||
}
|
||||
return function () {
|
||||
if (!id) {
|
||||
id = setTimeout(function () {
|
||||
id = null;
|
||||
fn();
|
||||
}, time);
|
||||
/*
|
||||
* Start the app
|
||||
* Bind listeners
|
||||
*/
|
||||
function bootstrap () {
|
||||
b2.addEventListener('click', throttleMakeRequest);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/*
|
||||
* Start the application
|
||||
*
|
||||
* If we start the application with `zone.run`, we
|
||||
* get long stack traces in the console!
|
||||
*/
|
||||
/*
|
||||
* Makes a request to the server
|
||||
* Will only make the request once every 1000ms
|
||||
*/
|
||||
throttleMakeRequest = throttle(function () {
|
||||
makeRequestToServer(handleServerResponse);
|
||||
}, 1000);
|
||||
|
||||
//bootstrap();
|
||||
Zone.current.fork(Zone.longStackTraceZoneSpec).run(bootstrap);
|
||||
|
||||
</script>
|
||||
/*
|
||||
* Pretend this makes a request to a server
|
||||
*/
|
||||
function makeRequestToServer (cb) {
|
||||
setTimeout(cb, 100);
|
||||
}
|
||||
|
||||
</body>
|
||||
|
||||
function handleServerResponse (err, data) {
|
||||
throw new Error('Oops');
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Returns a fn that can only be called once
|
||||
* per `time` milliseconds
|
||||
*/
|
||||
function throttle (fn, time) {
|
||||
var id = null;
|
||||
if (typeof time !== 'number') {
|
||||
time = 0;
|
||||
}
|
||||
return function () {
|
||||
if (!id) {
|
||||
id = setTimeout(function () {
|
||||
id = null;
|
||||
fn();
|
||||
}, time);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/*
|
||||
* Start the application
|
||||
*
|
||||
* If we start the application with `zone.run`, we
|
||||
* get long stack traces in the console!
|
||||
*/
|
||||
|
||||
//bootstrap();
|
||||
Zone.current.fork(Zone.longStackTraceZoneSpec).run(bootstrap);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,38 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>WebSockets with Zones</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="../dist/zone.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>WebSockets with Zones</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<script src="../dist/zone.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Ensure that you started <code>node test/ws-server.js</code> before loading this page. Then
|
||||
check console output.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Ensure that you started <code>node test/ws-server.js</code> before loading
|
||||
this page. Then check console output.
|
||||
</p>
|
||||
<script>
|
||||
|
||||
<script>
|
||||
var ws = new WebSocket('ws://localhost:8001');
|
||||
|
||||
var ws = new WebSocket('ws://localhost:8001');
|
||||
ws.onopen = function() {
|
||||
Zone.current.fork({properties: {secretPayload: 'bah!'}, name: 'secrete-zone'}).run(function() {
|
||||
ws.onmessage = function(eventListener) {
|
||||
if (Zone.current.get('secretPayload') === 'bah!') {
|
||||
console.log("The current zone (id: %s) has secretPayload. Zones are working!",
|
||||
Zone.current.name);
|
||||
} else {
|
||||
console.error('Secret payload not found where expected! Zones are not working! :-(', Zone.current.name);
|
||||
}
|
||||
};
|
||||
console.log('Setting secret payload in the current zone (id: %s)', Zone.current.name);
|
||||
});
|
||||
|
||||
ws.onopen = function() {
|
||||
Zone.current.fork({properties: {secretPayload: 'bah!'}, name: 'secrete-zone'}).run(function() {
|
||||
ws.onmessage = function(eventListener) {
|
||||
if (Zone.current.get('secretPayload') === 'bah!') {
|
||||
console.log("The current zone (id: %s) has secretPayload. Zones are working!",
|
||||
Zone.current.name);
|
||||
} else {
|
||||
console.error('Secret payload not found where expected! Zones are not working! :-(', Zone.current.name);
|
||||
}
|
||||
ws.send('hello!');
|
||||
};
|
||||
console.log('Setting secret payload in the current zone (id: %s)', Zone.current.name);
|
||||
});
|
||||
|
||||
ws.send('hello!');
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,73 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
<head>
|
||||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
border: 1px solid black;
|
||||
}
|
||||
ul {
|
||||
font-size: 24px
|
||||
}
|
||||
|
||||
ul {
|
||||
font-size: 24px
|
||||
}
|
||||
li {
|
||||
font-size: 16px
|
||||
}
|
||||
</style>
|
||||
<script src="../../dist/zone.js"></script>
|
||||
<script src="./performance_setup.js"></script>
|
||||
<script src="./performance_ui.js"></script>
|
||||
<script src="./timeout.js"></script>
|
||||
<script src="./requestAnimationFrame.js"></script>
|
||||
<script src="./eventTarget.js"></script>
|
||||
<script src="./xhr.js"></script>
|
||||
<script src="./promise.js"></script>
|
||||
<script>
|
||||
window.onload = function () {
|
||||
var jsonResult = {};
|
||||
|
||||
li {
|
||||
font-size: 16px
|
||||
}
|
||||
</style>
|
||||
<script src='../../dist/zone.js'></script>
|
||||
<script src='./performance_setup.js'></script>
|
||||
<script src='./performance_ui.js'></script>
|
||||
<script src='./timeout.js'></script>
|
||||
<script src='./requestAnimationFrame.js'></script>
|
||||
<script src='./eventTarget.js'></script>
|
||||
<script src='./xhr.js'></script>
|
||||
<script src='./promise.js'></script>
|
||||
<script>
|
||||
window.onload = function () {
|
||||
var jsonResult = {};
|
||||
var div = document.getElementById('tests');
|
||||
var json = document.getElementById('json');
|
||||
var table = document.getElementById('summary');
|
||||
|
||||
var div = document.getElementById('tests');
|
||||
var json = document.getElementById('json');
|
||||
var table = document.getElementById('summary');
|
||||
|
||||
var tests = window['__zone_symbol__performance_tasks'];
|
||||
window['__zone_symbol__testTargetsUIBuild']({
|
||||
tests: tests,
|
||||
targetContainer: div,
|
||||
resultsContainer: table,
|
||||
jsonContainer: json,
|
||||
jsonResult: jsonResult
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="thetext">Performance Bencnhmark of Zone.js vs Native Delegate!</div>
|
||||
<div id="tests"></div>
|
||||
<div>
|
||||
<table id="summary" class="table">
|
||||
<tr class="tableheader">
|
||||
<th>
|
||||
Module
|
||||
</th>
|
||||
<th>
|
||||
API
|
||||
</th>
|
||||
<th>
|
||||
Performance overhead
|
||||
</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div id="json"></div>
|
||||
</body>
|
||||
var tests = window['__zone_symbol__performance_tasks'];
|
||||
window['__zone_symbol__testTargetsUIBuild']({
|
||||
tests: tests,
|
||||
targetContainer: div,
|
||||
resultsContainer: table,
|
||||
jsonContainer: json,
|
||||
jsonResult: jsonResult
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="thetext">Performance Bencnhmark of Zone.js vs Native Delegate!</div>
|
||||
<div id="tests"></div>
|
||||
<div>
|
||||
<table id="summary" class="table">
|
||||
<tr class="tableheader">
|
||||
<th>Module</th>
|
||||
<th>API</th>
|
||||
<th>Performance overhead</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div id="json"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<script src='../../dist/zone-evergreen.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="thetext">Hello Zones!</div>
|
||||
</body>
|
||||
<head>
|
||||
<script src="../../dist/zone-evergreen.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="thetext">Hello Zones!</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<script src='../../dist/zone.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="thetext">Hello Zones!</div>
|
||||
</body>
|
||||
<head>
|
||||
<script src="../../dist/zone.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="thetext">Hello Zones!</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user