diff --git a/modules/angular2/docs/core/01_templates.md b/modules/angular2/docs/core/01_templates.md index 3f732c0d0f..deded9cd48 100644 --- a/modules/angular2/docs/core/01_templates.md +++ b/modules/angular2/docs/core/01_templates.md @@ -4,16 +4,16 @@ Templates are markup which is added to HTML to declarativly describe how the app projected to DOM as well as which DOM events should invoke which methods on the controller. Templates contain syntax which is core to Angular and allows for data-binding, event-binding, template-instantiation. -The design of template syntax has these properties: +The design of the template syntax has these properties: -* All data-binding expressions are easily identifiable. (i.e. there is never an ambiguity wether the value should be +* All data-binding expressions are easily identifiable. (i.e. there is never an ambiguity whether the value should be interpreted as string literal or as an expression.) * All events and their statements are easily identifiable. * All places of DOM instantiation are easily identifiable. -* All places of variable declaration is esily identifiable. +* All places of variable declaration is easily identifiable. -The above properties guarantee that the templates are easy to parse by tools (such as IDEs) and reason about by people. -At no point is it necessary to understand which directives are active and what are their symantics in order to reason +The above properties guarantee that the templates are easily to be parsed by tools (such as IDEs) and reasoned about by people. +At no point is it necessary to understand which directives are active and what are their semantics in order to reason about the template runtime characteristics. @@ -21,7 +21,7 @@ about the template runtime characteristics. ## Summary Below is a summary of the kinds of syntaxes which Angular templating supports. The syntaxes are explained in more -detail in following sections. +detail in the following sections. @@ -222,7 +222,7 @@ Example: ## Property Binding -Binding application model data to the UI, is the most common kinds of bindings in an Angular application. The bindings +Binding application model data to the UI is the most common kind of bindings in an Angular application. The bindings are always in the form of `property-name` which is assigned an `expression`. The generic form is:
@@ -253,21 +253,21 @@ its value. Key points: * The binding is to the element property not the element attribute. -* To prevent custom element from accidentaly reading the literal `expression` on the title element, the attribute name - is escaped. In our case the `title` is escaped to `[title]` through the addition of squre brackets `[]`. +* To prevent custom element from accidentally reading the literal `expression` on the title element, the attribute name + is escaped. In our case the `title` is escaped to `[title]` through the addition of square brackets `[]`. * A binding value (in this case `user.firstName` will always be an expression, never a string literal) NOTE: Unlike Angular v1, Angular v2 binds to properties of elements rather than attributes of elements. This is -done to better support custom elements, and allow binding for values other than strings. +done to better support custom elements, and to allow binding for values other than strings. -NOTE: Some editors/server side pre-processors may have trouble generating `[]` arround the attribute name. For this +NOTE: Some editors/server side pre-processors may have trouble generating `[]` around the attribute name. For this reason Angular also supports a canonical version which is prefixed using `bind-`. ### String Interpolation -Property bindings are the only data bindings which angular supports, but for convenience Angular supports interpolation +Property bindings are the only data bindings which Angular supports, but for convenience Angular supports an interpolation syntax which is just a short hand for the data binding syntax. ``` @@ -280,7 +280,7 @@ is a short hand for: _ ``` -The above says to bind `'Hello ' + stringify(name) + '!'` expression to the zero-th child of the `span`'s `text` +The above says to bind the `'Hello ' + stringify(name) + '!'` expression to the zero-th child of the `span`'s `text` property. The index is necessary in case there are more than one text nodes, or if the text node we wish to bind to is not the first one. @@ -302,7 +302,7 @@ keeping `null` and `undefined` as empty strings. -## Local Varibles +## Local Variables @@ -311,7 +311,7 @@ keeping `null` and `undefined` as empty strings. Data binding allows updating the DOM's properties, but it does not allow for changing of the DOM structure. To change DOM structure we need the ability to define child templates, and then instantiate these templates into Views. The -Views can than be inserted and removed as needed to change the DOM structure. +Views than can be inserted and removed as needed to change the DOM structure.
@@ -347,7 +347,7 @@ Where: templates which have more than one root DOM node. * `instantiating-directive` is required for templates. The instantiating directive is responsible for deciding when and in which order should child views be inserted into this location. An instantiating directive usually has one or - more bindings and can be represnted as either `instantiating-directive-bindings` or + more bindings and can be represented as either `instantiating-directive-bindings` or `instantiating-directive-microsyntax` on `template` element or attribute. See template microsyntax for more details. @@ -355,33 +355,33 @@ Example of conditionally included template: ``` Hello {{user}}! -
+
...administrator menu here...
``` -In the above example the `if` instantiator determins if the child view (an instance of the child template) should be -inserted into ther root view. The `if` makes this decision based on if the `isAdimnistrator` binding is true. +In the above example the `if` instantiator determines whether the child view (an instance of the child template) should be +inserted into the root view. The `if` makes this decision based on if the `isAdministrator` binding is true. -The above example is in the shart form, for better clarity let's rewrite it in the canonical form, which is functionaly +The above example is in the short form, for better clarity let's rewrite it in the canonical form, which is functionally identical. ``` Hello {{user}}! -