Skip to content

Commit 4d1254d

Browse files
gjungbmhevery
authored andcommitted
docs(core): fix some typos
1 parent 08850a5 commit 4d1254d

File tree

4 files changed

+89
-89
lines changed

4 files changed

+89
-89
lines changed

modules/angular2/docs/core/01_templates.md

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,24 @@ Templates are markup which is added to HTML to declarativly describe how the app
44
projected to DOM as well as which DOM events should invoke which methods on the controller. Templates contain
55
syntax which is core to Angular and allows for data-binding, event-binding, template-instantiation.
66

7-
The design of template syntax has these properties:
7+
The design of the template syntax has these properties:
88

9-
* All data-binding expressions are easily identifiable. (i.e. there is never an ambiguity wether the value should be
9+
* All data-binding expressions are easily identifiable. (i.e. there is never an ambiguity whether the value should be
1010
interpreted as string literal or as an expression.)
1111
* All events and their statements are easily identifiable.
1212
* All places of DOM instantiation are easily identifiable.
13-
* All places of variable declaration is esily identifiable.
13+
* All places of variable declaration is easily identifiable.
1414

15-
The above properties guarantee that the templates are easy to parse by tools (such as IDEs) and reason about by people.
16-
At no point is it necessary to understand which directives are active and what are their symantics in order to reason
15+
The above properties guarantee that the templates are easily to be parsed by tools (such as IDEs) and reasoned about by people.
16+
At no point is it necessary to understand which directives are active and what are their semantics in order to reason
1717
about the template runtime characteristics.
1818

1919

2020

2121
## Summary
2222

2323
Below is a summary of the kinds of syntaxes which Angular templating supports. The syntaxes are explained in more
24-
detail in following sections.
24+
detail in the following sections.
2525

2626
<table>
2727
<thead>
@@ -222,7 +222,7 @@ Example:
222222

223223
## Property Binding
224224

225-
Binding application model data to the UI, is the most common kinds of bindings in an Angular application. The bindings
225+
Binding application model data to the UI is the most common kind of bindings in an Angular application. The bindings
226226
are always in the form of `property-name` which is assigned an `expression`. The generic form is:
227227

228228
<table>
@@ -253,21 +253,21 @@ its value.
253253

254254
Key points:
255255
* The binding is to the element property not the element attribute.
256-
* To prevent custom element from accidentaly reading the literal `expression` on the title element, the attribute name
257-
is escaped. In our case the `title` is escaped to `[title]` through the addition of squre brackets `[]`.
256+
* To prevent custom element from accidentally reading the literal `expression` on the title element, the attribute name
257+
is escaped. In our case the `title` is escaped to `[title]` through the addition of square brackets `[]`.
258258
* A binding value (in this case `user.firstName` will always be an expression, never a string literal)
259259

260260
NOTE: Unlike Angular v1, Angular v2 binds to properties of elements rather than attributes of elements. This is
261-
done to better support custom elements, and allow binding for values other than strings.
261+
done to better support custom elements, and to allow binding for values other than strings.
262262

263-
NOTE: Some editors/server side pre-processors may have trouble generating `[]` arround the attribute name. For this
263+
NOTE: Some editors/server side pre-processors may have trouble generating `[]` around the attribute name. For this
264264
reason Angular also supports a canonical version which is prefixed using `bind-`.
265265

266266

267267

268268
### String Interpolation
269269

270-
Property bindings are the only data bindings which angular supports, but for convenience Angular supports interpolation
270+
Property bindings are the only data bindings which Angular supports, but for convenience Angular supports an interpolation
271271
syntax which is just a short hand for the data binding syntax.
272272

273273
```
@@ -280,7 +280,7 @@ is a short hand for:
280280
<span [text|0]=" 'Hello ' + stringify(name) + '!' ">_</span>
281281
```
282282

283-
The above says to bind `'Hello ' + stringify(name) + '!'` expression to the zero-th child of the `span`'s `text`
283+
The above says to bind the `'Hello ' + stringify(name) + '!'` expression to the zero-th child of the `span`'s `text`
284284
property. The index is necessary in case there are more than one text nodes, or if the text node we wish to bind to
285285
is not the first one.
286286

@@ -302,7 +302,7 @@ keeping `null` and `undefined` as empty strings.
302302

303303

304304

305-
## Local Varibles
305+
## Local Variables
306306

307307

308308

@@ -311,7 +311,7 @@ keeping `null` and `undefined` as empty strings.
311311

312312
Data binding allows updating the DOM's properties, but it does not allow for changing of the DOM structure. To change
313313
DOM structure we need the ability to define child templates, and then instantiate these templates into Views. The
314-
Views can than be inserted and removed as needed to change the DOM structure.
314+
Views than can be inserted and removed as needed to change the DOM structure.
315315

316316
<table>
317317
<tr>
@@ -347,41 +347,41 @@ Where:
347347
templates which have more than one root DOM node.
348348
* `instantiating-directive` is required for templates. The instantiating directive is responsible for deciding when
349349
and in which order should child views be inserted into this location. An instantiating directive usually has one or
350-
more bindings and can be represnted as either `instantiating-directive-bindings` or
350+
more bindings and can be represented as either `instantiating-directive-bindings` or
351351
`instantiating-directive-microsyntax` on `template` element or attribute. See template microsyntax for more details.
352352

353353

354354
Example of conditionally included template:
355355

356356
```
357357
Hello {{user}}!
358-
<div template="if: isAdimnistrator">
358+
<div template="if: isAdministrator">
359359
...administrator menu here...
360360
</div>
361361
```
362362

363-
In the above example the `if` instantiator determins if the child view (an instance of the child template) should be
364-
inserted into ther root view. The `if` makes this decision based on if the `isAdimnistrator` binding is true.
363+
In the above example the `if` instantiator determines whether the child view (an instance of the child template) should be
364+
inserted into the root view. The `if` makes this decision based on if the `isAdministrator` binding is true.
365365

366-
The above example is in the shart form, for better clarity let's rewrite it in the canonical form, which is functionaly
366+
The above example is in the short form, for better clarity let's rewrite it in the canonical form, which is functionally
367367
identical.
368368

369369
```
370370
Hello {{user}}!
371-
<template [if]="isAdimnistrator">
371+
<template [if]="isAdministrator">
372372
<div>
373373
...administrator menu here...
374374
</div>
375375
</template>
376376
```
377377

378-
NOTE: Only Instantiator directives can be placed on the template element. (Decorators, and Components are not allowed.)
378+
NOTE: Only Instantiator directives can be placed on the template element. (Decorators and Components are not allowed.)
379379

380380

381381
### Template Microsyntax
382382

383383
Often times it is necessary to encode a lot of different bindings into a template to control how the instantiation
384-
of the templates occurs. One such example is foreach.
384+
of the templates occurs. One such example is `foreach`.
385385

386386
```
387387
<form #foo=form>
@@ -408,7 +408,7 @@ syntax is preferable.
408408
</ul>
409409
```
410410

411-
Notice how each key value pair is translated to `key=value;` statement in the `template` attribute. This makes the
411+
Notice how each key value pair is translated to a `key=value;` statement in the `template` attribute. This makes the
412412
repeat syntax a much shorter, but we can do better. Turns out that most punctuation is optional in the short version
413413
which allows us to further shorten the text.
414414

@@ -427,8 +427,8 @@ microsyntax for `foreach`.
427427
</ul>
428428
```
429429

430-
The format is intentionally defined freely, so that developers of directives can build expressive microsyntax for
431-
their directives. Following describes a more formal definition.
430+
The format is intentionally defined freely, so that developers of directives can build an expressive microsyntax for
431+
their directives. The following code describes a more formal definition.
432432

433433
```
434434
expression: ... // as defined in Expressions section
@@ -441,14 +441,14 @@ microsyntax: ([[key|keyExpression|varExport][;|,]?)*
441441
```
442442

443443
Where
444-
* `expression` is an angular expression as defined in section: Expressions
444+
* `expression` is an Angular expression as defined in section: Expressions
445445
* `local` is a local identifier for local variables.
446446
* `internal` is an internal variable which the directive exports for binding.
447447
* `key` is an attribute name usually only used to trigger a specific directive.
448-
* `keyExpression` is an property name to which the epression will be bound to.
449-
* `varExport` allows exporting of directive internal state as variables for further binding. If no `internal` name
450-
is specified than the exporting is to an implicit variable.
451-
* `microsyntax` allows you to build simple microsyntax which can still clearly identify which expressions bind to
448+
* `keyExpression` is an property name to which the expression will be bound to.
449+
* `varExport` allows exporting of a directive internal state as variable for further binding. If no `internal` name
450+
is specified, the exporting is to an implicit variable.
451+
* `microsyntax` allows you to build a simple microsyntax which can still clearly identify which expressions bind to
452452
which properties as well as which variables are exported for binding.
453453

454454

@@ -527,7 +527,7 @@ have different semantics.
527527

528528
### Expressions
529529

530-
Expressions can be used to bind to a properties only. Expressions represent how data should be projected to the View.
530+
Expressions can be used to bind to properties only. Expressions represent how data should be projected to the View.
531531
Expressions should not have any side effects and should be idempotent. Examples of where expressions can be used in
532532
Angular are:
533533
```
@@ -537,19 +537,19 @@ Angular are:
537537
<div template="if: expression">...</div>
538538
```
539539

540-
Expressions are simplified version of expression in the language in which you are writing your application. (i.e.
540+
Expressions are a simplified version of an expression in the language in which you are writing your application. (i.e.
541541
expressions follow JS syntax and semantics in JS and Dart syntax and semantics in Dart). Unlike expressions in the
542-
language, binding expressions behave differently in following ways:
542+
language, binding expressions behave differently in the following ways:
543543

544544
* *Must be defined*: Unlike Angular v1, Angular v2 will throw an error on dereferencing fields which are not defined.
545-
For example: `user.name` will throw an error if `user` is defined but it does not have `name` property. If the `name`
546-
property is not known, it must be declared and set to some value such as empty string, `null` (or `undefined` in JS).
545+
For example: `user.name` will throw an error if `user` is defined but it does not have a `name` property. If the `name`
546+
property is not known, it must be declared and set to some value such as an empty string, `null` (or `undefined` in JS).
547547
This is done to allow early detection of errors in the templates.
548-
* *Safe dereference*: Expressions `user.name` where `user` is null will throw `NullPointerException` in the language.
548+
* *Safe dereference*: Expression `user.name` where `user` is `null` will throw a `NullPointerException` in the language.
549549
In contrast Angular will silently ignore `null` on `user`. This is done because Views often have to wait for the data
550550
to arrive from the backend and many fields will be `null` until the data arrives. Safe dereference is so common in the
551-
Views, that we have made it the default.
552-
* *Single expression*: An expression must be a single statemnet. (i.e. no `;`)
551+
Views that we have made it the default.
552+
* *Single expression*: An expression must be a single statement. (i.e. no `;`)
553553
* *No assignments*: Binding expressions can not contain assignments.
554554
* *No keywords*: Binding expressions can not contain keywords such as: `var`, `if`, and so on.
555555
* *Formatters*: Angular expressions can be piped through formatters to further transform the binding value.
@@ -567,8 +567,8 @@ class Greeter {
567567
* `name` : Will result in the value of the `name` property on the `Greeter` class.
568568
* `name.length`: Will result in either the length of the `name` string or `undefined` (`null` in Dart) if `name`
569569
property is `null` or `undefined`. Example of: safe dereference.
570-
* `foo`: Will thrown on error because `foo` is not declared on the `Greeter` class. Example of: Must be defined
571-
* `name=1`: Not allowed because fo assignment.
570+
* `foo`: Will throw an error because `foo` is not declared on the `Greeter` class. Example of: Must be defined
571+
* `name=1`: Not allowed because of assignment.
572572
* `name; name.length`: Not allowed because of multiple statements.
573573

574574

@@ -584,10 +584,10 @@ Examples of where statements can be used in Angular are:
584584

585585
Statements are similar to statements in the language in which you are writing your application. (i.e.
586586
statements follow JS syntax and semantics in JS and Dart syntax and semantics in Dart). Unlike statements in the
587-
language, binding expressions behave differently in following ways:
587+
language, binding expressions behave differently in the following ways:
588588

589589
* *Unsafe dereference*: Expressions `user.verify()` where `user` is `null` will throw `NullPointerException` in the
590-
language as well as in statements. (In contrast to Safe dereference in Angular expressions.) While angular protects
590+
language as well as in statements. (In contrast to Safe dereference in Angular expressions.) While Angular protects
591591
you from null dereferencing in expressions due to lazy loading of data, no such protection is required for statements,
592592
and doing so would make it harder to detect typos in statements.
593593
* *Multiple statements OK*: Statements can be composed from more than one statement. (i.e. no `doA(); doB()`)

0 commit comments

Comments
 (0)