forked from shangerxin/BookNotes
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathAngularJS=Shyam Seshadri;Note=Erxin.txt
356 lines (213 loc) · 9.89 KB
/
AngularJS=Shyam Seshadri;Note=Erxin.txt
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
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
AngularJS=Shyam Seshadri;Note=Erxin
# Introduction to angularJS
- introduction
- client side templates
<p>{{greeting.text}}, World</p>
- model view controller(MVC)
- data binding
- dependency injection
function controllerFunc($scope, $location){
}
- directive
ng-model
ng-controller
- an example: shopping cart
<tag ng-app>
<body ng-controller='controller-name'>
<div ng-repeat='item in items>
<span> {{item.title}} </span>
</div>
<input ng-model='item.quantity'>
<button ng-click='remove($index)'>remove</button>
</body>
</tag ng-app>
# Anatomy of an angularJS application
- invoking angular
+ load library
+ angular manage dom with ng-app
- loading the script
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/agular.min.js></script>
CDN, content delivery network
- declaring angular's boundaries with ng-app
<html ng-app='app'>
</html>
init the application
var app = angular.module('app', []);
app.controller('customController', function($scope){
});
- model view controller
+ create a controller in js file
function customController($scope){
$scope.someText = someText;
}
+ reference the defiend controller
<html ng-app>
<body ng-controller="customController">
<p>{{someText}}</p>
</body>
</html>
- basic web application workflow
+ use request the first page of your application
+ user's browser makes an http connection to your server and loads the index.html page containing your template
+ augnlar loads into the page, waits fo rhe page to be fully loaded and then looks for ng-app to define its template boundaries
+ angular traverses the template and looks for directies and bindings. the results in registration of listeners and DOM manipulation. app is bootstrapped and template converted to view
+ you connect to your server to load addtional data you need to show the user as needed
- display text
using ng-bind directive
<p> {{greeting}} </p>
attribute-based directive called ng-bind
<p ng-bind="greeting"></p>
- form input, use ng-model attribute to bind elements to your model property
<form ng-control="control-name">
<input type="checkbox" ng-model="youCheckIt">
</form>
this means user check the checkbox a property youCheckIt on the control-name's $scope will become true
this works with all the standard form elements like text input, radio buttons, checkboxes, and so on
+ check the input change by ng-change directive
<input ng-change="computeNeeded()" ng-model="funding.startingEstimate">
//relative js file
function controller-name($scope){
$scope.funding = {startingEstimate:0};
$scope.computeNeeded = function(){
$scope.funding.needed = $scope.funding.startingEstimate * 10;
}
}
to update a field no matter how it gets update we need to use a $scope function called $watch()
$scope.$watch('funding.startingEstimate', computedNeed);
this means when ever the property of the $scope.funding.startingEstimate will call the function computeNeeded
we could also watch the return value of a function
+ use ng-submit directive on the form itself to specify a function to call when the form submits
<form ng-submit="requestFunding()" ng-controller="StartUpController">
</form>
+ angular provide event-handling directives that resemble the browser's native event attributes
ng-click
ng-dblclick
+ tobtrusive javascript, don't use inline javascript in tag
+ list tables and other repeated elements
var students = [{name:'Mary Contrary', id:'1'},
{name:'Jack Sprat', id:'2'},
{name:'Jill Hill', id:'3'}];
function StudentListController($scope) {
$scope.students = students;
}
<ul ng-controller='studentsController'>
<li ng-repeat='student in students'>
<a ng-href='/student/view/{{student.id}}'>{{student.name}}</a>
</li>
</ul>
current index could be reference by $index, other helpers are $first, $middle, $last
<table ng-controller='AlbumController'>
<tr ng-repeat='track in album'>
<td>{{$index + 1}}</td>
<td>{{track.name}}</td>
<td>{{track.duration}}</td>
</tr>
</table>
$index is start from zero
- hide and show
ng-show
ng-hide
<ul ng-show='menuState.show'>
<li ng-click='stun()'>Stun</li>
<li ng-click='disintegrate()'>Disintegrate</li>
<li ng-click='erase()'>Erase from history</li>
</ul>
- css classes and styles, the template could also works with css
+ define a css
.menu-disabled-true {
color: gray;
}
+ control the display with template expression
<div ng-controller='DeathrayMenuController'>
<ul>
<li class='menu-disabled-{{isDisabled}}' ng-click='stun()'>Stun</li>
...
</ul>
</div>
the property should be set to string
+ angular also provide ng-class and ng-sytle directives. each of them takes an expression the result of evaluating this expression can be one of the following
a string
an array of class names
a map of class names to boolean values
example use these directives to control the display, the property is the relative class name
.error {
background-color: red;
}
.warning {
background-color: yellow;
}
<div ng-controller='HeaderController'>
...
<div ng-class='{error: isError, warning: isWarning}'>{{messageText}}</div>
…
<button ng-click='showError()'>Simulate Error</button>
<button ng-click='showWarning()'>Simulate Warning</button>
</div>
function HeaderController($scope) {
$scope.isError = false;
$scope.isWarning = false;
$scope.showError = function() {
$scope.messageText = 'This is an error!';
$scope.isError = true;
$scope.isWarning = false;
};
$scope.showWarning = function() {
$scope.messageText = 'Just a warning. Please carry on.';
$scope.isWarning = true;
$scope.isError = false;
};
}
also could use other boolean expression
<tr ng-repeat='restaurant in directory' ng-click='selectRestaurant($index)' ng-class='{selected: $index==selectedRow}'>
- src and href attribute, angular use ng-src and ng-href to replace the default attribute to supply data binding
<img ng-src="/images/cats/{{favoriteCat}}">
- expressions, support operation, comparation, boolean logic, call function, bitwise operations. cal the function expose by $scope object. referenc array and object
<div ng-controller='SomeController'>
<div>{{recompute() / 10}}</div>
<ul ng-repeat='thing in things'>
<li ng-class='{highlight: $index % 4 >= threshold($index)}'>
{{otherFunction($index)}}
</li>
</ul>
</div>
the expression is not evaluate using JS eval(), they are consider more restrictive. they using a custom parser
- seperating UI responsibilities with controllers. controllers have three responsibilities in your app
+ setup the intial state in your application's model
+ expose model and functions to view(UI template) through $scope
+ watch other parts of the model for changes and take action
suggest to create controller for each function area in your view
use ng-controller attribute to associate a controller to a DOM element. a dynamic loaded DOM template is called a view which is load through a route
use nested controllers could share model and functions through inheritance tree. the nested is happend in the $scope object the parent $scope will pass to the child controller's $scope
<div ng-controller="ParentController">
<div ng-controller="ChildController">...</div>
</div>
- publishing model data with scopes. $scope object passed to our controllers is the mechanism we use to expose model data to views. there are several ways to setup property of the $scope
+ direct way
$scope.count = 5
+ use expression in template
<buttonn ng-click='count=3'>set count to three</button>
+ using ng-model on a form input, the model specified as the argument for ng-model also works within the scope of the enclosing controller
- observing model changes with $watch, watch a property or a javascript function, signature is
$watch(watchFn, watchAction, deepWatch)
watchFn, is a string with an angular expression or a function that return the current value of the model that you want to watch. the expression will be evalue multiple times without changing state.
watchAction, function or expression to be called when the watchFn changes signature is foo(newValue, oldValue, scope)
deepWatch, boolean, true means tell angular check each property within the watched object for changes
watch function will return a de-register which could be used to de-registe the listener when you no longer want to receive change notifications
var dereg = $scope.$watch('someModel.someProperty', callbackOnChange());
...
dereg();
- performance considerations in watch(), the watch value, filter function, template will all eval the function or expression. This may be a performance issue make sure your function and expression support reentrence
angular have a nice chrome debugging extension called Batarang which will automatically highlight the expensive data bindings
to optimize the exiting code we could use an object or array instead of caclulate all the value in the runtime
+ reentrence may happend at
template
$watch()
event handler
the max reentrence time is 10 if big than that angular will throw a error. If it happend the code may contain a dependency loop
+ watch multiple properties or objects for reduce the reentrence
* watch a concatenated value of the properties
$scope.$watch('things.a + things.b', callMe(...));
* put them into an array or object and pass in deepWatch as true.
$scope.$watch('things', callMe(...), true);
watch all the propertys of the object things
- organizing dependencies with modules