-
Notifications
You must be signed in to change notification settings - Fork 0
/
indsec4.htm
178 lines (108 loc) · 6.31 KB
/
indsec4.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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<!-- Beginning stuff to import and define all -->
<head>
<title>Hey Come on Everypeople: Let's Learn and Understand AngularJS!</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="bootstrap.min.css" />
<!-- load angular locally -->
<script src="angular.min.js"></script>
<!-- load js files that implement angjs code -->
<script src="appsec4.17-4.24.js"></script>
<style>
html, body, input, select, textarea
{
font-size: 1.05em;
}
</style>
</head>
<!-- Start body -->
<body>
<!-- Header *of* the body -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
</ul>
</div>
</nav>
</header>
<!-- Actual body per se starts here -->
<div class="container">
<div ng-controller="mainController417">
<h1>Stuff from sec 4.17: Hello {{ name + '. How are you?' }}</h1>
<hr>
</div>
<div ng-controller="mainController418">
<h1>Stuff from sec 4.18: What is your twitter handle?</label></h1>
<!-- This is the "ng-model" directive for angjs, this says go look in the model, look at the handle var of scope, and then retrieve and display it below when asked for. This is a 2-way data binding. -->
<input type="text" ng-model="handle" />
<hr />
As entered: <h1>twitter.com/{{ handle }}</h1> <!-- Note no parens after handle because it's *not* a function, but is a direct variable belonging to scope, if you look in the app.js -->
All lower case-ified: <h1>twitter.com/{{ lowercasehandle418() }}</h1> <!-- Now we have parens after lowercasehandle because it *is* a function, also belonging to scope, if you look in the appsec4.18.js -->
All upper case-ified: <h1>twitter.com/{{ uppercasehandle418() }}</h1> <!-- Now we have parens after uppercasehandle because it *is* a function, as above
NB: 4.18 and 4.20 seem to clash, so you won't get the upper case-ified stuff if you also load up 4.20 -->
</div>
<div ng-controller="mainController420"> <hr> <h1> Stuff from sec 4.20: What is the flying speed of an African sparrow? </h1>
<input type="text" ng-model="handle420" />
<hr />
As entered: <h1>sparrowspeed.com/{{ handle420 }}</h1>
All lower case-ified: <h1> sparrowspeed.com/{{ lowercasehandle420() }}</h1>
All upper case-ified: <h1>sparrowspeed.com/{{ uppercasehandle420() }}</h1>
</div>
<div ng-controller="mainController421">
<hr>
<div>
<h1> Stuff from sec 4.21: What is your twitter handle, you tweetomaniac?</h1>
(And you need exactly 5 chars for this example)
<input type="text" ng-model="handle421" />
</div>
<!-- The stuff in the braces below is a JS 'object', and the conditionals following it are met -->
<div class="alert" ng-class="{ 'alert-warning': handle421.length < char_reqt, 'alert-danger': handle421.length > char_reqt }" ng-if="handle421.length !== char_reqt">
<!-- If the above conditional is met, then we check the ones below this -->
<!-- The ng-show directive will show the msg if it meets the reqt below -->
<div ng-show="handle421.length < char_reqt">
You have less than 5 characters, what, you got RSI??!
</div>
<div ng-show="handle421.length > char_reqt">
You have more than 5 characters, slow down, tigger!
</div>
</div>
<hr />
<h1>twitter.com/{{ lowercasehandle421() }}</h1>
<h3>Rules</h3>
<ul>
<!-- This loops over the list of rules-->
<li ng-repeat="rule in rulesforlife">
{{ rule.rulename }}
</li>
</ul>
</div>
<div ng-controller="mainController422">
<hr>
<div>
<h1> Stuff from sec 4.22:</h1>
<input type="button" value='click' ng-click="didyouclick()" />
</div>
// Using ng-cloak will not show 'nametoshow' even for a split sec when presenting to the screen, will only show when the proper var has been interpolated in
<div ng-cloak>
{{ nametoshow }}
</div>
<!-- other events:
- keydown
- keypress
- change
-->
</div>
</div> <!-- Container div ends here -->
<hr> <hr>
<!-- JS aside about textboxes -->
A JS textbox (not from anything in Section 4): <input type="text" id="textbox1" />
</body>
</html>