forked from bennadel/JavaScript-Demos
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwithout-template.htm
141 lines (90 loc) · 2.4 KB
/
without-template.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!doctype html>
<html ng-app="Demo">
<head>
<meta charset="utf-8" />
<title>
Directive Templates Have A Small Impact On Performance In AngularJS
</title>
<link rel="stylesheet" type="text/css" href="./demo.css"></link>
</head>
<body ng-controller="AppController">
<h1>
Directive Templates Have A Small Impact On Performance In AngularJS
</h1>
<h2>
Duplicating Inline Code
</h2>
<p>
<a ng-click="toggleLists()">Toggle Lists</a>
</p>
<div
ng-if="isShowingLists"
ng-include=" 'list.htm' ">
<!-- Content pulled-in as template to simulate real-world architecture. -->
</div>
<!-- I am the template used to render the main page. -->
<script id="list.htm" type="text/ng-template">
<div class="friends">
<h2>
Friends
</h2>
<ul>
<li ng-repeat="friend in friends track by friend.id">
{{ friend.id }} — {{ friend.name }}
</li>
</ul>
</div>
<div class="enemies">
<h2>
Enemies
</h2>
<ul>
<li ng-repeat="enemy in enemies track by enemy.id">
{{ enemy.id }} — {{ enemy.name }}
</li>
</ul>
</div>
</script>
<!-- Load scripts. -->
<script type="text/javascript" src="../../vendor/angularjs/angular-1.3.6.min.js"></script>
<script type="text/javascript">
// Create an application module for our demo.
var app = angular.module( "Demo", [] );
// -------------------------------------------------- //
// -------------------------------------------------- //
// I control the root of the application.
app.controller(
"AppController",
function( $scope ) {
// I hold the lists being rendered.
$scope.friends = buildList( "Sarah", 1000 );
$scope.enemies = buildList( "Shane", 1000 );
// I determine if the lists should be shown.
$scope.isShowingLists = false;
// ---
// PUBLIC METHODS.
// ---
// I toggle the rendering of the lists (physically removing them from
// the page if they should not be there).
$scope.toggleLists = function() {
$scope.isShowingLists = ! $scope.isShowingLists;
};
// ---
// PRIVATE METHODS.
// ---
// I build a list of people using the given size.
function buildList( name, count ) {
var people = [];
for ( var i = 1 ; i <= count ; i++ ) {
people.push({
id: i,
name: name
});
}
return( people );
}
}
);
</script>
</body>
</html>