Skip to content

Commit 6dece68

Browse files
tboschtbosch
committed
refactor(core): rename ViewContainer to ViewContainerRef
This also renames InternalAppViewContainer into AppViewContainer Related to angular#1477 Closes angular#1554
1 parent 0676fef commit 6dece68

22 files changed

+145
-147
lines changed

‎modules/angular2/core.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export * from './src/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy
2323
export * from './src/core/compiler/dynamic_component_loader';
2424
export {ElementRef, ComponentRef} from './src/core/compiler/element_injector';
2525
export * from './src/core/compiler/view';
26-
export * from './src/core/compiler/view_container';
26+
export * from './src/core/compiler/view_container_ref';
2727

2828
export * from './src/core/compiler/ng_element';
2929

‎modules/angular2/docs/core/02_directives.md‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ Directives are the cornerstone of an Angular application. We use Directives to b
66

77
Angular applications do not have a main method. Instead they have a root Component. Dependency Injection then assembles the directives into a working Angular application.
88

9-
There are three different kinds of directives (described in more detail in later sections).
9+
There are three different kinds of directives (described in more detail in later sections).
1010

1111
1. *Decorators*: can be placed on any DOM element and can be combined with other directives.
1212
2. *Components*: Components have an encapsulated view and can configure injectors.
@@ -16,7 +16,7 @@ There are three different kinds of directives (described in more detail in later
1616

1717
## CSS Selectors
1818

19-
Directives are instantiated whenever the CSS selector matches the DOM structure.
19+
Directives are instantiated whenever the CSS selector matches the DOM structure.
2020

2121
Angular supports these CSS selector constructs:
2222
* Element name: `name`
@@ -29,7 +29,7 @@ Angular supports these CSS selector constructs:
2929

3030
Angular does not support these (and any CSS selector which crosses element boundaries):
3131
* Descendant: `body div`
32-
* Direct descendant: `body > div`
32+
* Direct descendant: `body > div`
3333
* Adjacent: `div + table`
3434
* Sibling: `div ~ table`
3535
* Wildcard: `*`
@@ -68,10 +68,10 @@ Here is a trivial example of a tooltip decorator. The directive will log a toolt
6868
@Decorator({
6969
selector: '[tooltip]', // CSS Selector which triggers the decorator
7070
properties: { // List which properties need to be bound
71-
text: 'tooltip' // - DOM element tooltip property should be
71+
text: 'tooltip' // - DOM element tooltip property should be
7272
}, // mapped to the directive text property.
7373
hostListeners: { // List which events need to be mapped.
74-
mouseover: 'show' // - Invoke the show() method every time
74+
mouseover: 'show' // - Invoke the show() method every time
7575
} // the mouseover event is fired.
7676
})
7777
class Form { // Directive controller class, instantiated
@@ -121,14 +121,14 @@ Example of a component:
121121
templateUrl: 'pane.html' | - URL of template HTML
122122
}) |
123123
class Pane { | Component controller class
124-
title:string; | - title property
124+
title:string; | - title property
125125
open:boolean;
126-
126+
127127
constructor() {
128128
this.title = '';
129129
this.open = true;
130130
}
131-
131+
132132
// Public API
133133
toggle() => this.open = !this.open;
134134
open() => this.open = true;
@@ -165,12 +165,12 @@ Example of usage:
165165

166166
## Viewport
167167

168-
Viewport is a directive which can control instantiation of child views which are then inserted into the DOM. (Examples are `if` and `for`.)
168+
Viewport is a directive which can control instantiation of child views which are then inserted into the DOM. (Examples are `if` and `for`.)
169169

170170
* Viewports can only be placed on `<template>` elements (or the short hand version which uses `<element template>` attribute.)
171171
* Only one viewport can be present per DOM template element.
172-
* The viewport is created over the `template` element. This is known as the `ViewContainer`.
173-
* Viewport can insert child views into the `ViewContainer`. The child views show up as siblings of the `Viewport` in the DOM.
172+
* The viewport is created over the `template` element. This is known as the `ViewContainerRef`.
173+
* Viewport can insert child views into the `ViewContainerRef`. The child views show up as siblings of the `Viewport` in the DOM.
174174

175175
>> TODO(misko): Relationship with Injection
176176
>> TODO(misko): Instantiator can not be injected into child Views
@@ -184,10 +184,10 @@ Viewport is a directive which can control instantiation of child views which are
184184
}
185185
})
186186
export class If {
187-
viewContainer: ViewContainer;
187+
viewContainer: ViewContainerRef;
188188
view: View;
189189
190-
constructor(viewContainer: ViewContainer) {
190+
constructor(viewContainer: ViewContainerRef) {
191191
this.viewContainer = viewContainer;
192192
this.view = null;
193193
}
@@ -220,30 +220,30 @@ To better understand the kinds of injections which are supported in Angular we h
220220

221221
### Injecting Services
222222

223-
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.
223+
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.
224224

225225
This example illustrates how to inject `MyService` into `House` directive.
226226

227227

228228
```
229-
class MyService {} | Assume a service which needs to be injected
229+
class MyService {} | Assume a service which needs to be injected
230230
| into a directive.
231231
|
232-
@Component({ | Assume a top level application component which
232+
@Component({ | Assume a top level application component which
233233
selector: 'my-app', | configures the services to be injected.
234-
injectables: [MyService] |
234+
injectables: [MyService] |
235235
}) |
236236
@View({ | Assume we have a template that needs to be
237237
templateUrl: 'my_app.html', | configured with directives to be injected.
238-
directives: [House] |
238+
directives: [House] |
239239
}) |
240240
class MyApp {} |
241241
|
242-
@Decorator({ | This is the directive into which we would like
242+
@Decorator({ | This is the directive into which we would like
243243
selector: '[house]' | to inject the MyService.
244244
}) |
245245
class House { |
246-
constructor(myService:MyService) { | Notice that in the constructor we can simply
246+
constructor(myService:MyService) { | Notice that in the constructor we can simply
247247
} | ask for MyService.
248248
} |
249249
@@ -252,7 +252,7 @@ class House { |
252252

253253
Assume the following DOM structure for `my_app.html`:
254254
```
255-
<div house> | The house attribute triggers the creation of the House directive.
255+
<div house> | The house attribute triggers the creation of the House directive.
256256
</div> | This is equivalent to:
257257
| new House(injector.get(MyService));
258258
```
@@ -264,7 +264,7 @@ Injecting other directives into directives follows a similar mechanism as inject
264264

265265
There are five kinds of visibilities:
266266

267-
* (no annotation): Inject dependant directives only if they are on the current element.
267+
* (no annotation): Inject dependant directives only if they are on the current element.
268268
* `@ancestor`: Inject a directive if it is at any element above the current element.
269269
* `@parent`: Inject a directive which is direct parent of the current element.
270270
* `@child`: Inject a list of direct children which match a given type. (Used with `Query`)
@@ -278,8 +278,8 @@ Here is an example of the kinds of injections which can be achieved:
278278
```
279279
@Component({ |
280280
selector: 'my-app' |
281-
}) |
282-
@View({ |
281+
}) |
282+
@View({ |
283283
templateUrl: 'my_app.html', |
284284
directives: [Form, FieldSet, |
285285
Field, Primary] |
@@ -290,28 +290,28 @@ class MyApp {} |
290290
class Form { |
291291
constructor( |
292292
@descendant sets:Query<FieldSet> |
293-
) { |
294-
} |
293+
) { |
294+
} |
295295
} |
296296
|
297297
@Decorator({ selector: 'fieldset' }) |
298298
class FieldSet { |
299299
constructor( |
300300
@child sets:Query<Field> |
301-
) { ... } |
301+
) { ... } |
302302
} |
303303
|
304304
@Decorator({ selector: 'field' }) |
305305
class Field { |
306306
constructor( |
307307
@ancestor field:Form, |
308308
@parent field:FieldSet, |
309-
) { ... } |
309+
) { ... } |
310310
} |
311311
|
312312
@Decorator({ selector: '[primary]'}) |
313313
class Primary { |
314-
constructor(field:Field ) { ... } |
314+
constructor(field:Field ) { ... } |
315315
} |
316316
```
317317

@@ -324,7 +324,7 @@ Assume the following DOM structure for `my_app.html`:
324324
<field></field> |
325325
</fieldset> |
326326
</div> |
327-
</form> |
327+
</form> |
328328
```
329329

330330

‎modules/angular2/docs/core/10_view.md‎

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,24 @@
22

33
## Overview
44

5-
This document explains the concept of a View.
6-
A View is a core primitive used by angular to render the DOM tree.
5+
This document explains the concept of a View.
6+
A View is a core primitive used by angular to render the DOM tree.
77
A ViewPort is location in a View which can accept child Views.
8-
Every ViewPort has an associated ViewContainer than can contain any number of child Views.
8+
Every ViewPort has an associated ViewContainerRef than can contain any number of child Views.
99
Views form a tree structure which mimics the DOM tree.
1010

11-
* View is a core rendering construct. A running application is just a collection of Views which are
12-
nested in a tree like structure. The View tree is a simplified version of the DOM tree. A View can
13-
have a single DOM Element or large DOM structures. The key is that the DOM tree in the View can
11+
* View is a core rendering construct. A running application is just a collection of Views which are
12+
nested in a tree like structure. The View tree is a simplified version of the DOM tree. A View can
13+
have a single DOM Element or large DOM structures. The key is that the DOM tree in the View can
1414
not undergo structural changes (only property changes).
15-
* Views represent a running instance of a DOM View. This implies that while elements in a View
16-
can change properties, they can not change structurally. (Structural changes such as, adding or
15+
* Views represent a running instance of a DOM View. This implies that while elements in a View
16+
can change properties, they can not change structurally. (Structural changes such as, adding or
1717
removing elements requires adding or removing child Views into ViewContainers).
18-
* View can have zero or more ViewPorts. A ViewPort is a marker in the DOM which allows
18+
* View can have zero or more ViewPorts. A ViewPort is a marker in the DOM which allows
1919
the insertion of child Views.
20-
* Views are created from a ProtoView. A ProtoView is a compiled DOM View which is efficient at
20+
* Views are created from a ProtoView. A ProtoView is a compiled DOM View which is efficient at
2121
creating Views.
22-
* View contains a context object. The context represents the object instance against which all
22+
* View contains a context object. The context represents the object instance against which all
2323
expressions are evaluated.
2424
* View contains a ChangeDetector for looking for detecting changes to the model.
2525
* View contains ElementInjector for creating Directives.
@@ -51,9 +51,9 @@ And assume following HTML View:
5151
</div>
5252
```
5353

54-
The above template is compiled by the Compiler to create a ProtoView. The ProtoView is then used to
55-
create an instance of the View. The instantiation process involves cloning the above template and
56-
locating all of the elements which contain bindings and finally instantiating the Directives
54+
The above template is compiled by the Compiler to create a ProtoView. The ProtoView is then used to
55+
create an instance of the View. The instantiation process involves cloning the above template and
56+
locating all of the elements which contain bindings and finally instantiating the Directives
5757
associated with the template. (See compilation for more details.)
5858

5959
```
@@ -81,13 +81,13 @@ Note:
8181
* View knows which expressions need to be watched.
8282
* View knows what needs to be updated if the watched expression changes.
8383
* All DOM elements are owned by single instance of the view.
84-
* The structure of the DOM can not change during runtime. To allow structural changes to the DOM we need
84+
* The structure of the DOM can not change during runtime. To allow structural changes to the DOM we need
8585
to understand Composed View.
8686

8787

8888
## Composed View
8989

90-
An important part of an application is to be able to change the DOM structure to render data for the
90+
An important part of an application is to be able to change the DOM structure to render data for the
9191
user. In Angular this is done by inserting child views into the ViewPort.
9292

9393
Let's start with a View such as:
@@ -123,12 +123,12 @@ The next step is to compose these two ProtoViews into an actual view which is re
123123
</ul> | viewA(someContext)
124124
```
125125

126-
*Step2:* Instantiate `Foreach` directive which will receive the `ViewContainer`. (The ViewContainer
126+
*Step2:* Instantiate `Foreach` directive which will receive the `ViewContainerRef`. (The ViewContainerRef
127127
has a reference to `protoViewA`).
128128

129129

130-
*Step3:* As the `Foreach` directive unrolls it asks the `ViewContainer` to instantiate `protoViewB` and insert
131-
it after the `ViewPort` anchor. This is repeated for each `person` in `people`. Notice that
130+
*Step3:* As the `Foreach` directive unrolls it asks the `ViewContainerRef` to instantiate `protoViewB` and insert
131+
it after the `ViewPort` anchor. This is repeated for each `person` in `people`. Notice that
132132

133133
```
134134
<ul> | viewA(someContext)
@@ -138,9 +138,9 @@ it after the `ViewPort` anchor. This is repeated for each `person` in `people`.
138138
</ul> | viewA(someContext)
139139
```
140140

141-
*Step4:* All of the bindings in the child Views are updated. Notice that in the case of `Foreach`
142-
the evaluation context for the `viewB0` and `viewB1` are `locals0` and `locals1` respectively.
143-
Locals allow the introduction of new local variables visible only within the scope of the View, and
141+
*Step4:* All of the bindings in the child Views are updated. Notice that in the case of `Foreach`
142+
the evaluation context for the `viewB0` and `viewB1` are `locals0` and `locals1` respectively.
143+
Locals allow the introduction of new local variables visible only within the scope of the View, and
144144
delegate any unknown references to the parent context.
145145

146146
```
@@ -151,17 +151,17 @@ delegate any unknown references to the parent context.
151151
</ul> | viewA
152152
```
153153

154-
Each View can have zero or more ViewPorts. By inserting and removing child Views to and from the
155-
ViewContainers, the application can mutate the DOM structure to any desirable state. A View may contain
156-
individual nodes or a complex DOM structure. The insertion points for the child Views, known as
157-
ViewContainers, contain a DOM element which acts as an anchor. The anchor is either a `template` or
158-
a `script` element depending on your browser. It is used to identify where the child Views will be
154+
Each View can have zero or more ViewPorts. By inserting and removing child Views to and from the
155+
ViewContainers, the application can mutate the DOM structure to any desirable state. A View may contain
156+
individual nodes or a complex DOM structure. The insertion points for the child Views, known as
157+
ViewContainers, contain a DOM element which acts as an anchor. The anchor is either a `template` or
158+
a `script` element depending on your browser. It is used to identify where the child Views will be
159159
inserted.
160160

161161
## Component Views
162162

163-
A View can also contain Components. Components contain Shadow DOM for encapsulating their internal
164-
rendering state. Unlike ViewPorts which can contain zero or more Views, the Component always contains
163+
A View can also contain Components. Components contain Shadow DOM for encapsulating their internal
164+
rendering state. Unlike ViewPorts which can contain zero or more Views, the Component always contains
165165
exactly one Shadow View.
166166

167167
```
@@ -205,7 +205,7 @@ And assume the following HTML View:
205205
</div> | viewA(greeter)
206206
```
207207

208-
The above UI is built using a single View, and hence a single context `greeter`. It can be expressed
208+
The above UI is built using a single View, and hence a single context `greeter`. It can be expressed
209209
in this pseudo-code.
210210

211211
```
@@ -215,15 +215,15 @@ var greeter = new Greeter();
215215
The View contains two bindings:
216216

217217
1. `greeting`: This is bound to the `greeting` property on the `Greeter` instance.
218-
2. `name.value`: This poses a problem. There is no `name` property on the `Greeter` instance. To solve
218+
2. `name.value`: This poses a problem. There is no `name` property on the `Greeter` instance. To solve
219219
this we wrap the `Greeter` instance in the `Local` instance like so:
220220
```
221221
var greeter = new Locals(new Greeter(), {name: ref_to_input_element })
222222
```
223223

224224

225-
By wrapping the `Greeter` instance into the `Locals` we allow the view to introduce variables which
226-
are in addition to the `Greeter` instance. During the resolution of the expressions we first check
225+
By wrapping the `Greeter` instance into the `Locals` we allow the view to introduce variables which
226+
are in addition to the `Greeter` instance. During the resolution of the expressions we first check
227227
the locals, and then the `Greeter` instance.
228228

229229

@@ -233,14 +233,14 @@ the locals, and then the `Greeter` instance.
233233
Views transition through a particular set of states:
234234

235235
1. View is created from the ProtoView.
236-
2. View can be attached to an existing ViewContainer.
237-
3. Upon attaching View to the ViewContainer the View needs to be hydrated. The hydration process
236+
2. View can be attached to an existing ViewContainerRef.
237+
3. Upon attaching View to the ViewContainerRef the View needs to be hydrated. The hydration process
238238
involves instantiating all of the Directives associated with the current View.
239-
4. At this point the view is ready and renderable. Multiple changes can be delivered to the
239+
4. At this point the view is ready and renderable. Multiple changes can be delivered to the
240240
Directives from the ChangeDetection.
241-
5. At some point the View can be removed. At this point all of the directives are destroyed during
241+
5. At some point the View can be removed. At this point all of the directives are destroyed during
242242
the dehydration process and the view becomes inactive.
243-
6. The View has to wait until it is detached from the DOM. The delay in detaching could be caused
243+
6. The View has to wait until it is detached from the DOM. The delay in detaching could be caused
244244
because an animation is animating the view away.
245-
7. After the View is detached from the DOM it is ready to be reused. The view reuse allows the
245+
7. After the View is detached from the DOM it is ready to be reused. The view reuse allows the
246246
application to be faster in subsequent renderings.

0 commit comments

Comments
 (0)