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.
|
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.
|
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
|
|
||||||
|
|
||||||
* [HTML](#html)
|
* [HTML](#html)
|
||||||
* [Interpolation](#interpolation)
|
* [Interpolation](#interpolation)
|
||||||
@ -30,13 +28,13 @@ include ../_util-fns
|
|||||||
* [Input and output properties](#inputs-outputs)
|
* [Input and output properties](#inputs-outputs)
|
||||||
* [Template expression operators](#expression-operators)
|
* [Template expression operators](#expression-operators)
|
||||||
* [pipe](#pipe)
|
* [pipe](#pipe)
|
||||||
* ["elvis" (?.)](#elvis)
|
* ["elvis" (?.)](#elvis)
|
||||||
// #enddocregion intro
|
// #enddocregion intro
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
: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.
|
demonstrates all of the syntax and code snippets described in this chapter.
|
||||||
|
|
||||||
// #docregion html-1
|
// #docregion html-1
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
@ -130,13 +128,13 @@ include ../_util-fns
|
|||||||
// #enddocregion template-expressions-2
|
// #enddocregion template-expressions-2
|
||||||
|
|
||||||
// #docregion template-expressions-context
|
// #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
|
:marked
|
||||||
<a id="expression-context"></a>
|
<a id="expression-context"></a>
|
||||||
### Expression context
|
### Expression context
|
||||||
|
|
||||||
Perhaps more surprising, template expressions cannot refer to anything in the global namespace.
|
Perhaps more surprising, !{details}
|
||||||
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.
|
|
||||||
|
|
||||||
The *expression context* is typically the **component instance**, which is
|
The *expression context* is typically the **component instance**, which is
|
||||||
the source of binding values.
|
the source of binding values.
|
||||||
@ -241,14 +239,14 @@ include ../_util-fns
|
|||||||
// #enddocregion template-statements-2
|
// #enddocregion template-statements-2
|
||||||
|
|
||||||
// #docregion template-statements-3
|
// #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
|
:marked
|
||||||
### Statement context
|
### Statement context
|
||||||
|
|
||||||
As with expressions, statements cannot refer to anything in the global namespace.
|
As with expressions, statements can refer only to what's in the statement context — typically the
|
||||||
They can’t refer to `window` or `document`. They can’t call `console.log` or `Math.max`.
|
**component instance** to which we're binding the event.
|
||||||
|
!{details}
|
||||||
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.
|
|
||||||
|
|
||||||
The *onSave* in `(click)="onSave()"` is sure to be a method of the data-bound component instance.
|
The *onSave* in `(click)="onSave()"` is sure to be a method of the data-bound component instance.
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user