honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(core): ts’ify core

This commit is contained in:
Tobias Bosch 2015-05-20 09:48:15 -07:00
parent aabc898f3b
commit e61d82b9be
56 changed files with 2128 additions and 1922 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
modules/angular2/core.js vendored
View File

@ -5,7 +5,6 @@
* Define angular core API here.
*/
export * from './src/core/annotations/visibility';
export * from './src/core/compiler/interfaces';
export * from './src/core/annotations/view';
export * from './src/core/application';
export * from './src/core/application_tokens';

1
modules/angular2/globals.d.ts vendored
View File

@ -27,4 +27,5 @@ interface Window {
Reflect: any;
zone: Zone;
Hammer: HammerStatic;
getAngularTestability: Function;
}

8
modules/angular2/src/change_detection/change_detection.ts
View File

@ -77,19 +77,19 @@ export var preGeneratedProtoDetectors = {};
*/
export class PreGeneratedChangeDetection extends ChangeDetection {
_dynamicChangeDetection: ChangeDetection;
_protoChangeDetectors: any;
_protoChangeDetectorFactories: StringMap<string, Function>;
constructor(private registry: PipeRegistry, protoChangeDetectors?) {
super();
this._dynamicChangeDetection = new DynamicChangeDetection(registry);
this._protoChangeDetectors =
this._protoChangeDetectorFactories =
isPresent(protoChangeDetectors) ? protoChangeDetectors : preGeneratedProtoDetectors;
}
createProtoChangeDetector(definition: ChangeDetectorDefinition): ProtoChangeDetector {
var id = definition.id;
if (StringMapWrapper.contains(this._protoChangeDetectors, id)) {
return StringMapWrapper.get(this._protoChangeDetectors, id)(this.registry);
if (StringMapWrapper.contains(this._protoChangeDetectorFactories, id)) {
return StringMapWrapper.get(this._protoChangeDetectorFactories, id)(this.registry);
}
return this._dynamicChangeDetection.createProtoChangeDetector(definition);
}

4
modules/angular2/src/core/annotations/annotations.es6 → modules/angular2/src/core/annotations/annotations.ts
View File

@ -6,5 +6,7 @@
export {
Component as ComponentAnnotation,
Directive as DirectiveAnnotation,
onDestroy, onChange, onAllChangesDone
onDestroy,
onChange,
onAllChangesDone
} from '../annotations_impl/annotations';

5
modules/angular2/src/core/annotations/decorators.es6 → modules/angular2/src/core/annotations/decorators.ts
View File

@ -1,7 +1,4 @@
import {
ComponentAnnotation,
DirectiveAnnotation
} from './annotations';
import {ComponentAnnotation, DirectiveAnnotation} from './annotations';
import {ViewAnnotation} from './view';
import {AncestorAnnotation, ParentAnnotation} from './visibility';
import {AttributeAnnotation, QueryAnnotation} from './di';

0
modules/angular2/src/core/annotations/di.es6 → modules/angular2/src/core/annotations/di.ts
View File

3
modules/angular2/src/core/annotations/view.es6
View File

@ -1,3 +0,0 @@
export {
View as ViewAnnotation,
} from '../annotations_impl/view';

3
modules/angular2/src/core/annotations/view.ts Normal file
View File

@ -0,0 +1,3 @@
export {
View as ViewAnnotation,
} from '../annotations_impl/view';

2
modules/angular2/src/core/annotations/visibility.es6 → modules/angular2/src/core/annotations/visibility.ts
View File

@ -1,4 +1,4 @@
export {
Ancestor as AncestorAnnotation,
Parent as ParentAnnotation,
} from '../annotations_impl/visibility';
} from '../annotations_impl/visibility';

310
modules/angular2/src/core/annotations_impl/annotations.js → modules/angular2/src/core/annotations_impl/annotations.ts
View File

@ -1,4 +1,4 @@
import {CONST, normalizeBlank, isPresent} from 'angular2/src/facade/lang';
import {CONST, normalizeBlank, isPresent, CONST_EXPR} from 'angular2/src/facade/lang';
import {ListWrapper, List} from 'angular2/src/facade/collection';
import {Injectable} from 'angular2/src/di/annotations_impl';
import {DEFAULT} from 'angular2/change_detection';
@ -10,29 +10,38 @@ import {DEFAULT} from 'angular2/change_detection';
*
* {@link Directive}s with an embedded view are called {@link Component}s.
*
* A directive consists of a single directive annotation and a controller class. When the directive's `selector` matches
* A directive consists of a single directive annotation and a controller class. When the
* directive's `selector` matches
* elements in the DOM, the following steps occur:
*
* 1. For each directive, the `ElementInjector` attempts to resolve the directive's constructor arguments.
* 2. Angular instantiates directives for each matched element using `ElementInjector` in a depth-first order,
* 1. For each directive, the `ElementInjector` attempts to resolve the directive's constructor
* arguments.
* 2. Angular instantiates directives for each matched element using `ElementInjector` in a
* depth-first order,
* as declared in the HTML.
*
* ## Understanding How Injection Works
*
* There are three stages of injection resolution.
* - *Pre-existing Injectors*:
* - The terminal {@link Injector} cannot resolve dependencies. It either throws an error or, if the dependency was
* - The terminal {@link Injector} cannot resolve dependencies. It either throws an error or, if
* the dependency was
* specified as `@Optional`, returns `null`.
* - The platform injector resolves browser singleton resources, such as: cookies, title, location, and others.
* - *Component Injectors*: Each component instance has its own {@link Injector}, and they follow the same parent-child hierarchy
* - The platform injector resolves browser singleton resources, such as: cookies, title,
* location, and others.
* - *Component Injectors*: Each component instance has its own {@link Injector}, and they follow
* the same parent-child hierarchy
* as the component instances in the DOM.
* - *Element Injectors*: Each component instance has a Shadow DOM. Within the Shadow DOM each element has an `ElementInjector`
* - *Element Injectors*: Each component instance has a Shadow DOM. Within the Shadow DOM each
* element has an `ElementInjector`
* which follow the same parent-child hierarchy as the DOM elements themselves.
*
* When a template is instantiated, it also must instantiate the corresponding directives in a depth-first order. The
* When a template is instantiated, it also must instantiate the corresponding directives in a
* depth-first order. The
* current `ElementInjector` resolves the constructor dependencies for each directive.
*
* Angular then resolves dependencies as follows, according to the order in which they appear in the {@link View}:
* Angular then resolves dependencies as follows, according to the order in which they appear in the
* {@link View}:
*
* 1. Dependencies on the current element
* 2. Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary
@ -40,26 +49,34 @@ import {DEFAULT} from 'angular2/change_detection';
* 4. Dependencies on pre-existing injectors
*
*
* The `ElementInjector` can inject other directives, element-specific special objects, or it can delegate to the parent
* The `ElementInjector` can inject other directives, element-specific special objects, or it can
* delegate to the parent
* injector.
*
* To inject other directives, declare the constructor parameter as:
* - `directive:DirectiveType`: a directive on the current element only
* - `@Ancestor() directive:DirectiveType`: any directive that matches the type between the current element and the
* Shadow DOM root. Current element is not included in the resolution, therefore even if it could resolve it, it will
* - `@Ancestor() directive:DirectiveType`: any directive that matches the type between the current
* element and the
* Shadow DOM root. Current element is not included in the resolution, therefore even if it could
* resolve it, it will
* be ignored.
* - `@Parent() directive:DirectiveType`: any directive that matches the type on a direct parent element only.
* - `@Query(DirectiveType) query:QueryList<DirectiveType>`: A live collection of direct child directives.
* - `@QueryDescendants(DirectiveType) query:QueryList<DirectiveType>`: A live collection of any child directives.
* - `@Parent() directive:DirectiveType`: any directive that matches the type on a direct parent
* element only.
* - `@Query(DirectiveType) query:QueryList<DirectiveType>`: A live collection of direct child
* directives.
* - `@QueryDescendants(DirectiveType) query:QueryList<DirectiveType>`: A live collection of any
* child directives.
*
* To inject element-specific special objects, declare the constructor parameter as:
* - `element: ElementRef` to obtain a reference to logical element in the view.
* - `viewContainer: ViewContainerRef` to control child template instantiation, for {@link Directive} directives only
* - `viewContainer: ViewContainerRef` to control child template instantiation, for {@link
* Directive} directives only
* - `bindingPropagation: BindingPropagation` to control change detection in a more granular way.
*
* ## Example
*
* The following example demonstrates how dependency injection resolves constructor arguments in practice.
* The following example demonstrates how dependency injection resolves constructor arguments in
* practice.
*
*
* Assume this HTML template:
@ -100,7 +117,8 @@ import {DEFAULT} from 'angular2/change_detection';
*
* ### No injection
*
* Here the constructor is declared with no arguments, therefore nothing is injected into `MyDirective`.
* Here the constructor is declared with no arguments, therefore nothing is injected into
* `MyDirective`.
*
* ```
* @Directive({ selector: '[my-directive]' })
@ -115,9 +133,11 @@ import {DEFAULT} from 'angular2/change_detection';
*
* ### Component-level injection
*
* Directives can inject any injectable instance from the closest component injector or any of its parents.
* Directives can inject any injectable instance from the closest component injector or any of its
* parents.
*
* Here, the constructor declares a parameter, `someService`, and injects the `SomeService` type from the parent
* Here, the constructor declares a parameter, `someService`, and injects the `SomeService` type
* from the parent
* component's injector.
* ```
* @Directive({ selector: '[my-directive]' })
@ -142,13 +162,16 @@ import {DEFAULT} from 'angular2/change_detection';
* }
* }
* ```
* This directive would be instantiated with `Dependency` declared at the same element, in this case `dependency="3"`.
* This directive would be instantiated with `Dependency` declared at the same element, in this case
* `dependency="3"`.
*
*
* ### Injecting a directive from a direct parent element
*
* Directives can inject other directives declared on a direct parent element. By definition, a directive with a
* `@Parent` annotation does not attempt to resolve dependencies for the current element, even if this would satisfy
* Directives can inject other directives declared on a direct parent element. By definition, a
* directive with a
* `@Parent` annotation does not attempt to resolve dependencies for the current element, even if
* this would satisfy
* the dependency.
*
* ```
@ -159,13 +182,16 @@ import {DEFAULT} from 'angular2/change_detection';
* }
* }
* ```
* This directive would be instantiated with `Dependency` declared at the parent element, in this case `dependency="2"`.
* This directive would be instantiated with `Dependency` declared at the parent element, in this
* case `dependency="2"`.
*
*
* ### Injecting a directive from any ancestor elements
*
* Directives can inject other directives declared on any ancestor element (in the current Shadow DOM), i.e. on the
* parent element and its parents. By definition, a directive with an `@Ancestor` annotation does not attempt to
* Directives can inject other directives declared on any ancestor element (in the current Shadow
* DOM), i.e. on the
* parent element and its parents. By definition, a directive with an `@Ancestor` annotation does
* not attempt to
* resolve dependencies for the current element, even if this would satisfy the dependency.
*
* ```
@ -178,16 +204,19 @@ import {DEFAULT} from 'angular2/change_detection';
* ```
*
* Unlike the `@Parent` which only checks the parent, `@Ancestor` checks the parent, as well as its
* parents recursively. If `dependency="2"` didn't exist on the direct parent, this injection would have returned
* parents recursively. If `dependency="2"` didn't exist on the direct parent, this injection would
* have returned
* `dependency="1"`.
*
*
* ### Injecting a live collection of direct child directives
*
*
* A directive can also query for other child directives. Since parent directives are instantiated before child
* A directive can also query for other child directives. Since parent directives are instantiated
* before child
* directives, a directive can't simply inject the list of child directives. Instead, the directive
* injects a {@link QueryList}, which updates its contents as children are added, removed, or moved by a directive
* injects a {@link QueryList}, which updates its contents as children are added, removed, or moved
* by a directive
* that uses a {@link ViewContainerRef} such as a `for`, an `if`, or a `switch`.
*
* ```
@ -198,7 +227,8 @@ import {DEFAULT} from 'angular2/change_detection';
* }
* ```
*
* This directive would be instantiated with a {@link QueryList} which contains `Dependency` 4 and 6. Here, `Dependency`
* This directive would be instantiated with a {@link QueryList} which contains `Dependency` 4 and
* 6. Here, `Dependency`
* 5 would not be included, because it is not a direct child.
*
* ### Injecting a live collection of descendant directives
@ -219,9 +249,12 @@ import {DEFAULT} from 'angular2/change_detection';
*
* ### Optional injection
*
* The normal behavior of directives is to return an error when a specified dependency cannot be resolved. If you
* would like to inject `null` on unresolved dependency instead, you can annotate that dependency with `@Optional()`.
* This explicitly permits the author of a template to treat some of the surrounding directives as optional.
* The normal behavior of directives is to return an error when a specified dependency cannot be
* resolved. If you
* would like to inject `null` on unresolved dependency instead, you can annotate that dependency
* with `@Optional()`.
* This explicitly permits the author of a template to treat some of the surrounding directives as
* optional.
*
* ```
* @Directive({ selector: '[my-directive]' })
@ -231,7 +264,8 @@ import {DEFAULT} from 'angular2/change_detection';
* }
* ```
*
* This directive would be instantiated with a `Dependency` directive found on the current element. If none can be
* This directive would be instantiated with a `Dependency` directive found on the current element.
* If none can be
* found, the injector supplies `null` instead of throwing an error.
*
* ## Example
@ -269,24 +303,31 @@ import {DEFAULT} from 'angular2/change_detection';
* }
* }
* ```
* In our HTML template, we can then add this behavior to a `<div>` or any other element with the `tooltip` selector,
* In our HTML template, we can then add this behavior to a `<div>` or any other element with the
* `tooltip` selector,
* like so:
*
* ```
* <div tooltip="some text here"></div>
* ```
*
* Directives can also control the instantiation, destruction, and positioning of inline template elements:
* Directives can also control the instantiation, destruction, and positioning of inline template
* elements:
*
* A directive uses a {@link ViewContainerRef} to instantiate, insert, move, and destroy views at runtime.
* The {@link ViewContainerRef} is created as a result of `<template>` element, and represents a location in the current view
* A directive uses a {@link ViewContainerRef} to instantiate, insert, move, and destroy views at
* runtime.
* The {@link ViewContainerRef} is created as a result of `<template>` element, and represents a
* location in the current view
* where these actions are performed.
*
* Views are always created as children of the current {@link View}, and as siblings of the `<template>` element. Thus a
* Views are always created as children of the current {@link View}, and as siblings of the
* `<template>` element. Thus a
* directive in a child view cannot inject the directive that created it.
*
* Since directives that create views via ViewContainers are common in Angular, and using the full `<template>` element syntax is wordy, Angular
* also supports a shorthand notation: `<li *foo="bar">` and `<li template="foo: bar">` are equivalent.
* Since directives that create views via ViewContainers are common in Angular, and using the full
* `<template>` element syntax is wordy, Angular
* also supports a shorthand notation: `<li *foo="bar">` and `<li template="foo: bar">` are
* equivalent.
*
* Thus,
*
@ -306,7 +347,8 @@ import {DEFAULT} from 'angular2/change_detection';
* </ul>
* ```
*
* Notice that although the shorthand places `*foo="bar"` within the `<li>` element, the binding for the directive
* Notice that although the shorthand places `*foo="bar"` within the `<li>` element, the binding for
* the directive
* controller is correctly instantiated on the `<template>` element rather than the `<li>` element.
*
*
@ -353,7 +395,8 @@ import {DEFAULT} from 'angular2/change_detection';
* </ul>
* ```
*
* Once the directive instantiates the child view, the shorthand notation for the template expands and the result is:
* Once the directive instantiates the child view, the shorthand notation for the template expands
* and the result is:
*
* ```
* <ul>
@ -364,16 +407,19 @@ import {DEFAULT} from 'angular2/change_detection';
* </ul>
* ```
*
* Note also that although the `<li></li>` template still exists inside the `<template></template>`, the instantiated
* Note also that although the `<li></li>` template still exists inside the `<template></template>`,
* the instantiated
* view occurs on the second `<li></li>` which is a sibling to the `<template>` element.
*
* @exportedAs angular2/annotations
*/
@CONST()
export class Directive extends Injectable {
/**
* The CSS selector that triggers the instantiation of a directive.
*
* Angular only allows directives to trigger on CSS selectors that do not cross element boundaries.
* Angular only allows directives to trigger on CSS selectors that do not cross element
* boundaries.
*
* `selector` may be declared as one of the following:
*
@ -401,7 +447,7 @@ export class Directive extends Injectable {
* The directive would only be instantiated on the `<input type="text">` element.
*
*/
selector:string;
selector: string;
/**
* Enumerates the set of properties that accept data binding for a directive.
@ -412,7 +458,8 @@ export class Directive extends Injectable {
* - `directiveProperty` specifies the component property where the value is written.
* - `bindingProperty` specifies the DOM property where the value is read from.
*
* You can include a {@link Pipe} when specifying a `bindingProperty` to allow for data transformation and structural
* You can include a {@link Pipe} when specifying a `bindingProperty` to allow for data
* transformation and structural
* change detection of the value. These pipes will be evaluated in the context of this component.
*
*
@ -431,7 +478,8 @@ export class Directive extends Injectable {
*
* ## Basic Property Binding
*
* We can easily build a simple `Tooltip` directive that exposes a `tooltip` property, which can be used in templates
* We can easily build a simple `Tooltip` directive that exposes a `tooltip` property, which can
* be used in templates
* with standard Angular syntax. For example:
*
* ```
@ -448,7 +496,8 @@ export class Directive extends Injectable {
* }
* ```
*
* We can then bind to the `tooltip' property as either an expression (`someExpression`) or as a string literal, as
* We can then bind to the `tooltip' property as either an expression (`someExpression`) or as a
* string literal, as
* shown in the HTML template below:
*
* ```html
@ -465,7 +514,8 @@ export class Directive extends Injectable {
*
* You can also use pipes when writing binding definitions for a directive.
*
* For example, we could write a binding that updates the directive on structural changes, rather than on reference
* For example, we could write a binding that updates the directive on structural changes, rather
* than on reference
* changes, as normally occurs in change detection.
*
* See {@link Pipe} and {@link keyValDiff} documentation for more details.
@ -490,10 +540,11 @@ export class Directive extends Injectable {
* <div [class-set]="someExpression | somePipe">
* ```
*
* In this case, the two pipes compose as if they were inlined: `someExpression | somePipe | keyValDiff`.
* In this case, the two pipes compose as if they were inlined: `someExpression | somePipe |
* keyValDiff`.
*
*/
properties:any; // StringMap
properties: StringMap<string, string>;
/**
* Enumerates the set of emitted events.
@ -517,7 +568,7 @@ export class Directive extends Injectable {
* }
* ```
*/
events:List<string>;
events: List<string>;
/**
* Specifies which DOM hostListeners a directive listens to.
@ -526,14 +577,16 @@ export class Directive extends Injectable {
*
* - `event1`: the DOM event that the directive listens to.
* - `statement`: the statement to execute when the event occurs.
* If the evalutation of the statement returns `false`, then `preventDefault`is applied on the DOM event.
* If the evalutation of the statement returns `false`, then `preventDefault`is applied on the DOM
* event.
*
* To listen to global events, a target must be added to the event name.
* The target can be `window`, `document` or `body`.
*
* When writing a directive event binding, you can also refer to the following local variables:
* - `$event`: Current event object which triggered the event.
* - `$target`: The source of the event. This will be either a DOM element or an Angular directive.
* - `$target`: The source of the event. This will be either a DOM element or an Angular
* directive.
* (will be implemented in later release)
*
*
@ -551,7 +604,8 @@ export class Directive extends Injectable {
*
* ## Basic Event Binding:
*
* Suppose you want to write a directive that triggers on `change` events in the DOM and on `resize` events in window.
* Suppose you want to write a directive that triggers on `change` events in the DOM and on
* `resize` events in window.
* You would define the event binding as follows:
*
* ```
@ -570,10 +624,11 @@ export class Directive extends Injectable {
* }
* ```
*
* Here the `onChange` method of `InputDirective` is invoked whenever the DOM element fires the 'change' event.
* Here the `onChange` method of `InputDirective` is invoked whenever the DOM element fires the
* 'change' event.
*
*/
hostListeners:any; // StringMap
hostListeners: StringMap<string, string>;
/**
@ -592,14 +647,16 @@ export class Directive extends Injectable {
* value:string;
* }
*
* In this example every time the value property of the decorator changes, Angular will update the value property of
* In this example every time the value property of the decorator changes, Angular will update the
* value property of
* the host element.
* ```
*/
hostProperties:any; // String map
hostProperties: StringMap<string, string>;
/**
* Specifies static attributes that should be propagated to a host element. Attributes specified in `hostAttributes`
* Specifies static attributes that should be propagated to a host element. Attributes specified
* in `hostAttributes`
* are propagated only if a given attribute is not present on a host element.
*
* ## Syntax
@ -614,11 +671,12 @@ export class Directive extends Injectable {
* class MyButton {
* }
*
* In this example using `my-button` directive (ex.: `<div my-button></div>`) on a host element (here: `<div>` )
* In this example using `my-button` directive (ex.: `<div my-button></div>`) on a host element
* (here: `<div>` )
* will ensure that this element will get the "button" role.
* ```
*/
hostAttributes:any; // String map
hostAttributes: StringMap<string, string>;
/**
* Specifies which DOM methods a directive can invoke.
@ -642,26 +700,28 @@ export class Directive extends Injectable {
* }
* }
*
* In this example calling focus on InputDirective will result in calling focus on the DOM element.
* In this example calling focus on InputDirective will result in calling focus on the DOM
* element.
* ```
*/
hostActions:any; // String map
hostActions: StringMap<string, string>;
/**
* Specifies a set of lifecycle hostListeners in which the directive participates.
*
* See {@link onChange}, {@link onDestroy}, {@link onAllChangesDone} for details.
*/
lifecycle:List; //List<LifecycleEvent>
lifecycle: List<LifecycleEvent>;
/**
* If set to true the compiler does not compile the children of this directive.
*/
//TODO(vsavkin): This would better fall under the Macro directive concept.
// TODO(vsavkin): This would better fall under the Macro directive concept.
compileChildren: boolean;
/**
* Defines the set of injectable objects that are visible to a Directive and its light dom children.
* Defines the set of injectable objects that are visible to a Directive and its light dom
* children.
*
* ## Simple Example
*
@ -689,9 +749,8 @@ export class Directive extends Injectable {
* }
* ```
*/
hostInjector:List;
hostInjector: List<any>;
@CONST()
constructor({
selector,
properties,
@ -704,16 +763,16 @@ export class Directive extends Injectable {
hostInjector,
compileChildren = true,
}:{
selector:string,
properties:any,
events:List,
hostListeners: any,
hostProperties: any,
hostAttributes: any,
hostActions: any,
lifecycle:List,
hostInjector:List,
compileChildren:boolean
selector?:string,
properties?:any,
events?:List<string>,
hostListeners?: StringMap<string, string>,
hostProperties?: StringMap<string, string>,
hostAttributes?: StringMap<string, string>,
hostActions?: StringMap<string, string>,
lifecycle?:List<LifecycleEvent>,
hostInjector?:List<any>,
compileChildren?:boolean
}={})
{
super();
@ -734,7 +793,7 @@ export class Directive extends Injectable {
*
* See {@link onChange}, {@link onDestroy}, {@link onAllChangesDone} for details.
*/
hasLifecycleHook(hook:string):boolean {
hasLifecycleHook(hook: LifecycleEvent): boolean {
return isPresent(this.lifecycle) ? ListWrapper.contains(this.lifecycle, hook) : false;
}
}
@ -742,13 +801,16 @@ export class Directive extends Injectable {
/**
* Declare reusable UI building blocks for an application.
*
* 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.
* 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 {@link Injector} which is configured with the `appInjector` for the {@link Component}.
* - creates a child {@link Injector} which is configured with the `appInjector` for the {@link
* Component}.
*
* All template expressions and statements are then evaluated against the component instance.
*
@ -775,18 +837,22 @@ export class Directive extends Injectable {
*
* Dynamically loading a component at runtime:
*
* Regular Angular components are statically resolved. Dynamic components allows to resolve a component at runtime
* instead by providing a placeholder into which a regular Angular component can be dynamically loaded. Once loaded,
* Regular Angular components are statically resolved. Dynamic components allows to resolve a
* component at runtime
* instead by providing a placeholder into which a regular Angular component can be dynamically
* loaded. Once loaded,
* the dynamically-loaded component becomes permanent and cannot be changed.
* Dynamic components are declared just like components, but without a `@View` annotation.
*
*
* ## Example
*
* Here we have `DynamicComp` which acts as the placeholder for `HelloCmp`. At runtime, the dynamic component
* Here we have `DynamicComp` which acts as the placeholder for `HelloCmp`. At runtime, the dynamic
* component
* `DynamicComp` requests loading of the `HelloCmp` component.
*
* There is nothing special about `HelloCmp`, which is a regular Angular component. It can also be used in other static
* There is nothing special about `HelloCmp`, which is a regular Angular component. It can also be
* used in other static
* locations.
*
* ```
@ -819,31 +885,39 @@ export class Directive extends Injectable {
*
* @exportedAs angular2/annotations
*/
@CONST()
export class Component extends Directive {
/**
* Defines the used change detection strategy.
*
* When a component is instantiated, Angular creates a change detector, which is responsible for propagating
* When a component is instantiated, Angular creates a change detector, which is responsible for
* propagating
* the component's bindings.
*
* The `changeDetection` property defines, whether the change detection will be checked every time or only when the component
* The `changeDetection` property defines, whether the change detection will be checked every time
* or only when the component
* tells it to do so.
*/
changeDetection:string;
changeDetection: string;
/**
* Defines the set of injectable objects that are visible to a Component and its children.
*
* The `appInjector` defined in the Component annotation allow you to configure a set of bindings for the component's
* The `appInjector` 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 `appInjector` 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
* When a component is instantiated, Angular creates a new child Injector, which is configured
* with the bindings in
* the Component `appInjector` 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 `appInjector` injectable is identical to {@link Injector} injectable configuration.
* The syntax for configuring the `appInjector` injectable is identical to {@link Injector}
* injectable configuration.
* See {@link Injector} for additional detail.
*
*
@ -877,7 +951,7 @@ export class Component extends Directive {
* }
* ```
*/
appInjector:List;
appInjector: List<any>;
/**
* Defines the set of injectable objects that are visible to its view dom children.
@ -919,9 +993,8 @@ export class Component extends Directive {
*
* ```
*/
viewInjector:List;
viewInjector: List<any>;
@CONST()
constructor({
selector,
properties,
@ -937,19 +1010,19 @@ export class Component extends Directive {
changeDetection = DEFAULT,
compileChildren = true
}:{
selector:string,
properties:Object,
events:List,
hostListeners:any,
hostProperties:any,
hostAttributes:any,
hostActions:any,
appInjector:List,
lifecycle:List,
hostInjector:List,
viewInjector:List,
changeDetection:string,
compileChildren:boolean
selector?:string,
properties?:Object,
events?:List<string>,
hostListeners?:Map<string,string>,
hostProperties?:any,
hostAttributes?:any,
hostActions?:any,
appInjector?:List<any>,
lifecycle?:List<LifecycleEvent>,
hostInjector?:List<any>,
viewInjector?:List<any>,
changeDetection?:string,
compileChildren?:boolean
}={})
{
super({
@ -972,7 +1045,10 @@ export class Component extends Directive {
}
//TODO(misko): turn into LifecycleEvent class once we switch to TypeScript;
@CONST()
export class LifecycleEvent {
constructor(public name: string) {}
}
/**
* Notify a directive whenever a {@link View} that contains it is destroyed.
@ -992,7 +1068,7 @@ export class Component extends Directive {
* ```
* @exportedAs angular2/annotations
*/
export const onDestroy = "onDestroy";
export const onDestroy = CONST_EXPR(new LifecycleEvent("onDestroy"));
/**
@ -1030,7 +1106,7 @@ export const onDestroy = "onDestroy";
* ```
* @exportedAs angular2/annotations
*/
export const onChange = "onChange";
export const onChange = CONST_EXPR(new LifecycleEvent("onChange"));
/**
* Notify a directive when the bindings of all its children have been changed.
@ -1051,4 +1127,4 @@ export const onChange = "onChange";
* ```
* @exportedAs angular2/annotations
*/
export const onAllChangesDone = "onAllChangesDone";
export const onAllChangesDone = CONST_EXPR(new LifecycleEvent("onAllChangesDone"));

25
modules/angular2/src/core/annotations_impl/di.js → modules/angular2/src/core/annotations_impl/di.ts
View File

@ -29,19 +29,16 @@ import {DependencyAnnotation} from 'angular2/src/di/annotations_impl';
*
* @exportedAs angular2/annotations
*/
@CONST()
export class Attribute extends DependencyAnnotation {
attributeName: string;
@CONST()
constructor(attributeName) {
super();
this.attributeName = attributeName;
}
constructor(public attributeName: string) { super(); }
get token() {
//Normally one would default a token to a type of an injected value but here
//the type of a variable is "string" and we can't use primitive type as a return value
//so we use instance of Attribute instead. This doesn't matter much in practice as arguments
//with @Attribute annotation are injected by ElementInjector that doesn't take tokens into account.
// Normally one would default a token to a type of an injected value but here
// the type of a variable is "string" and we can't use primitive type as a return value
// so we use instance of Attribute instead. This doesn't matter much in practice as arguments
// with @Attribute annotation are injected by ElementInjector that doesn't take tokens into
// account.
return this;
}
}
@ -53,11 +50,7 @@ export class Attribute extends DependencyAnnotation {
*
* @exportedAs angular2/annotations
*/
@CONST()
export class Query extends DependencyAnnotation {
directive;
@CONST()
constructor(directive) {
super();
this.directive = directive;
}
constructor(public directive: any) { super(); }
}

29
modules/angular2/src/core/annotations_impl/view.js → modules/angular2/src/core/annotations_impl/view.ts
View File

@ -3,10 +3,13 @@ import {ABSTRACT, CONST, Type} from 'angular2/src/facade/lang';
/**
* Declares the available HTML templates for an application.
*
* 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.
* 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
* When a component is instantiated, the template is loaded into the component's shadow root, and
* the
* expressions and statements in the template are evaluated against the component.
*
* For details on the `@Component` annotation, see {@link Component}.
@ -32,20 +35,21 @@ import {ABSTRACT, CONST, Type} from 'angular2/src/facade/lang';
*
* @exportedAs angular2/annotations
*/
@CONST()
export class View {
/**
* Specifies a template URL for an angular component.
*
* NOTE: either `templateUrl` or `template` should be used, but not both.
*/
templateUrl:string;
templateUrl: string;
/**
* Specifies an inline template for an angular component.
*
* NOTE: either `templateUrl` or `template` should be used, but not both.
*/
template:string;
template: string;
/**
* Specifies a list of directives that can be used within a template.
@ -69,26 +73,25 @@ export class View {
* }
* ```
*/
directives:List<Type>;
directives: List<Type>;
/**
* Specify a custom renderer for this View.
* If this is set, neither `template`, `templateURL` nor `directives` are used.
*/
renderer:any; // string;
renderer: string;
@CONST()
constructor({
templateUrl,
template,
directives,
renderer
}: {
templateUrl: string,
template: string,
directives: List<Type>,
renderer: string
})
templateUrl?: string,
template?: string,
directives?: List<Type>,
renderer?: string
} = {})
{
this.templateUrl = templateUrl;
this.template = template;

51
modules/angular2/src/core/annotations_impl/visibility.js → modules/angular2/src/core/annotations_impl/visibility.ts
View File

@ -1,20 +1,11 @@
import {CONST, CONST_EXPR} from 'angular2/src/facade/lang';
import {DependencyAnnotation} from 'angular2/src/di/annotations_impl';
@CONST()
export class Visibility extends DependencyAnnotation {
depth: number;
crossComponentBoundaries: boolean;
constructor(public depth: number, public crossComponentBoundaries: boolean) { super(); }
@CONST()
constructor(depth:number, crossComponentBoundaries:boolean) {
super();
this.depth = depth;
this.crossComponentBoundaries = crossComponentBoundaries;
}
shouldIncludeSelf():boolean {
return this.depth === 0;
}
shouldIncludeSelf(): boolean { return this.depth === 0; }
}
/**
@ -54,11 +45,9 @@ export class Visibility extends DependencyAnnotation {
*
* @exportedAs angular2/annotations
*/
@CONST()
export class Self extends Visibility {
@CONST()
constructor() {
super(0, false);
}
constructor() { super(0, false); }
}
// make constants after switching to ts2dart
@ -100,20 +89,21 @@ export var self = new Self();
* <div dependency="2" my-directive></div>
* </div>
* ```
* The `@Parent()` annotation in our constructor forces the injector to retrieve the dependency from the
* parent element (even thought the current element could resolve it): Angular injects `dependency=1`.
* The `@Parent()` annotation in our constructor forces the injector to retrieve the dependency from
* the
* parent element (even thought the current element could resolve it): Angular injects
* `dependency=1`.
*
* @exportedAs angular2/annotations
*/
@CONST()
export class Parent extends Visibility {
@CONST()
constructor() {
super(1, false);
}
constructor() { super(1, false); }
}
/**
* Specifies that an injector should retrieve a dependency from any ancestor element within the same shadow boundary.
* Specifies that an injector should retrieve a dependency from any ancestor element within the same
* shadow boundary.
*
* An ancestor is any element between the parent element and shadow root.
*
@ -156,7 +146,8 @@ export class Parent extends Visibility {
* </div>
* ```
*
* The `@Ancestor()` annotation in our constructor forces the injector to retrieve the dependency from the
* The `@Ancestor()` annotation in our constructor forces the injector to retrieve the dependency
* from the
* nearest ancestor element:
* - The current element `dependency="3"` is skipped because it is not an ancestor.
* - Next parent has no directives `<div>`
@ -166,11 +157,9 @@ export class Parent extends Visibility {
*
* @exportedAs angular2/annotations
*/
@CONST()
export class Ancestor extends Visibility {
@CONST()
constructor() {
super(999999, false);
}
constructor() { super(999999, false); }
}
/**
@ -207,9 +196,7 @@ export class Ancestor extends Visibility {
*
* @exportedAs angular2/annotations
*/
@CONST()
export class Unbounded extends Visibility {
@CONST()
constructor() {
super(999999, true);
}
constructor() { super(999999, true); }
}

307
modules/angular2/src/core/application.js vendored
View File

@ -1,307 +0,0 @@
import {Injector, bind, OpaqueToken} from 'angular2/di';
import {NumberWrapper, Type, isBlank, isPresent, BaseException,
assertionsEnabled, print, stringify} from 'angular2/src/facade/lang';
import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
import {DOM} from 'angular2/src/dom/dom_adapter';
import {Compiler, CompilerCache} from './compiler/compiler';
import {Reflector, reflector} from 'angular2/src/reflection/reflection';
import {Parser, Lexer, ChangeDetection, DynamicChangeDetection, PipeRegistry, defaultPipeRegistry} from 'angular2/change_detection';
import {ExceptionHandler} from './exception_handler';
import {TemplateLoader} from 'angular2/src/render/dom/compiler/template_loader';
import {TemplateResolver} from './compiler/template_resolver';
import {DirectiveResolver} from './compiler/directive_resolver';
import {List, ListWrapper} from 'angular2/src/facade/collection';
import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
import {NgZone} from 'angular2/src/core/zone/ng_zone';
import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
import {ShadowDomStrategy} from 'angular2/src/render/dom/shadow_dom/shadow_dom_strategy';
import {EmulatedUnscopedShadowDomStrategy} from 'angular2/src/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy';
import {XHR} from 'angular2/src/services/xhr';
import {XHRImpl} from 'angular2/src/services/xhr_impl';
import {EventManager, DomEventsPlugin} from 'angular2/src/render/dom/events/event_manager';
import {KeyEventsPlugin} from 'angular2/src/render/dom/events/key_events';
import {HammerGesturesPlugin} from 'angular2/src/render/dom/events/hammer_gestures';
import {Binding} from 'angular2/src/di/binding';
import {ComponentUrlMapper} from 'angular2/src/core/compiler/component_url_mapper';
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {StyleUrlResolver} from 'angular2/src/render/dom/shadow_dom/style_url_resolver';
import {StyleInliner} from 'angular2/src/render/dom/shadow_dom/style_inliner';
import {ComponentRef, DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
import {TestabilityRegistry, Testability} from 'angular2/src/core/testability/testability';
import {AppViewPool, APP_VIEW_POOL_CAPACITY} from 'angular2/src/core/compiler/view_pool';
import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
import {AppViewManagerUtils} from 'angular2/src/core/compiler/view_manager_utils';
import {ProtoViewFactory} from 'angular2/src/core/compiler/proto_view_factory';
import {Renderer, RenderCompiler} from 'angular2/src/render/api';
import {DomRenderer, DOCUMENT_TOKEN} from 'angular2/src/render/dom/dom_renderer';
import {resolveInternalDomView} from 'angular2/src/render/dom/view/view';
import {DefaultDomCompiler} from 'angular2/src/render/dom/compiler/compiler';
import {internalView} from 'angular2/src/core/compiler/view_ref';
import {
appComponentRefToken,
appComponentTypeToken
} from './application_tokens';
var _rootInjector: Injector;
// Contains everything that is safe to share between applications.
var _rootBindings = [
bind(Reflector).toValue(reflector),
TestabilityRegistry
];
function _injectorBindings(appComponentType): List<Binding> {
return [
bind(DOCUMENT_TOKEN).toValue(DOM.defaultDoc()),
bind(appComponentTypeToken).toValue(appComponentType),
bind(appComponentRefToken).toAsyncFactory((dynamicComponentLoader, injector,
testability, registry) => {
// TODO(rado): investigate whether to support bindings on root component.
return dynamicComponentLoader.loadAsRoot(appComponentType, null, injector).then( (componentRef) => {
var domView = resolveInternalDomView(componentRef.hostView.render);
// We need to do this here to ensure that we create Testability and
// it's ready on the window for users.
registry.registerApplication(domView.boundElements[0], testability);
return componentRef;
});
}, [DynamicComponentLoader, Injector,
Testability, TestabilityRegistry]),
bind(appComponentType).toFactory((ref) => ref.instance,
[appComponentRefToken]),
bind(LifeCycle).toFactory((exceptionHandler) => new LifeCycle(exceptionHandler, null, assertionsEnabled()),[ExceptionHandler]),
bind(EventManager).toFactory((ngZone) => {
var plugins = [new HammerGesturesPlugin(), new KeyEventsPlugin(), new DomEventsPlugin()];
return new EventManager(plugins, ngZone);
}, [NgZone]),
bind(ShadowDomStrategy).toFactory(
(styleUrlResolver, doc) => new EmulatedUnscopedShadowDomStrategy(styleUrlResolver, doc.head),
[StyleUrlResolver, DOCUMENT_TOKEN]),
// TODO(tbosch): We need an explicit factory here, as
// we are getting errors in dart2js with mirrors...
bind(DomRenderer).toFactory(
(eventManager, shadowDomStrategy, doc) => new DomRenderer(eventManager, shadowDomStrategy, doc),
[EventManager, ShadowDomStrategy, DOCUMENT_TOKEN]
),
DefaultDomCompiler,
bind(Renderer).toAlias(DomRenderer),
bind(RenderCompiler).toAlias(DefaultDomCompiler),
ProtoViewFactory,
// TODO(tbosch): We need an explicit factory here, as
// we are getting errors in dart2js with mirrors...
bind(AppViewPool).toFactory(
(capacity) => new AppViewPool(capacity),
[APP_VIEW_POOL_CAPACITY]
),
bind(APP_VIEW_POOL_CAPACITY).toValue(10000),
AppViewManager,
AppViewManagerUtils,
Compiler,
CompilerCache,
TemplateResolver,
bind(PipeRegistry).toValue(defaultPipeRegistry),
bind(ChangeDetection).toClass(DynamicChangeDetection),
TemplateLoader,
DirectiveResolver,
Parser,
Lexer,
ExceptionHandler,
bind(XHR).toValue(new XHRImpl()),
ComponentUrlMapper,
UrlResolver,
StyleUrlResolver,
StyleInliner,
DynamicComponentLoader,
Testability
];
}
function _createNgZone(givenReporter:Function): NgZone {
var defaultErrorReporter = (exception, stackTrace) => {
var longStackTrace = ListWrapper.join(stackTrace, "\n\n-----async gap-----\n");
DOM.logError(`${exception}\n\n${longStackTrace}`);
throw exception;
};
var reporter = isPresent(givenReporter) ? givenReporter : defaultErrorReporter;
var zone = new NgZone({enableLongStackTrace: assertionsEnabled()});
zone.initCallbacks({onErrorHandler: reporter});
return zone;
}
/**
* Bootstrapping for Angular applications.
*
* You instantiate an Angular application by explicitly specifying a component to use as the root component for your
* application via the `bootstrap()` method.
*
* ## Simple Example
*
* Assuming this `index.html`:
*
* ```html
* <html>
* <!-- load Angular script tags here. -->
* <body>
* <my-app>loading...</my-app>
* </body>
* </html>
* ```
*
* An application is bootstrapped inside an existing browser DOM, typically `index.html`. Unlike Angular 1, Angular 2
* does not compile/process bindings in `index.html`. This is mainly for security reasons, as well as architectural
* changes in Angular 2. This means that `index.html` can safely be processed using server-side technologies such as
* bindings. Bindings can thus use double-curly `{{ syntax }}` without collision from Angular 2 component double-curly
* `{{ syntax }}`.
*
* We can use this script code:
*
* ```
* @Component({
* selector: 'my-app'
* })
* @View({
* template: 'Hello {{ name }}!'
* })
* class MyApp {
* name:string;
*
* constructor() {
* this.name = 'World';
* }
* }
*
* main() {
* return bootstrap(MyApp);
* }
* ```
*
* When the app developer invokes `bootstrap()` with the root component `MyApp` as its argument, Angular performs the
* following tasks:
*
* 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 platform injector) and configures the injector with the component's
* `appInjector`. 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.
* 6. Finally, Angular performs change detection to apply the initial data bindings for the application.
*
*
* ## Instantiating Multiple Applications on a Single Page
*
* There are two ways to do this.
*
*
* ### Isolated Applications
*
* Angular creates a new application each time that the `bootstrap()` method is invoked. When multiple applications
* are created for a page, Angular treats each application as independent within an isolated change detection and
* `Zone` domain. If you need to share data between applications, use the strategy described in the next
* section, "Applications That Share Change Detection."
*
*
* ### Applications That Share Change Detection
*
* If you need to bootstrap multiple applications that share common data, the applications must share a common
* change detection and zone. To do that, create a meta-component that lists the application components in its template.
* By only invoking the `bootstrap()` method once, with the meta-component as its argument, you ensure that only a
* single change detection zone is created and therefore data can be shared across the applications.
*
*
* ## Platform Injector
*
* When working within a browser window, there are many singleton resources: cookies, title, location, and others.
* Angular services that represent these resources must likewise be shared across all Angular applications that
* occupy the same browser window. For this reason, Angular creates exactly one global platform injector which stores
* all shared services, and each angular application injector has the platform injector as its parent.
*
* Each application has its own private injector as well. When there are multiple applications on a page, Angular treats
* each application injector's services as private to that application.
*
*
* # API
* - `appComponentType`: The root component which should act as the application. This is a reference to a `Type`
* which is annotated with `@Component(...)`.
* - `componentInjectableBindings`: An additional set of bindings that can be added to `appInjector` for the
* {@link Component} to override default injection behavior.
* - `errorReporter`: `function(exception:any, stackTrace:string)` a default error reporter for unhandled exceptions.
*
* Returns a `Promise` with the application`s private {@link Injector}.
*
* @exportedAs angular2/core
*/
export function bootstrap(appComponentType: Type,
componentInjectableBindings: List<Binding> = null,
errorReporter: Function = null): Promise<ApplicationRef> {
BrowserDomAdapter.makeCurrent();
var bootstrapProcess = PromiseWrapper.completer();
var zone = _createNgZone(errorReporter);
zone.run(() => {
// TODO(rado): prepopulate template cache, so applications with only
// index.html and main.js are possible.
var appInjector = _createAppInjector(appComponentType, componentInjectableBindings, zone);
PromiseWrapper.then(appInjector.asyncGet(appComponentRefToken),
(componentRef) => {
var appChangeDetector = internalView(componentRef.hostView).changeDetector;
// retrieve life cycle: may have already been created if injected in root component
var lc = appInjector.get(LifeCycle);
lc.registerWith(zone, appChangeDetector);
lc.tick(); //the first tick that will bootstrap the app
bootstrapProcess.resolve(new ApplicationRef(componentRef, appComponentType, appInjector));
},
(err, stackTrace) => {
bootstrapProcess.reject(err, stackTrace)
});
});
return bootstrapProcess.promise;
}
export class ApplicationRef {
_hostComponent:ComponentRef;
_injector:Injector;
_hostComponentType:Type;
constructor(hostComponent:ComponentRef, hostComponentType:Type, injector:Injector) {
this._hostComponent = hostComponent;
this._injector = injector;
this._hostComponentType = hostComponentType;
}
get hostComponentType() {
return this._hostComponentType;
}
get hostComponent() {
return this._hostComponent.instance;
}
dispose() {
// TODO: We also need to clean up the Zone, ... here!
return this._hostComponent.dispose();
}
get injector() {
return this._injector;
}
}
function _createAppInjector(appComponentType: Type, bindings: List<Binding>, zone: NgZone): Injector {
if (isBlank(_rootInjector)) _rootInjector = Injector.resolveAndCreate(_rootBindings);
var mergedBindings = isPresent(bindings) ?
ListWrapper.concat(_injectorBindings(appComponentType), bindings) :
_injectorBindings(appComponentType);
ListWrapper.push(mergedBindings, bind(NgZone).toValue(zone));
return _rootInjector.resolveAndCreateChild(mergedBindings);
}

348
modules/angular2/src/core/application.ts Normal file
View File

@ -0,0 +1,348 @@
import {Injector, bind, OpaqueToken, Binding} from 'angular2/di';
import {
NumberWrapper,
Type,
isBlank,
isPresent,
BaseException,
assertionsEnabled,
print,
stringify
} from 'angular2/src/facade/lang';
import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
import {DOM} from 'angular2/src/dom/dom_adapter';
import {Compiler, CompilerCache} from './compiler/compiler';
import {Reflector, reflector} from 'angular2/src/reflection/reflection';
import {
Parser,
Lexer,
ChangeDetection,
DynamicChangeDetection,
PipeRegistry,
defaultPipeRegistry
} from 'angular2/change_detection';
import {ExceptionHandler} from './exception_handler';
import {TemplateLoader} from 'angular2/src/render/dom/compiler/template_loader';
import {TemplateResolver} from './compiler/template_resolver';
import {DirectiveResolver} from './compiler/directive_resolver';
import {List, ListWrapper} from 'angular2/src/facade/collection';
import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
import {NgZone} from 'angular2/src/core/zone/ng_zone';
import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
import {ShadowDomStrategy} from 'angular2/src/render/dom/shadow_dom/shadow_dom_strategy';
import {
EmulatedUnscopedShadowDomStrategy
} from 'angular2/src/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy';
import {XHR} from 'angular2/src/services/xhr';
import {XHRImpl} from 'angular2/src/services/xhr_impl';
import {EventManager, DomEventsPlugin} from 'angular2/src/render/dom/events/event_manager';
import {KeyEventsPlugin} from 'angular2/src/render/dom/events/key_events';
import {HammerGesturesPlugin} from 'angular2/src/render/dom/events/hammer_gestures';
import {ComponentUrlMapper} from 'angular2/src/core/compiler/component_url_mapper';
import {UrlResolver} from 'angular2/src/services/url_resolver';
import {StyleUrlResolver} from 'angular2/src/render/dom/shadow_dom/style_url_resolver';
import {StyleInliner} from 'angular2/src/render/dom/shadow_dom/style_inliner';
import {
ComponentRef,
DynamicComponentLoader
} from 'angular2/src/core/compiler/dynamic_component_loader';
import {TestabilityRegistry, Testability} from 'angular2/src/core/testability/testability';
import {AppViewPool, APP_VIEW_POOL_CAPACITY} from 'angular2/src/core/compiler/view_pool';
import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
import {AppViewManagerUtils} from 'angular2/src/core/compiler/view_manager_utils';
import {ProtoViewFactory} from 'angular2/src/core/compiler/proto_view_factory';
import {Renderer, RenderCompiler} from 'angular2/src/render/api';
import {DomRenderer, DOCUMENT_TOKEN} from 'angular2/src/render/dom/dom_renderer';
import {resolveInternalDomView} from 'angular2/src/render/dom/view/view';
import {DefaultDomCompiler} from 'angular2/src/render/dom/compiler/compiler';
import {internalView} from 'angular2/src/core/compiler/view_ref';
import {appComponentRefToken, appComponentTypeToken} from './application_tokens';
var _rootInjector: Injector;
// Contains everything that is safe to share between applications.
var _rootBindings = [bind(Reflector).toValue(reflector), TestabilityRegistry];
function _injectorBindings(appComponentType): List<Type | Binding | List<any>> {
return [
bind(DOCUMENT_TOKEN)
.toValue(DOM.defaultDoc()),
bind(appComponentTypeToken).toValue(appComponentType),
bind(appComponentRefToken)
.toAsyncFactory((dynamicComponentLoader, injector, testability, registry) =>
{
// TODO(rado): investigate whether to support bindings on root component.
return dynamicComponentLoader.loadAsRoot(appComponentType, null, injector)
.then((componentRef) => {
var domView = resolveInternalDomView(componentRef.hostView.render);
// We need to do this here to ensure that we create Testability and
// it's ready on the window for users.
registry.registerApplication(domView.boundElements[0], testability);
return componentRef;
});
},
[DynamicComponentLoader, Injector, Testability, TestabilityRegistry]),
bind(appComponentType).toFactory((ref) => ref.instance, [appComponentRefToken]),
bind(LifeCycle)
.toFactory((exceptionHandler) => new LifeCycle(exceptionHandler, null, assertionsEnabled()),
[ExceptionHandler]),
bind(EventManager)
.toFactory(
(ngZone) =>
{
var plugins =
[new HammerGesturesPlugin(), new KeyEventsPlugin(), new DomEventsPlugin()];
return new EventManager(plugins, ngZone);
},
[NgZone]),
bind(ShadowDomStrategy)
.toFactory((styleUrlResolver, doc) =>
new EmulatedUnscopedShadowDomStrategy(styleUrlResolver, doc.head),
[StyleUrlResolver, DOCUMENT_TOKEN]),
// TODO(tbosch): We need an explicit factory here, as
// we are getting errors in dart2js with mirrors...
bind(DomRenderer)
.toFactory((eventManager, shadowDomStrategy, doc) =>
new DomRenderer(eventManager, shadowDomStrategy, doc),
[EventManager, ShadowDomStrategy, DOCUMENT_TOKEN]),
DefaultDomCompiler,
bind(Renderer).toAlias(DomRenderer),
bind(RenderCompiler).toAlias(DefaultDomCompiler),
ProtoViewFactory,
// TODO(tbosch): We need an explicit factory here, as
// we are getting errors in dart2js with mirrors...
bind(AppViewPool).toFactory((capacity) => new AppViewPool(capacity), [APP_VIEW_POOL_CAPACITY]),
bind(APP_VIEW_POOL_CAPACITY).toValue(10000),
AppViewManager,
AppViewManagerUtils,
Compiler,
CompilerCache,
TemplateResolver,
bind(PipeRegistry).toValue(defaultPipeRegistry),
bind(ChangeDetection).toClass(DynamicChangeDetection),
TemplateLoader,
DirectiveResolver,
Parser,
Lexer,
ExceptionHandler,
bind(XHR).toValue(new XHRImpl()),
ComponentUrlMapper,
UrlResolver,
StyleUrlResolver,
StyleInliner,
DynamicComponentLoader,
Testability
];
}
function _createNgZone(givenReporter: Function): NgZone {
var defaultErrorReporter = (exception, stackTrace) => {
var longStackTrace = ListWrapper.join(stackTrace, "\n\n-----async gap-----\n");
DOM.logError(`${exception}\n\n${longStackTrace}`);
throw exception;
};
var reporter = isPresent(givenReporter) ? givenReporter : defaultErrorReporter;
var zone = new NgZone({enableLongStackTrace: assertionsEnabled()});
zone.initCallbacks({onErrorHandler: reporter});
return zone;
}
/**
* Bootstrapping for Angular applications.
*
* You instantiate an Angular application by explicitly specifying a component to use as the root
* component for your
* application via the `bootstrap()` method.
*
* ## Simple Example
*
* Assuming this `index.html`:
*
* ```html
* <html>
* <!-- load Angular script tags here. -->
* <body>
* <my-app>loading...</my-app>
* </body>
* </html>
* ```
*
* An application is bootstrapped inside an existing browser DOM, typically `index.html`. Unlike
* Angular 1, Angular 2
* does not compile/process bindings in `index.html`. This is mainly for security reasons, as well
* as architectural
* changes in Angular 2. This means that `index.html` can safely be processed using server-side
* technologies such as
* bindings. Bindings can thus use double-curly `{{ syntax }}` without collision from Angular 2
* component double-curly
* `{{ syntax }}`.
*
* We can use this script code:
*
* ```
* @Component({
* selector: 'my-app'
* })
* @View({
* template: 'Hello {{ name }}!'
* })
* class MyApp {
* name:string;
*
* constructor() {
* this.name = 'World';
* }
* }
*
* main() {
* return bootstrap(MyApp);
* }
* ```
*
* When the app developer invokes `bootstrap()` with the root component `MyApp` as its argument,
* Angular performs the
* following tasks:
*
* 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 platform injector) and configures the injector with
* the component's
* `appInjector`. 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.
* 6. Finally, Angular performs change detection to apply the initial data bindings for the
* application.
*
*
* ## Instantiating Multiple Applications on a Single Page
*
* There are two ways to do this.
*
*
* ### Isolated Applications
*
* Angular creates a new application each time that the `bootstrap()` method is invoked. When
* multiple applications
* are created for a page, Angular treats each application as independent within an isolated change
* detection and
* `Zone` domain. If you need to share data between applications, use the strategy described in the
* next
* section, "Applications That Share Change Detection."
*
*
* ### Applications That Share Change Detection
*
* If you need to bootstrap multiple applications that share common data, the applications must
* share a common
* change detection and zone. To do that, create a meta-component that lists the application
* components in its template.
* By only invoking the `bootstrap()` method once, with the meta-component as its argument, you
* ensure that only a
* single change detection zone is created and therefore data can be shared across the applications.
*
*
* ## Platform Injector
*
* When working within a browser window, there are many singleton resources: cookies, title,
* location, and others.
* Angular services that represent these resources must likewise be shared across all Angular
* applications that
* occupy the same browser window. For this reason, Angular creates exactly one global platform
* injector which stores
* all shared services, and each angular application injector has the platform injector as its
* parent.
*
* Each application has its own private injector as well. When there are multiple applications on a
* page, Angular treats
* each application injector's services as private to that application.
*
*
* # API
* - `appComponentType`: The root component which should act as the application. This is a reference
* to a `Type`
* which is annotated with `@Component(...)`.
* - `componentInjectableBindings`: An additional set of bindings that can be added to `appInjector`
* for the
* {@link Component} to override default injection behavior.
* - `errorReporter`: `function(exception:any, stackTrace:string)` a default error reporter for
* unhandled exceptions.
*
* Returns a `Promise` with the application`s private {@link Injector}.
*
* @exportedAs angular2/core
*/
export function bootstrap(appComponentType: Type,
componentInjectableBindings: List<Type | Binding | List<any>> = null,
errorReporter: Function = null): Promise<ApplicationRef> {
BrowserDomAdapter.makeCurrent();
var bootstrapProcess = PromiseWrapper.completer();
var zone = _createNgZone(errorReporter);
zone.run(() => {
// TODO(rado): prepopulate template cache, so applications with only
// index.html and main.js are possible.
var appInjector = _createAppInjector(appComponentType, componentInjectableBindings, zone);
PromiseWrapper.then(
appInjector.asyncGet(appComponentRefToken),
(componentRef) =>
{
var appChangeDetector = internalView(componentRef.hostView).changeDetector;
// retrieve life cycle: may have already been created if injected in root component
var lc = appInjector.get(LifeCycle);
lc.registerWith(zone, appChangeDetector);
lc.tick(); // the first tick that will bootstrap the app
bootstrapProcess.resolve(new ApplicationRef(componentRef, appComponentType, appInjector));
},
(err, stackTrace) => {bootstrapProcess.reject(err, stackTrace)});
});
return bootstrapProcess.promise;
}
export class ApplicationRef {
_hostComponent: ComponentRef;
_injector: Injector;
_hostComponentType: Type;
constructor(hostComponent: ComponentRef, hostComponentType: Type, injector: Injector) {
this._hostComponent = hostComponent;
this._injector = injector;
this._hostComponentType = hostComponentType;
}
get hostComponentType() { return this._hostComponentType; }
get hostComponent() { return this._hostComponent.instance; }
dispose() {
// TODO: We also need to clean up the Zone, ... here!
return this._hostComponent.dispose();
}
get injector() { return this._injector; }
}
function _createAppInjector(appComponentType: Type, bindings: List<Type | Binding | List<any>>,
zone: NgZone): Injector {
if (isBlank(_rootInjector)) _rootInjector = Injector.resolveAndCreate(_rootBindings);
var mergedBindings = isPresent(bindings) ?
ListWrapper.concat(_injectorBindings(appComponentType), bindings) :
_injectorBindings(appComponentType);
ListWrapper.push(mergedBindings, bind(NgZone).toValue(zone));
return _rootInjector.resolveAndCreateChild(mergedBindings);
}

4
modules/angular2/src/core/application_tokens.js vendored
View File

@ -1,4 +0,0 @@
import {OpaqueToken} from 'angular2/di';
export var appComponentRefToken:OpaqueToken = new OpaqueToken('ComponentRef');
export var appComponentTypeToken:OpaqueToken = new OpaqueToken('RootComponent');

4
modules/angular2/src/core/application_tokens.ts Normal file
View File

@ -0,0 +1,4 @@
import {OpaqueToken} from 'angular2/di';
export var appComponentRefToken: OpaqueToken = new OpaqueToken('ComponentRef');
export var appComponentTypeToken: OpaqueToken = new OpaqueToken('RootComponent');

12
modules/angular2/src/core/compiler/base_query_list.es6 → modules/angular2/src/core/compiler/base_query_list.ts
View File

@ -21,9 +21,7 @@ export class BaseQueryList {
this._dirty = false;
}
[Symbol.iterator]() {
return this._results[Symbol.iterator]();
}
[Symbol.iterator]() { return this._results[Symbol.iterator](); }
reset(newList) {
this._results = newList;
@ -43,11 +41,7 @@ export class BaseQueryList {
}
}
onChange(callback) {
ListWrapper.push(this._callbacks, callback);
}
onChange(callback) { ListWrapper.push(this._callbacks, callback); }
removeCallback(callback) {
ListWrapper.remove(this._callbacks, callback);
}
removeCallback(callback) { ListWrapper.remove(this._callbacks, callback); }
}

258
modules/angular2/src/core/compiler/compiler.js vendored
View File

@ -1,258 +0,0 @@
import {Binding, resolveForwardRef} from 'angular2/di';
import {Injectable} from 'angular2/src/di/annotations_impl';
import {Type, isBlank, isPresent, BaseException, normalizeBlank, stringify} from 'angular2/src/facade/lang';
import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
import {List, ListWrapper, Map, MapWrapper} from 'angular2/src/facade/collection';
import {DirectiveResolver} from './directive_resolver';
import {AppProtoView} from './view';
import {ElementBinder} from './element_binder';
import {ProtoViewRef} from './view_ref';
import {DirectiveBinding} from './element_injector';
import {TemplateResolver} from './template_resolver';
import {View} from '../annotations_impl/view';
import {ComponentUrlMapper} from './component_url_mapper';
import {ProtoViewFactory} from './proto_view_factory';
import {UrlResolver} from 'angular2/src/services/url_resolver';
import * as renderApi from 'angular2/src/render/api';
/**
* Cache that stores the AppProtoView of the template of a component.
* Used to prevent duplicate work and resolve cyclic dependencies.
*/
@Injectable()
export class CompilerCache {
_cache:Map;
constructor() {
this._cache = MapWrapper.create();
}
set(component:Type, protoView:AppProtoView):void {
MapWrapper.set(this._cache, component, protoView);
}
get(component:Type):AppProtoView {
var result = MapWrapper.get(this._cache, component);
return normalizeBlank(result);
}
clear():void {
MapWrapper.clear(this._cache);
}
}
/**
* @exportedAs angular2/view
*/
@Injectable()
export class Compiler {
_reader: DirectiveResolver;
_compilerCache:CompilerCache;
_compiling:Map<Type, Promise>;
_templateResolver: TemplateResolver;
_componentUrlMapper: ComponentUrlMapper;
_urlResolver: UrlResolver;
_appUrl: string;
_render: renderApi.RenderCompiler;
_protoViewFactory:ProtoViewFactory;
constructor(reader: DirectiveResolver,
cache:CompilerCache,
templateResolver: TemplateResolver,
componentUrlMapper: ComponentUrlMapper,
urlResolver: UrlResolver,
render: renderApi.RenderCompiler,
protoViewFactory: ProtoViewFactory) {
this._reader = reader;
this._compilerCache = cache;
this._compiling = MapWrapper.create();
this._templateResolver = templateResolver;
this._componentUrlMapper = componentUrlMapper;
this._urlResolver = urlResolver;
this._appUrl = urlResolver.resolve(null, './');
this._render = render;
this._protoViewFactory = protoViewFactory;
}
_bindDirective(directiveTypeOrBinding):DirectiveBinding {
if (directiveTypeOrBinding instanceof DirectiveBinding) {
return directiveTypeOrBinding;
} else if (directiveTypeOrBinding instanceof Binding) {
let annotation = this._reader.resolve(directiveTypeOrBinding.token);
return DirectiveBinding.createFromBinding(directiveTypeOrBinding, annotation);
} else {
let annotation = this._reader.resolve(directiveTypeOrBinding);
return DirectiveBinding.createFromType(directiveTypeOrBinding, annotation);
}
}
// Create a hostView as if the compiler encountered <hostcmp></hostcmp>.
// Used for bootstrapping.
compileInHost(componentTypeOrBinding:any):Promise<ProtoViewRef> {
var componentBinding = this._bindDirective(componentTypeOrBinding);
Compiler._assertTypeIsComponent(componentBinding);
var directiveMetadata = componentBinding.metadata;
return this._render.compileHost(directiveMetadata).then( (hostRenderPv) => {
return this._compileNestedProtoViews(componentBinding, hostRenderPv, [componentBinding]);
}).then( (appProtoView) => {
return new ProtoViewRef(appProtoView);
});
}
compile(component: Type):Promise<ProtoViewRef> {
var componentBinding = this._bindDirective(component);
Compiler._assertTypeIsComponent(componentBinding);
var protoView = this._compile(componentBinding);
var pvPromise = PromiseWrapper.isPromise(protoView) ? protoView : PromiseWrapper.resolve(protoView);
return pvPromise.then( (appProtoView) => {
return new ProtoViewRef(appProtoView);
});
}
// 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 an AppProtoView,
// returns a plain AppProtoView, not wrapped inside of a Promise.
// Needed for recursive components.
return protoView;
}
var pvPromise = MapWrapper.get(this._compiling, component);
if (isPresent(pvPromise)) {
// The component is already being compiled, attach to the existing Promise
// instead of re-compiling the component.
// It happens when a template references a component multiple times.
return pvPromise;
}
var template = this._templateResolver.resolve(component);
if (isBlank(template)) {
return null;
}
var directives = this._flattenDirectives(template);
for (var i = 0; i < directives.length; i++) {
if (!Compiler._isValidDirective(directives[i])) {
throw new BaseException(
`Unexpected directive value '${stringify(directives[i])}' on the View of component '${stringify(component)}'`);
}
}
var boundDirectives = ListWrapper.map(directives, (directive) => this._bindDirective(directive));
var renderTemplate = this._buildRenderTemplate(component, template, boundDirectives);
pvPromise = this._render.compile(renderTemplate).then( (renderPv) => {
return this._compileNestedProtoViews(componentBinding, renderPv, boundDirectives);
});
MapWrapper.set(this._compiling, component, pvPromise);
return pvPromise;
}
// TODO(tbosch): union type return AppProtoView or Promise<AppProtoView>
_compileNestedProtoViews(componentBinding, renderPv, directives) {
var protoViews = this._protoViewFactory.createAppProtoViews(componentBinding, renderPv, directives);
var protoView = protoViews[0];
// TODO(tbosch): we should be caching host protoViews as well!
// -> need a separate cache for this...
if (renderPv.type === renderApi.ProtoViewDto.COMPONENT_VIEW_TYPE && isPresent(componentBinding)) {
// Populate the cache before compiling the nested components,
// so that components can reference themselves in their template.
var component = componentBinding.key.token;
this._compilerCache.set(component, protoView);
MapWrapper.delete(this._compiling, component);
}
var nestedPVPromises = [];
ListWrapper.forEach(this._collectComponentElementBinders(protoViews), (elementBinder) => {
var nestedComponent = elementBinder.componentDirective;
var elementBinderDone = (nestedPv) => {
elementBinder.nestedProtoView = nestedPv;
};
var nestedCall = this._compile(nestedComponent);
if (PromiseWrapper.isPromise(nestedCall)) {
ListWrapper.push(nestedPVPromises, nestedCall.then(elementBinderDone));
} else if (isPresent(nestedCall)) {
elementBinderDone(nestedCall);
}
});
var protoViewDone = (_) => {
return protoView;
};
if (nestedPVPromises.length > 0) {
return PromiseWrapper.all(nestedPVPromises).then(protoViewDone);
} else {
return protoViewDone(null);
}
}
_collectComponentElementBinders(protoViews:List<AppProtoView>):List<ElementBinder> {
var componentElementBinders = [];
ListWrapper.forEach(protoViews, (protoView) => {
ListWrapper.forEach(protoView.elementBinders, (elementBinder) => {
if (isPresent(elementBinder.componentDirective)) {
ListWrapper.push(componentElementBinders, elementBinder);
}
});
});
return componentElementBinders;
}
_buildRenderTemplate(component, view, directives): renderApi.ViewDefinition {
var componentUrl = this._urlResolver.resolve(
this._appUrl, this._componentUrlMapper.getUrl(component)
);
var templateAbsUrl = null;
if (isPresent(view.templateUrl)) {
templateAbsUrl = this._urlResolver.resolve(componentUrl, view.templateUrl);
} else if (isPresent(view.template)) {
// Note: If we have an inline template, we also need to send
// the url for the component to the render so that it
// is able to resolve urls in stylesheets.
templateAbsUrl = componentUrl;
}
return new renderApi.ViewDefinition({
componentId: stringify(component),
absUrl: templateAbsUrl,
template: view.template,
directives: ListWrapper.map(directives, directiveBinding => directiveBinding.metadata )
});
}
_flattenDirectives(template: View):List<Type> {
if (isBlank(template.directives)) return [];
var directives = [];
this._flattenList(template.directives, directives);
return directives;
}
_flattenList(tree:List<any>, out:List<any> /*<Type|Binding>*/):void {
for (var i = 0; i < tree.length; i++) {
var item = resolveForwardRef(tree[i]);
if (ListWrapper.isList(item)) {
this._flattenList(item, out);
} else {
ListWrapper.push(out, item);
}
}
}
static _isValidDirective(value: any): boolean {
return isPresent(value) && (value instanceof Type || value instanceof Binding);
}
static _assertTypeIsComponent(directiveBinding:DirectiveBinding):void {
if (directiveBinding.metadata.type !== renderApi.DirectiveMetadata.COMPONENT_TYPE) {
throw new BaseException(`Could not load '${stringify(directiveBinding.key.token)}' because it is not a component.`);
}
}
}

258
modules/angular2/src/core/compiler/compiler.ts Normal file
View File

@ -0,0 +1,258 @@
import {Binding, resolveForwardRef, Injectable} from 'angular2/di';
import {
Type,
isBlank,
isPresent,
BaseException,
normalizeBlank,
stringify
} from 'angular2/src/facade/lang';
import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
import {List, ListWrapper, Map, MapWrapper} from 'angular2/src/facade/collection';
import {DirectiveResolver} from './directive_resolver';
import {AppProtoView} from './view';
import {ElementBinder} from './element_binder';
import {ProtoViewRef} from './view_ref';
import {DirectiveBinding} from './element_injector';
import {TemplateResolver} from './template_resolver';
import {View} from '../annotations_impl/view';
import {ComponentUrlMapper} from './component_url_mapper';
import {ProtoViewFactory} from './proto_view_factory';
import {UrlResolver} from 'angular2/src/services/url_resolver';
import * as renderApi from 'angular2/src/render/api';
/**
* Cache that stores the AppProtoView of the template of a component.
* Used to prevent duplicate work and resolve cyclic dependencies.
*/
@Injectable()
export class CompilerCache {
_cache: Map<Type, AppProtoView>;
constructor() { this._cache = MapWrapper.create(); }
set(component: Type, protoView: AppProtoView): void {
MapWrapper.set(this._cache, component, protoView);
}
get(component: Type): AppProtoView {
var result = MapWrapper.get(this._cache, component);
return normalizeBlank(result);
}
clear(): void { MapWrapper.clear(this._cache); }
}
/**
* @exportedAs angular2/view
*/
@Injectable()
export class Compiler {
private _reader: DirectiveResolver;
private _compilerCache: CompilerCache;
private _compiling: Map<Type, Promise<AppProtoView>>;
private _templateResolver: TemplateResolver;
private _componentUrlMapper: ComponentUrlMapper;
private _urlResolver: UrlResolver;
private _appUrl: string;
private _render: renderApi.RenderCompiler;
private _protoViewFactory: ProtoViewFactory;
constructor(reader: DirectiveResolver, cache: CompilerCache, templateResolver: TemplateResolver,
componentUrlMapper: ComponentUrlMapper, urlResolver: UrlResolver,
render: renderApi.RenderCompiler, protoViewFactory: ProtoViewFactory) {
this._reader = reader;
this._compilerCache = cache;
this._compiling = MapWrapper.create();
this._templateResolver = templateResolver;
this._componentUrlMapper = componentUrlMapper;
this._urlResolver = urlResolver;
this._appUrl = urlResolver.resolve(null, './');
this._render = render;
this._protoViewFactory = protoViewFactory;
}
private _bindDirective(directiveTypeOrBinding): DirectiveBinding {
if (directiveTypeOrBinding instanceof DirectiveBinding) {
return directiveTypeOrBinding;
} else if (directiveTypeOrBinding instanceof Binding) {
let annotation = this._reader.resolve(directiveTypeOrBinding.token);
return DirectiveBinding.createFromBinding(directiveTypeOrBinding, annotation);
} else {
let annotation = this._reader.resolve(directiveTypeOrBinding);
return DirectiveBinding.createFromType(directiveTypeOrBinding, annotation);
}
}
// Create a hostView as if the compiler encountered <hostcmp></hostcmp>.
// Used for bootstrapping.
compileInHost(componentTypeOrBinding: Type | Binding): Promise<ProtoViewRef> {
var componentBinding = this._bindDirective(componentTypeOrBinding);
Compiler._assertTypeIsComponent(componentBinding);
var directiveMetadata = componentBinding.metadata;
return this._render.compileHost(directiveMetadata)
.then((hostRenderPv) =>
{
return this._compileNestedProtoViews(componentBinding, hostRenderPv,
[componentBinding]);
})
.then((appProtoView) => { return new ProtoViewRef(appProtoView); });
}
compile(component: Type): Promise<ProtoViewRef> {
var componentBinding = this._bindDirective(component);
Compiler._assertTypeIsComponent(componentBinding);
var pvOrPromise = this._compile(componentBinding);
var pvPromise = PromiseWrapper.isPromise(pvOrPromise) ? <Promise<AppProtoView>>pvOrPromise :
PromiseWrapper.resolve(pvOrPromise);
return pvPromise.then((appProtoView) => { return new ProtoViewRef(appProtoView); });
}
private _compile(componentBinding: DirectiveBinding): Promise<AppProtoView>| AppProtoView {
var component = <Type>componentBinding.key.token;
var protoView = this._compilerCache.get(component);
if (isPresent(protoView)) {
// 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;
}
var pvPromise = MapWrapper.get(this._compiling, component);
if (isPresent(pvPromise)) {
// The component is already being compiled, attach to the existing Promise
// instead of re-compiling the component.
// It happens when a template references a component multiple times.
return pvPromise;
}
var template = this._templateResolver.resolve(component);
if (isBlank(template)) {
return null;
}
var directives = this._flattenDirectives(template);
for (var i = 0; i < directives.length; i++) {
if (!Compiler._isValidDirective(directives[i])) {
throw new BaseException(
`Unexpected directive value '${stringify(directives[i])}' on the View of component '${stringify(component)}'`);
}
}
var boundDirectives =
ListWrapper.map(directives, (directive) => this._bindDirective(directive));
var renderTemplate = this._buildRenderTemplate(component, template, boundDirectives);
pvPromise =
this._render.compile(renderTemplate)
.then((renderPv) => {
return this._compileNestedProtoViews(componentBinding, renderPv, boundDirectives);
});
MapWrapper.set(this._compiling, component, pvPromise);
return pvPromise;
}
private _compileNestedProtoViews(componentBinding, renderPv, directives): Promise<AppProtoView>|
AppProtoView {
var protoViews =
this._protoViewFactory.createAppProtoViews(componentBinding, renderPv, directives);
var protoView = protoViews[0];
// TODO(tbosch): we should be caching host protoViews as well!
// -> need a separate cache for this...
if (renderPv.type === renderApi.ProtoViewDto.COMPONENT_VIEW_TYPE &&
isPresent(componentBinding)) {
// Populate the cache before compiling the nested components,
// so that components can reference themselves in their template.
var component = componentBinding.key.token;
this._compilerCache.set(component, protoView);
MapWrapper.delete(this._compiling, component);
}
var nestedPVPromises = [];
ListWrapper.forEach(this._collectComponentElementBinders(protoViews), (elementBinder) => {
var nestedComponent = elementBinder.componentDirective;
var elementBinderDone = (nestedPv: AppProtoView) => {
elementBinder.nestedProtoView = nestedPv;
};
var nestedCall = this._compile(nestedComponent);
if (PromiseWrapper.isPromise(nestedCall)) {
ListWrapper.push(nestedPVPromises,
(<Promise<AppProtoView>>nestedCall).then(elementBinderDone));
} else if (isPresent(nestedCall)) {
elementBinderDone(<AppProtoView>nestedCall);
}
});
if (nestedPVPromises.length > 0) {
return PromiseWrapper.all(nestedPVPromises).then((_) => protoView);
} else {
return protoView;
}
}
private _collectComponentElementBinders(protoViews: List<AppProtoView>): List<ElementBinder> {
var componentElementBinders = [];
ListWrapper.forEach(protoViews, (protoView) => {
ListWrapper.forEach(protoView.elementBinders, (elementBinder) => {
if (isPresent(elementBinder.componentDirective)) {
ListWrapper.push(componentElementBinders, elementBinder);
}
});
});
return componentElementBinders;
}
private _buildRenderTemplate(component, view, directives): renderApi.ViewDefinition {
var componentUrl =
this._urlResolver.resolve(this._appUrl, this._componentUrlMapper.getUrl(component));
var templateAbsUrl = null;
if (isPresent(view.templateUrl)) {
templateAbsUrl = this._urlResolver.resolve(componentUrl, view.templateUrl);
} else if (isPresent(view.template)) {
// Note: If we have an inline template, we also need to send
// the url for the component to the render so that it
// is able to resolve urls in stylesheets.
templateAbsUrl = componentUrl;
}
return new renderApi.ViewDefinition({
componentId: stringify(component),
absUrl: templateAbsUrl, template: view.template,
directives: ListWrapper.map(directives, directiveBinding => directiveBinding.metadata)
});
}
private _flattenDirectives(template: View): List<Type> {
if (isBlank(template.directives)) return [];
var directives = [];
this._flattenList(template.directives, directives);
return directives;
}
private _flattenList(tree: List<any>, out: List<Type | Binding | List<any>>): void {
for (var i = 0; i < tree.length; i++) {
var item = resolveForwardRef(tree[i]);
if (ListWrapper.isList(item)) {
this._flattenList(item, out);
} else {
ListWrapper.push(out, item);
}
}
}
private static _isValidDirective(value: Type | Binding): boolean {
return isPresent(value) && (value instanceof Type || value instanceof Binding);
}
private static _assertTypeIsComponent(directiveBinding: DirectiveBinding): void {
if (directiveBinding.metadata.type !== renderApi.DirectiveMetadata.COMPONENT_TYPE) {
throw new BaseException(
`Could not load '${stringify(directiveBinding.key.token)}' because it is not a component.`);
}
}
}

8
modules/angular2/src/core/compiler/component_url_mapper.js → modules/angular2/src/core/compiler/component_url_mapper.ts
View File

@ -1,4 +1,4 @@
import {Injectable} from 'angular2/src/di/annotations_impl';
import {Injectable} from 'angular2/di';
import {Type, isPresent} from 'angular2/src/facade/lang';
import {Map, MapWrapper} from 'angular2/src/facade/collection';
@ -8,13 +8,11 @@ export class ComponentUrlMapper {
// The returned URL could be:
// - an absolute URL,
// - a path relative to the application
getUrl(component: Type): string {
return './';
}
getUrl(component: Type): string { return './'; }
}
export class RuntimeComponentUrlMapper extends ComponentUrlMapper {
_componentUrls: Map;
_componentUrls: Map<Type, string>;
constructor() {
super();

8
modules/angular2/src/core/compiler/directive_resolver.js → modules/angular2/src/core/compiler/directive_resolver.ts
View File

@ -1,15 +1,14 @@
import {Injectable} from 'angular2/src/di/annotations_impl';
import {resolveForwardRef} from 'angular2/di';
import {resolveForwardRef, Injectable} from 'angular2/di';
import {Type, isPresent, BaseException, stringify} from 'angular2/src/facade/lang';
import {Directive} from '../annotations_impl/annotations';
import {reflector} from 'angular2/src/reflection/reflection';
@Injectable()
export class DirectiveResolver {
resolve(type:Type):Directive {
resolve(type: Type): Directive {
var annotations = reflector.annotations(resolveForwardRef(type));
if (isPresent(annotations)) {
for (var i=0; i<annotations.length; i++) {
for (var i = 0; i < annotations.length; i++) {
var annotation = annotations[i];
if (annotation instanceof Directive) {
@ -19,5 +18,4 @@ export class DirectiveResolver {
}
throw new BaseException(`No Directive annotation found on ${stringify(type)}`);
}
}

132
modules/angular2/src/core/compiler/dynamic_component_loader.js vendored
View File

@ -1,132 +0,0 @@
import {Key, Injector, ResolvedBinding, Binding, bind} from 'angular2/di'
import {Injectable} from 'angular2/src/di/annotations_impl';
import {Compiler} from './compiler';
import {Type, BaseException, stringify, isPresent} from 'angular2/src/facade/lang';
import {Promise} from 'angular2/src/facade/async';
import {AppViewManager, ComponentCreateResult} from 'angular2/src/core/compiler/view_manager';
import {ElementRef} from './element_ref';
/**
* @exportedAs angular2/view
*/
export class ComponentRef {
location:ElementRef;
instance:any;
_dispose:Function;
constructor(location:ElementRef, instance:any, dispose:Function) {
this.location = location;
this.instance = instance;
this._dispose = dispose;
}
get hostView() {
return this.location.parentView;
}
dispose() {
this._dispose();
}
}
/**
* Service for dynamically loading a Component into an arbitrary position in the internal Angular
* application tree.
*
* @exportedAs angular2/view
*/
@Injectable()
export class DynamicComponentLoader {
_compiler:Compiler;
_viewManager:AppViewManager;
constructor(compiler:Compiler,
viewManager: AppViewManager) {
this._compiler = compiler;
this._viewManager = viewManager;
}
/**
* Loads a component into the location given by the provided ElementRef. The loaded component
* receives injection as if it in the place of the provided ElementRef.
*/
loadIntoExistingLocation(typeOrBinding, location:ElementRef, injector:Injector = null):Promise<ComponentRef> {
var binding = this._getBinding(typeOrBinding);
return this._compiler.compile(binding.token).then(componentProtoViewRef => {
this._viewManager.createDynamicComponentView(
location, componentProtoViewRef, binding, injector);
var component = this._viewManager.getComponent(location);
var dispose = () => {throw new BaseException("Not implemented");};
return new ComponentRef(location, component, dispose);
});
}
/**
* Loads a root component that is placed at the first element that matches the
* component's selector.
* The loaded component receives injection normally as a hosted view.
*/
loadAsRoot(typeOrBinding, overrideSelector = null, injector:Injector = null):Promise<ComponentRef> {
return this._compiler.compileInHost(this._getBinding(typeOrBinding)).then(hostProtoViewRef => {
var hostViewRef = this._viewManager.createRootHostView(hostProtoViewRef, overrideSelector, injector);
var newLocation = new ElementRef(hostViewRef, 0);
var component = this._viewManager.getComponent(newLocation);
var dispose = () => {
this._viewManager.destroyRootHostView(hostViewRef);
};
return new ComponentRef(newLocation, component, dispose);
});
}
/**
* Loads a component into a free host view that is not yet attached to
* a parent on the render side, although it is attached to a parent in the injector hierarchy.
* The loaded component receives injection normally as a hosted view.
*/
loadIntoNewLocation(typeOrBinding, parentComponentLocation:ElementRef,
injector:Injector = null):Promise<ComponentRef> {
return this._compiler.compileInHost(this._getBinding(typeOrBinding)).then(hostProtoViewRef => {
var hostViewRef = this._viewManager.createFreeHostView(
parentComponentLocation, hostProtoViewRef, injector);
var newLocation = new ElementRef(hostViewRef, 0);
var component = this._viewManager.getComponent(newLocation);
var dispose = () => {
this._viewManager.destroyFreeHostView(parentComponentLocation, hostViewRef);
};
return new ComponentRef(newLocation, component, dispose);
});
}
/**
* Loads a component next to the provided ElementRef. The loaded component receives
* injection normally as a hosted view.
*/
loadNextToExistingLocation(typeOrBinding, location:ElementRef, injector:Injector = null):Promise<ComponentRef> {
var binding = this._getBinding(typeOrBinding);
return this._compiler.compileInHost(binding).then(hostProtoViewRef => {
var viewContainer = this._viewManager.getViewContainer(location);
var hostViewRef = viewContainer.create(hostProtoViewRef, viewContainer.length, null, injector);
var newLocation = new ElementRef(hostViewRef, 0);
var component = this._viewManager.getComponent(newLocation);
var dispose = () => {
var index = viewContainer.indexOf(hostViewRef);
viewContainer.remove(index);
};
return new ComponentRef(newLocation, component, dispose);
});
}
_getBinding(typeOrBinding) {
var binding;
if (typeOrBinding instanceof Binding) {
binding = typeOrBinding;
} else {
binding = bind(typeOrBinding).toClass(typeOrBinding);
}
return binding;
}
}

118
modules/angular2/src/core/compiler/dynamic_component_loader.ts Normal file
View File

@ -0,0 +1,118 @@
import {Key, Injector, ResolvedBinding, Binding, bind, Injectable} from 'angular2/di';
import {Compiler} from './compiler';
import {Type, BaseException, stringify, isPresent} from 'angular2/src/facade/lang';
import {Promise} from 'angular2/src/facade/async';
import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
import {ElementRef} from './element_ref';
import {ViewRef} from './view_ref';
/**
* @exportedAs angular2/view
*/
export class ComponentRef {
constructor(public location: ElementRef, public instance: any, public dispose: Function) {}
get hostView(): ViewRef { return this.location.parentView; }
}
/**
* Service for dynamically loading a Component into an arbitrary position in the internal Angular
* application tree.
*
* @exportedAs angular2/view
*/
@Injectable()
export class DynamicComponentLoader {
private _compiler: Compiler;
private _viewManager: AppViewManager;
constructor(compiler: Compiler, viewManager: AppViewManager) {
this._compiler = compiler;
this._viewManager = viewManager;
}
/**
* Loads a component into the location given by the provided ElementRef. The loaded component
* receives injection as if it in the place of the provided ElementRef.
*/
loadIntoExistingLocation(typeOrBinding, location: ElementRef,
injector: Injector = null): Promise<ComponentRef> {
var binding = this._getBinding(typeOrBinding);
return this._compiler.compile(binding.token).then(componentProtoViewRef => {
this._viewManager.createDynamicComponentView(location, componentProtoViewRef, binding,
injector);
var component = this._viewManager.getComponent(location);
var dispose = () => { throw new BaseException("Not implemented");};
return new ComponentRef(location, component, dispose);
});
}
/**
* Loads a root component that is placed at the first element that matches the
* component's selector.
* The loaded component receives injection normally as a hosted view.
*/
loadAsRoot(typeOrBinding, overrideSelector = null,
injector: Injector = null): Promise<ComponentRef> {
return this._compiler.compileInHost(this._getBinding(typeOrBinding)).then(hostProtoViewRef => {
var hostViewRef =
this._viewManager.createRootHostView(hostProtoViewRef, overrideSelector, injector);
var newLocation = new ElementRef(hostViewRef, 0);
var component = this._viewManager.getComponent(newLocation);
var dispose = () => { this._viewManager.destroyRootHostView(hostViewRef);
};
return new ComponentRef(newLocation, component, dispose);
});
}
/**
* Loads a component into a free host view that is not yet attached to
* a parent on the render side, although it is attached to a parent in the injector hierarchy.
* The loaded component receives injection normally as a hosted view.
*/
loadIntoNewLocation(typeOrBinding, parentComponentLocation: ElementRef,
injector: Injector = null): Promise<ComponentRef> {
return this._compiler.compileInHost(this._getBinding(typeOrBinding)).then(hostProtoViewRef => {
var hostViewRef =
this._viewManager.createFreeHostView(parentComponentLocation, hostProtoViewRef, injector);
var newLocation = new ElementRef(hostViewRef, 0);
var component = this._viewManager.getComponent(newLocation);
var dispose = () => {
this._viewManager.destroyFreeHostView(parentComponentLocation, hostViewRef);
};
return new ComponentRef(newLocation, component, dispose);
});
}
/**
* Loads a component next to the provided ElementRef. The loaded component receives
* injection normally as a hosted view.
*/
loadNextToExistingLocation(typeOrBinding, location: ElementRef,
injector: Injector = null): Promise<ComponentRef> {
var binding = this._getBinding(typeOrBinding);
return this._compiler.compileInHost(binding).then(hostProtoViewRef => {
var viewContainer = this._viewManager.getViewContainer(location);
var hostViewRef = viewContainer.create(hostProtoViewRef, viewContainer.length, null, injector);
var newLocation = new ElementRef(hostViewRef, 0);
var component = this._viewManager.getComponent(newLocation);
var dispose = () => { var index = viewContainer.indexOf(hostViewRef);
viewContainer.remove(index);
};
return new ComponentRef(newLocation, component, dispose);
});
}
private _getBinding(typeOrBinding): Binding {
var binding;
if (typeOrBinding instanceof Binding) {
binding = typeOrBinding;
} else {
binding = bind(typeOrBinding).toClass(typeOrBinding);
}
return binding;
}
}

20
modules/angular2/src/core/compiler/element_binder.js → modules/angular2/src/core/compiler/element_binder.ts
View File

@ -1,3 +1,4 @@
import {AST} from 'angular2/change_detection';
import {int, isBlank, isPresent, BaseException} from 'angular2/src/facade/lang';
import * as eiModule from './element_injector';
import {DirectiveBinding} from './element_injector';
@ -5,25 +6,14 @@ import {List, StringMap} from 'angular2/src/facade/collection';
import * as viewModule from './view';
export class ElementBinder {
protoElementInjector:eiModule.ProtoElementInjector;
componentDirective:DirectiveBinding;
nestedProtoView: viewModule.AppProtoView;
hostListeners:StringMap;
parent:ElementBinder;
index:int;
distanceToParent:int;
constructor(
index:int, parent:ElementBinder, distanceToParent: int,
protoElementInjector: eiModule.ProtoElementInjector, componentDirective:DirectiveBinding) {
hostListeners: StringMap<string, Map<number, AST>>;
constructor(public index: int, public parent: ElementBinder, public distanceToParent: int,
public protoElementInjector: eiModule.ProtoElementInjector,
public componentDirective: DirectiveBinding) {
if (isBlank(index)) {
throw new BaseException('null index not allowed.');
}
this.protoElementInjector = protoElementInjector;
this.componentDirective = componentDirective;
this.parent = parent;
this.index = index;
this.distanceToParent = distanceToParent;
// updated later when events are bound
this.hostListeners = null;
// updated later, so we are able to resolve cycles

925
modules/angular2/src/core/compiler/element_injector.js → modules/angular2/src/core/compiler/element_injector.ts
View File

File diff suppressed because it is too large Load Diff

8
modules/angular2/src/core/compiler/element_ref.js → modules/angular2/src/core/compiler/element_ref.ts
View File

@ -7,10 +7,10 @@ import {resolveInternalDomView} from 'angular2/src/render/dom/view/view';
* @exportedAs angular2/view
*/
export class ElementRef {
parentView:ViewRef;
boundElementIndex:number;
parentView: ViewRef;
boundElementIndex: number;
constructor(parentView:ViewRef, boundElementIndex:number) {
constructor(parentView: ViewRef, boundElementIndex: number) {
this.parentView = parentView;
this.boundElementIndex = boundElementIndex;
}
@ -33,7 +33,7 @@ export class ElementRef {
// TODO(tbosch): Here we expose the real DOM element.
// We need a more general way to read/write to the DOM element
// via a proper abstraction in the render layer
getAttribute(name:string):string {
getAttribute(name: string): string {
return normalizeBlank(DOM.getAttribute(this.domElement, name));
}
}

8
modules/angular2/src/core/compiler/interfaces.js vendored
View File

@ -1,8 +0,0 @@
/**
* @exportedAs angular2/angular2
*/
export class OnChange {
onChange(changes) {
throw "OnChange.onChange is not implemented";
}
}

241
modules/angular2/src/core/compiler/proto_view_factory.js → modules/angular2/src/core/compiler/proto_view_factory.ts
View File

@ -1,54 +1,61 @@
import {Injectable} from 'angular2/src/di/annotations_impl';
import {Injectable} from 'angular2/di';
import {List, ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
import {isPresent, isBlank} from 'angular2/src/facade/lang';
import {reflector} from 'angular2/src/reflection/reflection';
import {
ChangeDetection, DirectiveIndex, BindingRecord, DirectiveRecord,
ProtoChangeDetector, DEFAULT, ChangeDetectorDefinition
ChangeDetection,
DirectiveIndex,
BindingRecord,
DirectiveRecord,
ProtoChangeDetector,
DEFAULT,
ChangeDetectorDefinition
} from 'angular2/change_detection';
import * as renderApi from 'angular2/src/render/api';
import {AppProtoView} from './view';
import {ElementBinder} from './element_binder';
import {ProtoElementInjector, DirectiveBinding} from './element_injector';
class BindingRecordsCreator {
_directiveRecordsMap;
_textNodeIndex:number;
_directiveRecordsMap: Map<number, DirectiveRecord>;
_textNodeIndex: number;
constructor() {
this._directiveRecordsMap = MapWrapper.create();
this._textNodeIndex = 0;
}
getBindingRecords(elementBinders:List<renderApi.ElementBinder>,
allDirectiveMetadatas:List<renderApi.DirectiveMetadata>
):List<BindingRecord> {
getBindingRecords(elementBinders: List<renderApi.ElementBinder>,
allDirectiveMetadatas: List<renderApi.DirectiveMetadata>): List<BindingRecord> {
var bindings = [];
for (var boundElementIndex = 0; boundElementIndex < elementBinders.length; boundElementIndex++) {
for (var boundElementIndex = 0; boundElementIndex < elementBinders.length;
boundElementIndex++) {
var renderElementBinder = elementBinders[boundElementIndex];
this._createTextNodeRecords(bindings, renderElementBinder);
this._createElementPropertyRecords(bindings, boundElementIndex, renderElementBinder);
this._createDirectiveRecords(bindings, boundElementIndex,
renderElementBinder.directives, allDirectiveMetadatas);
this._createDirectiveRecords(bindings, boundElementIndex, renderElementBinder.directives,
allDirectiveMetadatas);
}
return bindings;
}
getDirectiveRecords(
elementBinders:List<renderApi.ElementBinder>,
allDirectiveMetadatas:List<renderApi.DirectiveMetadata>): List<DirectiveRecord> {
elementBinders: List<renderApi.ElementBinder>,
allDirectiveMetadatas: List<renderApi.DirectiveMetadata>): List<DirectiveRecord> {
var directiveRecords = [];
for (var elementIndex = 0; elementIndex < elementBinders.length; ++elementIndex) {
var dirs = elementBinders[elementIndex].directives;
for (var dirIndex = 0; dirIndex < dirs.length; ++dirIndex) {
ListWrapper.push(directiveRecords,
this._getDirectiveRecord(
elementIndex, dirIndex, allDirectiveMetadatas[dirs[dirIndex].directiveIndex]));
ListWrapper.push(
directiveRecords,
this._getDirectiveRecord(elementIndex, dirIndex,
allDirectiveMetadatas[dirs[dirIndex].directiveIndex]));
}
}
@ -56,7 +63,7 @@ class BindingRecordsCreator {
}
_createTextNodeRecords(bindings: List<BindingRecord>,
renderElementBinder: renderApi.ElementBinder) {
renderElementBinder: renderApi.ElementBinder) {
if (isBlank(renderElementBinder.textBindings)) return;
ListWrapper.forEach(renderElementBinder.textBindings, (b) => {
@ -64,17 +71,17 @@ class BindingRecordsCreator {
});
}
_createElementPropertyRecords(bindings: List<BindingRecord>,
boundElementIndex:number, renderElementBinder:renderApi.ElementBinder) {
_createElementPropertyRecords(bindings: List<BindingRecord>, boundElementIndex: number,
renderElementBinder: renderApi.ElementBinder) {
MapWrapper.forEach(renderElementBinder.propertyBindings, (astWithSource, propertyName) => {
ListWrapper.push(bindings,
BindingRecord.createForElement(astWithSource, boundElementIndex, propertyName));
ListWrapper.push(
bindings, BindingRecord.createForElement(astWithSource, boundElementIndex, propertyName));
});
}
_createDirectiveRecords(bindings: List<BindingRecord>,
boundElementIndex:number, directiveBinders:List<renderApi.DirectiveBinder>,
allDirectiveMetadatas:List<renderApi.DirectiveMetadata>) {
_createDirectiveRecords(bindings: List<BindingRecord>, boundElementIndex: number,
directiveBinders: List<renderApi.DirectiveBinder>,
allDirectiveMetadatas: List<renderApi.DirectiveMetadata>) {
for (var i = 0; i < directiveBinders.length; i++) {
var directiveBinder = directiveBinders[i];
var directiveMetadata = allDirectiveMetadatas[directiveBinder.directiveIndex];
@ -85,28 +92,30 @@ class BindingRecordsCreator {
// it monomorphic!
var setter = reflector.setter(propertyName);
var directiveRecord = this._getDirectiveRecord(boundElementIndex, i, directiveMetadata);
ListWrapper.push(bindings,
BindingRecord.createForDirective(astWithSource, propertyName, setter, directiveRecord));
ListWrapper.push(bindings, BindingRecord.createForDirective(astWithSource, propertyName,
setter, directiveRecord));
});
// host properties
MapWrapper.forEach(directiveBinder.hostPropertyBindings, (astWithSource, propertyName) => {
var dirIndex = new DirectiveIndex(boundElementIndex, i);
ListWrapper.push(bindings,
BindingRecord.createForHostProperty(dirIndex, astWithSource, propertyName));
ListWrapper.push(
bindings, BindingRecord.createForHostProperty(dirIndex, astWithSource, propertyName));
});
}
}
_getDirectiveRecord(boundElementIndex:number, directiveIndex:number, directiveMetadata:renderApi.DirectiveMetadata): DirectiveRecord {
_getDirectiveRecord(boundElementIndex: number, directiveIndex: number,
directiveMetadata: renderApi.DirectiveMetadata): DirectiveRecord {
var id = boundElementIndex * 100 + directiveIndex;
if (!MapWrapper.contains(this._directiveRecordsMap, id)) {
var changeDetection = directiveMetadata.changeDetection;
MapWrapper.set(this._directiveRecordsMap, id,
new DirectiveRecord(new DirectiveIndex(boundElementIndex, directiveIndex),
directiveMetadata.callOnAllChangesDone, directiveMetadata.callOnChange, changeDetection));
new DirectiveRecord(new DirectiveIndex(boundElementIndex, directiveIndex),
directiveMetadata.callOnAllChangesDone,
directiveMetadata.callOnChange, changeDetection));
}
return MapWrapper.get(this._directiveRecordsMap, id);
@ -117,30 +126,28 @@ class BindingRecordsCreator {
export class ProtoViewFactory {
_changeDetection: ChangeDetection;
constructor(changeDetection: ChangeDetection) {
this._changeDetection = changeDetection;
}
constructor(changeDetection: ChangeDetection) { this._changeDetection = changeDetection; }
createAppProtoViews(hostComponentBinding:DirectiveBinding,
rootRenderProtoView: renderApi.ProtoViewDto, allDirectives:List<DirectiveBinding>):List<AppProtoView> {
var allRenderDirectiveMetadata = ListWrapper.map(allDirectives, directiveBinding => directiveBinding.metadata);
createAppProtoViews(hostComponentBinding: DirectiveBinding,
rootRenderProtoView: renderApi.ProtoViewDto,
allDirectives: List<DirectiveBinding>): List<AppProtoView> {
var allRenderDirectiveMetadata =
ListWrapper.map(allDirectives, directiveBinding => directiveBinding.metadata);
var nestedPvsWithIndex = _collectNestedProtoViews(rootRenderProtoView);
var nestedPvVariableBindings = _collectNestedProtoViewsVariableBindings(nestedPvsWithIndex);
var nestedPvVariableNames = _collectNestedProtoViewsVariableNames(nestedPvsWithIndex, nestedPvVariableBindings);
var changeDetectorDefs = _getChangeDetectorDefinitions(
hostComponentBinding.metadata, nestedPvsWithIndex, nestedPvVariableNames, allRenderDirectiveMetadata
);
var nestedPvVariableNames =
_collectNestedProtoViewsVariableNames(nestedPvsWithIndex, nestedPvVariableBindings);
var changeDetectorDefs =
_getChangeDetectorDefinitions(hostComponentBinding.metadata, nestedPvsWithIndex,
nestedPvVariableNames, allRenderDirectiveMetadata);
var protoChangeDetectors = ListWrapper.map(
changeDetectorDefs, changeDetectorDef => this._changeDetection.createProtoChangeDetector(changeDetectorDef)
);
changeDetectorDefs,
changeDetectorDef => this._changeDetection.createProtoChangeDetector(changeDetectorDef));
var appProtoViews = ListWrapper.createFixedSize(nestedPvsWithIndex.length);
ListWrapper.forEach(nestedPvsWithIndex, (pvWithIndex) => {
var appProtoView = _createAppProtoView(
pvWithIndex.renderProtoView,
protoChangeDetectors[pvWithIndex.index],
nestedPvVariableBindings[pvWithIndex.index],
allDirectives
);
var appProtoView =
_createAppProtoView(pvWithIndex.renderProtoView, protoChangeDetectors[pvWithIndex.index],
nestedPvVariableBindings[pvWithIndex.index], allDirectives);
if (isPresent(pvWithIndex.parentIndex)) {
var parentView = appProtoViews[pvWithIndex.parentIndex];
parentView.elementBinders[pvWithIndex.boundElementIndex].nestedProtoView = appProtoView;
@ -156,34 +163,31 @@ export class ProtoViewFactory {
* for the given ProtoView and all nested ProtoViews.
*/
export function getChangeDetectorDefinitions(
hostComponentMetadata:renderApi.DirectiveMetadata,
rootRenderProtoView: renderApi.ProtoViewDto,
allRenderDirectiveMetadata:List<renderApi.DirectiveMetadata>): List<ChangeDetectorDefinition> {
hostComponentMetadata: renderApi.DirectiveMetadata, rootRenderProtoView: renderApi.ProtoViewDto,
allRenderDirectiveMetadata: List<renderApi.DirectiveMetadata>): List<ChangeDetectorDefinition> {
var nestedPvsWithIndex = _collectNestedProtoViews(rootRenderProtoView);
var nestedPvVariableBindings = _collectNestedProtoViewsVariableBindings(nestedPvsWithIndex);
var nestedPvVariableNames = _collectNestedProtoViewsVariableNames(nestedPvsWithIndex, nestedPvVariableBindings);
var nestedPvVariableNames =
_collectNestedProtoViewsVariableNames(nestedPvsWithIndex, nestedPvVariableBindings);
return _getChangeDetectorDefinitions(
hostComponentMetadata,
nestedPvsWithIndex,
nestedPvVariableNames,
allRenderDirectiveMetadata
);
return _getChangeDetectorDefinitions(hostComponentMetadata, nestedPvsWithIndex,
nestedPvVariableNames, allRenderDirectiveMetadata);
}
function _collectNestedProtoViews(renderProtoView:renderApi.ProtoViewDto,
parentIndex:number = null,
boundElementIndex = null,
result:List<RenderProtoViewWithIndex> = null): List<RenderProtoViewWithIndex> {
function _collectNestedProtoViews(
renderProtoView: renderApi.ProtoViewDto, parentIndex: number = null, boundElementIndex = null,
result: List<RenderProtoViewWithIndex> = null): List<RenderProtoViewWithIndex> {
if (isBlank(result)) {
result = [];
}
ListWrapper.push(result, new RenderProtoViewWithIndex(renderProtoView, result.length, parentIndex, boundElementIndex));
ListWrapper.push(result, new RenderProtoViewWithIndex(renderProtoView, result.length, parentIndex,
boundElementIndex));
var currentIndex = result.length - 1;
var childBoundElementIndex = 0;
ListWrapper.forEach(renderProtoView.elementBinders, (elementBinder) => {
if (isPresent(elementBinder.nestedProtoView)) {
_collectNestedProtoViews(elementBinder.nestedProtoView, currentIndex, childBoundElementIndex, result);
_collectNestedProtoViews(elementBinder.nestedProtoView, currentIndex, childBoundElementIndex,
result);
}
childBoundElementIndex++;
});
@ -191,15 +195,16 @@ function _collectNestedProtoViews(renderProtoView:renderApi.ProtoViewDto,
}
function _getChangeDetectorDefinitions(
hostComponentMetadata:renderApi.DirectiveMetadata,
nestedPvsWithIndex: List<RenderProtoViewWithIndex>,
nestedPvVariableNames: List<List<string>>,
allRenderDirectiveMetadata:List<renderApi.DirectiveMetadata>):List<ChangeDetectorDefinition> {
hostComponentMetadata: renderApi.DirectiveMetadata,
nestedPvsWithIndex: List<RenderProtoViewWithIndex>, nestedPvVariableNames: List<List<string>>,
allRenderDirectiveMetadata: List<renderApi.DirectiveMetadata>): List<ChangeDetectorDefinition> {
return ListWrapper.map(nestedPvsWithIndex, (pvWithIndex) => {
var elementBinders = pvWithIndex.renderProtoView.elementBinders;
var bindingRecordsCreator = new BindingRecordsCreator();
var bindingRecords = bindingRecordsCreator.getBindingRecords(elementBinders, allRenderDirectiveMetadata);
var directiveRecords = bindingRecordsCreator.getDirectiveRecords(elementBinders, allRenderDirectiveMetadata);
var bindingRecords =
bindingRecordsCreator.getBindingRecords(elementBinders, allRenderDirectiveMetadata);
var directiveRecords =
bindingRecordsCreator.getDirectiveRecords(elementBinders, allRenderDirectiveMetadata);
var strategyName = DEFAULT;
var typeString;
if (pvWithIndex.renderProtoView.type === renderApi.ProtoViewDto.COMPONENT_VIEW_TYPE) {
@ -212,16 +217,14 @@ function _getChangeDetectorDefinitions(
}
var id = `${hostComponentMetadata.id}_${typeString}_${pvWithIndex.index}`;
var variableNames = nestedPvVariableNames[pvWithIndex.index];
return new ChangeDetectorDefinition(id, strategyName, variableNames, bindingRecords, directiveRecords);
return new ChangeDetectorDefinition(id, strategyName, variableNames, bindingRecords,
directiveRecords);
});
}
function _createAppProtoView(
renderProtoView: renderApi.ProtoViewDto,
protoChangeDetector: ProtoChangeDetector,
variableBindings: Map<string, string>,
allDirectives:List<DirectiveBinding>
):AppProtoView {
renderProtoView: renderApi.ProtoViewDto, protoChangeDetector: ProtoChangeDetector,
variableBindings: Map<string, string>, allDirectives: List<DirectiveBinding>): AppProtoView {
var elementBinders = renderProtoView.elementBinders;
var protoView = new AppProtoView(renderProtoView.render, protoChangeDetector, variableBindings);
@ -233,14 +236,13 @@ function _createAppProtoView(
}
function _collectNestedProtoViewsVariableBindings(
nestedPvsWithIndex: List<RenderProtoViewWithIndex>
):List<Map<string, string>> {
nestedPvsWithIndex: List<RenderProtoViewWithIndex>): List<Map<string, string>> {
return ListWrapper.map(nestedPvsWithIndex, (pvWithIndex) => {
return _createVariableBindings(pvWithIndex.renderProtoView);
});
}
function _createVariableBindings(renderProtoView):Map {
function _createVariableBindings(renderProtoView): Map<string, string> {
var variableBindings = MapWrapper.create();
MapWrapper.forEach(renderProtoView.variableBindings, (mappedName, varName) => {
MapWrapper.set(variableBindings, varName, mappedName);
@ -255,48 +257,49 @@ function _createVariableBindings(renderProtoView):Map {
function _collectNestedProtoViewsVariableNames(
nestedPvsWithIndex: List<RenderProtoViewWithIndex>,
nestedPvVariableBindings:List<Map<string, string>>
):List<List<string>> {
nestedPvVariableBindings: List<Map<string, string>>): List<List<string>> {
var nestedPvVariableNames = ListWrapper.createFixedSize(nestedPvsWithIndex.length);
ListWrapper.forEach(nestedPvsWithIndex, (pvWithIndex) => {
var parentVariableNames = isPresent(pvWithIndex.parentIndex) ? nestedPvVariableNames[pvWithIndex.parentIndex] : null;
nestedPvVariableNames[pvWithIndex.index] = _createVariableNames(
parentVariableNames, nestedPvVariableBindings[pvWithIndex.index]
);
var parentVariableNames =
isPresent(pvWithIndex.parentIndex) ? nestedPvVariableNames[pvWithIndex.parentIndex] : null;
nestedPvVariableNames[pvWithIndex.index] =
_createVariableNames(parentVariableNames, nestedPvVariableBindings[pvWithIndex.index]);
});
return nestedPvVariableNames;
}
function _createVariableNames(parentVariableNames, variableBindings):List {
function _createVariableNames(parentVariableNames, variableBindings): List<string> {
var variableNames = isPresent(parentVariableNames) ? ListWrapper.clone(parentVariableNames) : [];
MapWrapper.forEach(variableBindings, (local, v) => {
ListWrapper.push(variableNames, local);
});
MapWrapper.forEach(variableBindings, (local, v) => { ListWrapper.push(variableNames, local); });
return variableNames;
}
function _createElementBinders(protoView, elementBinders, allDirectiveBindings) {
for (var i=0; i<elementBinders.length; i++) {
for (var i = 0; i < elementBinders.length; i++) {
var renderElementBinder = elementBinders[i];
var dirs = elementBinders[i].directives;
var parentPeiWithDistance = _findParentProtoElementInjectorWithDistance(
i, protoView.elementBinders, elementBinders);
var directiveBindings = ListWrapper.map(dirs, (dir) => allDirectiveBindings[dir.directiveIndex] );
var parentPeiWithDistance =
_findParentProtoElementInjectorWithDistance(i, protoView.elementBinders, elementBinders);
var directiveBindings =
ListWrapper.map(dirs, (dir) => allDirectiveBindings[dir.directiveIndex]);
var componentDirectiveBinding = null;
if (directiveBindings.length > 0) {
if (directiveBindings[0].metadata.type === renderApi.DirectiveMetadata.COMPONENT_TYPE) {
componentDirectiveBinding = directiveBindings[0];
}
}
var protoElementInjector = _createProtoElementInjector(
i, parentPeiWithDistance, renderElementBinder, componentDirectiveBinding, directiveBindings);
var protoElementInjector =
_createProtoElementInjector(i, parentPeiWithDistance, renderElementBinder,
componentDirectiveBinding, directiveBindings);
_createElementBinder(protoView, i, renderElementBinder, protoElementInjector, componentDirectiveBinding);
_createElementBinder(protoView, i, renderElementBinder, protoElementInjector,
componentDirectiveBinding);
}
}
function _findParentProtoElementInjectorWithDistance(binderIndex, elementBinders, renderElementBinders) {
function _findParentProtoElementInjectorWithDistance(
binderIndex, elementBinders, renderElementBinders): ParentProtoElementInjectorWithDistance {
var distance = 0;
do {
var renderElementBinder = renderElementBinders[binderIndex];
@ -305,14 +308,16 @@ function _findParentProtoElementInjectorWithDistance(binderIndex, elementBinders
distance += renderElementBinder.distanceToParent;
var elementBinder = elementBinders[binderIndex];
if (isPresent(elementBinder.protoElementInjector)) {
return new ParentProtoElementInjectorWithDistance(elementBinder.protoElementInjector, distance);
return new ParentProtoElementInjectorWithDistance(elementBinder.protoElementInjector,
distance);
}
}
} while (binderIndex !== -1);
return new ParentProtoElementInjectorWithDistance(null, -1);
}
function _createProtoElementInjector(binderIndex, parentPeiWithDistance, renderElementBinder, componentDirectiveBinding, directiveBindings) {
function _createProtoElementInjector(binderIndex, parentPeiWithDistance, renderElementBinder,
componentDirectiveBinding, directiveBindings) {
var protoElementInjector = null;
// Create a protoElementInjector for any element that either has bindings *or* has one
// or more var- defined. Elements with a var- defined need a their own element injector
@ -320,10 +325,8 @@ function _createProtoElementInjector(binderIndex, parentPeiWithDistance, renderE
var hasVariables = MapWrapper.size(renderElementBinder.variableBindings) > 0;
if (directiveBindings.length > 0 || hasVariables) {
protoElementInjector = ProtoElementInjector.create(
parentPeiWithDistance.protoElementInjector, binderIndex,
directiveBindings,
isPresent(componentDirectiveBinding), parentPeiWithDistance.distance
);
parentPeiWithDistance.protoElementInjector, binderIndex, directiveBindings,
isPresent(componentDirectiveBinding), parentPeiWithDistance.distance);
protoElementInjector.attributes = renderElementBinder.readAttributes;
if (hasVariables) {
protoElementInjector.exportComponent = isPresent(componentDirectiveBinding);
@ -339,17 +342,14 @@ function _createProtoElementInjector(binderIndex, parentPeiWithDistance, renderE
return protoElementInjector;
}
function _createElementBinder(protoView, boundElementIndex, renderElementBinder, protoElementInjector, componentDirectiveBinding) {
function _createElementBinder(protoView, boundElementIndex, renderElementBinder,
protoElementInjector, componentDirectiveBinding): ElementBinder {
var parent = null;
if (renderElementBinder.parentIndex !== -1) {
parent = protoView.elementBinders[renderElementBinder.parentIndex];
}
var elBinder = protoView.bindElement(
parent,
renderElementBinder.distanceToParent,
protoElementInjector,
componentDirectiveBinding
);
var elBinder = protoView.bindElement(parent, renderElementBinder.distanceToParent,
protoElementInjector, componentDirectiveBinding);
protoView.bindEvent(renderElementBinder.eventBindings, boundElementIndex, -1);
// variables
// The view's locals needs to have a full set of variable names at construction time
@ -362,7 +362,7 @@ function _createElementBinder(protoView, boundElementIndex, renderElementBinder,
return elBinder;
}
function _bindDirectiveEvents(protoView, elementBinders:List<renderApi.ElementBinder>) {
function _bindDirectiveEvents(protoView, elementBinders: List<renderApi.ElementBinder>) {
for (var boundElementIndex = 0; boundElementIndex < elementBinders.length; ++boundElementIndex) {
var dirs = elementBinders[boundElementIndex].directives;
for (var i = 0; i < dirs.length; i++) {
@ -376,11 +376,12 @@ function _bindDirectiveEvents(protoView, elementBinders:List<renderApi.ElementBi
class RenderProtoViewWithIndex {
renderProtoView:renderApi.ProtoViewDto;
index:number;
parentIndex:number;
boundElementIndex:number;
constructor(renderProtoView:renderApi.ProtoViewDto, index:number, parentIndex:number, boundElementIndex:number) {
renderProtoView: renderApi.ProtoViewDto;
index: number;
parentIndex: number;
boundElementIndex: number;
constructor(renderProtoView: renderApi.ProtoViewDto, index: number, parentIndex: number,
boundElementIndex: number) {
this.renderProtoView = renderProtoView;
this.index = index;
this.parentIndex = parentIndex;
@ -389,9 +390,9 @@ class RenderProtoViewWithIndex {
}
class ParentProtoElementInjectorWithDistance {
protoElementInjector:ProtoElementInjector;
distance:number;
constructor(protoElementInjector:ProtoElementInjector, distance:number) {
protoElementInjector: ProtoElementInjector;
distance: number;
constructor(protoElementInjector: ProtoElementInjector, distance: number) {
this.protoElementInjector = protoElementInjector;
this.distance = distance;
}

41
modules/angular2/src/core/compiler/query_list.js → modules/angular2/src/core/compiler/query_list.ts
View File

@ -6,15 +6,18 @@ import {BaseQueryList} from './base_query_list';
* Injectable Objects that contains a live list of child directives in the light DOM of a directive.
* The directives are kept in depth-first pre-order traversal of the DOM.
*
* The `QueryList` is iterable, therefore it can be used in both javascript code with `for..of` loop as well as in
* The `QueryList` is iterable, therefore it can be used in both javascript code with `for..of` loop
* as well as in
* template with `*ng-for="of"` directive.
*
* NOTE: In the future this class will implement an `Observable` interface. For now it uses a plain list of observable
* NOTE: In the future this class will implement an `Observable` interface. For now it uses a plain
* list of observable
* callbacks.
*
* # Example:
*
* Assume that `<tabs>` component would like to get a list its children which are `<pane>` components as shown in this
* Assume that `<tabs>` component would like to get a list its children which are `<pane>`
* components as shown in this
* example:
*
* ```html
@ -24,15 +27,21 @@ import {BaseQueryList} from './base_query_list';
* </tabs>
* ```
*
* In the above example the list of `<tabs>` elements needs to get a list of `<pane>` elements so that it could render
* In the above example the list of `<tabs>` elements needs to get a list of `<pane>` elements so
* that it could render
* tabs with the correct titles and in the correct order.
*
* A possible solution would be for a `<pane>` to inject `<tabs>` component and then register itself with `<tabs>`
* component's on `hydrate` and deregister on `dehydrate` event. While a reasonable approach, this would only work
* partialy since `*ng-for` could rearange the list of `<pane>` components which would not be reported to `<tabs>`
* component and thus the list of `<pane>` componets would be out of sync with respect to the list of `<pane>` elements.
* A possible solution would be for a `<pane>` to inject `<tabs>` component and then register itself
* with `<tabs>`
* component's on `hydrate` and deregister on `dehydrate` event. While a reasonable approach, this
* would only work
* partialy since `*ng-for` could rearange the list of `<pane>` components which would not be
* reported to `<tabs>`
* component and thus the list of `<pane>` componets would be out of sync with respect to the list
* of `<pane>` elements.
*
* A preferred solution is to inject a `QueryList` which is a live list of directives in the component`s light DOM.
* A preferred solution is to inject a `QueryList` which is a live list of directives in the
* component`s light DOM.
*
* ```javascript
* @Component({
@ -67,17 +76,11 @@ import {BaseQueryList} from './base_query_list';
* @exportedAs angular2/view
*/
export class QueryList extends BaseQueryList {
/**
*/
onChange(callback) { return super.onChange(callback); }
/**
*/
onChange(callback) {
return super.onChange(callback);
}
/**
*/
removeCallback(callback) {
return super.removeCallback(callback);
}
removeCallback(callback) { return super.removeCallback(callback); }
}

8
modules/angular2/src/core/compiler/template_resolver.js → modules/angular2/src/core/compiler/template_resolver.ts
View File

@ -1,4 +1,4 @@
import {Injectable} from 'angular2/src/di/annotations_impl';
import {Injectable} from 'angular2/di';
import {View} from 'angular2/src/core/annotations_impl/view';
import {Type, stringify, isBlank, BaseException} from 'angular2/src/facade/lang';
@ -9,11 +9,9 @@ import {reflector} from 'angular2/src/reflection/reflection';
@Injectable()
export class TemplateResolver {
_cache: Map;
_cache: Map<Type, /*node*/ any>;
constructor() {
this._cache = MapWrapper.create();
}
constructor() { this._cache = MapWrapper.create(); }
resolve(component: Type): View {
var view = MapWrapper.get(this._cache, component);

98
modules/angular2/src/core/compiler/view.js → modules/angular2/src/core/compiler/view.ts
View File

@ -1,10 +1,24 @@
import {ListWrapper, MapWrapper, Map, StringMapWrapper, List} from 'angular2/src/facade/collection';
import {AST, Locals, ChangeDispatcher, ProtoChangeDetector, ChangeDetector,
ChangeRecord, BindingRecord, DirectiveRecord, DirectiveIndex, ChangeDetectorRef} from 'angular2/change_detection';
import {
AST,
Locals,
ChangeDispatcher,
ProtoChangeDetector,
ChangeDetector,
BindingRecord,
DirectiveRecord,
DirectiveIndex,
ChangeDetectorRef
} from 'angular2/change_detection';
import {ProtoElementInjector, ElementInjector, PreBuiltObjects, DirectiveBinding} from './element_injector';
import {
ProtoElementInjector,
ElementInjector,
PreBuiltObjects,
DirectiveBinding
} from './element_injector';
import {ElementBinder} from './element_binder';
import {IMPLEMENTS, int, isPresent, isBlank, BaseException} from 'angular2/src/facade/lang';
import {int, isPresent, isBlank, BaseException} from 'angular2/src/facade/lang';
import * as renderApi from 'angular2/src/render/api';
import {EventDispatcher} from 'angular2/src/render/api';
@ -21,22 +35,18 @@ export class AppViewContainer {
* Const of making objects: http://jsperf.com/instantiate-size-of-object
*
*/
@IMPLEMENTS(ChangeDispatcher)
@IMPLEMENTS(EventDispatcher)
export class AppView {
render:renderApi.RenderViewRef;
export class AppView implements ChangeDispatcher, EventDispatcher {
render: renderApi.RenderViewRef;
/// This list matches the _nodes list. It is sparse, since only Elements have ElementInjector
rootElementInjectors:List<ElementInjector>;
elementInjectors:List<ElementInjector>;
changeDetector:ChangeDetector;
rootElementInjectors: List<ElementInjector>;
elementInjectors: List<ElementInjector>;
changeDetector: ChangeDetector;
componentChildViews: List<AppView>;
/// Host views that were added by an imperative view.
/// This is a dynamically growing / shrinking array.
freeHostViews: List<AppView>;
viewContainers: List<AppViewContainer>;
preBuiltObjects: List<PreBuiltObjects>;
proto: AppProtoView;
renderer: renderApi.Renderer;
/**
* The context against which data-binding expressions in this view are evaluated against.
@ -50,11 +60,11 @@ export class AppView {
* context). This is used for thing like `<video #player>` or
* `<li template="for #item of items">`, where "player" and "item" are locals, respectively.
*/
locals:Locals;
locals: Locals;
constructor(renderer:renderApi.Renderer, proto:AppProtoView, protoLocals:Map) {
constructor(public renderer: renderApi.Renderer, public proto: AppProtoView,
protoLocals: Map<string, any>) {
this.render = null;
this.proto = proto;
this.changeDetector = null;
this.elementInjectors = null;
this.rootElementInjectors = null;
@ -62,13 +72,13 @@ export class AppView {
this.viewContainers = ListWrapper.createFixedSize(this.proto.elementBinders.length);
this.preBuiltObjects = null;
this.context = null;
this.locals = new Locals(null, MapWrapper.clone(protoLocals)); //TODO optimize this
this.renderer = renderer;
this.locals = new Locals(null, MapWrapper.clone(protoLocals)); // TODO optimize this
this.freeHostViews = [];
}
init(changeDetector:ChangeDetector, elementInjectors:List, rootElementInjectors:List,
preBuiltObjects:List, componentChildViews:List) {
init(changeDetector: ChangeDetector, elementInjectors: List<ElementInjector>,
rootElementInjectors: List<ElementInjector>, preBuiltObjects: List<PreBuiltObjects>,
componentChildViews: List<AppView>) {
this.changeDetector = changeDetector;
this.elementInjectors = elementInjectors;
this.rootElementInjectors = rootElementInjectors;
@ -76,7 +86,7 @@ export class AppView {
this.componentChildViews = componentChildViews;
}
setLocal(contextName: string, value):void {
setLocal(contextName: string, value): void {
if (!this.hydrated()) throw new BaseException('Cannot set locals on dehydrated view.');
if (!MapWrapper.contains(this.proto.variableBindings, contextName)) {
return;
@ -85,9 +95,7 @@ export class AppView {
this.locals.set(templateName, value);
}
hydrated():boolean {
return isPresent(this.context);
}
hydrated(): boolean { return isPresent(this.context); }
/**
* Triggers the event handlers for the element and the directives.
@ -105,34 +113,32 @@ export class AppView {
}
// dispatch to element injector or text nodes based on context
notifyOnBinding(b:BindingRecord, currentValue:any): void {
notifyOnBinding(b: BindingRecord, currentValue: any): void {
if (b.isElement()) {
this.renderer.setElementProperty(
this.render, b.elementIndex, b.propertyName, currentValue
);
this.renderer.setElementProperty(this.render, b.elementIndex, b.propertyName, currentValue);
} else {
// we know it refers to _textNodes.
this.renderer.setText(this.render, b.elementIndex, currentValue);
}
}
getDirectiveFor(directive:DirectiveIndex) {
getDirectiveFor(directive: DirectiveIndex) {
var elementInjector = this.elementInjectors[directive.elementIndex];
return elementInjector.getDirectiveAtIndex(directive.directiveIndex);
}
getDetectorFor(directive:DirectiveIndex) {
getDetectorFor(directive: DirectiveIndex) {
var childView = this.componentChildViews[directive.elementIndex];
return isPresent(childView) ? childView.changeDetector : null;
}
callAction(elementIndex:number, actionExpression:string, action:Object) {
callAction(elementIndex: number, actionExpression: string, action: Object) {
this.renderer.callAction(this.render, elementIndex, actionExpression, action);
}
// implementation of EventDispatcher#dispatchEvent
// returns false if preventDefault must be applied to the DOM event
dispatchEvent(elementIndex:number, eventName:string, locals:Map<string, any>): boolean {
dispatchEvent(elementIndex: number, eventName: string, locals: Map<string, any>): boolean {
// Most of the time the event will be fired only when the view is in the live document.
// However, in a rare circumstance the view might get dehydrated, in between the event
// queuing up and firing.
@ -163,33 +169,26 @@ export class AppView {
*
*/
export class AppProtoView {
elementBinders:List<ElementBinder>;
protoChangeDetector:ProtoChangeDetector;
variableBindings: Map;
protoLocals:Map;
bindings:List;
render:renderApi.RenderProtoViewRef;
elementBinders: List<ElementBinder>;
protoLocals: Map<string, any>;
constructor(
render:renderApi.RenderProtoViewRef,
protoChangeDetector:ProtoChangeDetector,
variableBindings:Map) {
this.render = render;
constructor(public render: renderApi.RenderProtoViewRef,
public protoChangeDetector: ProtoChangeDetector,
public variableBindings: Map<string, string>) {
this.elementBinders = [];
this.variableBindings = variableBindings;
this.protoLocals = MapWrapper.create();
if (isPresent(variableBindings)) {
MapWrapper.forEach(variableBindings, (templateName, _) => {
MapWrapper.set(this.protoLocals, templateName, null);
});
}
this.protoChangeDetector = protoChangeDetector;
}
bindElement(parent:ElementBinder, distanceToParent:int, protoElementInjector:ProtoElementInjector,
componentDirective:DirectiveBinding = null):ElementBinder {
bindElement(parent: ElementBinder, distanceToParent: int,
protoElementInjector: ProtoElementInjector,
componentDirective: DirectiveBinding = null): ElementBinder {
var elBinder = new ElementBinder(this.elementBinders.length, parent, distanceToParent,
protoElementInjector, componentDirective);
protoElementInjector, componentDirective);
ListWrapper.push(this.elementBinders, elBinder);
return elBinder;
}
@ -207,7 +206,8 @@ export class AppProtoView {
* @param {int} directiveIndex The directive index in the binder or -1 when the event is not bound
* to a directive
*/
bindEvent(eventBindings: List<renderApi.EventBinding>, boundElementIndex:number, directiveIndex: int = -1): void {
bindEvent(eventBindings: List<renderApi.EventBinding>, boundElementIndex: number,
directiveIndex: int = -1): void {
var elBinder = this.elementBinders[boundElementIndex];
var events = elBinder.hostListeners;
if (isBlank(events)) {

71
modules/angular2/src/core/compiler/view_container_ref.js vendored
View File

@ -1,71 +0,0 @@
import {ListWrapper, List} from 'angular2/src/facade/collection';
import {Injector} from 'angular2/di';
import {isPresent, isBlank} from 'angular2/src/facade/lang';
import * as avmModule from './view_manager';
import {ElementRef} from './element_ref';
import {ViewRef, ProtoViewRef, internalView} from './view_ref';
/**
* @exportedAs angular2/core
*/
export class ViewContainerRef {
_viewManager: avmModule.AppViewManager;
_element: ElementRef;
constructor(viewManager: avmModule.AppViewManager,
element: ElementRef) {
this._viewManager = viewManager;
this._element = element;
}
_getViews() {
var vc = internalView(this._element.parentView).viewContainers[this._element.boundElementIndex];
return isPresent(vc) ? vc.views : [];
}
clear():void {
for (var i = this.length - 1; i >= 0; i--) {
this.remove(i);
}
}
get(index: number): ViewRef {
return new ViewRef(this._getViews()[index]);
}
get length() /* :int */ {
return this._getViews().length;
}
// TODO(rado): profile and decide whether bounds checks should be added
// to the methods below.
create(protoViewRef:ProtoViewRef = null, atIndex:number=-1, context:ElementRef, injector:Injector = null): ViewRef {
if (atIndex == -1) atIndex = this.length;
return this._viewManager.createViewInContainer(this._element, atIndex, protoViewRef, context, injector);
}
insert(viewRef:ViewRef, atIndex:number=-1): ViewRef {
if (atIndex == -1) atIndex = this.length;
return this._viewManager.attachViewInContainer(this._element, atIndex, viewRef);
}
indexOf(viewRef:ViewRef) {
return ListWrapper.indexOf(this._getViews(), internalView(viewRef));
}
remove(atIndex:number=-1):void {
if (atIndex == -1) atIndex = this.length - 1;
this._viewManager.destroyViewInContainer(this._element, atIndex);
// view is intentionally not returned to the client.
}
/**
* 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:number=-1): ViewRef {
if (atIndex == -1) atIndex = this.length - 1;
return this._viewManager.detachViewInContainer(this._element, atIndex);
}
}

61
modules/angular2/src/core/compiler/view_container_ref.ts Normal file
View File

@ -0,0 +1,61 @@
import {ListWrapper, List} from 'angular2/src/facade/collection';
import {Injector} from 'angular2/di';
import {isPresent, isBlank} from 'angular2/src/facade/lang';
import * as avmModule from './view_manager';
import * as viewModule from './view';
import {ElementRef} from './element_ref';
import {ViewRef, ProtoViewRef, internalView} from './view_ref';
/**
* @exportedAs angular2/core
*/
export class ViewContainerRef {
constructor(public viewManager: avmModule.AppViewManager, public element: ElementRef) {}
private _getViews(): List<viewModule.AppView> {
var vc = internalView(this.element.parentView).viewContainers[this.element.boundElementIndex];
return isPresent(vc) ? vc.views : [];
}
clear(): void {
for (var i = this.length - 1; i >= 0; i--) {
this.remove(i);
}
}
get(index: number): ViewRef { return new ViewRef(this._getViews()[index]); }
get length() /* :int */ { return this._getViews().length; }
// TODO(rado): profile and decide whether bounds checks should be added
// to the methods below.
create(protoViewRef: ProtoViewRef = null, atIndex: number = -1, context: ElementRef = null,
injector: Injector = null): ViewRef {
if (atIndex == -1) atIndex = this.length;
return this.viewManager.createViewInContainer(this.element, atIndex, protoViewRef, context,
injector);
}
insert(viewRef: ViewRef, atIndex: number = -1): ViewRef {
if (atIndex == -1) atIndex = this.length;
return this.viewManager.attachViewInContainer(this.element, atIndex, viewRef);
}
indexOf(viewRef: ViewRef) { return ListWrapper.indexOf(this._getViews(), internalView(viewRef)); }
remove(atIndex: number = -1): void {
if (atIndex == -1) atIndex = this.length - 1;
this.viewManager.destroyViewInContainer(this.element, atIndex);
// view is intentionally not returned to the client.
}
/**
* 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: number = -1): ViewRef {
if (atIndex == -1) atIndex = this.length - 1;
return this.viewManager.detachViewInContainer(this.element, atIndex);
}
}

95
modules/angular2/src/core/compiler/view_manager.js → modules/angular2/src/core/compiler/view_manager.ts
View File

@ -1,5 +1,4 @@
import {Injector, Binding} from 'angular2/di';
import {Injectable} from 'angular2/src/di/annotations_impl';
import {Injector, Binding, Injectable} from 'angular2/di';
import {isPresent, isBlank, BaseException} from 'angular2/src/facade/lang';
import * as viewModule from './view';
import {ElementRef} from './element_ref';
@ -16,53 +15,56 @@ import {AppViewPool} from './view_pool';
*/
@Injectable()
export class AppViewManager {
_viewPool:AppViewPool;
_utils:AppViewManagerUtils;
_renderer:Renderer;
_viewPool: AppViewPool;
_utils: AppViewManagerUtils;
_renderer: Renderer;
constructor(viewPool:AppViewPool, utils:AppViewManagerUtils, renderer:Renderer) {
constructor(viewPool: AppViewPool, utils: AppViewManagerUtils, renderer: Renderer) {
this._renderer = renderer;
this._viewPool = viewPool;
this._utils = utils;
}
getComponentView(hostLocation:ElementRef):ViewRef {
getComponentView(hostLocation: ElementRef): ViewRef {
var hostView = internalView(hostLocation.parentView);
var boundElementIndex = hostLocation.boundElementIndex;
return new ViewRef(hostView.componentChildViews[boundElementIndex]);
}
getViewContainer(location:ElementRef):ViewContainerRef {
getViewContainer(location: ElementRef): ViewContainerRef {
var hostView = internalView(location.parentView);
return hostView.elementInjectors[location.boundElementIndex].getViewContainerRef();
}
getComponent(hostLocation:ElementRef):any {
getComponent(hostLocation: ElementRef): any {
var hostView = internalView(hostLocation.parentView);
var boundElementIndex = hostLocation.boundElementIndex;
return this._utils.getComponentInstance(hostView, boundElementIndex);
}
createDynamicComponentView(hostLocation:ElementRef,
componentProtoViewRef:ProtoViewRef, componentBinding:Binding, injector:Injector):ViewRef {
createDynamicComponentView(hostLocation: ElementRef, componentProtoViewRef: ProtoViewRef,
componentBinding: Binding, injector: Injector): ViewRef {
var componentProtoView = internalProtoView(componentProtoViewRef);
var hostView = internalView(hostLocation.parentView);
var boundElementIndex = hostLocation.boundElementIndex;
var binder = hostView.proto.elementBinders[boundElementIndex];
if (!binder.hasDynamicComponent()) {
throw new BaseException(`There is no dynamic component directive at element ${boundElementIndex}`)
throw new BaseException(
`There is no dynamic component directive at element ${boundElementIndex}`)
}
var componentView = this._createPooledView(componentProtoView);
this._renderer.attachComponentView(hostView.render, boundElementIndex, componentView.render);
this._utils.attachComponentView(hostView, boundElementIndex, componentView);
this._utils.hydrateDynamicComponentInElementInjector(hostView, boundElementIndex, componentBinding, injector);
this._utils.hydrateDynamicComponentInElementInjector(hostView, boundElementIndex,
componentBinding, injector);
this._utils.hydrateComponentView(hostView, boundElementIndex);
this._viewHydrateRecurse(componentView);
return new ViewRef(componentView);
}
createRootHostView(hostProtoViewRef:ProtoViewRef, overrideSelector:string, injector:Injector):ViewRef {
createRootHostView(hostProtoViewRef: ProtoViewRef, overrideSelector: string,
injector: Injector): ViewRef {
var hostProtoView = internalProtoView(hostProtoViewRef);
var hostElementSelector = overrideSelector;
if (isBlank(hostElementSelector)) {
@ -78,7 +80,7 @@ export class AppViewManager {
return new ViewRef(hostView);
}
destroyRootHostView(hostViewRef:ViewRef) {
destroyRootHostView(hostViewRef: ViewRef) {
// Note: Don't detach the hostView as we want to leave the
// root element in place. Also don't put the hostView into the view pool
// as it is depending on the element for which it was created.
@ -88,24 +90,28 @@ export class AppViewManager {
this._renderer.destroyView(hostView.render);
}
createFreeHostView(parentComponentLocation:ElementRef, hostProtoViewRef:ProtoViewRef, injector:Injector):ViewRef {
createFreeHostView(parentComponentLocation: ElementRef, hostProtoViewRef: ProtoViewRef,
injector: Injector): ViewRef {
var hostProtoView = internalProtoView(hostProtoViewRef);
var hostView = this._createPooledView(hostProtoView);
var parentComponentHostView = internalView(parentComponentLocation.parentView);
var parentComponentBoundElementIndex = parentComponentLocation.boundElementIndex;
this._utils.attachAndHydrateFreeHostView(parentComponentHostView, parentComponentBoundElementIndex, hostView, injector);
this._utils.attachAndHydrateFreeHostView(parentComponentHostView,
parentComponentBoundElementIndex, hostView, injector);
this._viewHydrateRecurse(hostView);
return new ViewRef(hostView);
}
destroyFreeHostView(parentComponentLocation:ElementRef, hostViewRef:ViewRef) {
destroyFreeHostView(parentComponentLocation: ElementRef, hostViewRef: ViewRef) {
var hostView = internalView(hostViewRef);
var parentView = internalView(parentComponentLocation.parentView).componentChildViews[parentComponentLocation.boundElementIndex];
var parentView = internalView(parentComponentLocation.parentView)
.componentChildViews[parentComponentLocation.boundElementIndex];
this._destroyFreeHostView(parentView, hostView);
}
createViewInContainer(viewContainerLocation:ElementRef,
atIndex:number, protoViewRef:ProtoViewRef, context:ElementRef = null, injector:Injector = null):ViewRef {
createViewInContainer(viewContainerLocation: ElementRef, atIndex: number,
protoViewRef: ProtoViewRef, context: ElementRef = null,
injector: Injector = null): ViewRef {
var protoView = internalProtoView(protoViewRef);
var parentView = internalView(viewContainerLocation.parentView);
var boundElementIndex = viewContainerLocation.boundElementIndex;
@ -118,20 +124,24 @@ export class AppViewManager {
var view = this._createPooledView(protoView);
this._renderer.attachViewInContainer(parentView.render, boundElementIndex, atIndex, view.render);
this._utils.attachViewInContainer(parentView, boundElementIndex, contextView, contextBoundElementIndex, atIndex, view);
this._utils.hydrateViewInContainer(parentView, boundElementIndex, contextView, contextBoundElementIndex, atIndex, injector);
this._renderer.attachViewInContainer(parentView.render, boundElementIndex, atIndex,
view.render);
this._utils.attachViewInContainer(parentView, boundElementIndex, contextView,
contextBoundElementIndex, atIndex, view);
this._utils.hydrateViewInContainer(parentView, boundElementIndex, contextView,
contextBoundElementIndex, atIndex, injector);
this._viewHydrateRecurse(view);
return new ViewRef(view);
}
destroyViewInContainer(viewContainerLocation:ElementRef, atIndex:number) {
destroyViewInContainer(viewContainerLocation: ElementRef, atIndex: number) {
var parentView = internalView(viewContainerLocation.parentView);
var boundElementIndex = viewContainerLocation.boundElementIndex;
this._destroyViewInContainer(parentView, boundElementIndex, atIndex);
}
attachViewInContainer(viewContainerLocation:ElementRef, atIndex:number, viewRef:ViewRef):ViewRef {
attachViewInContainer(viewContainerLocation: ElementRef, atIndex: number,
viewRef: ViewRef): ViewRef {
var view = internalView(viewRef);
var parentView = internalView(viewContainerLocation.parentView);
var boundElementIndex = viewContainerLocation.boundElementIndex;
@ -142,31 +152,34 @@ export class AppViewManager {
// Right now we are destroying any special
// context view that might have been used.
this._utils.attachViewInContainer(parentView, boundElementIndex, null, null, atIndex, view);
this._renderer.attachViewInContainer(parentView.render, boundElementIndex, atIndex, view.render);
this._renderer.attachViewInContainer(parentView.render, boundElementIndex, atIndex,
view.render);
return viewRef;
}
detachViewInContainer(viewContainerLocation:ElementRef, atIndex:number):ViewRef {
detachViewInContainer(viewContainerLocation: ElementRef, atIndex: number): ViewRef {
var parentView = internalView(viewContainerLocation.parentView);
var boundElementIndex = viewContainerLocation.boundElementIndex;
var viewContainer = parentView.viewContainers[boundElementIndex];
var view = viewContainer.views[atIndex];
this._utils.detachViewInContainer(parentView, boundElementIndex, atIndex);
this._renderer.detachViewInContainer(parentView.render, boundElementIndex, atIndex, view.render);
this._renderer.detachViewInContainer(parentView.render, boundElementIndex, atIndex,
view.render);
return new ViewRef(view);
}
_createPooledView(protoView:viewModule.AppProtoView):viewModule.AppView {
_createPooledView(protoView: viewModule.AppProtoView): viewModule.AppView {
var view = this._viewPool.getView(protoView);
if (isBlank(view)) {
view = this._utils.createView(protoView, this._renderer.createView(protoView.render), this, this._renderer);
view = this._utils.createView(protoView, this._renderer.createView(protoView.render), this,
this._renderer);
this._renderer.setEventDispatcher(view.render, view);
this._createViewRecurse(view);
}
return view;
}
_createViewRecurse(view:viewModule.AppView) {
_createViewRecurse(view: viewModule.AppView) {
var binders = view.proto.elementBinders;
for (var binderIdx = 0; binderIdx < binders.length; binderIdx++) {
var binder = binders[binderIdx];
@ -178,17 +191,18 @@ export class AppViewManager {
}
}
_destroyPooledView(view:viewModule.AppView) {
_destroyPooledView(view: viewModule.AppView) {
// TODO: if the pool is full, call renderer.destroyView as well!
this._viewPool.returnView(view);
}
_destroyViewInContainer(parentView, boundElementIndex, atIndex:number) {
_destroyViewInContainer(parentView, boundElementIndex, atIndex: number) {
var viewContainer = parentView.viewContainers[boundElementIndex];
var view = viewContainer.views[atIndex];
this._viewDehydrateRecurse(view, false);
this._utils.detachViewInContainer(parentView, boundElementIndex, atIndex);
this._renderer.detachViewInContainer(parentView.render, boundElementIndex, atIndex, view.render);
this._renderer.detachViewInContainer(parentView.render, boundElementIndex, atIndex,
view.render);
this._destroyPooledView(view);
}
@ -206,22 +220,19 @@ export class AppViewManager {
this._destroyPooledView(hostView);
}
_viewHydrateRecurse(
view:viewModule.AppView) {
_viewHydrateRecurse(view: viewModule.AppView) {
this._renderer.hydrateView(view.render);
var binders = view.proto.elementBinders;
for (var i = 0; i < binders.length; ++i) {
if (binders[i].hasStaticComponent()) {
this._utils.hydrateComponentView(view, i);
this._viewHydrateRecurse(
view.componentChildViews[i]
);
this._viewHydrateRecurse(view.componentChildViews[i]);
}
}
}
_viewDehydrateRecurse(view:viewModule.AppView, forceDestroyComponents) {
_viewDehydrateRecurse(view: viewModule.AppView, forceDestroyComponents) {
this._utils.dehydrateView(view);
this._renderer.dehydrateView(view.render);
var binders = view.proto.elementBinders;
@ -243,7 +254,7 @@ export class AppViewManager {
}
// freeHostViews
for (var i = view.freeHostViews.length-1; i>=0; i--) {
for (var i = view.freeHostViews.length - 1; i >= 0; i--) {
var hostView = view.freeHostViews[i];
this._destroyFreeHostView(view, hostView);
}

80
modules/angular2/src/core/compiler/view_manager_utils.js → modules/angular2/src/core/compiler/view_manager_utils.ts
View File

@ -1,24 +1,21 @@
import {Injector, Binding} from 'angular2/di';
import {Injectable} from 'angular2/src/di/annotations_impl';
import {Injector, Binding, Injectable} from 'angular2/di';
import {ListWrapper, MapWrapper, Map, StringMapWrapper, List} from 'angular2/src/facade/collection';
import * as eli from './element_injector';
import {isPresent, isBlank, BaseException} from 'angular2/src/facade/lang';
import * as viewModule from './view';
import * as avmModule from './view_manager';
import {Renderer} from 'angular2/src/render/api';
import {BindingPropagationConfig, Locals} from 'angular2/change_detection';
import {Locals} from 'angular2/change_detection';
import {DirectiveResolver} from './directive_resolver';
import {RenderViewRef} from 'angular2/src/render/api';
@Injectable()
export class AppViewManagerUtils {
_directiveResolver:DirectiveResolver;
_directiveResolver: DirectiveResolver;
constructor(metadataReader:DirectiveResolver) {
this._directiveResolver = metadataReader;
}
constructor(metadataReader: DirectiveResolver) { this._directiveResolver = metadataReader; }
getComponentInstance(parentView:viewModule.AppView, boundElementIndex:number):any {
getComponentInstance(parentView: viewModule.AppView, boundElementIndex: number): any {
var binder = parentView.proto.elementBinders[boundElementIndex];
var eli = parentView.elementInjectors[boundElementIndex];
if (binder.hasDynamicComponent()) {
@ -28,7 +25,8 @@ export class AppViewManagerUtils {
}
}
createView(protoView:viewModule.AppProtoView, renderView:RenderViewRef, viewManager:avmModule.AppViewManager, renderer:Renderer): viewModule.AppView {
createView(protoView: viewModule.AppProtoView, renderView: RenderViewRef,
viewManager: avmModule.AppViewManager, renderer: Renderer): viewModule.AppView {
var view = new viewModule.AppView(renderer, protoView, protoView.protoLocals);
// TODO(tbosch): pass RenderViewRef as argument to AppView!
view.render = renderView;
@ -65,56 +63,56 @@ export class AppViewManagerUtils {
}
}
view.init(changeDetector, elementInjectors, rootElementInjectors,
preBuiltObjects, componentChildViews);
view.init(changeDetector, elementInjectors, rootElementInjectors, preBuiltObjects,
componentChildViews);
return view;
}
attachComponentView(hostView:viewModule.AppView, boundElementIndex:number,
componentView:viewModule.AppView) {
attachComponentView(hostView: viewModule.AppView, boundElementIndex: number,
componentView: viewModule.AppView) {
var childChangeDetector = componentView.changeDetector;
hostView.changeDetector.addShadowDomChild(childChangeDetector);
hostView.componentChildViews[boundElementIndex] = componentView;
}
detachComponentView(hostView:viewModule.AppView, boundElementIndex:number) {
detachComponentView(hostView: viewModule.AppView, boundElementIndex: number) {
var componentView = hostView.componentChildViews[boundElementIndex];
hostView.changeDetector.removeShadowDomChild(componentView.changeDetector);
hostView.componentChildViews[boundElementIndex] = null;
}
hydrateComponentView(hostView:viewModule.AppView, boundElementIndex:number, injector:Injector = null) {
hydrateComponentView(hostView: viewModule.AppView, boundElementIndex: number,
injector: Injector = null) {
var elementInjector = hostView.elementInjectors[boundElementIndex];
var componentView = hostView.componentChildViews[boundElementIndex];
var component = this.getComponentInstance(hostView, boundElementIndex);
this._hydrateView(
componentView, injector, elementInjector, component, null
);
this._hydrateView(componentView, injector, elementInjector, component, null);
}
hydrateRootHostView(hostView:viewModule.AppView, injector:Injector = null) {
hydrateRootHostView(hostView: viewModule.AppView, injector: Injector = null) {
this._hydrateView(hostView, injector, null, new Object(), null);
}
attachAndHydrateFreeHostView(parentComponentHostView:viewModule.AppView, parentComponentBoundElementIndex:number,
hostView:viewModule.AppView, injector:Injector = null) {
var hostElementInjector = parentComponentHostView.elementInjectors[parentComponentBoundElementIndex];
attachAndHydrateFreeHostView(parentComponentHostView: viewModule.AppView,
parentComponentBoundElementIndex: number,
hostView: viewModule.AppView, injector: Injector = null) {
var hostElementInjector =
parentComponentHostView.elementInjectors[parentComponentBoundElementIndex];
var parentView = parentComponentHostView.componentChildViews[parentComponentBoundElementIndex];
parentView.changeDetector.addChild(hostView.changeDetector);
ListWrapper.push(parentView.freeHostViews, hostView);
this._hydrateView(hostView, injector, hostElementInjector, new Object(), null);
}
detachFreeHostView(parentView:viewModule.AppView,
hostView:viewModule.AppView) {
detachFreeHostView(parentView: viewModule.AppView, hostView: viewModule.AppView) {
parentView.changeDetector.removeChild(hostView.changeDetector);
ListWrapper.remove(parentView.freeHostViews, hostView);
}
attachViewInContainer(parentView:viewModule.AppView, boundElementIndex:number,
contextView:viewModule.AppView, contextBoundElementIndex:number,
atIndex:number, view:viewModule.AppView) {
attachViewInContainer(parentView: viewModule.AppView, boundElementIndex: number,
contextView: viewModule.AppView, contextBoundElementIndex: number,
atIndex: number, view: viewModule.AppView) {
if (isBlank(contextView)) {
contextView = parentView;
contextBoundElementIndex = boundElementIndex;
@ -138,7 +136,8 @@ export class AppViewManagerUtils {
}
}
detachViewInContainer(parentView:viewModule.AppView, boundElementIndex:number, atIndex:number) {
detachViewInContainer(parentView: viewModule.AppView, boundElementIndex: number,
atIndex: number) {
var viewContainer = parentView.viewContainers[boundElementIndex];
var view = viewContainer.views[atIndex];
view.changeDetector.remove();
@ -148,9 +147,9 @@ export class AppViewManagerUtils {
}
}
hydrateViewInContainer(parentView:viewModule.AppView, boundElementIndex:number,
contextView:viewModule.AppView, contextBoundElementIndex:number,
atIndex:number, injector:Injector) {
hydrateViewInContainer(parentView: viewModule.AppView, boundElementIndex: number,
contextView: viewModule.AppView, contextBoundElementIndex: number,
atIndex: number, injector: Injector) {
if (isBlank(contextView)) {
contextView = parentView;
contextBoundElementIndex = boundElementIndex;
@ -161,11 +160,12 @@ export class AppViewManagerUtils {
this._hydrateView(view, injector, elementInjector, contextView.context, contextView.locals);
}
hydrateDynamicComponentInElementInjector(hostView:viewModule.AppView, boundElementIndex:number,
componentBinding:Binding, injector:Injector = null) {
hydrateDynamicComponentInElementInjector(hostView: viewModule.AppView, boundElementIndex: number,
componentBinding: Binding, injector: Injector = null) {
var elementInjector = hostView.elementInjectors[boundElementIndex];
if (isPresent(elementInjector.getDynamicallyLoadedComponent())) {
throw new BaseException(`There already is a dynamic component loaded at element ${boundElementIndex}`);
throw new BaseException(
`There already is a dynamic component loaded at element ${boundElementIndex}`);
}
if (isBlank(injector)) {
injector = elementInjector.getLightDomAppInjector();
@ -175,7 +175,8 @@ export class AppViewManagerUtils {
elementInjector.dynamicallyCreateComponent(componentDirective, injector);
}
_hydrateView(view:viewModule.AppView, appInjector:Injector, hostElementInjector:eli.ElementInjector, context: Object, parentLocals:Locals) {
_hydrateView(view: viewModule.AppView, appInjector: Injector,
hostElementInjector: eli.ElementInjector, context: Object, parentLocals: Locals) {
if (isBlank(appInjector)) {
appInjector = hostElementInjector.getShadowDomAppInjector();
}
@ -207,7 +208,8 @@ export class AppViewManagerUtils {
view.changeDetector.hydrate(view.context, view.locals, view);
}
_setUpEventEmitters(view:viewModule.AppView, elementInjector:eli.ElementInjector, boundElementIndex:number) {
_setUpEventEmitters(view: viewModule.AppView, elementInjector: eli.ElementInjector,
boundElementIndex: number) {
var emitters = elementInjector.getEventEmitterAccessors();
for (var directiveIndex = 0; directiveIndex < emitters.length; ++directiveIndex) {
var directiveEmitters = emitters[directiveIndex];
@ -220,7 +222,8 @@ export class AppViewManagerUtils {
}
}
_setUpHostActions(view:viewModule.AppView, elementInjector:eli.ElementInjector, boundElementIndex:number) {
_setUpHostActions(view: viewModule.AppView, elementInjector: eli.ElementInjector,
boundElementIndex: number) {
var hostActions = elementInjector.getHostActionAccessors();
for (var directiveIndex = 0; directiveIndex < hostActions.length; ++directiveIndex) {
var directiveHostActions = hostActions[directiveIndex];
@ -233,7 +236,7 @@ export class AppViewManagerUtils {
}
}
dehydrateView(view:viewModule.AppView) {
dehydrateView(view: viewModule.AppView) {
var binders = view.proto.elementBinders;
for (var i = 0; i < binders.length; ++i) {
var elementInjector = view.elementInjectors[i];
@ -247,5 +250,4 @@ export class AppViewManagerUtils {
view.context = null;
view.changeDetector.dehydrate();
}
}

11
modules/angular2/src/core/compiler/view_pool.js → modules/angular2/src/core/compiler/view_pool.ts
View File

@ -1,4 +1,4 @@
import {Inject} from 'angular2/src/di/annotations_impl';
import {Inject} from 'angular2/di';
import {ListWrapper, MapWrapper, Map, List} from 'angular2/src/facade/collection';
import {isPresent, isBlank} from 'angular2/src/facade/lang';
@ -10,15 +10,15 @@ import * as viewModule from './view';
export const APP_VIEW_POOL_CAPACITY = 'AppViewPool.viewPoolCapacity';
export class AppViewPool {
_poolCapacityPerProtoView:number;
_pooledViewsPerProtoView:Map<viewModule.AppProtoView, List<viewModule.AppView>>;
_poolCapacityPerProtoView: number;
_pooledViewsPerProtoView: Map<viewModule.AppProtoView, List<viewModule.AppView>>;
constructor(@Inject(APP_VIEW_POOL_CAPACITY) poolCapacityPerProtoView) {
this._poolCapacityPerProtoView = poolCapacityPerProtoView;
this._pooledViewsPerProtoView = MapWrapper.create();
}
getView(protoView:viewModule.AppProtoView):viewModule.AppView {
getView(protoView: viewModule.AppProtoView): viewModule.AppView {
var pooledViews = MapWrapper.get(this._pooledViewsPerProtoView, protoView);
if (isPresent(pooledViews) && pooledViews.length > 0) {
return ListWrapper.removeLast(pooledViews);
@ -26,7 +26,7 @@ export class AppViewPool {
return null;
}
returnView(view:viewModule.AppView) {
returnView(view: viewModule.AppView) {
var protoView = view.proto;
var pooledViews = MapWrapper.get(this._pooledViewsPerProtoView, protoView);
if (isBlank(pooledViews)) {
@ -37,5 +37,4 @@ export class AppViewPool {
ListWrapper.push(pooledViews, view);
}
}
}

24
modules/angular2/src/core/compiler/view_ref.js → modules/angular2/src/core/compiler/view_ref.ts
View File

@ -3,12 +3,12 @@ import * as viewModule from './view';
import {RenderViewRef} from 'angular2/src/render/api';
// This is a workaround for privacy in Dart as we don't have library parts
export function internalView(viewRef:ViewRef):viewModule.AppView {
export function internalView(viewRef: ViewRef): viewModule.AppView {
return viewRef._view;
}
// This is a workaround for privacy in Dart as we don't have library parts
export function internalProtoView(protoViewRef:ProtoViewRef):viewModule.AppProtoView {
export function internalProtoView(protoViewRef: ProtoViewRef): viewModule.AppProtoView {
return isPresent(protoViewRef) ? protoViewRef._protoView : null;
}
@ -16,28 +16,20 @@ export function internalProtoView(protoViewRef:ProtoViewRef):viewModule.AppProto
* @exportedAs angular2/view
*/
export class ViewRef {
_view:viewModule.AppView;
_view: viewModule.AppView;
constructor(view:viewModule.AppView) {
this._view = view;
}
constructor(view: viewModule.AppView) { this._view = view; }
get render():RenderViewRef {
return this._view.render;
}
get render(): RenderViewRef { return this._view.render; }
setLocal(contextName:string, value:any):void {
this._view.setLocal(contextName, value);
}
setLocal(contextName: string, value: any): void { this._view.setLocal(contextName, value); }
}
/**
* @exportedAs angular2/view
*/
export class ProtoViewRef {
_protoView:viewModule.AppProtoView;
_protoView: viewModule.AppProtoView;
constructor(protoView) {
this._protoView = protoView;
}
constructor(protoView) { this._protoView = protoView; }
}

8
modules/angular2/src/core/exception_handler.js → modules/angular2/src/core/exception_handler.ts
View File

@ -1,4 +1,4 @@
import {Injectable} from 'angular2/src/di/annotations_impl';
import {Injectable} from 'angular2/di';
import {isPresent, print} from 'angular2/src/facade/lang';
import {ListWrapper, isListLikeIterable} from 'angular2/src/facade/collection';
import {DOM} from 'angular2/src/dom/dom_adapter';
@ -6,7 +6,8 @@ import {DOM} from 'angular2/src/dom/dom_adapter';
/**
* Provides a hook for centralized exception handling.
*
* The default implementation of `ExceptionHandler` prints error messages to the `Console`. To intercept error handling,
* The default implementation of `ExceptionHandler` prints error messages to the `Console`. To
* intercept error handling,
* write a custom exception handler that replaces this default as appropriate for your app.
*
* # Example
@ -35,7 +36,8 @@ import {DOM} from 'angular2/src/dom/dom_adapter';
@Injectable()
export class ExceptionHandler {
call(error, stackTrace = null, reason = null) {
var longStackTrace = isListLikeIterable(stackTrace) ? ListWrapper.join(stackTrace, "\n\n") : stackTrace;
var longStackTrace =
isListLikeIterable(stackTrace) ? ListWrapper.join(stackTrace, "\n\n") : stackTrace;
var reasonStr = isPresent(reason) ? `\n${reason}` : '';
DOM.logError(`${error}${reasonStr}\nSTACKTRACE:\n${longStackTrace}`);
}

76
modules/angular2/src/core/life_cycle/life_cycle.js vendored
View File

@ -1,76 +0,0 @@
import {Injectable} from 'angular2/src/di/annotations_impl';
import {ChangeDetector} from 'angular2/change_detection';
import {NgZone} from 'angular2/src/core/zone/ng_zone';
import {ExceptionHandler} from 'angular2/src/core/exception_handler';
import {isPresent} from 'angular2/src/facade/lang';
/**
* Provides access to explicitly trigger change detection in an application.
*
* By default, `Zone` triggers change detection in Angular on each virtual machine (VM) turn. When testing, or in some
* limited application use cases, a developer can also trigger change detection with the `lifecycle.tick()` method.
*
* Each Angular application has a single `LifeCycle` instance.
*
* # Example
*
* This is a contrived example, since the bootstrap automatically runs inside of the `Zone`, which invokes
* `lifecycle.tick()` on your behalf.
*
* ```javascript
* bootstrap(MyApp).then((ref:ComponentRef) => {
* var lifeCycle = ref.injector.get(LifeCycle);
* var myApp = ref.instance;
*
* ref.doSomething();
* lifecycle.tick();
* });
* ```
* @exportedAs angular2/change_detection
*/
@Injectable()
export class LifeCycle {
_errorHandler;
_changeDetector:ChangeDetector;
_enforceNoNewChanges:boolean;
constructor(exceptionHandler:ExceptionHandler, changeDetector:ChangeDetector = null, enforceNoNewChanges:boolean = false) {
this._errorHandler = (exception, stackTrace) => {
exceptionHandler.call(exception, stackTrace);
throw exception;
};
this._changeDetector = changeDetector; // may be null when instantiated from application bootstrap
this._enforceNoNewChanges = enforceNoNewChanges;
}
/**
* @private
*/
registerWith(zone:NgZone, changeDetector:ChangeDetector = null) {
if (isPresent(changeDetector)) {
this._changeDetector=changeDetector;
}
zone.initCallbacks({
onErrorHandler: this._errorHandler,
onTurnDone: () => this.tick()
});
}
/**
* Invoke this method to explicitly process change detection and its side-effects.
*
* In development mode, `tick()` also performs a second change detection cycle to ensure that no further
* changes are detected. If additional changes are picked up during this second cycle, bindings in the app have
* side-effects that cannot be resolved in a single change detection pass. In this case, Angular throws an error,
* since an Angular application can only have one change detection pass during which all change detection must
* complete.
*
*/
tick() {
this._changeDetector.detectChanges();
if (this._enforceNoNewChanges) {
this._changeDetector.checkNoChanges();
}
}
}

81
modules/angular2/src/core/life_cycle/life_cycle.ts Normal file
View File

@ -0,0 +1,81 @@
import {Injectable} from 'angular2/di';
import {ChangeDetector} from 'angular2/change_detection';
import {NgZone} from 'angular2/src/core/zone/ng_zone';
import {ExceptionHandler} from 'angular2/src/core/exception_handler';
import {isPresent} from 'angular2/src/facade/lang';
/**
* Provides access to explicitly trigger change detection in an application.
*
* By default, `Zone` triggers change detection in Angular on each virtual machine (VM) turn. When
* testing, or in some
* limited application use cases, a developer can also trigger change detection with the
* `lifecycle.tick()` method.
*
* Each Angular application has a single `LifeCycle` instance.
*
* # Example
*
* This is a contrived example, since the bootstrap automatically runs inside of the `Zone`, which
* invokes
* `lifecycle.tick()` on your behalf.
*
* ```javascript
* bootstrap(MyApp).then((ref:ComponentRef) => {
* var lifeCycle = ref.injector.get(LifeCycle);
* var myApp = ref.instance;
*
* ref.doSomething();
* lifecycle.tick();
* });
* ```
* @exportedAs angular2/change_detection
*/
@Injectable()
export class LifeCycle {
_errorHandler;
_changeDetector: ChangeDetector;
_enforceNoNewChanges: boolean;
constructor(exceptionHandler: ExceptionHandler, changeDetector: ChangeDetector = null,
enforceNoNewChanges: boolean = false) {
this._errorHandler = (exception, stackTrace) => { exceptionHandler.call(exception, stackTrace);
throw exception;
};
this._changeDetector =
changeDetector; // may be null when instantiated from application bootstrap
this._enforceNoNewChanges = enforceNoNewChanges;
}
/**
* @private
*/
registerWith(zone: NgZone, changeDetector: ChangeDetector = null) {
if (isPresent(changeDetector)) {
this._changeDetector = changeDetector;
}
zone.initCallbacks({onErrorHandler: this._errorHandler, onTurnDone: () => this.tick()});
}
/**
* Invoke this method to explicitly process change detection and its side-effects.
*
* In development mode, `tick()` also performs a second change detection cycle to ensure that no
* further
* changes are detected. If additional changes are picked up during this second cycle, bindings in
* the app have
* side-effects that cannot be resolved in a single change detection pass. In this case, Angular
* throws an error,
* since an Angular application can only have one change detection pass during which all change
* detection must
* complete.
*
*/
tick() {
this._changeDetector.detectChanges();
if (this._enforceNoNewChanges) {
this._changeDetector.checkNoChanges();
}
}
}

10
modules/angular2/src/core/testability/get_testability.es6 → modules/angular2/src/core/testability/get_testability.ts
View File

@ -2,15 +2,11 @@ import {TestabilityRegistry, Testability} from 'angular2/src/core/testability/te
import {global} from 'angular2/src/facade/lang';
class PublicTestability {
_testabililty: Testability;
_testability: Testability;
constructor(testability: Testability) {
this._testability = testability;
}
constructor(testability: Testability) { this._testability = testability; }
whenStable(callback: Function) {
this._testability.whenStable(callback);
}
whenStable(callback: Function) { this._testability.whenStable(callback); }
findBindings(using, binding: string, exactMatch: boolean) {
return this._testability.findBindings(using, binding, exactMatch);

16
modules/angular2/src/core/testability/testability.js → modules/angular2/src/core/testability/testability.ts
View File

@ -1,8 +1,8 @@
import {Injectable} from 'angular2/src/di/annotations_impl';
import {Injectable} from 'angular2/di';
import {DOM} from 'angular2/src/dom/dom_adapter';
import {Map, MapWrapper, List, ListWrapper} from 'angular2/src/facade/collection';
import {StringWrapper, isBlank, BaseException} from 'angular2/src/facade/lang';
import * as getTestabilityModule from 'angular2/src/core/testability/get_testability';
import * as getTestabilityModule from './get_testability';
/**
@ -13,7 +13,7 @@ import * as getTestabilityModule from 'angular2/src/core/testability/get_testabi
@Injectable()
export class Testability {
_pendingCount: number;
_callbacks: List;
_callbacks: List<Function>;
constructor() {
this._pendingCount = 0;
@ -45,11 +45,9 @@ export class Testability {
// TODO(juliemr) - hook into the zone api.
}
getPendingCount(): number {
return this._pendingCount;
}
getPendingCount(): number { return this._pendingCount; }
findBindings(using, binding: string, exactMatch: boolean): List {
findBindings(using, binding: string, exactMatch: boolean): List<any> {
// TODO(juliemr): implement.
return [];
}
@ -57,7 +55,7 @@ export class Testability {
@Injectable()
export class TestabilityRegistry {
_applications: Map;
_applications: Map<any, Testability>;
constructor() {
this._applications = MapWrapper.create();
@ -69,7 +67,7 @@ export class TestabilityRegistry {
MapWrapper.set(this._applications, token, testability);
}
findTestabilityInTree(elem) : Testability {
findTestabilityInTree(elem): Testability {
if (elem == null) {
return null;
}

6
modules/angular2/src/core/zone/ng_zone.ts
View File

@ -75,9 +75,9 @@ export class NgZone {
* micro task
*/
initCallbacks({onTurnStart, onTurnDone, onErrorHandler}: {
onTurnStart?: () => void,
onTurnDone?: () => void,
onErrorHandler?: (error, stack) => void
onTurnStart?: /*() => void*/ Function,
onTurnDone?: /*() => void*/ Function,
onErrorHandler?: /*(error, stack) => void*/ Function
} = {}) {
this._onTurnStart = normalizeBlank(onTurnStart);
this._onTurnDone = normalizeBlank(onTurnDone);

16
modules/angular2/src/di/injector.ts
View File

@ -67,7 +67,7 @@ function _isWaiting(obj): boolean {
* @exportedAs angular2/di
*/
export class Injector {
private _bindings: List<any>;
private _bindings: List<ResolvedBinding>;
private _instances: List<any>;
private _parent: Injector;
private _defaultBindings: boolean;
@ -90,7 +90,7 @@ export class Injector {
*such as
* `fromResolvedBindings` and `createChildFromResolved`.
*/
static resolve(bindings: List<any>): List<ResolvedBinding> {
static resolve(bindings: List<Type | Binding | List<any>>): List<ResolvedBinding> {
var resolvedBindings = resolveBindings(bindings);
var flatten = _flattenBindings(resolvedBindings, MapWrapper.create());
return _createListOfBindings(flatten);
@ -109,7 +109,8 @@ export class Injector {
* bindings.
* @param `defaultBindings` Setting to true will auto-create bindings.
*/
static resolveAndCreate(bindings: List<any>, {defaultBindings = false}: any = {}): Injector {
static resolveAndCreate(bindings: List<Type | Binding | List<any>>,
{defaultBindings = false}: any = {}): Injector {
return new Injector(Injector.resolve(bindings), null, defaultBindings);
}
@ -184,7 +185,7 @@ export class Injector {
* recursive list of more bindings.
*
*/
resolveAndCreateChild(bindings: List<any>): Injector {
resolveAndCreateChild(bindings: List<Type | Binding | List<any>>): Injector {
return new Injector(Injector.resolve(bindings), this, false);
}
@ -368,7 +369,7 @@ class _AsyncInjectorStrategy {
}
}
export function resolveBindings(bindings: List<any>): List<ResolvedBinding> {
export function resolveBindings(bindings: List<Type | Binding | List<any>>): List<ResolvedBinding> {
var resolvedList = ListWrapper.createFixedSize(bindings.length);
for (var i = 0; i < bindings.length; i++) {
var unresolved = resolveForwardRef(bindings[i]);
@ -398,13 +399,14 @@ function flattenBindings(bindings: List<ResolvedBinding>): List<ResolvedBinding>
return res;
}
function _createListOfBindings(flattenedBindings): List<any> {
function _createListOfBindings(
flattenedBindings: Map<number, ResolvedBinding>): List<ResolvedBinding> {
var bindings = ListWrapper.createFixedSize(Key.numberOfKeys + 1);
MapWrapper.forEach(flattenedBindings, (v, keyId) => bindings[keyId] = v);
return bindings;
}
function _flattenBindings(bindings: List<ResolvedBinding /* | List<any>*/>,
function _flattenBindings(bindings: List<ResolvedBinding | List<any>>,
res: Map<number, ResolvedBinding>): Map<number, ResolvedBinding> {
ListWrapper.forEach(bindings, function(b) {
if (b instanceof ResolvedBinding) {

2
modules/angular2/src/dom/dom_adapter.ts
View File

@ -22,7 +22,7 @@ export class DomAdapter {
* Maps attribute names to their corresponding property names for cases
* where attribute name doesn't match property name.
*/
get attrToPropMap(): any { throw _abstract(); }
get attrToPropMap(): StringMap<string, string> { throw _abstract(); }
parse(templateHtml: string) { throw _abstract(); }
query(selector: string): any { throw _abstract(); }

44
modules/angular2/src/facade/collection.ts
View File

@ -37,47 +37,49 @@ export class MapWrapper {
return result;
}
static createFromPairs(pairs: List<any>): Map<any, any> { return createMapFromPairs(pairs); }
static get(m, k) { return m.get(k); }
static set(m, k, v) { m.set(k, v); }
static contains(m, k) { return m.has(k); }
static forEach(m, fn) { m.forEach(fn); }
static size(m) { return m.size; }
static delete (m, k) { m.delete(k); }
static clear(m) { m.clear(); }
static clearValues(m) {
static get<K, V>(m: Map<K, V>, k: K): V { return m.get(k); }
static set<K, V>(m: Map<K, V>, k: K, v: V) { m.set(k, v); }
static contains<K>(m: Map<K, any>, k: K) { return m.has(k); }
static forEach<K, V>(m: Map<K, V>, fn: /*(V, K) => void*/ Function) { m.forEach(<any>fn); }
static size(m: Map<any, any>) { return m.size; }
static delete<K>(m: Map<K, any>, k: K) { m.delete(k); }
static clear(m: Map<any, any>) { m.clear(); }
static clearValues(m: Map<any, any>) {
var keyIterator = m.keys();
var k;
while (!((k = keyIterator.next()).done)) {
while (!((k = (<any>keyIterator).next()).done)) {
m.set(k.value, null);
}
}
static iterable(m) { return m; }
static keys(m) { return m.keys(); }
static values(m) { return m.values(); }
static keys<K>(m: Map<K, any>): List<K> { return m.keys(); }
static values<V>(m: Map<any, V>): List<V> { return m.values(); }
}
/**
* Wraps Javascript Objects
*/
export class StringMapWrapper {
static create(): Object {
static create(): StringMap<any, any> {
// Note: We are not using Object.create(null) here due to
// performance!
// http://jsperf.com/ng2-object-create-null
return {};
}
static contains(map, key) { return map.hasOwnProperty(key); }
static get(map, key) { return map.hasOwnProperty(key) ? map[key] : undefined; }
static set(map, key, value) { map[key] = value; }
static keys(map) { return Object.keys(map); }
static isEmpty(map) {
static contains(map: StringMap<string, any>, key: string) { return map.hasOwnProperty(key); }
static get<V>(map: StringMap<string, V>, key: string): V {
return map.hasOwnProperty(key) ? map[key] : undefined;
}
static set<V>(map: StringMap<string, V>, key: string, value: V) { map[key] = value; }
static keys(map: StringMap<string, any>): List<string> { return Object.keys(map); }
static isEmpty(map: StringMap<string, any>) {
for (var prop in map) {
return false;
}
return true;
}
static delete (map, key) { delete map[key]; }
static forEach(map, callback) {
static delete (map: StringMap<string, any>, key: string) { delete map[key]; }
static forEach<K, V>(map: StringMap<string, V>, callback: /*(V, K) => void*/ Function) {
for (var prop in map) {
if (map.hasOwnProperty(prop)) {
callback(map[prop], prop);
@ -85,7 +87,7 @@ export class StringMapWrapper {
}
}
static merge(m1, m2) {
static merge<V>(m1: StringMap<string, V>, m2: StringMap<string, V>): StringMap<string, V> {
var m = {};
for (var attr in m1) {
@ -103,7 +105,7 @@ export class StringMapWrapper {
return m;
}
static equals(m1, m2) {
static equals<V>(m1: StringMap<string, V>, m2: StringMap<string, V>): boolean {
var k1 = Object.keys(m1);
var k2 = Object.keys(m2);
if (k1.length != k2.length) {

2
modules/angular2/src/facade/lang.ts
View File

@ -2,7 +2,7 @@ var _global = typeof window === 'undefined' ? global : window;
export {_global as global};
export var Type = Function;
export type Type = typeof Function;
export type Type = new (... args: any[]) => any;
export class BaseException extends Error {
message;

16
modules/angular2/src/render/dom/compiler/directive_parser.ts
View File

@ -18,12 +18,15 @@ import {CompileControl} from './compile_control';
import {DirectiveMetadata} from '../../api';
import {dashCaseToCamelCase, camelCaseToDashCase, EVENT_TARGET_SEPARATOR} from '../util';
import {
DirectiveBuilder
} from '../view/proto_view_builder'
/**
* Parses the directives on a single element. Assumes ViewSplitter has already created
* <template> elements for template directives.
*/
export class DirectiveParser implements CompileStep {
/**
* Parses the directives on a single element. Assumes ViewSplitter has already created
* <template> elements for template directives.
*/
export class DirectiveParser implements CompileStep {
_selectorMatcher: SelectorMatcher;
_directives: List<DirectiveMetadata>;
_parser: Parser;
@ -118,7 +121,8 @@ export class DirectiveParser implements CompileStep {
});
}
_bindDirectiveProperty(dirProperty, bindConfig, compileElement, directiveBinderBuilder) {
_bindDirectiveProperty(dirProperty: string, bindConfig: string, compileElement: CompileElement,
directiveBinderBuilder: DirectiveBuilder) {
var pipes = this._splitBindConfig(bindConfig);
var elProp = ListWrapper.removeAt(pipes, 0);

58
modules/angular2/src/render/dom/compiler/selector.ts
View File

@ -140,12 +140,12 @@ export class SelectorMatcher {
return notMatcher;
}
private _elementMap: Map<string, string>;
private _elementPartialMap: Map<string, string>;
private _classMap: Map<string, string>;
private _classPartialMap: Map<string, string>;
private _attrValueMap: Map<string, string>;
private _attrValuePartialMap: Map<string, string>;
private _elementMap: Map<string, List<string>>;
private _elementPartialMap: Map<string, SelectorMatcher>;
private _classMap: Map<string, List<string>>;
private _classPartialMap: Map<string, SelectorMatcher>;
private _attrValueMap: Map<string, Map<string, List<string>>>;
private _attrValuePartialMap: Map<string, Map<string, SelectorMatcher>>;
private _listContexts: List<SelectorListContext>;
constructor() {
@ -212,22 +212,28 @@ export class SelectorMatcher {
var isTerminal = index === attrs.length - 2;
var attrName = attrs[index++];
var attrValue = attrs[index++];
var map = isTerminal ? matcher._attrValueMap : matcher._attrValuePartialMap;
var valuesMap = MapWrapper.get(map, attrName);
if (isBlank(valuesMap)) {
valuesMap = MapWrapper.create();
MapWrapper.set(map, attrName, valuesMap);
}
if (isTerminal) {
this._addTerminal(valuesMap, attrValue, selectable);
var terminalMap = matcher._attrValueMap;
var terminalValuesMap = MapWrapper.get(terminalMap, attrName);
if (isBlank(terminalValuesMap)) {
terminalValuesMap = MapWrapper.create();
MapWrapper.set(terminalMap, attrName, terminalValuesMap);
}
this._addTerminal(terminalValuesMap, attrValue, selectable);
} else {
matcher = this._addPartial(valuesMap, attrValue);
var parttialMap = matcher._attrValuePartialMap;
var partialValuesMap = MapWrapper.get(parttialMap, attrName);
if (isBlank(partialValuesMap)) {
partialValuesMap = MapWrapper.create();
MapWrapper.set(parttialMap, attrName, partialValuesMap);
}
matcher = this._addPartial(partialValuesMap, attrValue);
}
}
}
}
private _addTerminal(map: Map<string, string>, name: string, selectable: SelectorContext) {
private _addTerminal(map: Map<string, List<string>>, name: string, selectable: SelectorContext) {
var terminalList = MapWrapper.get(map, name);
if (isBlank(terminalList)) {
terminalList = ListWrapper.create();
@ -236,7 +242,7 @@ export class SelectorMatcher {
ListWrapper.push(terminalList, selectable);
}
private _addPartial(map: Map<string, string>, name: string) {
private _addPartial(map: Map<string, SelectorMatcher>, name: string): SelectorMatcher {
var matcher = MapWrapper.get(map, name);
if (isBlank(matcher)) {
matcher = new SelectorMatcher();
@ -282,22 +288,24 @@ export class SelectorMatcher {
var attrName = attrs[index++];
var attrValue = attrs[index++];
var valuesMap = MapWrapper.get(this._attrValueMap, attrName);
var terminalValuesMap = MapWrapper.get(this._attrValueMap, attrName);
if (!StringWrapper.equals(attrValue, _EMPTY_ATTR_VALUE)) {
result =
this._matchTerminal(valuesMap, _EMPTY_ATTR_VALUE, cssSelector, matchedCallback) ||
result;
result = this._matchTerminal(terminalValuesMap, _EMPTY_ATTR_VALUE, cssSelector,
matchedCallback) ||
result;
}
result = this._matchTerminal(valuesMap, attrValue, cssSelector, matchedCallback) || result;
result = this._matchTerminal(terminalValuesMap, attrValue, cssSelector, matchedCallback) ||
result;
valuesMap = MapWrapper.get(this._attrValuePartialMap, attrName);
result = this._matchPartial(valuesMap, attrValue, cssSelector, matchedCallback) || result;
var partialValuesMap = MapWrapper.get(this._attrValuePartialMap, attrName);
result =
this._matchPartial(partialValuesMap, attrValue, cssSelector, matchedCallback) || result;
}
}
return result;
}
_matchTerminal(map: Map<string, string>, name, cssSelector: CssSelector,
_matchTerminal(map: Map<string, List<string>>, name, cssSelector: CssSelector,
matchedCallback /*: (CssSelector, any) => void*/): boolean {
if (isBlank(map) || isBlank(name)) {
return false;
@ -320,7 +328,7 @@ export class SelectorMatcher {
return result;
}
_matchPartial(map: Map<string, string>, name, cssSelector: CssSelector,
_matchPartial(map: Map<string, SelectorMatcher>, name, cssSelector: CssSelector,
matchedCallback /*: (CssSelector, any) => void*/): boolean {
if (isBlank(map) || isBlank(name)) {
return false;

2
modules/angular2/src/render/dom/events/key_events.ts
View File

@ -11,7 +11,7 @@ import {StringMapWrapper, ListWrapper} from 'angular2/src/facade/collection';
import {EventManagerPlugin} from './event_manager';
var modifierKeys = ['alt', 'control', 'meta', 'shift'];
var modifierKeyGetters =
var modifierKeyGetters: StringMap<string, Function> =
{
'alt': (event) => event.altKey,
'control': (event) => event.ctrlKey,

13
modules/angular2/src/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy.ts
View File

@ -40,14 +40,15 @@ export class EmulatedScopedShadowDomStrategy extends EmulatedUnscopedShadowDomSt
cssText = this.styleUrlResolver.resolveUrls(cssText, templateUrl);
var inlinedCss = this.styleInliner.inlineImports(cssText, templateUrl);
if (isPresent(inlinedCss.asyncResult)) {
if (PromiseWrapper.isPromise(inlinedCss)) {
DOM.setText(styleEl, '');
return inlinedCss.asyncResult.then((css) => {
css = shimCssForComponent(css, hostComponentId);
DOM.setText(styleEl, css);
});
return (<Promise<string>>inlinedCss)
.then((css) => {
css = shimCssForComponent(css, hostComponentId);
DOM.setText(styleEl, css);
});
} else {
var css = shimCssForComponent(inlinedCss.syncResult, hostComponentId);
var css = shimCssForComponent(<string>inlinedCss, hostComponentId);
DOM.setText(styleEl, css);
DOM.remove(styleEl);
insertStyleElement(this.styleHost, styleEl);

26
modules/angular2/src/render/dom/shadow_dom/style_inliner.ts
View File

@ -18,10 +18,6 @@ import {
PromiseWrapper,
} from 'angular2/src/facade/async';
export class SyncAsyncResult<T> {
constructor(public syncResult: T, public asyncResult: Promise<T>) {}
}
/**
* Inline @import rules in the given CSS.
*
@ -48,18 +44,18 @@ export class StyleInliner {
* @param {string} baseUrl
* @returns {*} a Promise<string> when @import rules are present, a string otherwise
*/
inlineImports(cssText: string, baseUrl: string): SyncAsyncResult<string> {
inlineImports(cssText: string, baseUrl: string): Promise<string>| string {
return this._inlineImports(cssText, baseUrl, []);
}
_inlineImports(cssText: string, baseUrl: string,
inlinedUrls: List<string>): SyncAsyncResult<string> {
_inlineImports(cssText: string, baseUrl: string, inlinedUrls: List<string>): Promise<string>|
string {
var partIndex = 0;
var parts = StringWrapper.split(cssText, _importRe);
if (parts.length === 1) {
// no @import rule found, return the original css
return new SyncAsyncResult(cssText, null);
return cssText;
}
var promises = [];
@ -87,14 +83,14 @@ export class StyleInliner {
promise = PromiseWrapper.then(this._xhr.get(url), (rawCss) => {
// resolve nested @import rules
var inlinedCss = this._inlineImports(rawCss, url, inlinedUrls);
if (isPresent(inlinedCss.asyncResult)) {
if (PromiseWrapper.isPromise(inlinedCss)) {
// wait until nested @import are inlined
return inlinedCss.asyncResult.then(
(css) => {return prefix + this._transformImportedCss(css, mediaQuery, url) + '\n'});
return (<Promise<string>>inlinedCss)
.then((css) => {return prefix + this._transformImportedCss(css, mediaQuery, url) +
'\n'});
} else {
// there are no nested @import, return the css
return prefix + this._transformImportedCss(inlinedCss.syncResult, mediaQuery, url) +
'\n';
return prefix + this._transformImportedCss(<string>inlinedCss, mediaQuery, url) + '\n';
}
}, (error) => `/* failed to import ${url} */\n`);
}
@ -102,14 +98,14 @@ export class StyleInliner {
partIndex += 2;
}
return new SyncAsyncResult(null, PromiseWrapper.all(promises).then(function(cssParts) {
return PromiseWrapper.all(promises).then(function(cssParts) {
var cssText = cssParts.join('');
if (partIndex < parts.length) {
// append then content located after the last @import rule
cssText += parts[partIndex];
}
return cssText;
}));
});
}
_transformImportedCss(css: string, mediaQuery: string, url: string): string {

14
modules/angular2/src/services/ruler.js → modules/angular2/src/services/ruler.ts
View File

@ -21,14 +21,14 @@ export class Rectangle {
export class Ruler {
domAdapter: DomAdapter;
constructor(domAdapter: DomAdapter) {
this.domAdapter = domAdapter;
}
constructor(domAdapter: DomAdapter) { this.domAdapter = domAdapter; }
measure(el:ElementRef): Promise<Rectangle> {
var clntRect = this.domAdapter.getBoundingClientRect(el.domElement);
measure(el: ElementRef): Promise<Rectangle> {
var clntRect = <any>this.domAdapter.getBoundingClientRect(el.domElement);
//even if getBoundingClientRect is synchronous we use async API in preparation for further changes
return PromiseWrapper.resolve(new Rectangle(clntRect.left, clntRect.top, clntRect.width, clntRect.height));
// even if getBoundingClientRect is synchronous we use async API in preparation for further
// changes
return PromiseWrapper.resolve(
new Rectangle(clntRect.left, clntRect.top, clntRect.width, clntRect.height));
}
}

38
modules/angular2/test/render/dom/shadow_dom/style_inliner_spec.js vendored
View File

@ -32,7 +32,7 @@ export function main() {
it('should return a string when there is no import statement', inject([StyleInliner], (inliner) => {
var css = '.main {}';
var loadedCss = inliner.inlineImports(css, 'http://base');
expect(loadedCss.syncResult).toEqual(css);
expect(loadedCss).toEqual(css);
}));
it('should inline @import rules',
@ -40,9 +40,9 @@ export function main() {
xhr.reply('http://base/one.css', '.one {}');
var css = '@import url("one.css");.main {}';
var loadedCss = inliner.inlineImports(css, 'http://base');
expect(loadedCss.asyncResult).toBePromise();
expect(loadedCss).toBePromise();
PromiseWrapper.then(
loadedCss.asyncResult,
loadedCss,
function(css) {
expect(css).toEqual('.one {}\n.main {}');
async.done();
@ -58,9 +58,9 @@ export function main() {
xhr.reply('http://base/one.css', '.one {}');
var css = '@import url(one.css);.main {}';
var loadedCss = inliner.inlineImports(css, 'http://base');
expect(loadedCss.asyncResult).toBePromise();
expect(loadedCss).toBePromise();
PromiseWrapper.then(
loadedCss.asyncResult,
loadedCss,
function(css) {
expect(css).toEqual('.one {}\n.main {}');
async.done();
@ -75,9 +75,9 @@ export function main() {
inject([StyleInliner, AsyncTestCompleter], (inliner, async) => {
var css = '@import "one.css";.main {}';
var loadedCss = inliner.inlineImports(css, 'http://base');
expect(loadedCss.asyncResult).toBePromise();
expect(loadedCss).toBePromise();
PromiseWrapper.then(
loadedCss.asyncResult,
loadedCss,
function(css) {
expect(css).toEqual('/* failed to import http://base/one.css */\n.main {}');
async.done();
@ -94,9 +94,9 @@ export function main() {
xhr.reply('http://base/two.css', '.two {}');
var css = '@import "one.css";@import "two.css";.main {}';
var loadedCss = inliner.inlineImports(css, 'http://base');
expect(loadedCss.asyncResult).toBePromise();
expect(loadedCss).toBePromise();
PromiseWrapper.then(
loadedCss.asyncResult,
loadedCss,
function(css) {
expect(css).toEqual('.one {}\n.two {}\n.main {}');
async.done();
@ -113,9 +113,9 @@ export function main() {
xhr.reply('http://base/two.css', '.two {}');
var css = '@import "one.css";.main {}';
var loadedCss = inliner.inlineImports(css, 'http://base/');
expect(loadedCss.asyncResult).toBePromise();
expect(loadedCss).toBePromise();
PromiseWrapper.then(
loadedCss.asyncResult,
loadedCss,
function(css) {
expect(css).toEqual('.two {}\n.one {}\n.main {}');
async.done();
@ -132,9 +132,9 @@ export function main() {
xhr.reply('http://base/two.css', '@import "one.css";.two {}');
var css = '@import "one.css";.main {}';
var loadedCss = inliner.inlineImports(css, 'http://base/');
expect(loadedCss.asyncResult).toBePromise();
expect(loadedCss).toBePromise();
PromiseWrapper.then(
loadedCss.asyncResult,
loadedCss,
function(css) {
expect(css).toEqual('.two {}\n.one {}\n.main {}');
async.done();
@ -150,9 +150,9 @@ export function main() {
// Invalid rule: the url is not quoted
var css = '@import one.css;.main {}';
var loadedCss = inliner.inlineImports(css, 'http://base/');
expect(loadedCss.asyncResult).toBePromise();
expect(loadedCss).toBePromise();
PromiseWrapper.then(
loadedCss.asyncResult,
loadedCss,
function(css) {
expect(css).toEqual('/* Invalid import rule: "@import one.css;" */.main {}');
async.done();
@ -170,9 +170,9 @@ export function main() {
xhr.reply('http://base/one.css', '.one {}');
var css = '@import "one.css" (min-width: 700px) and (orientation: landscape);';
var loadedCss = inliner.inlineImports(css, 'http://base/');
expect(loadedCss.asyncResult).toBePromise();
expect(loadedCss).toBePromise();
PromiseWrapper.then(
loadedCss.asyncResult,
loadedCss,
function(css) {
expect(css).toEqual('@media (min-width: 700px) and (orientation: landscape) {\n.one {}\n}\n');
async.done();
@ -192,9 +192,9 @@ export function main() {
xhr.reply('http://base/nested/two.css', '.two {background-image: url("../img/two.jpg");}');
var css = '@import "one.css";'
var loadedCss = inliner.inlineImports(css, 'http://base/');
expect(loadedCss.asyncResult).toBePromise();
expect(loadedCss).toBePromise();
PromiseWrapper.then(
loadedCss.asyncResult,
loadedCss,
function(css) {
expect(css).toEqual(
".two {background-image: url('http://base/img/two.jpg');}\n" +

2
modules/angular2/traceur-runtime.d.ts vendored
View File

@ -37,6 +37,8 @@ interface Map<K, V> {
clear(): void;
delete (key: K): boolean;
forEach(callbackfn: (value: V, index: K, map: Map<K, V>) => void, thisArg?: any): void;
keys(): List<K>;
values(): List<V>;
get(key: K): V;
has(key: K): boolean;
set(key: K, value: V): Map<K, V>;