parent
ded7bb7c47
commit
d02d098339
|
@ -6,9 +6,7 @@ include ../_util-fns
|
|||
|
||||
Many of us are familiar with the component/template duality from our experience with model-view-controller (MVC) or model-view-viewmodel (MVVM). In Angular, the component plays the part of the controller/viewmodel, and the template represents the view.
|
||||
|
||||
Let’s find out what it takes to write a template for our view. We’ll cover these basic elements of template syntax.
|
||||
|
||||
# Table Of Contents
|
||||
Let’s find out what it takes to write a template for our view. We’ll cover these basic elements of template syntax:
|
||||
|
||||
* [HTML](#html)
|
||||
* [Interpolation](#interpolation)
|
||||
|
@ -30,13 +28,13 @@ include ../_util-fns
|
|||
* [Input and output properties](#inputs-outputs)
|
||||
* [Template expression operators](#expression-operators)
|
||||
* [pipe](#pipe)
|
||||
* ["elvis" (?.)](#elvis)
|
||||
* ["elvis" (?.)](#elvis)
|
||||
// #enddocregion intro
|
||||
.l-sub-section
|
||||
:marked
|
||||
The [live example](/resources/live-examples/template-syntax/ts/plnkr.html)
|
||||
The [live example](/resources/live-examples/template-syntax/ts/plnkr.html)
|
||||
demonstrates all of the syntax and code snippets described in this chapter.
|
||||
|
||||
|
||||
// #docregion html-1
|
||||
.l-main-section
|
||||
:marked
|
||||
|
@ -130,13 +128,13 @@ include ../_util-fns
|
|||
// #enddocregion template-expressions-2
|
||||
|
||||
// #docregion template-expressions-context
|
||||
- var lang = current.path[1]
|
||||
- var details = lang === 'dart' ? 'template expressions can’t refer to static properties, nor to top-level variables or functions, such as <code>window</code> or <code>document</code> from <code>dart:html</code>. They can’t directly call <code>print</code> or functions imported from <code>dart:math</code>. They are restricted to referencing members of the expression context.' : 'template expressions cannot refer to anything in the global namespace. They can’t refer to <code>window</code> or <code>document</code>. They can’t call <code>console.log</code> or <code>Math.max</code>. They are restricted to referencing members of the expression context.'
|
||||
:marked
|
||||
<a id="expression-context"></a>
|
||||
### Expression context
|
||||
|
||||
Perhaps more surprising, template expressions cannot refer to anything in the global namespace.
|
||||
They can’t refer to `window` or `document`. They can’t call `console.log` or `Math.max`.
|
||||
They are restricted to referencing members of the expression context.
|
||||
Perhaps more surprising, !{details}
|
||||
|
||||
The *expression context* is typically the **component instance**, which is
|
||||
the source of binding values.
|
||||
|
@ -241,14 +239,14 @@ include ../_util-fns
|
|||
// #enddocregion template-statements-2
|
||||
|
||||
// #docregion template-statements-3
|
||||
- var lang = current.path[1]
|
||||
- var details = lang === 'dart' ? 'Template statements can’t refer to static properties on the class, nor to top-level variables or functions, such as <code>window</code> or <code>document</code> from <code>dart:html</code>. They can’t directly call <code>print</code> or functions imported from <code>dart:math</code>.' : 'Template statements cannot refer to anything in the global namespace. They can’t refer to <code>window</code> or <code>document</code>. They can’t call <code>console.log</code> or <code>Math.max</code>.'
|
||||
:marked
|
||||
### Statement context
|
||||
|
||||
As with expressions, statements cannot refer to anything in the global namespace.
|
||||
They can’t refer to `window` or `document`. They can’t call `console.log` or `Math.max`.
|
||||
|
||||
Statements are restricted to referencing members of the statement context.
|
||||
The statement context is typically the **component instance** to which we are binding an event.
|
||||
As with expressions, statements can refer only to what's in the statement context — typically the
|
||||
**component instance** to which we're binding the event.
|
||||
!{details}
|
||||
|
||||
The *onSave* in `(click)="onSave()"` is sure to be a method of the data-bound component instance.
|
||||
|
||||
|
|
Loading…
Reference in New Issue