-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathng notes
233 lines (143 loc) · 5.85 KB
/
ng notes
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
...Angular Elements...
Directives
Angular Expressions
Controllers
Services
Filters
Views - NO! It's just HTML
$scope
$http
$rescource
...Angular Design....
Client-Side Templates
MVC
Data Binding
.........Directives..........
ng-app //declares angulars boundaries, can go in
html tag for whole page app, or inside a div
example: <html ng-app>
ng-bind = 'data'
//also expressed as {{data}}
//where data is whatever property you want to
//bind to. Use ng-bind instead of {{}} in
//your index.html to keep users from seeing braces
//while angular is still loading
ng-model = "propertyName"
//binds input, select textarea (or custom form control) to a
//property on the $scope object
ng-change = "callback()"
//when field changes call callback, used on input
//fields in the view
ng-controller
$scope //Object used to move things between your view and your model in a
encapsulated way. Usually you should add on a "model object", an object onto
$scope, and then work with that object instead of tacking a bunch of
things directly on the $scope object. Apparenlty this is important for
avoiding problems with "prototypal inheritance". Not really sure exactly
what that's about yet...
ng-submit (a form attr, set equal to callback, default post will be stopped )
ng-click (attr, set equal to a callback for click event)
ng-repeat = "thing in things"
//make elements by iterating trhough an object
//$first, $middle, $last, $repeat are some usable variables
//during the iteration
ng-src (use instead of src on <img> tags )
ng-href (used instead of href for <a> tags)
........................
$scope.$watch(thingToWatch, callback) (watch for var change then run callback)
appModule = angular.module('<nameOfApp>', [<arrayOfArgs?>])
//this is how you define an application module
//the nameOfApp will be used in the view to
//point twoard thea app module like so....
//<html ng-app="nameOfApp">
...Startup Flow of Angular App....
1. User Request Page of application
2. HTTP request, index.html containing your template is loaded
3. Angular loads waits for page to load, find ng-app
4. Angular searches template for 'directives' and 'bindings'
turns everything into a the view
5. Connect to server and pull and push additonal data as needed
Step 4 and 5 can happen async or sync.
.........................
Invoking Angular
1. Load js
2. use ng-app directive (tell angular what part of DOM to use)
Model View Controller - All Agular apps have:
* A model containing data, representing current state of app
* Views that display this data
* Controllers that manage the relationship between model and views
............................................
Angular Expressions
simpel math (+, -, /, *, %),
make comparisons (==, !=, >, <, >=, <=),
perform boolean logic (&&, ||, !)
and bitwise operations (\^, &, |).
functions you expose on $scope in your controller and you can
reference arrays and object notation ([ ], { }, .)
null evaluated expressions will simply do nothing
........................
Conroller Responsibilities
1. Set up intitial state in your app
2. Expose model and fuctions to view (UI template) through $scope
3. Watch other parts of the model and take action
Good Practice: Create one controller per functional area i your view
Two Ways to Associate a Controller
1. Specify in View/Template using ng-controller
2. Associating it with dynamically loaded DOM template fragment
(done through routes and views)
Nested Controllers
<div ng-controller="ParentController">
<div ng-controller="ChildController">...</div>
</div>
Child controller will have access to parents $scope
..............................
Model
Indirect ways to set up model from the template
1. expressions, setting prperties directly in scope of the element
2. using ng-model in form field, creates bi-directional data binding
$watch(watchFn, watchAction, deepWatch)
watchFn (string or with angular expression or function that returns watch value
also can take a $scope function)
watchAtion (function called whne watch watchFn ghanges)
deepWatch (bool used when need to watch a whole array or object)
$watch returns function that will de-register the watch when run:
deReg = $watch();
deReg() (kills the watch)
$watch with only watchFn passed will evaluate
evertime angular evaluates the page
...................
Module Object
provider(name, Object OR constructor())
if passed an object include $get in it, that returns instance of object
otherwise Angular assumes you are passing a constructor
factory(name, $getFunction())
(non configurable service with complex creation logic)
service(name, contsructor)
(non-configurable service with simple creation logic)
defining:
var appMod = angular.module('app', ['SnazzyUIWidgets', 'SuperDataSync']);
................
Filters
{{ expression | filterName : parameter1 : ...parameterN }}
creating your own
module.filter('name', filterFn(input){})
Routes
var module = angular.module('someModule', ['ngRoute']);
someModule.config(function($routeProvider) {
$routeProvider.
.when('url', {controller:aController, templateUrl:'/path/to/template'})
.when(...other mappings for your app...)
…
.otherwise(...what to do if nothing else matches...);
)};
ng-view (used in the teplate to show where the view goes)
........................
Talking to Servers
function ShoppingController($scope, $http) {
$http.get('/products').success(function(data, status, headers, config) {
$scope.items = data;
});
}
Services are single instance object used to carry out task
necesarry to support application functioning
may be passed between controllers.