@@ -26,20 +26,20 @@ This is how we get the ball rolling (refer to the diagram and example below):
26
26
27
27
<img class="pull-right" style="padding-left: 3em;" src="img/guide/concepts-startup.png">
28
28
29
- 1. Browser loads the HTML and parses it into a DOM
30
- 2. Browser loads `angular.js` script
29
+ 1. The browser loads the HTML and parses it into a DOM
30
+ 2. The browser loads `angular.js` script
31
31
3. Angular waits for `DOMContentLoaded` event
32
32
4. Angular looks for {@link api/ng.directive:ngApp ng-app}
33
- {@link guide/directive directive}, which designates application boundary
34
- 5. {@link guide/module Module} specified in {@link
33
+ {@link guide/directive directive}, which designates the application boundary
34
+ 5. The {@link guide/module Module} specified in {@link
35
35
api/ng.directive:ngApp ng-app} (if any) is used to configure
36
36
the {@link api/AUTO.$injector $injector}
37
- 6. {@link api/AUTO.$injector $injector} is used to create the {@link
37
+ 6. The {@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. The {@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. The {@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
@@ -59,21 +59,21 @@ This is how we get the ball rolling (refer to the diagram and example below):
59
59
60
60
<img class="pull-right" style="padding-left: 3em; padding-bottom: 1em;" src="img/guide/concepts-runtime.png">
61
61
62
- The diagram and the example below describe how Angular interacts with browser's event loop.
62
+ The diagram and the example below describe how Angular interacts with the browser's event loop.
63
63
64
- 1. Browsers event-loop waits for an event to arrive. Event is a user interactions, timer event,
64
+ 1. The browser's event-loop waits for an event to arrive. An event is a user interactions, timer event,
65
65
or network event (response from a server).
66
- 2. The events callback gets executed. This enters the JavaScript context. The callback can
66
+ 2. The event's callback gets executed. This enters the JavaScript context. The callback can
67
67
modify the DOM structure.
68
- 3. Once the callback finishes execution , the browser leaves the JavaScript context and
68
+ 3. Once the callback executes , the browser leaves the JavaScript context and
69
69
re-renders the view based on DOM changes.
70
70
71
- Angular modifies the normal JavaScript flow by providing it's own event processing loop. This
71
+ Angular modifies the normal JavaScript flow by providing its own event processing loop. This
72
72
splits the JavaScript into classical and Angular execution context. Only operations which are
73
- applied in Angular execution context will benefit from angular data-binding, exception handling,
74
- property watching, etc... Use $apply() to enter Angular execution context from JavaScript. Keep in
75
- mind that in most places (controllers, services) the $apply has already been called for you by the
76
- directive which is handling the event. The need to call $apply is reserved only when
73
+ applied in Angular execution context will benefit from Angular data-binding, exception handling,
74
+ property watching, etc... You can also use $apply() to enter Angular execution context from JavaScript. Keep in
75
+ mind that in most places (controllers, services) $apply has already been called for you by the
76
+ directive which is handling the event. An explicit call to $apply is needed only when
77
77
implementing custom event callbacks, or when working with a third-party library callbacks.
78
78
79
79
1. Enter Angular execution context by calling {@link guide/scope scope}`.`{@link
@@ -89,14 +89,14 @@ implementing custom event callbacks, or when working with a third-party library
89
89
$evalAsync} queue is empty and the {@link api/ng.$rootScope.Scope#$watch
90
90
$watch} list does not detect any changes.
91
91
4. The {@link api/ng.$rootScope.Scope#$evalAsync $evalAsync} queue is used to
92
- schedule work which needs to occur outside of current stack frame, but before the browser
92
+ schedule work which needs to occur outside of current stack frame, but before the browser's
93
93
view render. This is usually done with `setTimeout(0)`, but the `setTimeout(0)` approach
94
94
suffers from slowness and may cause view flickering since the browser renders the view after
95
95
each event.
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 the 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
@@ -188,7 +188,7 @@ a diagram depicting the scope boundaries.
188
188
189
189
<img class="pull-right" style="padding-left: 3em; padding-bottom: 1em;" src="img/guide/concepts-controller.png">
190
190
191
- Controller is the code behind the view. Its job is to construct the model and publish it to the
191
+ A controller is the code behind the view. Its job is to construct the model and publish it to the
192
192
view along with callback methods. The view is a projection of the scope onto the template (the
193
193
HTML). The scope is the glue which marshals the model to the view and forwards the events to the
194
194
controller.
@@ -233,7 +233,7 @@ The separation of the controller and the view is important because:
233
233
<img class="pull-right" style="padding-left: 3em; padding-bottom: 1em;" src="img/guide/concepts-model.png">
234
234
235
235
The model is the data which is used merged with the template to produce the view. To be able to
236
- render the model into the view, the model has to be referenceable from the scope. Unlike many
236
+ render the model into the view, the model has to be able to be referenced from the scope. Unlike many
237
237
other frameworks Angular makes no restrictions or requirements an the model. There are no classes
238
238
to inherit from or special accessor methods for accessing or changing the model. The model can be
239
239
primitive, object hash, or a full object Type. In short the model is a plain JavaScript object.
@@ -250,7 +250,7 @@ primitive, object hash, or a full object Type. In short the model is a plain Jav
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
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.
253
+ rendering the view, compared 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
@@ -261,9 +261,9 @@ rendering the view, to most other templating systems.
261
261
is the granularity of the DOM updates. The key here is that the templating system manipulates
262
262
strings.
263
263
* **Angular** - Angular is different, since its templating system works on DOM objects not on
264
- strings. The template is still written in HTML string, but it is HTML (not HTML with
265
- template sprinkled in.) The browser parses the HTML into DOM, and the DOM becomes the input to
266
- the template engine know as the {@link api/ng.$compile compiler}. The compiler
264
+ strings. The template is still written in an HTML string, but it is HTML (not HTML with
265
+ template sprinkled in.) The browser parses the HTML into the DOM, and the DOM becomes the input to
266
+ the template engine known 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
269
continuously updating view which does not need template model re-merging. Your model becomes
@@ -291,7 +291,7 @@ rendering the view, to most other templating systems.
291
291
<a name="directives"></a>
292
292
# Directives
293
293
294
- A directive is a behavior or DOM transformation which is triggered by a presence of an attribute,
294
+ A directive is a behavior or DOM transformation which is triggered by the presence of a custom attribute,
295
295
element name, or a class name. A directive allows you to extend the HTML vocabulary in a
296
296
declarative fashion. Following is an example which enables data-binding for the `contenteditable`
297
297
in HTML.
@@ -337,7 +337,7 @@ in HTML.
337
337
<a name="filters"></a>
338
338
# Filters
339
339
340
- {@link api/ng.$filter Filters} perform data transformation roles . Typically
340
+ {@link api/ng.$filter Filters} perform data transformation. Typically
341
341
they are used in conjunction with the locale to format the data in locale specific output.
342
342
They follow the spirit of UNIX filters and use similar syntax `|` (pipe).
343
343
@@ -358,7 +358,7 @@ They follow the spirit of UNIX filters and use similar syntax `|` (pipe).
358
358
359
359
<img class="pull-right" style="padding-left: 3em; padding-bottom: 1em;" src="img/guide/concepts-module-injector.png">
360
360
361
- An {@link api/AUTO.$injector injector} is a service locator. There is a single
361
+ The {@link api/AUTO.$injector injector} is a service locator. There is a single
362
362
{@link api/AUTO.$injector injector} per Angular {@link
363
363
api/ng.directive:ngApp application}. The {@link
364
364
api/AUTO.$injector injector} provides a way to look up an object instance by its
@@ -438,7 +438,7 @@ dependencies, look for dependencies, or even get a reference to the injector.
438
438
</file>
439
439
<file name="script.js">
440
440
angular.module('timeExampleModule', []).
441
- // Declare new object call time,
441
+ // Declare new object called time,
442
442
// which will be available for injection
443
443
factory('time', function($timeout) {
444
444
var time = {};
0 commit comments