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

@ -86,7 +86,7 @@ import {Injectable} from 'angular2/di';
*
* @Decorator({
* selector: '[dependency]',
* bind: {
* properties: {
* 'id':'dependency'
* }
* })
@ -272,7 +272,8 @@ export class Directive extends Injectable {
/**
* Enumerates the set of properties that accept data binding for a directive.
*
* The `bind` property defines a set of `directiveProperty` to `bindingProperty` key-value pairs:
* The `properties` property defines a set of `directiveProperty` to `bindingProperty`
* key-value pairs:
*
* - `directiveProperty` specifies the component property where the value is written.
* - `bindingProperty` specifies the DOM property where the value is read from.
@ -285,7 +286,7 @@ export class Directive extends Injectable {
*
* ```
* @Directive({
* bind: {
* properties: {
* 'directiveProperty1': 'bindingProperty1',
* 'directiveProperty2': 'bindingProperty2 | pipe1 | ...',
* ...
@ -302,7 +303,7 @@ export class Directive extends Injectable {
* ```
* @Decorator({
* selector: '[tooltip]',
* bind: {
* properties: {
* 'text': 'tooltip'
* }
* })
@ -321,8 +322,8 @@ export class Directive extends Injectable {
* <div tooltip="Some Text">...</div>
* ```
*
* Whenever the `someExpression` expression changes, the `bind` declaration instructs Angular to update the
* `Tooltip`'s `text` property.
* Whenever the `someExpression` expression changes, the `properties` declaration instructs
* Angular to update the `Tooltip`'s `text` property.
*
*
*
@ -336,7 +337,7 @@ export class Directive extends Injectable {
* ```
* @Decorator({
* selector: '[class-set]',
* bind: {
* properties: {
* 'classChanges': 'classSet | keyValDiff'
* }
* })
@ -356,12 +357,12 @@ export class Directive extends Injectable {
* In this case, the two pipes compose as if they were inlined: `someExpression | somePipe | keyValDiff`.
*
*/
bind:any; // StringMap
properties:any; // StringMap
/**
* Specifies which DOM events a directive listens to.
* Specifies which DOM hostListeners a directive listens to.
*
* The `events` property defines a set of `event` to `method` key-value pairs:
* The `hostListeners` property defines a set of `event` to `method` key-value pairs:
*
* - `event1`: the DOM event that the directive listens to.
* - `statement`: the statement to execute when the event occurs.
@ -377,7 +378,7 @@ export class Directive extends Injectable {
*
* ```
* @Directive({
* events: {
* hostListeners: {
* 'event1': 'onMethod1(arguments)',
* ...
* }
@ -386,13 +387,13 @@ export class Directive extends Injectable {
*
* ## Basic Event Binding:
*
* Suppose you want to write a directive that triggers on `change` events in the DOM. You would define the event
* Suppose you want to write a directive that triggers on `change` hostListeners in the DOM. You would define the event
* binding as follows:
*
* ```
* @Decorator({
* selector: 'input',
* events: {
* hostListeners: {
* 'change': 'onChange($event)'
* }
* })
@ -405,10 +406,10 @@ export class Directive extends Injectable {
* Here the `onChange` method of `InputDecorator` is invoked whenever the DOM element fires the 'change' event.
*
*/
events:any; // StringMap
hostListeners:any; // StringMap
/**
* Specifies a set of lifecycle events in which the directive participates.
* Specifies a set of lifecycle hostListeners in which the directive participates.
*
* See: [onChange], [onDestroy], [onAllChangesDone] for details.
*/
@ -417,20 +418,20 @@ export class Directive extends Injectable {
@CONST()
constructor({
selector,
bind,
events,
properties,
hostListeners,
lifecycle
}:{
selector:string,
bind:any,
events: any,
properties:any,
hostListeners: any,
lifecycle:List
}={})
{
super();
this.selector = selector;
this.bind = bind;
this.events = events;
this.properties = properties;
this.hostListeners = hostListeners;
this.lifecycle = lifecycle;
}
@ -447,17 +448,17 @@ export class Directive extends Injectable {
/**
* Declare reusable UI building blocks for an application.
*
* Each Angular component requires a single `@Component` and at least one `@Template` annotation. The `@Component`
* annotation specifies when a component is instantiated, and which properties and events it binds to.
* Each Angular component requires a single `@Component` and at least one `@View` annotation. The `@Component`
* annotation specifies when a component is instantiated, and which properties and hostListeners it binds to.
*
* When a component is instantiated, Angular
* - creates a shadow DOM for the component.
* - loads the selected template into the shadow DOM.
* - creates a child [Injector] which is configured with the [Component.services].
* - creates a child [Injector] which is configured with the [Component.injectables].
*
* All template expressions and statements are then evaluated against the component instance.
*
* For details on the `@Template` annotation, see [Template].
* For details on the `@View` annotation, see [View].
*
* ## Example
*
@ -465,8 +466,8 @@ export class Directive extends Injectable {
* @Component({
* selector: 'greet'
* })
* @Template({
* inline: 'Hello {{name}}!'
* @View({
* template: 'Hello {{name}}!'
* })
* class Greet {
* name: string;
@ -494,16 +495,16 @@ export class Component extends Directive {
/**
* Defines the set of injectable objects that are visible to a Component and its children.
*
* The [services] defined in the Component annotation allow you to configure a set of bindings for the component's
* The [injectables] defined in the Component annotation allow you to configure a set of bindings for the component's
* injector.
*
* When a component is instantiated, Angular creates a new child Injector, which is configured with the bindings in
* the Component [services] annotation. The injectable objects then become available for injection to the component
* the Component [injectables] annotation. The injectable objects then become available for injection to the component
* itself and any of the directives in the component's template, i.e. they are not available to the directives which
* are children in the component's light DOM.
*
*
* The syntax for configuring the [services] injectable is identical to [Injector] injectable configuration. See
* The syntax for configuring the [injectables] injectable is identical to [Injector] injectable configuration. See
* [Injector] for additional detail.
*
*
@ -520,12 +521,12 @@ export class Component extends Directive {
*
* @Component({
* selector: 'greet',
* services: [
* injectables: [
* Greeter
* ]
* })
* @Template({
* inline: `{{greeter.greet('world')}}!`,
* @View({
* template: `{{greeter.greet('world')}}!`,
* directives: Child
* })
* class HelloWorld {
@ -537,34 +538,34 @@ export class Component extends Directive {
* }
* ```
*/
services:List;
injectables:List;
@CONST()
constructor({
selector,
bind,
events,
services,
properties,
hostListeners,
injectables,
lifecycle,
changeDetection
}:{
selector:string,
bind:Object,
events:Object,
services:List,
properties:Object,
hostListeners:Object,
injectables:List,
lifecycle:List,
changeDetection:string
}={})
{
super({
selector: selector,
bind: bind,
events: events,
properties: properties,
hostListeners: hostListeners,
lifecycle: lifecycle
});
this.changeDetection = changeDetection;
this.services = services;
this.injectables = injectables;
}
}
@ -600,8 +601,8 @@ export class Component extends Directive {
* @Component({
* selector: 'hello-cmp'
* })
* @Template({
* inline: "{{greeting}}"
* @View({
* template: "{{greeting}}"
* })
* class HelloCmp {
* greeting:string;
@ -617,33 +618,33 @@ export class Component extends Directive {
*/
export class DynamicComponent extends Directive {
/**
* Same as [Component.services].
* Same as [Component.injectables].
*/
// TODO(vsankin): Please extract into AbstractComponent
services:any; //List;
injectables:any; //List;
@CONST()
constructor({
selector,
bind,
events,
services,
properties,
hostListeners,
injectables,
lifecycle
}:{
selector:string,
bind:Object,
events:Object,
services:List,
properties:Object,
hostListeners:Object,
injectables:List,
lifecycle:List
}={}) {
super({
selector: selector,
bind: bind,
events: events,
properties: properties,
hostListeners: hostListeners,
lifecycle: lifecycle
});
this.services = services;
this.injectables = injectables;
}
}
@ -670,10 +671,10 @@ export class DynamicComponent extends Directive {
* ```
* @Decorator({
* selector: '[tooltip]',
* bind: {
* properties: {
* 'text': 'tooltip'
* },
* events: {
* hostListeners: {
* 'onmouseenter': 'onMouseEnter()',
* 'onmouseleave': 'onMouseLeave()'
* }
@ -718,22 +719,22 @@ export class Decorator extends Directive {
@CONST()
constructor({
selector,
bind,
events,
properties,
hostListeners,
lifecycle,
compileChildren = true,
}:{
selector:string,
bind:any,
events:any,
properties:any,
hostListeners:any,
lifecycle:List,
compileChildren:boolean
}={})
{
super({
selector: selector,
bind: bind,
events: events,
properties: properties,
hostListeners: hostListeners,
lifecycle: lifecycle
});
this.compileChildren = compileChildren;
@ -784,7 +785,7 @@ export class Decorator extends Directive {
* ```
* @Viewport({
* selector: '[unless]',
* bind: {
* properties: {
* 'condition': 'unless'
* }
* })
@ -837,19 +838,19 @@ export class Viewport extends Directive {
@CONST()
constructor({
selector,
bind,
events,
properties,
hostListeners,
lifecycle
}:{
selector:string,
bind:any,
properties:any,
lifecycle:List
}={})
{
super({
selector: selector,
bind: bind,
events: events,
properties: properties,
hostListeners: hostListeners,
lifecycle: lifecycle
});
}
@ -891,7 +892,7 @@ export const onDestroy = "onDestroy";
* ```
* @Decorator({
* selector: '[class-set]',
* bind: {
* properties: {
* 'propA': 'propA'
* 'propB': 'propB'
* },

View File

@ -3,7 +3,7 @@ import {ABSTRACT, CONST, Type} from 'angular2/src/facade/lang';
/**
* Declare the available HTML templates for an application.
*
* Each angular component requires a single `@Component` and at least one `@Template` annotation. The @Template
* Each angular component requires a single `@Component` and at least one `@View` annotation. The @View
* annotation specifies the HTML template to use, and lists the directives that are active within the template.
*
* When a component is instantiated, the template is loaded into the component's shadow root, and the
@ -17,8 +17,8 @@ import {ABSTRACT, CONST, Type} from 'angular2/src/facade/lang';
* @Component({
* selector: 'greet'
* })
* @Template({
* inline: 'Hello {{name}}!'
* @View({
* template: 'Hello {{name}}!'
* })
* class Greet {
* name: string;
@ -31,35 +31,35 @@ import {ABSTRACT, CONST, Type} from 'angular2/src/facade/lang';
*
* @publicModule angular2/annotations
*/
export class Template {
url:any; //string;
inline:any; //string;
export class View {
templateUrl:any; //string;
template:any; //string;
directives:any; //List<Type>;
formatters:any; //List<Type>;
source:any;//List<Template>;
source:any;//List<View>;
locale:any; //string
device:any; //string
@CONST()
constructor({
url,
inline,
templateUrl,
template,
directives,
formatters,
source,
locale,
device
}: {
url: string,
inline: string,
templateUrl: string,
template: string,
directives: List<Type>,
formatters: List<Type>,
source: List<Template>,
source: List<View>,
locale: string,
device: string
})
{
this.url = url;
this.inline = inline;
this.templateUrl = templateUrl;
this.template = template;
this.directives = directives;
this.formatters = formatters;
this.source = source;

View File

@ -3,23 +3,23 @@ import {DependencyAnnotation} from 'angular2/di';
/**
* Specifies that an injector should retrieve a dependency from the direct parent.
*
*
* ## Example
*
*
* Here is a simple directive that retrieves a dependency from its parent element.
*
*
* ```
* @Decorator({
* selector: '[dependency]',
* bind: {
* properties: {
* 'id':'dependency'
* }
* })
* class Dependency {
* id:string;
* }
*
*
*
*
* @Decorator({
* selector: '[my-directive]'
* })
@ -29,9 +29,9 @@ import {DependencyAnnotation} from 'angular2/di';
* };
* }
* ```
*
*
* We use this with the following HTML template:
*
*
* ```
* <div dependency="1">
* <div dependency="2" my-directive></div>
@ -51,26 +51,26 @@ export class Parent extends DependencyAnnotation {
/**
* Specifies that an injector should retrieve a dependency from any ancestor element.
*
*
* An ancestor is any element between the parent element and shadow root.
*
*
*
* ## Example
*
*
* Here is a simple directive that retrieves a dependency from an ancestor element.
*
*
* ```
* @Decorator({
* selector: '[dependency]',
* bind: {
* properties: {
* 'id':'dependency'
* }
* })
* class Dependency {
* id:string;
* }
*
*
*
*
* @Decorator({
* selector: '[my-directive]'
* })
@ -82,7 +82,7 @@ export class Parent extends DependencyAnnotation {
* ```
*
* We use this with the following HTML template:
*
*
* ```
* <div dependency="1">
* <div dependency="2">
@ -92,13 +92,13 @@ export class Parent extends DependencyAnnotation {
* </div>
* </div>
* ```
*
*
* The `@Ancestor()` annotation in our constructor forces the injector to retrieve the dependency from the
* nearest ancestor element:
* nearest ancestor element:
* - The current element `dependency="3"` is skipped because it is not an ancestor.
* - Next parent has no directives `<div>`
* - Next parent has the `Dependency` directive and so the dependency is satisfied.
*
* - Next parent has the `Dependency` directive and so the dependency is satisfied.
*
* Angular injects `dependency=2`.
*
* @publicModule angular2/annotations

View File

@ -169,8 +169,8 @@ function _createVmZone(givenReporter:Function): VmTurnZone {
* @Component({
* selector: 'my-app'
* })
* @Template({
* inline: 'Hello {{ name }}!'
* @View({
* template: 'Hello {{ name }}!'
* })
* class MyApp {
* name:string;
@ -191,8 +191,8 @@ function _createVmZone(givenReporter:Function): VmTurnZone {
* 1. It uses the component's `selector` property to locate the DOM element which needs to be upgraded into
* the angular component.
* 2. It creates a new child injector (from the primordial injector) and configures the injector with the component's
* `services`. Optionally, you can also override the injector configuration for an app by invoking
* `bootstrap` with the `componentServiceBindings` argument.
* `injectables`. Optionally, you can also override the injector configuration for an app by invoking
* `bootstrap` with the `componentInjectableBindings` argument.
* 3. It creates a new [Zone] and connects it to the angular application's change detection domain instance.
* 4. It creates a shadow DOM on the selected component's host element and loads the template into it.
* 5. It instantiates the specified component.
@ -234,7 +234,7 @@ function _createVmZone(givenReporter:Function): VmTurnZone {
* # API
* - [appComponentType]: The root component which should act as the application. This is a reference to a [Type]
* which is annotated with `@Component(...)`.
* - [componentServiceBindings]: An additional set of bindings that can be added to the [Component.services] to
* - [componentInjectableBindings]: An additional set of bindings that can be added to the [Component.injectables] to
* override default injection behavior.
* - [errorReporter]: `function(exception:any, stackTrace:string)` a default error reporter for unhandled exceptions.
*
@ -243,7 +243,7 @@ function _createVmZone(givenReporter:Function): VmTurnZone {
* @publicModule angular2/angular2
*/
export function bootstrap(appComponentType: Type,
componentServiceBindings: List<Binding> = null,
componentInjectableBindings: List<Binding> = null,
errorReporter: Function = null): Promise<Injector> {
BrowserDomAdapter.makeCurrent();
var bootstrapProcess = PromiseWrapper.completer();
@ -253,7 +253,7 @@ export function bootstrap(appComponentType: Type,
// TODO(rado): prepopulate template cache, so applications with only
// index.html and main.js are possible.
var appInjector = _createAppInjector(appComponentType, componentServiceBindings, zone);
var appInjector = _createAppInjector(appComponentType, componentInjectableBindings, zone);
PromiseWrapper.then(appInjector.asyncGet(appChangeDetectorToken),
(appChangeDetector) => {

View File

@ -5,10 +5,10 @@ import {List, ListWrapper, Map, MapWrapper} from 'angular2/src/facade/collection
import {DirectiveMetadataReader} from './directive_metadata_reader';
import {Component, Viewport, DynamicComponent, Decorator} from '../annotations/annotations';
import {ProtoView} from './view';
import {AppProtoView} from './view';
import {DirectiveBinding} from './element_injector';
import {TemplateResolver} from './template_resolver';
import {Template} from '../annotations/template';
import {View} from '../annotations/view';
import {ComponentUrlMapper} from './component_url_mapper';
import {ProtoViewFactory} from './proto_view_factory';
import {UrlResolver} from 'angular2/src/services/url_resolver';
@ -16,7 +16,7 @@ import {UrlResolver} from 'angular2/src/services/url_resolver';
import * as renderApi from 'angular2/src/render/api';
/**
* Cache that stores the ProtoView of the template of a component.
* Cache that stores the AppProtoView of the template of a component.
* Used to prevent duplicate work and resolve cyclic dependencies.
*/
@Injectable()
@ -26,11 +26,11 @@ export class CompilerCache {
this._cache = MapWrapper.create();
}
set(component:Type, protoView:ProtoView) {
set(component:Type, protoView:AppProtoView) {
MapWrapper.set(this._cache, component, protoView);
}
get(component:Type):ProtoView {
get(component:Type):AppProtoView {
var result = MapWrapper.get(this._cache, component);
return normalizeBlank(result);
}
@ -80,24 +80,24 @@ export class Compiler {
// Create a rootView as if the compiler encountered <rootcmp></rootcmp>.
// Used for bootstrapping.
compileRoot(elementOrSelector, componentTypeOrBinding:any):Promise<ProtoView> {
compileRoot(elementOrSelector, componentTypeOrBinding:any):Promise<AppProtoView> {
return this._renderer.createRootProtoView(elementOrSelector, 'root').then( (rootRenderPv) => {
return this._compileNestedProtoViews(null, rootRenderPv, [this._bindDirective(componentTypeOrBinding)], true);
});
}
compile(component: Type):Promise<ProtoView> {
compile(component: Type):Promise<AppProtoView> {
var protoView = this._compile(this._bindDirective(component));
return PromiseWrapper.isPromise(protoView) ? protoView : PromiseWrapper.resolve(protoView);
}
// TODO(vicb): union type return ProtoView or Promise<ProtoView>
// TODO(vicb): union type return AppProtoView or Promise<AppProtoView>
_compile(componentBinding: DirectiveBinding) {
var component = componentBinding.key.token;
var protoView = this._compilerCache.get(component);
if (isPresent(protoView)) {
// The component has already been compiled into a ProtoView,
// returns a plain ProtoView, not wrapped inside of a Promise.
// The component has already been compiled into an AppProtoView,
// returns a plain AppProtoView, not wrapped inside of a Promise.
// Needed for recursive components.
return protoView;
}
@ -124,7 +124,7 @@ export class Compiler {
return pvPromise;
}
// TODO(tbosch): union type return ProtoView or Promise<ProtoView>
// TODO(tbosch): union type return AppProtoView or Promise<AppProtoView>
_compileNestedProtoViews(componentBinding, renderPv, directives, isComponentRootView) {
var nestedPVPromises = [];
var protoView = this._protoViewFactory.createProtoView(componentBinding, renderPv, directives);
@ -143,7 +143,7 @@ export class Compiler {
var elementBinderDone = (nestedPv) => {
elementBinder.nestedProtoView = nestedPv;
// Can't set the parentProtoView for components,
// as their ProtoView might be used in multiple other components.
// as their AppProtoView might be used in multiple other components.
nestedPv.parentProtoView = isPresent(nestedComponent) ? null : protoView;
};
var nestedCall = null;
@ -180,23 +180,23 @@ export class Compiler {
}
}
_buildRenderTemplate(component, template, directives) {
_buildRenderTemplate(component, view, directives) {
var componentUrl = this._urlResolver.resolve(
this._appUrl, this._componentUrlMapper.getUrl(component)
);
var templateAbsUrl = null;
if (isPresent(template.url)) {
templateAbsUrl = this._urlResolver.resolve(componentUrl, template.url);
if (isPresent(view.templateUrl)) {
templateAbsUrl = this._urlResolver.resolve(componentUrl, view.templateUrl);
} else {
// Note: If we have an inline template, we also need to send
// the url for the component to the renderer so that it
// is able to resolve urls in stylesheets.
templateAbsUrl = componentUrl;
}
return new renderApi.Template({
return new renderApi.ViewDefinition({
componentId: stringify(component),
absUrl: templateAbsUrl,
inline: template.inline,
template: view.template,
directives: ListWrapper.map(directives, this._buildRenderDirective)
});
}
@ -228,14 +228,14 @@ export class Compiler {
type: renderType,
selector: ann.selector,
compileChildren: compileChildren,
events: isPresent(ann.events) ? MapWrapper.createFromStringMap(ann.events) : null,
bind: isPresent(ann.bind) ? MapWrapper.createFromStringMap(ann.bind) : null,
hostListeners: isPresent(ann.hostListeners) ? MapWrapper.createFromStringMap(ann.hostListeners) : null,
properties: isPresent(ann.properties) ? MapWrapper.createFromStringMap(ann.properties) : null,
setters: setters,
readAttributes: readAttributes
});
}
_flattenDirectives(template: Template):List<Type> {
_flattenDirectives(template: View):List<Type> {
if (isBlank(template.directives)) return [];
var directives = [];

View File

@ -36,7 +36,7 @@ export class DynamicComponentLoader {
var annotation = this._directiveMetadataReader.read(type).annotation;
var inj = this._componentAppInjector(location, injector, annotation.services);
var inj = this._componentAppInjector(location, injector, annotation.injectables);
var hostEi = location.elementInjector;
var hostView = location.hostView;
@ -96,4 +96,4 @@ export class DynamicComponentLoader {
throw new BaseException(`Could not load '${stringify(type)}' because it is not a component.`);
}
}
}
}

View File

@ -8,8 +8,8 @@ export class ElementBinder {
protoElementInjector:eiModule.ProtoElementInjector;
componentDirective:DirectiveBinding;
viewportDirective:DirectiveBinding;
nestedProtoView: viewModule.ProtoView;
events:StringMap;
nestedProtoView: viewModule.AppProtoView;
hostListeners:StringMap;
parent:ElementBinder;
index:int;
distanceToParent:int;
@ -28,7 +28,7 @@ export class ElementBinder {
this.index = index;
this.distanceToParent = distanceToParent;
// updated later when events are bound
this.events = null;
this.hostListeners = null;
// updated later, so we are able to resolve cycles
this.nestedProtoView = null;
}

View File

@ -49,9 +49,9 @@ export class DirectiveRef extends ElementRef {
}
export class ComponentRef extends DirectiveRef {
componentView:viewModule.View;
componentView:viewModule.AppView;
constructor(key:Key, elementInjector:ElementInjector, componentView:viewModule.View){
constructor(key:Key, elementInjector:ElementInjector, componentView:viewModule.AppView){
super(key, elementInjector);
this.componentView = componentView;
}
@ -65,8 +65,8 @@ class StaticKeys {
directiveRefId:number;
constructor() {
//TODO: vsavkin Key.annotate(Key.get(View), 'static')
this.viewId = Key.get(viewModule.View).id;
//TODO: vsavkin Key.annotate(Key.get(AppView), 'static')
this.viewId = Key.get(viewModule.AppView).id;
this.ngElementId = Key.get(NgElement).id;
this.viewContainerId = Key.get(ViewContainer).id;
this.bindingPropagationConfigId = Key.get(BindingPropagationConfig).id;
@ -267,7 +267,7 @@ export class DirectiveDependency extends Dependency {
var p = ListWrapper.find(properties, (p) => p instanceof Attribute);
return isPresent(p) ? p.attributeName : null;
}
static _query(properties) {
var p = ListWrapper.find(properties, (p) => p instanceof Query);
return isPresent(p) ? p.directive : null;
@ -305,7 +305,7 @@ export class DirectiveBinding extends Binding {
// TODO(rado): benchmark and consider rolling in as ElementInjector fields.
export class PreBuiltObjects {
view:viewModule.View;
view:viewModule.AppView;
element:NgElement;
viewContainer:ViewContainer;
bindingPropagationConfig:BindingPropagationConfig;
@ -362,7 +362,7 @@ export class ProtoElementInjector {
_keyId9:int;
parent:ProtoElementInjector;
index:int;
view:viewModule.View;
view:viewModule.AppView;
distanceToParent:number;
attributes:Map;
@ -648,7 +648,7 @@ export class ElementInjector extends TreeNode {
}
_isDynamicallyLoadedComponentKey(key:Key) {
return isPresent(this._dynamicallyCreatedComponentBinding) && key.id ===
return isPresent(this._dynamicallyCreatedComponentBinding) && key.id ===
this._dynamicallyCreatedComponentBinding.key.id;
}
@ -910,7 +910,7 @@ export class ElementInjector extends TreeNode {
_getPreBuiltObjectByKeyId(keyId:int) {
var staticKeys = StaticKeys.instance();
// TODO: View should not be injectable. Remove it.
// TODO: AppView should not be injectable. Remove it.
if (keyId === staticKeys.viewId) return this._preBuiltObjects.view;
if (keyId === staticKeys.ngElementId) return this._preBuiltObjects.element;
if (keyId === staticKeys.viewContainerId) return this._preBuiltObjects.viewContainer;

View File

@ -12,7 +12,7 @@ import {DirectDomViewRef} from 'angular2/src/render/dom/direct_dom_renderer';
* @publicModule angular2/angular2
*/
export class NgElement {
_view:viewModule.View;
_view:viewModule.AppView;
_boundElementIndex:number;
constructor(view, boundElementIndex) {
@ -31,4 +31,4 @@ export class NgElement {
getAttribute(name:string) {
return normalizeBlank(DOM.getAttribute(this.domElement, name));
}
}
}

View File

@ -7,7 +7,7 @@ import {ChangeDetection} from 'angular2/change_detection';
import {Component, Viewport, DynamicComponent} from '../annotations/annotations';
import * as renderApi from 'angular2/src/render/api';
import {ProtoView} from './view';
import {AppProtoView} from './view';
import {ProtoElementInjector, DirectiveBinding} from './element_injector';
@Injectable()
@ -20,7 +20,7 @@ export class ProtoViewFactory {
this._renderer = renderer;
}
createProtoView(componentBinding:DirectiveBinding, renderProtoView: renderApi.ProtoView, directives:List<DirectiveBinding>):ProtoView {
createProtoView(componentBinding:DirectiveBinding, renderProtoView: renderApi.ProtoViewDto, directives:List<DirectiveBinding>):AppProtoView {
var protoChangeDetector;
if (isBlank(componentBinding)) {
protoChangeDetector = this._changeDetection.createProtoChangeDetector('root', null);
@ -30,7 +30,7 @@ export class ProtoViewFactory {
'dummy', componentAnnotation.changeDetection
);
}
var protoView = new ProtoView(this._renderer, renderProtoView.render, protoChangeDetector);
var protoView = new AppProtoView(this._renderer, renderProtoView.render, protoChangeDetector);
for (var i=0; i<renderProtoView.elementBinders.length; i++) {
var renderElementBinder = renderProtoView.elementBinders[i];

View File

@ -1,5 +1,5 @@
import {Injectable} from 'angular2/di';
import {Template} from 'angular2/src/core/annotations/template';
import {View} from 'angular2/src/core/annotations/view';
import {Type, stringify, isBlank, BaseException} from 'angular2/src/facade/lang';
import {Map, MapWrapper, List, ListWrapper} from 'angular2/src/facade/collection';
@ -15,22 +15,22 @@ export class TemplateResolver {
this._cache = MapWrapper.create();
}
resolve(component: Type): Template {
var template = MapWrapper.get(this._cache, component);
resolve(component: Type): View {
var view = MapWrapper.get(this._cache, component);
if (isBlank(template)) {
template = this._resolve(component);
MapWrapper.set(this._cache, component, template);
if (isBlank(view)) {
view = this._resolve(component);
MapWrapper.set(this._cache, component, view);
}
return template;
return view;
}
_resolve(component: Type) {
var annotations = reflector.annotations(component);
for (var i = 0; i < annotations.length; i++) {
var annotation = annotations[i];
if (annotation instanceof Template) {
if (annotation instanceof View) {
return annotation;
}
}

View File

@ -18,21 +18,22 @@ import * as renderApi from 'angular2/src/render/api';
@IMPLEMENTS(ChangeDispatcher)
// TODO(tbosch): this is not supported in dart2js (no '.' is allowed)
// @IMPLEMENTS(renderApi.EventDispatcher)
export class View {
export class AppView {
render:renderApi.ViewRef;
/// This list matches the _nodes list. It is sparse, since only Elements have ElementInjector
rootElementInjectors:List<ElementInjector>;
elementInjectors:List<ElementInjector>;
changeDetector:ChangeDetector;
componentChildViews: List<View>;
componentChildViews: List<AppView>;
viewContainers: List<ViewContainer>;
preBuiltObjects: List<PreBuiltObjects>;
proto: ProtoView;
proto: AppProtoView;
/**
* The context against which data-binding expressions in this view are evaluated against.
* This is always a component instance.
*/
context: any;
/**
@ -42,7 +43,7 @@ export class View {
*/
locals:Locals;
constructor(proto:ProtoView, protoLocals:Map) {
constructor(proto:AppProtoView, protoLocals:Map) {
this.render = null;
this.proto = proto;
this.changeDetector = null;
@ -150,9 +151,9 @@ export class View {
// shadowDomAppInjector
if (isPresent(componentDirective)) {
var services = componentDirective.annotation.services;
if (isPresent(services))
shadowDomAppInjector = appInjector.createChild(services);
var injectables = componentDirective.annotation.injectables;
if (isPresent(injectables))
shadowDomAppInjector = appInjector.createChild(injectables);
else {
shadowDomAppInjector = appInjector;
}
@ -249,13 +250,13 @@ export class View {
this.proto.renderer.setText(this.render, b.elementIndex, currentValue);
}
}
directive(directive:DirectiveRecord) {
var elementInjector:ElementInjector = this.elementInjectors[directive.elementIndex];
return elementInjector.getDirectiveAtIndex(directive.directiveIndex);
}
addComponentChildView(view:View) {
addComponentChildView(view:AppView) {
ListWrapper.push(this.componentChildViews, view);
this.changeDetector.addShadowDomChild(view.changeDetector);
}
@ -269,8 +270,8 @@ export class View {
// queuing up and firing.
if (this.hydrated()) {
var elBinder = this.proto.elementBinders[elementIndex];
if (isBlank(elBinder.events)) return;
var eventMap = elBinder.events[eventName];
if (isBlank(elBinder.hostListeners)) return;
var eventMap = elBinder.hostListeners[eventName];
if (isBlank(eventName)) return;
MapWrapper.forEach(eventMap, (expr, directiveIndex) => {
var context;
@ -289,14 +290,14 @@ export class View {
*
* @publicModule angular2/template
*/
export class ProtoView {
export class AppProtoView {
elementBinders:List<ElementBinder>;
protoChangeDetector:ProtoChangeDetector;
variableBindings: Map;
protoLocals:Map;
textNodesWithBindingCount:int;
bindings:List;
parentProtoView:ProtoView;
parentProtoView:AppProtoView;
_variableBindings:List;
_directiveRecordsMap:Map;
@ -323,8 +324,8 @@ export class ProtoView {
}
//TODO: Tobias or Victor. Moving it into the constructor.
// this work should be done the constructor of ProtoView once we separate
// ProtoView and ProtoViewBuilder
// this work should be done the constructor of AppProtoView once we separate
// AppProtoView and ProtoViewBuilder
getVariableBindings() {
if (isPresent(this._variableBindings)) {
return this._variableBindings;
@ -342,7 +343,7 @@ export class ProtoView {
//TODO: Tobias or Victor. Moving it into the constructor.
// this work should be done the constructor of ProtoView once we separate
// ProtoView and ProtoViewBuilder
// AppProtoView and ProtoViewBuilder
getdirectiveRecords() {
if (isPresent(this._directiveRecords)) {
return this._directiveRecords;
@ -408,10 +409,10 @@ export class ProtoView {
*/
bindEvent(eventName:string, expression:AST, directiveIndex: int = -1) {
var elBinder = this.elementBinders[this.elementBinders.length - 1];
var events = elBinder.events;
var events = elBinder.hostListeners;
if (isBlank(events)) {
events = StringMapWrapper.create();
elBinder.events = events;
elBinder.hostListeners = events;
}
var event = StringMapWrapper.get(events, eventName);
if (isBlank(event)) {
@ -449,4 +450,4 @@ export class ProtoView {
return MapWrapper.get(this._directiveRecordsMap, id);
}
}
}

View File

@ -14,16 +14,16 @@ import * as vfModule from './view_factory';
export class ViewContainer {
render:renderApi.ViewContainerRef;
viewFactory: vfModule.ViewFactory;
parentView: viewModule.View;
defaultProtoView: viewModule.ProtoView;
_views: List<viewModule.View>;
parentView: viewModule.AppView;
defaultProtoView: viewModule.AppProtoView;
_views: List<viewModule.AppView>;
elementInjector: eiModule.ElementInjector;
appInjector: Injector;
hostElementInjector: eiModule.ElementInjector;
constructor(viewFactory:vfModule.ViewFactory,
parentView: viewModule.View,
defaultProtoView: viewModule.ProtoView,
parentView: viewModule.AppView,
defaultProtoView: viewModule.AppProtoView,
elementInjector: eiModule.ElementInjector) {
this.viewFactory = viewFactory;
this.render = null;
@ -67,7 +67,7 @@ export class ViewContainer {
}
}
get(index: number): viewModule.View {
get(index: number): viewModule.AppView {
return this._views[index];
}
@ -86,7 +86,7 @@ export class ViewContainer {
// TODO(rado): profile and decide whether bounds checks should be added
// to the methods below.
create(atIndex=-1): viewModule.View {
create(atIndex=-1): viewModule.AppView {
if (!this.hydrated()) throw new BaseException(
'Cannot create views on a dehydrated ViewContainer');
var newView = this.viewFactory.getView(this.defaultProtoView);
@ -101,13 +101,13 @@ export class ViewContainer {
return newView;
}
insert(view, atIndex=-1): viewModule.View {
insert(view, atIndex=-1): viewModule.AppView {
this._insertWithoutRender(view, atIndex);
this.defaultProtoView.renderer.insertViewIntoContainer(this.render, view.render, atIndex);
return view;
}
_insertWithoutRender(view, atIndex=-1): viewModule.View {
_insertWithoutRender(view, atIndex=-1): viewModule.AppView {
if (atIndex == -1) atIndex = this._views.length;
ListWrapper.insert(this._views, atIndex, view);
this.parentView.changeDetector.addChild(view.changeDetector);
@ -128,7 +128,7 @@ export class ViewContainer {
* The method can be used together with insert to implement a view move, i.e.
* moving the dom nodes while the directives in the view stay intact.
*/
detach(atIndex=-1): viewModule.View {
detach(atIndex=-1): viewModule.AppView {
if (atIndex == -1) atIndex = this._views.length - 1;
var detachedView = this.get(atIndex);
ListWrapper.removeAt(this._views, atIndex);

View File

@ -13,14 +13,14 @@ export const VIEW_POOL_CAPACITY = 'ViewFactory.viewPoolCapacity';
@Injectable()
export class ViewFactory {
_poolCapacity:number;
_pooledViews:List<viewModule.View>;
_pooledViews:List<viewModule.AppView>;
constructor(@Inject(VIEW_POOL_CAPACITY) capacity) {
this._poolCapacity = capacity;
this._pooledViews = ListWrapper.create();
}
getView(protoView:viewModule.ProtoView):viewModule.View {
getView(protoView:viewModule.AppProtoView):viewModule.AppView {
// TODO(tbosch): benchmark this scanning of views and maybe
// replace it with a fancy LRU Map/List combination...
var view;
@ -36,7 +36,7 @@ export class ViewFactory {
return view;
}
returnView(view:viewModule.View) {
returnView(view:viewModule.AppView) {
if (view.hydrated()) {
throw new BaseException('Only dehydrated Views can be put back into the pool!');
}
@ -46,8 +46,8 @@ export class ViewFactory {
}
}
_createView(protoView:viewModule.ProtoView): viewModule.View {
var view = new viewModule.View(protoView, protoView.protoLocals);
_createView(protoView:viewModule.AppProtoView): viewModule.AppView {
var view = new viewModule.AppView(protoView, protoView.protoLocals);
var changeDetector = protoView.protoChangeDetector.instantiate(view, protoView.bindings,
protoView.getVariableBindings(), protoView.getdirectiveRecords());
@ -106,4 +106,4 @@ export class ViewFactory {
return view;
}
}
}