Add directive-template performance experiment. · gitlines/JavaScript-Demos@cd29f6d · GitHub
Skip to content

Commit cd29f6d

Browse files
bennadelbennadel
committed
Add directive-template performance experiment.
1 parent d9b3c5b commit cd29f6d

7 files changed

Lines changed: 26618 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 0 deletions

‎demos/directive-template-performance-angularjs/demo.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
a[ ng-click ] {
3+
color: red ;
4+
cursor: pointer ;
5+
text-decoration: underline ;
6+
}

‎demos/directive-template-performance-angularjs/index.htm‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Directive Templates Have A Small Impact On Performance In AngularJS
8+
</title>
9+
</head>
10+
<body>
11+
12+
<h1>
13+
Directive Templates Have A Small Impact On Performance In AngularJS
14+
</h1>
15+
16+
<ul>
17+
<li>
18+
<a href="./without-template.htm">With Duplicated Inline Code</a>
19+
</li>
20+
<li>
21+
<a href="./with-template.htm">With Directive Template</a>
22+
</li>
23+
</ul>
24+
25+
</body>
26+
</html>

‎demos/directive-template-performance-angularjs/with-template.htm‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
<!doctype html>
2+
<html ng-app="Demo">
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Directive Templates Have A Small Impact On Performance In AngularJS
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+
Directive Templates Have A Small Impact On Performance In AngularJS
16+
</h1>
17+
18+
<h2>
19+
Using Directive Template To Reduce Duplication
20+
</h2>
21+
22+
<p>
23+
<a ng-click="toggleLists()">Toggle Lists</a>
24+
</p>
25+
26+
<div
27+
ng-if="isShowingLists"
28+
ng-include=" 'list.htm' ">
29+
30+
<!-- Content pulled-in as template to simulate real-world architecture. -->
31+
32+
</div>
33+
34+
35+
<!-- I am the template used to render the main page. -->
36+
<script id="list.htm" type="text/ng-template">
37+
38+
<div class="friends">
39+
40+
<h2>
41+
Friends
42+
</h2>
43+
44+
<ul>
45+
<li
46+
ng-repeat="friend in friends track by friend.id"
47+
bn-person="friend">
48+
49+
<!-- Content supplied by bnPerson directive template. -->
50+
51+
</li>
52+
</ul>
53+
54+
</div>
55+
56+
<div class="enemies">
57+
58+
<h2>
59+
Enemies
60+
</h2>
61+
62+
<ul>
63+
<li
64+
ng-repeat="enemy in enemies track by enemy.id"
65+
bn-person="enemy">
66+
67+
<!-- Content supplied by bnPerson directive template. -->
68+
69+
</li>
70+
</ul>
71+
72+
</div>
73+
74+
</script>
75+
76+
77+
<!-- I am the template used to render the bnPerson directive. -->
78+
<script id="person.htm" type="text/ng-template">
79+
80+
{{ person.id }} &mdash; {{ person.name }}
81+
82+
</script>
83+
84+
85+
<!-- Load scripts. -->
86+
<script type="text/javascript" src="../../vendor/angularjs/angular-1.3.6.min.js"></script>
87+
<script type="text/javascript">
88+
89+
// Create an application module for our demo.
90+
var app = angular.module( "Demo", [] );
91+
92+
93+
// -------------------------------------------------- //
94+
// -------------------------------------------------- //
95+
96+
97+
// I control the root of the application.
98+
app.controller(
99+
"AppController",
100+
function( $scope ) {
101+
102+
// I hold the lists being rendered.
103+
$scope.friends = buildList( "Sarah", 1000 );
104+
$scope.enemies = buildList( "Shane", 1000 );
105+
106+
// I determine if the lists should be shown.
107+
$scope.isShowingLists = false;
108+
109+
110+
// ---
111+
// PUBLIC METHODS.
112+
// ---
113+
114+
115+
// I toggle the rendering of the lists (physically removing them from
116+
// the page if they should not be there).
117+
$scope.toggleLists = function() {
118+
119+
$scope.isShowingLists = ! $scope.isShowingLists;
120+
121+
};
122+
123+
124+
// ---
125+
// PRIVATE METHODS.
126+
// ---
127+
128+
129+
// I build a list of people using the given size.
130+
function buildList( name, count ) {
131+
132+
var people = [];
133+
134+
for ( var i = 1 ; i <= count ; i++ ) {
135+
136+
people.push({
137+
id: i,
138+
name: name
139+
});
140+
141+
}
142+
143+
return( people );
144+
145+
}
146+
147+
}
148+
);
149+
150+
151+
// -------------------------------------------------- //
152+
// -------------------------------------------------- //
153+
154+
155+
// I provide the layout and behavior for a "Person".
156+
app.directive(
157+
"bnPerson",
158+
function() {
159+
160+
// I link the JavaScript events to the local scope.
161+
function link( scope, element, attributes ) {
162+
163+
// Watch for changes to the linked scope value and assign to person
164+
// as needed.
165+
// --
166+
// NOTE: This is what isolate-scope does behing the scenes to
167+
// implement two-way data binding... at least partially; only w're
168+
// doing it without having to alter the scope tree. The trade-off
169+
// is that we populate the "parent scope" with a new value.
170+
scope.$watch(
171+
attributes.bnPerson,
172+
function handlePersonBindingChangeEvent( newValue ) {
173+
174+
scope.person = newValue;
175+
176+
}
177+
);
178+
179+
}
180+
181+
182+
// Return the isolate-scope directive configuration.
183+
return({
184+
link: link,
185+
templateUrl: "person.htm"
186+
});
187+
188+
}
189+
);
190+
191+
</script>
192+
193+
</body>
194+
</html>

‎demos/directive-template-performance-angularjs/without-template.htm‎

Lines changed: 141 additions & 0 deletions

0 commit comments

Comments
 (0)