diff --git a/modules/angular2/docs/core/01_templates.md b/modules/angular2/docs/core/01_templates.md index ebbf0d2ab3..e152763f43 100644 --- a/modules/angular2/docs/core/01_templates.md +++ b/modules/angular2/docs/core/01_templates.md @@ -2,7 +2,7 @@ Templates are markup which is added to HTML to declaratively describe how the application model should be 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. +syntaxes which are core to Angular and allows for data-binding, event-binding, template-instantiation. The design of the template syntax has these properties: @@ -35,34 +35,30 @@ detail in the following sections. Text Interpolation 
-```
-
{{exp}}

-```
+<div>{{exp}}</div>
Example: 
-```
-

+<div>
   Hello {{name}}!
-  

+  <br>
   Goodbye {{name}}!
-

-```
+</div>
-`
` +
+<div [text|index]="exp"></div>
+
Example: 
-```
-

-  _x_
-

-```
+  [text|2]=" 'Goodbye' + stringify(name) + '!' ">
+  <b>x</b>
+</div>
@@ -70,148 +66,156 @@ Example: Property Interpolation 
-```
-

-```
+<div name="{{exp}}"></div>
Example: 
-```
-
`
-```
+<div class="{{selected}}"></div>
 
-```
-

-```
+<div [name]="stringify(exp)"></div>
Example: 
-```
-

-```
+<div [title]="stringify(selected)"></div>
Property binding -`
` +
+<div [prop]="exp"></div>
+
Example: -`
` +
+<div [hidden]="true"></div>
+
-`
` +
+<div bind-prop="exp"></div>
+
Example: -`
` +
+<div bind-hidden="true"></div>
+
Event binding (non-bubbling) -`
` - -Example: - -`
` - - -`
` +
+<div (event)="statement"></div>
+
Example: 
-```
-
-`
` +
+<div on-event="statement"></div>
+
Example: 
-```
-
+ +Or: + +
+<div def="symbol"></div>
+
+ +Example: + +
+<video def="player">
+  <button on-click="player.play()">play</button>
+</video>
Inline Template -`
...
` +
+<div template="...">...</div>
+
Example: 
-```
-
    
-  
  • 
+<ul>
+  <li template="for: #item of items">
     {{item}}
-  
    • 
-

-```
+  </li>
+</ul>
-`` +
+<template>...</template>
+
Example: 
-```
-
    
-  
-

-```
+    </li>
+  </template>
+</ul>
Explicit Template -`` +
+<template>...</template>
+
Example: 
-```
-
-```
+</template>
-`` +
+<template>...</template>
+
Example: + 
-```
-
-```
+</template>
@@ -228,11 +232,11 @@ are always in the form of `property-name` which is assigned an `expression`. The - + - +
Short form``
<some-element [some-property]="expression">
Canonical form``
<some-element bind-some-property="expression">
@@ -255,7 +259,7 @@ Key points: * The binding is to the element property not the element attribute. * 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). +* 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 to allow binding for values other than strings. @@ -277,7 +281,7 @@ syntax which is just a short hand for the data binding syntax. is a short hand for: ``` -_ + ``` The above says to bind the `'Hello ' + stringify(name) + '!'` expression to the zero-th child of the `span`'s `text` @@ -317,25 +321,25 @@ Views than can be inserted and removed as needed to change the DOM structure. Short form -``` +
 parent template
-
-  child template
-
-```
+<element>
+  <some-element template="instantiating-directive-microsyntax">child template</some-element>
+</element>
+
Canonical form -``` +
 parent template
-
-  
-
-```
+<element>
+  <template instantiating-directive-bindings>
+    <some-element>child template</some-element>
+  </template>
+</element>
+
@@ -448,7 +452,7 @@ microsyntax: ([[key|keyExpression|varExport][;|,]?)* ``` Where -* `expression` is an Angular expression as defined in section: Expressions +* `expression` is an Angular expression as defined in section: Expressions. * `local` is a local identifier for local variables. * `internal` is an internal variable which the directive exports for binding. * `key` is an attribute name usually only used to trigger a specific directive. @@ -473,11 +477,11 @@ Binding events allows wiring events from DOM (or other components) to the Angula - + - +
Short form``
<some-element (some-event)="statement">
Canonical form``
<some-element on-some-event="statement">
@@ -493,11 +497,11 @@ Angular listens to bubbled DOM events (as in the case of clicking on any child), - + - +
Short form``
<some-element (some-event)="statement">
Canonical form``
<some-element on-some-event="statement">
@@ -519,7 +523,7 @@ component's controller. NOTE: Unlike Angular v1, Angular v2 treats event bindings as core constructs not as directives. This means that there -is no need to create a event directive for each kind of event. This makes it possible for Angular v2 to easily +is no need to create an event directive for each kind of event. This makes it possible for Angular v2 to easily bind to custom events of Custom Elements, whose event names are not known ahead of time. @@ -534,7 +538,7 @@ have different semantics. ### Expressions Expressions can be used to bind to properties only. Expressions represent how data should be projected to the View. -Expressions should not have any side effects and should be idempotent. Examples of where expressions can be used in +Expressions should not have any side effect and should be idempotent. Examples of where expressions can be used in Angular are: ```
{{expression}}