Skip to content

Commit deb517f

Browse files
bennadelbennadel
committed
Add network latency demo.
1 parent 19d67b9 commit deb517f

File tree

6 files changed

+227
-14
lines changed

6 files changed

+227
-14
lines changed

Diff for: ‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Simulating Network Latency In AngularJS With HTTP Interceptors](http://bennadel.github.io/JavaScript-Demos/demos/simulate-http-latency-angularjs/)
1314
* [Revisiting Routing, Nested Views, And Caching With ngRoute In AngularJS 1.x](http://bennadel.github.io/JavaScript-Demos/demos/q-notify-routing-angularjs/)
1415
* [Forcing $q .notify() To Execute With A No-Op In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/q-notify-bindings-angularjs/)
1516
* [When Do You Need To Compile A Directive In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/when-to-compile-directive-angularjs/)

Diff for: ‎demos/index.htm

+18-7
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,29 @@
1-
21
<!doctype html>
32
<html>
43
<head>
5-
<script type="text/javascript">
6-
7-
location.href = "https://github.com/bennadel/JavaScript-Demos";
8-
9-
</script>
4+
<neta charset="utf-8" />
5+
<title>
6+
JavaScript Demos
7+
</title>
108
</head>
119
<body>
1210

11+
<h1>
12+
JavaScript Demos
13+
</h1>
14+
1315
<p>
14-
Redirecting...
16+
Where do you want to go?
1517
</p>
1618

19+
<ul>
20+
<li>
21+
<a href="https://github.com/bennadel/JavaScript-Demos">Git Repository Homepage</a>
22+
</li>
23+
<li>
24+
<a href="http://www.bennadel.com">Ben Nadel's blog</a>
25+
</li>
26+
</ul>
27+
1728
</body>
1829
</html>

Diff for: ‎demos/simulate-http-latency-angularjs/data.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"tick": "spooooon!"
3+
}

Diff for: ‎demos/simulate-http-latency-angularjs/demo.css

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
a[ ng-click ] {
2+
color: red ;
3+
cursor: pointer ;
4+
text-decoration: underline ;
5+
}
6+
7+
span[ ng-switch-when = "true" ] {
8+
background-color: gold ;
9+
display: inline-block ;
10+
padding: 0px 3px 0px 3px ;
11+
text-shadow: 1px 1px 1px #FFFFFF ;
12+
}

Diff for: ‎demos/simulate-http-latency-angularjs/index.htm

+175
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
<!doctype html>
2+
<html ng-app="Demo">
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Simulating Network Latency In AngularJS With HTTP Interceptors
8+
</title>
9+
10+
<link rel="stylesheet" type="text/css" href="./demo.css"></link>
11+
</head>
12+
<body ng-controller="AppController">
13+
14+
<h1>
15+
Simulating Network Latency In AngularJS With HTTP Interceptors
16+
</h1>
17+
18+
<p ng-switch="isLoading">
19+
<strong>State</strong>:
20+
<span ng-switch-when="true">Loading http data.</span>
21+
<span ng-switch-when="false">Done after {{ delta }} milliseconds</span>
22+
</p>
23+
24+
<p>
25+
<a ng-click="makeRequest()">Make an HTTP request</a>
26+
</p>
27+
28+
29+
<!-- Load scripts. -->
30+
<script type="text/javascript" src="../../vendor/angularjs/angular-1.3.13.min.js"></script>
31+
<script type="text/javascript">
32+
33+
// Create an application module for our demo.
34+
var app = angular.module( "Demo", [] );
35+
36+
37+
// -------------------------------------------------- //
38+
// -------------------------------------------------- //
39+
40+
41+
// I control the root of the application.
42+
app.controller(
43+
"AppController",
44+
function( $scope, $http ) {
45+
46+
// I determine if there is pending HTTP activity.
47+
$scope.isLoading = false;
48+
49+
// I keep track of how long it takes for the outgoing HTTP request to
50+
// return (either in success or in error).
51+
$scope.delta = 0;
52+
53+
// I am used to move between "200 OK" and "404 Not Found" requests.
54+
var requestCount = 0;
55+
56+
57+
// ---
58+
// PUBLIC METHODS.
59+
// ---
60+
61+
62+
// I alternate between making successful and non-successful requests.
63+
$scope.makeRequest = function() {
64+
65+
$scope.isLoading = true;
66+
67+
var startedAt = new Date();
68+
69+
// NOTE: We are using the requestCount to alternate between requests
70+
// that return successfully and requests that return in error.
71+
$http({
72+
method: "get",
73+
url: ( ( ++requestCount % 2 ) ? "./data.json" : "./404.json" )
74+
})
75+
// NOTE: We foregoing "resolve" and "reject" because we only care
76+
// about when the HTTP response comes back - we don't care if it
77+
// came back in error or in success.
78+
.finally(
79+
function handleDone( response ) {
80+
81+
$scope.isLoading = false;
82+
83+
$scope.delta = ( ( new Date() ).getTime() - startedAt.getTime() );
84+
85+
}
86+
);
87+
88+
};
89+
90+
}
91+
);
92+
93+
94+
// -------------------------------------------------- //
95+
// -------------------------------------------------- //
96+
97+
98+
// Since we cannot change the actual speed of the HTTP request over the wire,
99+
// we'll alter the perceived response time be hooking into the HTTP interceptor
100+
// promise-chain.
101+
app.config(
102+
function simulateNetworkLatency( $httpProvider ) {
103+
104+
$httpProvider.interceptors.push( httpDelay );
105+
106+
107+
// I add a delay to both successful and failed responses.
108+
function httpDelay( $timeout, $q ) {
109+
110+
var delayInMilliseconds = 850;
111+
112+
// Return our interceptor configuration.
113+
return({
114+
response: response,
115+
responseError: responseError
116+
});
117+
118+
119+
// ---
120+
// PUBLIC METHODS.
121+
// ---
122+
123+
124+
// I intercept successful responses.
125+
function response( response ) {
126+
127+
var deferred = $q.defer();
128+
129+
$timeout(
130+
function() {
131+
132+
deferred.resolve( response );
133+
134+
},
135+
delayInMilliseconds,
136+
// There's no need to trigger a $digest - the view-model has
137+
// not been changed.
138+
false
139+
);
140+
141+
return( deferred.promise );
142+
143+
}
144+
145+
146+
// I intercept error responses.
147+
function responseError( response ) {
148+
149+
var deferred = $q.defer();
150+
151+
$timeout(
152+
function() {
153+
154+
deferred.reject( response );
155+
156+
},
157+
delayInMilliseconds,
158+
// There's no need to trigger a $digest - the view-model has
159+
// not been changed.
160+
false
161+
);
162+
163+
return( deferred.promise );
164+
165+
}
166+
167+
}
168+
169+
}
170+
);
171+
172+
</script>
173+
174+
</body>
175+
</html>

Diff for: ‎index.htm

+18-7
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,29 @@
1-
21
<!doctype html>
32
<html>
43
<head>
5-
<script type="text/javascript">
6-
7-
location.href = "https://github.com/bennadel/JavaScript-Demos";
8-
9-
</script>
4+
<neta charset="utf-8" />
5+
<title>
6+
JavaScript Demos
7+
</title>
108
</head>
119
<body>
1210

11+
<h1>
12+
JavaScript Demos
13+
</h1>
14+
1315
<p>
14-
Redirecting...
16+
Where do you want to go?
1517
</p>
1618

19+
<ul>
20+
<li>
21+
<a href="https://github.com/bennadel/JavaScript-Demos">Git Repository Homepage</a>
22+
</li>
23+
<li>
24+
<a href="http://www.bennadel.com">Ben Nadel's blog</a>
25+
</li>
26+
</ul>
27+
1728
</body>
1829
</html>

0 commit comments

Comments
 (0)