chore(rename): rename View and Template concepts for #1244
This commit is contained in:

committed by
Jeremy Elbourn

parent
564477b8a0
commit
bf7933714a
@ -67,10 +67,10 @@ Here is a trivial example of a tooltip decorator. The directive will log a toolt
|
||||
```
|
||||
@Decorator({
|
||||
selector: '[tooltip]', // CSS Selector which triggers the decorator
|
||||
bind: { // List which properties need to be bound
|
||||
properties: { // List which properties need to be bound
|
||||
text: 'tooltip' // - DOM element tooltip property should be
|
||||
}, // mapped to the directive text property.
|
||||
events: { // List which events need to be mapped.
|
||||
hostListeners: { // List which events need to be mapped.
|
||||
mouseover: 'show' // - Invoke the show() method every time
|
||||
} // the mouseover event is fired.
|
||||
})
|
||||
@ -112,13 +112,13 @@ Example of a component:
|
||||
```
|
||||
@Component({ | Component annotation
|
||||
selector: 'pane', | CSS selector on <pane> element
|
||||
bind: { | List which property need to be bound
|
||||
properties: { | List which property need to be bound
|
||||
'title': 'title', | - title mapped to component title
|
||||
'open': 'open' | - open attribute mapped to component's open property
|
||||
}, |
|
||||
}) |
|
||||
@Template({ | Template annotation
|
||||
url: 'pane.html' | - URL of template HTML
|
||||
@View({ | View annotation
|
||||
templateUrl: 'pane.html' | - URL of template HTML
|
||||
}) |
|
||||
class Pane { | Component controller class
|
||||
title:string; | - title property
|
||||
@ -179,7 +179,7 @@ Viewport is a directive which can control instantiation of child views which are
|
||||
```
|
||||
@Viewport({
|
||||
selector: '[if]',
|
||||
bind: {
|
||||
properties: {
|
||||
'condition': 'if'
|
||||
}
|
||||
})
|
||||
@ -220,7 +220,7 @@ To better understand the kinds of injections which are supported in Angular we h
|
||||
|
||||
### Injecting Services
|
||||
|
||||
Service injection is the most straight forward kind of injection which Angular supports. It involves a component configuring the `services` and then letting the directive ask for the configured service.
|
||||
Service injection is the most straight forward kind of injection which Angular supports. It involves a component configuring the `injectables` and then letting the directive ask for the configured service.
|
||||
|
||||
This example illustrates how to inject `MyService` into `House` directive.
|
||||
|
||||
@ -231,10 +231,10 @@ class MyService {} | Assume a service which needs to be inject
|
||||
|
|
||||
@Component({ | Assume a top level application component which
|
||||
selector: 'my-app', | configures the services to be injected.
|
||||
services: [MyService] |
|
||||
injectables: [MyService] |
|
||||
}) |
|
||||
@Template({ | Assume we have a template that needs to be
|
||||
url: 'my_app.html', | configured with directives to be injected.
|
||||
@View({ | Assume we have a template that needs to be
|
||||
templateUrl: 'my_app.html', | configured with directives to be injected.
|
||||
directives: [House] |
|
||||
}) |
|
||||
class MyApp {} |
|
||||
@ -279,7 +279,7 @@ Here is an example of the kinds of injections which can be achieved:
|
||||
@Component({ |
|
||||
selector: 'my-app', |
|
||||
template: new TemplateConfig({ |
|
||||
url: 'my_app.html', |
|
||||
templateUrl: 'my_app.html', |
|
||||
directives: [Form, FieldSet, |
|
||||
Field, Primary] |
|
||||
}) |
|
||||
|
@ -12,12 +12,12 @@ Views form a tree structure which mimics the DOM tree.
|
||||
nested in a tree like structure. The View tree is a simplified version of the DOM tree. A View can
|
||||
have a single DOM Element or large DOM structures. The key is that the DOM tree in the View can
|
||||
not undergo structural changes (only property changes).
|
||||
* Views represent a running instance of a DOM Template. This implies that while elements in a View
|
||||
* Views represent a running instance of a DOM View. This implies that while elements in a View
|
||||
can change properties, they can not change structurally. (Structural changes such as, adding or
|
||||
removing elements requires adding or removing child Views into ViewContainers).
|
||||
* View can have zero or more ViewPorts. A ViewPort is a marker in the DOM which allows
|
||||
the insertion of child Views.
|
||||
* Views are created from a ProtoView. A ProtoView is a compiled DOM Template which is efficient at
|
||||
* Views are created from a ProtoView. A ProtoView is a compiled DOM View which is efficient at
|
||||
creating Views.
|
||||
* View contains a context object. The context represents the object instance against which all
|
||||
expressions are evaluated.
|
||||
@ -40,7 +40,7 @@ class Greeter {
|
||||
}
|
||||
```
|
||||
|
||||
And assume following HTML Template:
|
||||
And assume following HTML View:
|
||||
|
||||
```
|
||||
<div>
|
||||
@ -90,7 +90,7 @@ Note:
|
||||
An important part of an application is to be able to change the DOM structure to render data for the
|
||||
user. In Angular this is done by inserting child views into the ViewPort.
|
||||
|
||||
Let's start with a Template such as:
|
||||
Let's start with a View such as:
|
||||
|
||||
```
|
||||
<ul>
|
||||
@ -194,7 +194,7 @@ class Greeter {
|
||||
}
|
||||
```
|
||||
|
||||
And assume the following HTML Template:
|
||||
And assume the following HTML View:
|
||||
|
||||
```
|
||||
<div> | viewA(greeter)
|
||||
|
Reference in New Issue
Block a user