@@ -32,14 +32,14 @@ This is how we get the ball rolling (refer to the diagram and example below):
32
32
4. Angular looks for {@link api/ng.directive:ngApp ng-app}
33
33
{@link guide/directive directive}, which designates application boundary
34
34
5. {@link guide/module Module} specified in {@link
35
- api/ng.directive:ngApp ng-app} (if any) is used to configure
35
+ api/ng.directive:ngApp ng-app} (if any) is used to configure
36
36
the {@link api/AUTO.$injector $injector}
37
37
6. {@link api/AUTO.$injector $injector} is used to create the {@link
38
38
api/ng.$compile $compile} service as well as {@link
39
39
api/ng.$rootScope $rootScope}
40
- 7. {@link api/ng.$compile $compile} service is used to compile the DOM and link
40
+ 7. {@link api/ng.$compile $compile} service is used to compile the DOM and link
41
41
it with {@link api/ng.$rootScope $rootScope}
42
- 8. {@link api/ng.directive:ngInit ng-init} {@link
42
+ 8. {@link api/ng.directive:ngInit ng-init} {@link
43
43
guide/directive directive} assigns `World` to the `name` property on the {@link guide/scope
44
44
scope}
45
45
9. The `{{name}}` {@link api/ng.$interpolate interpolates} the expression to
@@ -80,8 +80,8 @@ implementing custom event callbacks, or when working with a third-party library
80
80
api/ng.$rootScope.Scope#$apply $apply}`(stimulusFn)`. Where `stimulusFn` is
81
81
the work you wish to do in Angular execution context.
82
82
2. Angular executes the `stimulusFn()`, which typically modifies application state.
83
- 3. Angular enters the {@link api/ng.$rootScope.Scope#$digest $digest} loop. The
84
- loop is made up of two smaller loops which process {@link
83
+ 3. Angular enters the {@link api/ng.$rootScope.Scope#$digest $digest} loop. The
84
+ loop is made up of two smaller loops which process {@link
85
85
api/ng.$rootScope.Scope#$evalAsync $evalAsync} queue and the {@link
86
86
api/ng.$rootScope.Scope#$watch $watch} list. The {@link
87
87
api/ng.$rootScope.Scope#$digest $digest} loop keeps iterating until the model
@@ -96,7 +96,7 @@ implementing custom event callbacks, or when working with a third-party library
96
96
5. The {@link api/ng.$rootScope.Scope#$watch $watch} list is a set of expressions
97
97
which may have changed since last iteration. If a change is detected then the `$watch`
98
98
function is called which typically updates the DOM with the new value.
99
- 6. Once Angular {@link api/ng.$rootScope.Scope#$digest $digest} loop finishes
99
+ 6. Once Angular {@link api/ng.$rootScope.Scope#$digest $digest} loop finishes
100
100
the execution leaves the Angular and JavaScript context. This is followed by the browser
101
101
re-rendering the DOM to reflect any changes.
102
102
@@ -122,7 +122,7 @@ user enters text into the text field.
122
122
5. The {@link api/ng.$rootScope.Scope#$watch $watch} list detects a change
123
123
on the `name` property and notifies the {@link api/ng.$interpolate
124
124
{{name}} } interpolation, which in turn updates the DOM.
125
- 6. Angular exits the execution context, which in turn exits the `keydown` event and with it
125
+ 6. Angular exits the execution context, which in turn exits the `keydown` event and with it
126
126
the JavaScript execution context.
127
127
7. The browser re-renders the view with update text.
128
128
@@ -165,7 +165,7 @@ a diagram depicting the scope boundaries.
165
165
function GreetCtrl($scope) {
166
166
$scope.name = 'World';
167
167
}
168
-
168
+
169
169
function ListCtrl($scope) {
170
170
$scope.names = ['Igor', 'Misko', 'Vojta'];
171
171
}
@@ -196,7 +196,7 @@ controller.
196
196
The separation of the controller and the view is important because:
197
197
198
198
* The controller is written in JavaScript. JavaScript is imperative. Imperative is a good fit
199
- for specifying application behavior. The controller should not contain any rendering
199
+ for specifying application behavior. The controller should not contain any rendering
200
200
information (DOM references or HTML fragments).
201
201
* The view template is written in HTML. HTML is declarative. Declarative is a good fit for
202
202
specifying UI. The View should not contain any behavior.
@@ -220,7 +220,7 @@ The separation of the controller and the view is important because:
220
220
$scope.action = function() {
221
221
$scope.name = 'OK';
222
222
}
223
-
223
+
224
224
$scope.name = 'World';
225
225
}
226
226
</file>
@@ -249,8 +249,8 @@ primitive, object hash, or a full object Type. In short the model is a plain Jav
249
249
<img class="pull-right" style="padding-left: 3em; padding-bottom: 1em;" src="img/guide/concepts-view.png">
250
250
251
251
The view is what the users sees. The view begins its life as a template, it is merged with the
252
- model and finally rendered into the browser DOM. Angular takes a very different approach to
253
- rendering the view, to most other templating systems.
252
+ model and finally rendered into the browser DOM. Angular takes a very different approach to
253
+ rendering the view, to most other templating systems.
254
254
255
255
* **Others** - Most templating systems begin as an HTML string with special templating markup.
256
256
Often the template markup breaks the HTML syntax which means that the template can not be
@@ -260,13 +260,13 @@ rendering the view, to most other templating systems.
260
260
When the model changes the whole process needs to be repeated. The granularity of the template
261
261
is the granularity of the DOM updates. The key here is that the templating system manipulates
262
262
strings.
263
- * **Angular** - Angular is different, since its templating system works on DOM objects not on
263
+ * **Angular** - Angular is different, since its templating system works on DOM objects not on
264
264
strings. The template is still written in HTML string, but it is HTML (not HTML with
265
265
template sprinkled in.) The browser parses the HTML into DOM, and the DOM becomes the input to
266
266
the template engine know as the {@link api/ng.$compile compiler}. The compiler
267
267
looks for {@link guide/directive directives} which in turn set up {@link
268
268
api/ng.$rootScope.Scope#$watch watches} on the model. The result is a
269
- continuously updating view which does not need template model re-merging. Your model becomes
269
+ continuously updating view which does not need template model re-merging. Your model becomes
270
270
the single source-of-truth for your view.
271
271
272
272
<div class="clear">
@@ -345,7 +345,7 @@ They are follow the spirit of UNIX filters and follow similar syntax `|` (pipe).
345
345
<file name="index.html">
346
346
<div ng-init="list = ['Chrome', 'Safari', 'Firefox', 'IE'] ">
347
347
Number formatting: {{ 1234567890 | number }} <br>
348
- array filtering <input ng-model="predicate">
348
+ array filtering <input ng-model="predicate">
349
349
{{ list | filter:predicate | json }}
350
350
</div>
351
351
</file>
@@ -373,20 +373,20 @@ as a {@link api/AUTO.$provide provider}.
373
373
<pre>
374
374
// Create a module
375
375
var myModule = angular.module('myModule', [])
376
-
376
+
377
377
// Configure the injector
378
378
myModule.factory('serviceA', function() {
379
379
return {
380
380
// instead of {}, put your object creation here
381
381
};
382
382
});
383
-
383
+
384
384
// create an injector and configure it from 'myModule'
385
- var $injector = angular.injector('myModule');
386
-
385
+ var $injector = angular.injector([ 'myModule'] );
386
+
387
387
// retrieve an object from the injector by name
388
388
var serviceA = $injector.get('serviceA');
389
-
389
+
390
390
// always true because of instance cache
391
391
$injector.get('serviceA') === $injector.get('serviceA');
392
392
</pre>
@@ -405,12 +405,12 @@ allows the methods and types to ask for their dependencies rather then to look f
405
405
406
406
// Angular provides the injector for your application
407
407
var $injector = ...;
408
-
408
+
409
409
///////////////////////////////////////////////
410
410
// the old-school way of getting dependencies.
411
411
var serviceA = $injector.get('serviceA');
412
412
var serviceB = $injector.get('serviceB');
413
-
413
+
414
414
// now call the function
415
415
doSomething(serviceA, serviceB);
416
416
@@ -442,15 +442,15 @@ dependencies, look for dependencies, or even get a reference to the injector.
442
442
// which will be available for injection
443
443
factory('time', function($timeout) {
444
444
var time = {};
445
-
445
+
446
446
(function tick() {
447
447
time.now = new Date().toString();
448
448
$timeout(tick, 1000);
449
449
})();
450
450
return time;
451
451
});
452
-
453
- // Notice that you can simply ask for time
452
+
453
+ // Notice that you can simply ask for time
454
454
// and it will be provided. No need to look for it.
455
455
function ClockCtrl($scope, time) {
456
456
$scope.time = time;
0 commit comments