-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
222 lines (149 loc) · 6.75 KB
/
index.html
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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!doctype html>
<i> -------- </i>
May 2015
<p>
<i> -------- </i>
MSSG
<hr>
<center>
<h2> Beginning some AngJS larnin' </h2>
</center>
<html >
<head>
<!-- Include the Bootstrap minified CSS that i downloaded -->
<!-- I don't like what this CSS does to the page, so i comment it out for now: <link href="bootstrap.min.css" rel="stylesheet" /> -->
<!-- Include some font they prefer -->
<link href='http://fonts.googleapis.com/css?family=Roboto:500,300,700,400' rel='stylesheet' type='text/css'>
<!-- Include the AngularJS library -->
<script src="angular.min.js"></script>
</head>
<body>
<h4> <i> ----------- Basic new html things to me: </i> </h4>
<ul>
<li> <b> span </b> is an html tag like <b> div </b>
</ul>
<h4> ----------- AngJS </h4>
<i> -------- Tell AngJS we're going to start using it with the ng-app directive with <b> ng-app </b> </i>
<div ng-app>
<i> -------- Can do simple expr stuff in double braces </i>
<p>The number {{5+10}} is 15 </p>
<p> a = {{a=4}}
<p> a*a = {{ a*a }}
<p> <i> -------- Can execute a fair number of js functions to do simple expr stuff too </i>
<p> UpperCasifying the js: {{ "Angular" + "js".toUpperCase() }}
<p> <i> -------- Can even execute some conditionals </i>
<p>There {{count = 4; (count == 1 ? "is " : "are ") + count*a }} of them.
<p> <i> -------- This directive is another way to assign vars: <b> ng-init </b>, and won't show the var onscreen until called -- the assignment must be in doublequotes in this case </i>
<p>
<span ng-init="sum = 3 + 2" >
<span ng-init=" unit = 1" >
Now we can say that {{sum + unit}} is {{unit*2}} more than {{sum-unit}}.
</span>
</span>
<p> <p> <i> -------- Another way to give the expr is to use the <b> ng-bind </b> directive </i>
<p> This way implicitly cloaks the init html: {{sum + unit}} is {{unit*2}} more <span ng-bind='sum - unit'></span>
<p> <i> -------- Assigning a number of properties to a larger container var </i>
<span ng-init="time = {count: 12, units: 'months', collection: 'year'}">
<p>
There are {{time.count}} {{time.units}} in a {{time.collection}}.
</p>
</span>
<p> <i> -------- Can also use arrays </i>
<span ng-init="months = ['January','February','March','April']">
<p> {{months[3]}} follows {{months[2]}} in {{months}}. </p>
</span>
<p> <i> -------- Nested array in a var </i>
<ul>
<li> <p> <i> -------- Way i understand it: </i>
<br> cardinalarray = {{cardinalarray = ['first','second','third' ] }}
<br> verbarray = {{verbarray = ['run','jump','skydive' ] }}
<br> {{sentence2 = {words: cardinalarray , verbs: verbarray } }}
<br> The first elt of cardinalarray is <i> {{cardinalarray[0]}}. </i>
<p> Example sentence: {{ "The "+ sentence2.words[0] +" dude was gonna "+ sentence2.verbs[1] }}.
<li> <p> <i> -------- Their way, less clear to me: </i>
<div ng-init="paragraph = {sentence: {words: ['first','second','third'] }}">
<p>
"{{typo.sentence.words[0]}}",
"{{paragraph.typo.words[1]}}",
"{{paragraph.sentence.typo[2]}}",
"{{paragraph.sentence.words[3]}}".
{{paragraph.words[1]}},
{{paragraph.sentence[2]}},
{{paragraph.sentence.words[3]}}
</p>
</div>
</ul>
<p> <i> --------Short discussion of <b> ng-non-bindable </b> directive </i>
<p> <i> --------The <b> ng-show </b> and <b> ng-hide </b> directives </i>
<p ng-init="authorized = true">
The secret code is
<span ng-show="!authorized">0123</span>
<span ng-hide="!authorized">not for you to see</span>
</p>
<p> <i> -------- Two way data binding using the <b> ng-click </b> directive </i>
<p ng-init="authorized = true">
The secret code is
<span ng-show="authorized">0123</span>
<span ng-hide="authorized">not for you to see</span>
<br>
<input type="button" value="toggle" ng-click="authorized = !authorized">
</p>
<p> <i> -------- Two way data binding using the <b> ng-model </b> directive </i>
<p> <input type="text" ng-model="firstbox">
is bound to
<strong ng-bind="firstbox"></strong>.
Type something in the box!
<p> <i> -------- Two way data binding including an init value in box: </i>
<p>
<input type="text" ng-init="secondbox = 'Justmessin' " ng-model="secondbox">
is bound to
<strong ng-bind="secondbox"></strong>.
Change it!
<p> <i> -------- Checkbox input <b> </b> </i>
<p>
<input type='checkbox' ng-init='optIn = true' ng-model='optIn'>
is bound to
<strong ng-bind="optIn"></strong>.
Change it!
<p> <i> -------- Binding a checkbox to a string <b> </b> </i>
<p>
<input type='checkbox' ng-init='feeling = "love it"' ng-model='feeling'
ng-true-value='"love it"' ng-false-value='"hate it"'>
is bound to
<strong ng-bind="feeling"></strong>.
Change it!
<p> <i> -------- Pulldown menu -- <b> select </b> directive </i>
<select ng-init='answer = "maybe"' ng-model='answer'>
<option value='yes' selected>Yes</option>
<option value='no'>No</option>
<option value='maybe'>Maybe</option>
<option value='noway'>Not telling you</option>
</select>
is bound to
<strong ng-bind="answer"></strong>.
<p> Change it!
<p>
<font color = #ff0000> .....? Up till now, everything called a 'directive' was "ng-directivename", but now they called select a directive..? </font>
<p> <i> -------- Radiobutton input <b> </b> </i>
<div ng-init='answer2 = "maybe"'>
<input type='radio' ng-model='answer2' value='yes'> Yes
<input type='radio' ng-model='answer2' value='no'> No
<input type='radio' ng-model='answer2' value='maybe'> Maybe
<input type='radio' ng-model='answer2' value='spittoon'> You will get nothing and like it
<p> is bound to
<strong ng-bind="answer2"></strong>.
<p> Change it!
</div>
</div> <!-- End ng-app for this section -->
<hr>
<p> --------------------------------------- Controllers
<div ng-app="module">
<p ng-controller="MessageController as controller">
{{controller.message}}
</p>
<p>
</div>
</body> <!-- This is the end div for ng-app -->
<p> <i> -------- <b> </b> </i>
<p> <i> -------- <b> End of blank dummy vars </b> </i>
</html>