chore(rename): rename View and Template concepts for #1244

This commit is contained in:
Pawel Kozlowski
2015-04-09 21:20:11 +02:00
committed by Jeremy Elbourn
parent 564477b8a0
commit bf7933714a
103 changed files with 767 additions and 765 deletions

View File

@ -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] |
}) |

View File

@ -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)