cargdev/angular
1
0
Fork 0
Code Issues 16 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(views): split ViewManager/ViewContainerRef.createView into 2 methods

Browse Source 
BREAKING CHANGES:

`ViewManager.createView` / `ViewContainerRef.create` have been split into 2 methods:

- `createHostView` which takes dynamically created bindings
- `createEmbeddedView` which takes the newly introduced `TemplateRef`

The new type `TemplateRef` is the combination of a `ProtoViewRef` and and `ElementRef`
from the same place. Use `TemplateRef` when working with embedded views in
`ng-if`, `ng-for`, ... instead of `ProtoViewRef`.

Also, `ProtoViewRef` is no more injectable, but `TemplateRef` is.

First part of #1989 to clean up manual content projection.
Closes #3114
This commit is contained in:
Tobias Bosch
2015-07-17 08:03:40 -07:00
parent 762a94f2cd
commit f42382db3b
17 changed files with 198 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
modules/angular2/test/core/compiler/element_injector_spec.ts
View File

@ -43,7 +43,7 @@ import {
import {bind, Injector, Binding, Optional, Inject, Injectable, Self, Parent, Ancestor, Unbounded, InjectMetadata, ParentMetadata} from 'angular2/di';
import {AppProtoView, AppView} from 'angular2/src/core/compiler/view';
import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
import {TemplateRef} from 'angular2/src/core/compiler/template_ref';
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
import {DynamicChangeDetector, ChangeDetectorRef, Parser, Lexer} from 'angular2/change_detection';
import {QueryList} from 'angular2/src/core/compiler/query_list';
@ -191,15 +191,15 @@ class NeedsViewContainer {
}
@Injectable()
class NeedsProtoViewRef {
protoViewRef;
constructor(ref: ProtoViewRef) { this.protoViewRef = ref; }
class NeedsTemplateRef {
templateRef;
constructor(ref: TemplateRef) { this.templateRef = ref; }
}
@Injectable()
class OptionallyInjectsProtoViewRef {
protoViewRef;
constructor(@Optional() ref: ProtoViewRef) { this.protoViewRef = ref; }
class OptionallyInjectsTemplateRef {
templateRef;
constructor(@Optional() ref: TemplateRef) { this.templateRef = ref; }
}
@Injectable()
@ -748,11 +748,11 @@ export function main() {
});
it("should instantiate directives that depend on pre built objects", () => {
var protoView = new AppProtoView(null, null, null, null, null);
var bindings = ListWrapper.concat([NeedsProtoViewRef], extraBindings);
var inj = injector(bindings, null, false, new PreBuiltObjects(null, null, null, protoView));
var templateRef = new TemplateRef(<any>new DummyElementRef());
var bindings = ListWrapper.concat([NeedsTemplateRef], extraBindings);
var inj = injector(bindings, null, false, new PreBuiltObjects(null, null, null, templateRef));
expect(inj.get(NeedsProtoViewRef).protoViewRef).toEqual(new ProtoViewRef(protoView));
expect(inj.get(NeedsTemplateRef).templateRef).toEqual(templateRef);
});
it("should get directives from parent", () => {
@ -973,24 +973,24 @@ export function main() {
expect(inj.get(NeedsViewContainer).viewContainer).toBeAnInstanceOf(ViewContainerRef);
});
it("should inject ProtoViewRef", () => {
var protoView = new AppProtoView(null, null, null, null, null);
var inj = injector(ListWrapper.concat([NeedsProtoViewRef], extraBindings), null, false,
new PreBuiltObjects(null, null, null, protoView));
it("should inject TemplateRef", () => {
var templateRef = new TemplateRef(<any>new DummyElementRef());
var inj = injector(ListWrapper.concat([NeedsTemplateRef], extraBindings), null, false,
new PreBuiltObjects(null, null, null, templateRef));
expect(inj.get(NeedsProtoViewRef).protoViewRef).toEqual(new ProtoViewRef(protoView));
expect(inj.get(NeedsTemplateRef).templateRef).toEqual(templateRef);
});
it("should throw if there is no ProtoViewRef", () => {
expect(() => injector(ListWrapper.concat([NeedsProtoViewRef], extraBindings)))
it("should throw if there is no TemplateRef", () => {
expect(() => injector(ListWrapper.concat([NeedsTemplateRef], extraBindings)))
.toThrowError(
`No provider for ProtoViewRef! (${stringify(NeedsProtoViewRef) } -> ProtoViewRef)`);
`No provider for TemplateRef! (${stringify(NeedsTemplateRef) } -> TemplateRef)`);
});
it('should inject null if there is no ProtoViewRef when the dependency is optional', () => {
var inj = injector(ListWrapper.concat([OptionallyInjectsProtoViewRef], extraBindings));
var instance = inj.get(OptionallyInjectsProtoViewRef);
expect(instance.protoViewRef).toBeNull();
it('should inject null if there is no TemplateRef when the dependency is optional', () => {
var inj = injector(ListWrapper.concat([OptionallyInjectsTemplateRef], extraBindings));
var instance = inj.get(OptionallyInjectsTemplateRef);
expect(instance.templateRef).toBeNull();
});
});

26
modules/angular2/test/core/compiler/integration_spec.ts
View File

@ -67,9 +67,11 @@ import {NgIf} from 'angular2/src/directives/ng_if';
import {NgFor} from 'angular2/src/directives/ng_for';
import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
import {ProtoViewRef, ViewRef} from 'angular2/src/core/compiler/view_ref';
import {ViewRef} from 'angular2/src/core/compiler/view_ref';
import {Compiler} from 'angular2/src/core/compiler/compiler';
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
import {TemplateRef} from 'angular2/src/core/compiler/template_ref';
import {DomRenderer} from 'angular2/src/render/dom/dom_renderer';
import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
@ -1385,7 +1387,7 @@ class DynamicViewport {
var bindings = Injector.resolve([bind(MyService).toValue(myService)]);
this.done = compiler.compileInHost(ChildCompUsingService)
.then((hostPv) => {vc.create(hostPv, 0, null, bindings)});
.then((hostPv) => {vc.createHostView(hostPv, 0, bindings)});
}
}
@ -1525,9 +1527,9 @@ class ChildComp2 {
@Directive({selector: '[some-viewport]'})
@Injectable()
class SomeViewport {
constructor(container: ViewContainerRef, protoView: ProtoViewRef) {
container.create(protoView).setLocal('some-tmpl', 'hello');
container.create(protoView).setLocal('some-tmpl', 'again');
constructor(container: ViewContainerRef, templateRef: TemplateRef) {
container.createEmbeddedView(templateRef).setLocal('some-tmpl', 'hello');
container.createEmbeddedView(templateRef).setLocal('some-tmpl', 'again');
}
}
@ -1677,12 +1679,8 @@ class NeedsPublicApi {
@Directive({selector: '[toolbarpart]'})
@Injectable()
class ToolbarPart {
protoViewRef: ProtoViewRef;
elementRef: ElementRef;
constructor(protoViewRef: ProtoViewRef, elementRef: ElementRef) {
this.elementRef = elementRef;
this.protoViewRef = protoViewRef;
}
templateRef: TemplateRef;
constructor(templateRef: TemplateRef) { this.templateRef = templateRef; }
}
@Directive({selector: '[toolbar-vc]', properties: ['toolbarVc']})
@ -1692,7 +1690,7 @@ class ToolbarViewContainer {
constructor(vc: ViewContainerRef) { this.vc = vc; }
set toolbarVc(part: ToolbarPart) {
var view = this.vc.create(part.protoViewRef, 0, part.elementRef);
var view = this.vc.createEmbeddedView(part.templateRef, 0);
view.setLocal('toolbarProp', 'From toolbar');
}
}
@ -1858,7 +1856,7 @@ class ChildConsumingEventBus {
class SomeImperativeViewport {
view: ViewRef;
anchor;
constructor(public vc: ViewContainerRef, public protoView: ProtoViewRef,
constructor(public vc: ViewContainerRef, public templateRef: TemplateRef,
public renderer: DomRenderer, @Inject(ANCHOR_ELEMENT) anchor) {
this.view = null;
this.anchor = anchor;
@ -1870,7 +1868,7 @@ class SomeImperativeViewport {
this.view = null;
}
if (value) {
this.view = this.vc.create(this.protoView);
this.view = this.vc.createEmbeddedView(this.templateRef);
var nodes = this.renderer.getRootNodes(this.view.renderFragment);
for (var i = 0; i < nodes.length; i++) {
DOM.appendChild(this.anchor, nodes[i]);

19
modules/angular2/test/core/compiler/projection_integration_spec.ts
View File

@ -32,8 +32,8 @@ import {
View,
forwardRef,
ViewContainerRef,
ProtoViewRef,
ElementRef,
TemplateRef,
bind
} from 'angular2/angular2';
import {ShadowDomStrategy, NativeShadowDomStrategy} from 'angular2/render';
@ -275,7 +275,7 @@ export function main() {
main.query(By.directive(ProjectDirective)).inject(ProjectDirective);
expect(main.nativeElement).toHaveText('START()END');
projectDirective.show(sourceDirective.protoViewRef, sourceDirective.elementRef);
projectDirective.show(sourceDirective.templateRef);
expect(main.nativeElement).toHaveText('START(A)END');
async.done();
});
@ -298,7 +298,7 @@ export function main() {
main.query(By.directive(ProjectDirective)).inject(ProjectDirective);
expect(main.nativeElement).toHaveText('SIMPLE()START()END');
projectDirective.show(sourceDirective.protoViewRef, sourceDirective.elementRef);
projectDirective.show(sourceDirective.templateRef);
expect(main.nativeElement).toHaveText('SIMPLE()START(A)END');
async.done();
});
@ -325,12 +325,12 @@ export function main() {
main.query(By.directive(ProjectDirective)).inject(ProjectDirective);
expect(main.nativeElement).toHaveText('(, B)START()END');
projectDirective.show(sourceDirective.protoViewRef, sourceDirective.elementRef);
projectDirective.show(sourceDirective.templateRef);
expect(main.nativeElement).toHaveText('(, B)START(A)END');
// Stamping ng-content multiple times should not produce the content multiple
// times...
projectDirective.show(sourceDirective.protoViewRef, sourceDirective.elementRef);
projectDirective.show(sourceDirective.templateRef);
expect(main.nativeElement).toHaveText('(, B)START(A)END');
async.done();
});
@ -418,18 +418,15 @@ class MultipleContentTagsComponent {
@Directive({selector: '[manual]'})
class ManualViewportDirective {
constructor(public vc: ViewContainerRef, public protoViewRef: ProtoViewRef,
public elementRef: ElementRef) {}
show() { this.vc.create(this.protoViewRef, 0); }
constructor(public vc: ViewContainerRef, public templateRef: TemplateRef) {}
show() { this.vc.createEmbeddedView(this.templateRef, 0); }
hide() { this.vc.clear(); }
}
@Directive({selector: '[project]'})
class ProjectDirective {
constructor(public vc: ViewContainerRef) {}
show(protoViewRef: ProtoViewRef, context: ElementRef) {
this.vc.create(protoViewRef, 0, context);
}
show(templateRef: TemplateRef) { this.vc.createEmbeddedView(templateRef, 0); }
hide() { this.vc.clear(); }
}

48
modules/angular2/test/core/compiler/view_manager_spec.ts
View File

@ -26,6 +26,7 @@ import {
} from 'angular2/src/core/compiler/view';
import {ProtoViewRef, ViewRef, internalView} from 'angular2/src/core/compiler/view_ref';
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
import {TemplateRef} from 'angular2/src/core/compiler/template_ref';
import {
Renderer,
RenderViewRef,
@ -187,25 +188,27 @@ export function main() {
var hostView: AppView;
var childProtoView: AppProtoView;
var vcRef: ElementRef;
var templateRef: TemplateRef;
beforeEach(() => {
childProtoView = createEmbeddedPv();
var hostProtoView = createHostPv(
[createNestedElBinder(createComponentPv([createNestedElBinder(childProtoView)]))]);
hostView = internalView(manager.createRootHostView(wrapPv(hostProtoView), null, null));
vcRef = hostView.elementRefs[1];
templateRef = new TemplateRef(hostView.elementRefs[1]);
resetSpies();
});
describe('create the first view', () => {
it('should create an AppViewContainer if not yet existing', () => {
manager.createViewInContainer(vcRef, 0, wrapPv(childProtoView), null);
manager.createEmbeddedViewInContainer(vcRef, 0, templateRef);
expect(hostView.viewContainers[1]).toBeTruthy();
});
it('should use an existing nested view', () => {
var childView =
internalView(manager.createViewInContainer(vcRef, 0, wrapPv(childProtoView), null));
internalView(manager.createEmbeddedViewInContainer(vcRef, 0, templateRef));
expect(childView.proto).toBe(childProtoView);
expect(childView).toBe(hostView.views[2]);
expect(viewListener.spy('viewCreated')).not.toHaveBeenCalled();
@ -214,7 +217,7 @@ export function main() {
it('should attach the fragment', () => {
var childView =
internalView(manager.createViewInContainer(vcRef, 0, wrapPv(childProtoView), null));
internalView(manager.createEmbeddedViewInContainer(vcRef, 0, templateRef));
expect(childView.proto).toBe(childProtoView);
expect(hostView.viewContainers[1].views.length).toBe(1);
expect(hostView.viewContainers[1].views[0]).toBe(childView);
@ -224,13 +227,13 @@ export function main() {
it('should hydrate the view but not the render view', () => {
var childView =
internalView(manager.createViewInContainer(vcRef, 0, wrapPv(childProtoView), null));
internalView(manager.createEmbeddedViewInContainer(vcRef, 0, templateRef));
expect(childView.hydrated()).toBe(true);
expect(renderer.spy('hydrateView')).not.toHaveBeenCalled();
});
it('should not set the EventDispatcher', () => {
internalView(manager.createViewInContainer(vcRef, 0, wrapPv(childProtoView), null));
internalView(manager.createEmbeddedViewInContainer(vcRef, 0, templateRef));
expect(renderer.spy('setEventDispatcher')).not.toHaveBeenCalled();
});
@ -240,13 +243,13 @@ export function main() {
var firstChildView;
beforeEach(() => {
firstChildView =
internalView(manager.createViewInContainer(vcRef, 0, wrapPv(childProtoView), null));
internalView(manager.createEmbeddedViewInContainer(vcRef, 0, templateRef));
resetSpies();
});
it('should create a new view', () => {
var childView =
internalView(manager.createViewInContainer(vcRef, 1, wrapPv(childProtoView), null));
internalView(manager.createEmbeddedViewInContainer(vcRef, 1, templateRef));
expect(childView.proto).toBe(childProtoView);
expect(childView).not.toBe(firstChildView);
expect(viewListener.spy('viewCreated')).toHaveBeenCalledWith(childView);
@ -259,7 +262,7 @@ export function main() {
it('should attach the fragment', () => {
var childView =
internalView(manager.createViewInContainer(vcRef, 1, wrapPv(childProtoView), null));
internalView(manager.createEmbeddedViewInContainer(vcRef, 1, templateRef));
expect(childView.proto).toBe(childProtoView);
expect(hostView.viewContainers[1].views[1]).toBe(childView);
expect(renderer.spy('attachFragmentAfterFragment'))
@ -268,14 +271,14 @@ export function main() {
it('should hydrate the view', () => {
var childView =
internalView(manager.createViewInContainer(vcRef, 1, wrapPv(childProtoView), null));
internalView(manager.createEmbeddedViewInContainer(vcRef, 1, templateRef));
expect(childView.hydrated()).toBe(true);
expect(renderer.spy('hydrateView')).toHaveBeenCalledWith(childView.render);
});
it('should set the EventDispatcher', () => {
var childView =
internalView(manager.createViewInContainer(vcRef, 1, wrapPv(childProtoView), null));
internalView(manager.createEmbeddedViewInContainer(vcRef, 1, templateRef));
expect(renderer.spy('setEventDispatcher'))
.toHaveBeenCalledWith(childView.render, childView);
});
@ -284,14 +287,14 @@ export function main() {
describe('create another view when the first view has been returned', () => {
beforeEach(() => {
internalView(manager.createViewInContainer(vcRef, 0, wrapPv(childProtoView), null));
internalView(manager.createEmbeddedViewInContainer(vcRef, 0, templateRef));
manager.destroyViewInContainer(vcRef, 0);
resetSpies();
});
it('should use an existing nested view', () => {
var childView =
internalView(manager.createViewInContainer(vcRef, 0, wrapPv(childProtoView), null));
internalView(manager.createEmbeddedViewInContainer(vcRef, 0, templateRef));
expect(childView.proto).toBe(childProtoView);
expect(childView).toBe(hostView.views[2]);
expect(viewListener.spy('viewCreated')).not.toHaveBeenCalled();
@ -305,7 +308,7 @@ export function main() {
it('should always create a new view and not use the embedded view', () => {
var newHostPv = createHostPv([createNestedElBinder(createComponentPv())]);
var newHostView =
internalView(manager.createViewInContainer(vcRef, 0, wrapPv(newHostPv), null));
internalView(manager.createHostViewInContainer(vcRef, 0, wrapPv(newHostPv), null));
expect(newHostView.proto).toBe(newHostPv);
expect(newHostView).not.toBe(hostView.views[2]);
expect(viewListener.spy('viewCreated')).toHaveBeenCalledWith(newHostView);
@ -325,6 +328,7 @@ export function main() {
var hostView: AppView;
var childProtoView: AppProtoView;
var vcRef: ElementRef;
var templateRef: TemplateRef;
var firstChildView: AppView;
beforeEach(() => {
childProtoView = createEmbeddedPv();
@ -332,8 +336,9 @@ export function main() {
[createNestedElBinder(createComponentPv([createNestedElBinder(childProtoView)]))]);
hostView = internalView(manager.createRootHostView(wrapPv(hostProtoView), null, null));
vcRef = hostView.elementRefs[1];
templateRef = new TemplateRef(hostView.elementRefs[1]);
firstChildView =
internalView(manager.createViewInContainer(vcRef, 0, wrapPv(childProtoView), null));
internalView(manager.createEmbeddedViewInContainer(vcRef, 0, templateRef));
resetSpies();
});
@ -362,7 +367,7 @@ export function main() {
var secondChildView;
beforeEach(() => {
secondChildView =
internalView(manager.createViewInContainer(vcRef, 1, wrapPv(childProtoView), null));
internalView(manager.createEmbeddedViewInContainer(vcRef, 1, templateRef));
resetSpies();
});
@ -393,6 +398,7 @@ export function main() {
var hostView: AppView;
var childProtoView: AppProtoView;
var vcRef: ElementRef;
var templateRef: TemplateRef;
var firstChildView: AppView;
var secondChildView: AppView;
beforeEach(() => {
@ -401,10 +407,11 @@ export function main() {
[createNestedElBinder(createComponentPv([createNestedElBinder(childProtoView)]))]);
hostView = internalView(manager.createRootHostView(wrapPv(hostProtoView), null, null));
vcRef = hostView.elementRefs[1];
templateRef = new TemplateRef(hostView.elementRefs[1]);
firstChildView =
internalView(manager.createViewInContainer(vcRef, 0, wrapPv(childProtoView), null));
internalView(manager.createEmbeddedViewInContainer(vcRef, 0, templateRef));
secondChildView =
internalView(manager.createViewInContainer(vcRef, 1, wrapPv(childProtoView), null));
internalView(manager.createEmbeddedViewInContainer(vcRef, 1, templateRef));
resetSpies();
});
@ -438,6 +445,7 @@ export function main() {
var childProtoView: AppProtoView;
var nestedChildProtoView: AppProtoView;
var vcRef: ElementRef;
var templateRef: TemplateRef;
var nestedVcRefs: ElementRef[];
var childViews: AppView[];
var nestedChildViews: AppView[];
@ -451,18 +459,18 @@ export function main() {
[createNestedElBinder(createComponentPv([createNestedElBinder(childProtoView)]))]);
hostView = internalView(manager.createRootHostView(wrapPv(hostProtoView), null, null));
vcRef = hostView.elementRefs[1];
templateRef = new TemplateRef(hostView.elementRefs[1]);
nestedChildViews = [];
childViews = [];
nestedVcRefs = [];
for (var i = 0; i < 2; i++) {
var view = internalView(
manager.createViewInContainer(vcRef, i, wrapPv(childProtoView), null));
var view = internalView(manager.createEmbeddedViewInContainer(vcRef, i, templateRef));
childViews.push(view);
var nestedVcRef = view.elementRefs[view.elementOffset];
nestedVcRefs.push(nestedVcRef);
for (var j = 0; j < 2; j++) {
var nestedView = internalView(
manager.createViewInContainer(nestedVcRef, j, wrapPv(childProtoView), null));
manager.createEmbeddedViewInContainer(nestedVcRef, j, templateRef));
nestedChildViews.push(nestedView);
}
}