iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(core): ts’ify core

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
modules/angular2/src/core/annotations_impl/annotations.js → modules/angular2/src/core/annotations_impl/annotations.ts
+193 -117
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"));
modules/angular2/src/core/annotations_impl/di.js → modules/angular2/src/core/annotations_impl/di.ts
+9 -16
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(); }
}
modules/angular2/src/core/annotations_impl/view.js → modules/angular2/src/core/annotations_impl/view.ts
+16 -13
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;
modules/angular2/src/core/annotations_impl/visibility.js → modules/angular2/src/core/annotations_impl/visibility.ts
+19 -32
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); }
}