Last active
August 29, 2015 14:22
-
-
Save alexeagle/c7e0b05927469666d703 to your computer and use it in GitHub Desktop.
angular2.d.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Type definitions for Angular v2.0.0-alpha.26 | |
// Project: http://angular.io/ | |
// Definitions by: angular team <https://github.com/angular/> | |
// Definitions: https://github.com/borisyankov/DefinitelyTyped | |
// *********************************************************** | |
// This file is generated by the Angular build process. | |
// Please do not create manual edits or send pull requests | |
// modifying this file. | |
// *********************************************************** | |
// Angular depends transitively on these libraries. | |
// If you don't have them installed you can run | |
// $ tsd query es6-promise rx rx-lite --action install --save | |
///<reference path="../es6-promise/es6-promise.d.ts"/> | |
///<reference path="../rx/rx.d.ts"/> | |
interface List<T> extends Array<T> {} | |
interface Map<K,V> {} | |
interface StringMap<K,V> extends Map<K,V> {} | |
interface Type {} | |
declare module "angular2/angular2" { | |
type SetterFn = typeof Function; | |
type int = number; | |
// Workarounds for re-exports with different namespace | |
module viewModule { | |
interface AppView {} | |
interface AppProtoView {} | |
} | |
module modelModule { | |
interface Control {} | |
interface ControlArray {} | |
interface ControlGroup {} | |
} | |
module renderApi { | |
interface EventBinding {} | |
interface RenderProtoViewRef {} | |
} | |
module avmModule { | |
interface AppViewManager {} | |
} | |
// See https://github.com/Microsoft/TypeScript/issues/1168 | |
class BaseException /* extends Error */ { | |
message; | |
stack; | |
toString(): string; | |
} | |
} | |
declare module "angular2/angular2" { | |
class Observable { | |
observer(generator: any): Object; | |
} | |
/** | |
* Use Rx.Observable but provides an adapter to make it work as specified here: | |
* https://github.com/jhusain/observable-spec | |
* | |
* Once a reference implementation of the spec is available, switch to it. | |
*/ | |
class EventEmitter extends Observable { | |
next(value); | |
observer(generator); | |
return(value); | |
throw(error); | |
toRx(): Rx.Observable<any>; | |
} | |
class DomRenderer extends Renderer { | |
attachComponentView(hostViewRef: RenderViewRef, elementIndex: number, componentViewRef: RenderViewRef); | |
attachViewInContainer(parentViewRef: RenderViewRef, boundElementIndex: number, atIndex: number, viewRef: RenderViewRef); | |
callAction(viewRef: RenderViewRef, elementIndex: number, actionExpression: string, actionArgs: any): void; | |
createRootHostView(hostProtoViewRef: RenderProtoViewRef, hostElementSelector: string): RenderViewRef; | |
createView(protoViewRef: RenderProtoViewRef): RenderViewRef; | |
dehydrateView(viewRef: RenderViewRef); | |
destroyView(view: RenderViewRef); | |
detachComponentView(hostViewRef: RenderViewRef, boundElementIndex: number, componentViewRef: RenderViewRef); | |
detachFreeHostView(parentHostViewRef: RenderViewRef, hostViewRef: RenderViewRef); | |
detachViewInContainer(parentViewRef: RenderViewRef, boundElementIndex: number, atIndex: number, viewRef: RenderViewRef); | |
getHostElement(hostViewRef: RenderViewRef); | |
hydrateView(viewRef: RenderViewRef); | |
setComponentViewRootNodes(componentViewRef: RenderViewRef, rootNodes: List</*node*/ any>); | |
setElementProperty(viewRef: RenderViewRef, elementIndex: number, propertyName: string, propertyValue: any): void; | |
setEventDispatcher(viewRef: RenderViewRef, dispatcher: any): void; | |
setText(viewRef: RenderViewRef, textNodeIndex: number, text: string): void; | |
} | |
const DOCUMENT_TOKEN; | |
class AbstractChangeDetector extends ChangeDetector { | |
addChild(cd: ChangeDetector); | |
addShadowDomChild(cd: ChangeDetector); | |
callOnAllChangesDone(); | |
checkNoChanges(); | |
detectChanges(); | |
detectChangesInRecords(throwOnChange: boolean); | |
lightDomChildren: List<any>; | |
markAsCheckOnce(); | |
markPathToRootAsCheckOnce(); | |
mode: string; | |
parent: ChangeDetector; | |
ref: ChangeDetectorRef; | |
remove(); | |
removeChild(cd: ChangeDetector); | |
removeShadowDomChild(cd: ChangeDetector); | |
shadowDomChildren: List<any>; | |
} | |
class ProtoRecord { | |
args: List<any>; | |
bindingRecord: BindingRecord; | |
contextIndex: number; | |
directiveIndex: DirectiveIndex; | |
expressionAsString: string; | |
fixedArgs: List<any>; | |
funcOrValue; | |
isLifeCycleRecord(): boolean; | |
isPipeRecord(): boolean; | |
isPureFunction(): boolean; | |
lastInBinding: boolean; | |
lastInDirective: boolean; | |
mode: number; | |
name: string; | |
selfIndex: number; | |
} | |
/** | |
* Directives allow you to attach behavior to elements in the DOM. | |
* | |
* <a href='/angular2/annotations/Directive'><code>Directive</code></a>s with an embedded view are called <a href='/angular2/angular2/Component'><code>Component</code></a>s. | |
* | |
* 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, | |
* as declared in the HTML. | |
* | |
* ## Understanding How Injection Works | |
* | |
* There are three stages of injection resolution. | |
* - *Pre-existing Injectors*: | |
* - The terminal <a href='/angular2/angular2/Injector'><code>Injector</code></a> 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 <a href='/angular2/angular2/Injector'><code>Injector</code></a>, 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` | |
* 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 | |
* 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 | |
* <a href='/angular2/angular2/View'><code>View</code></a>: | |
* | |
* 1. Dependencies on the current element | |
* 2. Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary | |
* 3. Dependencies on component injectors and their parents until it encounters the root component | |
* 4. Dependencies on pre-existing injectors | |
* | |
* | |
* 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 | |
* 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. | |
* | |
* 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 | |
* <a href='/angular2/annotations/Directive'><code>Directive</code></a> 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. | |
* | |
* | |
* Assume this HTML template: | |
* | |
* ``` | |
* <div dependency="1"> | |
* <div dependency="2"> | |
* <div dependency="3" my-directive> | |
* <div dependency="4"> | |
* <div dependency="5"></div> | |
* </div> | |
* <div dependency="6"></div> | |
* </div> | |
* </div> | |
* </div> | |
* ``` | |
* | |
* With the following `dependency` decorator and `SomeService` injectable class. | |
* | |
* ``` | |
* @Injectable() | |
* class SomeService { | |
* } | |
* | |
* @Directive({ | |
* selector: '[dependency]', | |
* properties: [ | |
* 'id: dependency' | |
* ] | |
* }) | |
* class Dependency { | |
* id:string; | |
* } | |
* ``` | |
* | |
* Let's step through the different ways in which `MyDirective` could be declared... | |
* | |
* | |
* ### No injection | |
* | |
* Here the constructor is declared with no arguments, therefore nothing is injected into | |
* `MyDirective`. | |
* | |
* ``` | |
* @Directive({ selector: '[my-directive]' }) | |
* class MyDirective { | |
* constructor() { | |
* } | |
* } | |
* ``` | |
* | |
* This directive would be instantiated with no dependencies. | |
* | |
* | |
* ### Component-level injection | |
* | |
* 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 | |
* component's injector. | |
* ``` | |
* @Directive({ selector: '[my-directive]' }) | |
* class MyDirective { | |
* constructor(someService: SomeService) { | |
* } | |
* } | |
* ``` | |
* | |
* This directive would be instantiated with a dependency on `SomeService`. | |
* | |
* | |
* ### Injecting a directive from the current element | |
* | |
* Directives can inject other directives declared on the current element. | |
* | |
* ``` | |
* @Directive({ selector: '[my-directive]' }) | |
* class MyDirective { | |
* constructor(dependency: Dependency) { | |
* expect(dependency.id).toEqual(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 | |
* the dependency. | |
* | |
* ``` | |
* @Directive({ selector: '[my-directive]' }) | |
* class MyDirective { | |
* constructor(@Parent() dependency: Dependency) { | |
* expect(dependency.id).toEqual(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 | |
* resolve dependencies for the current element, even if this would satisfy the dependency. | |
* | |
* ``` | |
* @Directive({ selector: '[my-directive]' }) | |
* class MyDirective { | |
* constructor(@Ancestor() dependency: Dependency) { | |
* expect(dependency.id).toEqual(2); | |
* } | |
* } | |
* ``` | |
* | |
* 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 | |
* `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 directives, a directive can't simply inject the list of child directives. Instead, | |
* the directive injects a <a href='QueryList'>QueryList</a>, which updates its contents as children are added, | |
* removed, or moved by a directive that uses a <a href='/angular2/angular2/ViewContainerRef'><code>ViewContainerRef</code></a> such as a `ng-for`, an | |
* `ng-if`, or an `ng-switch`. | |
* | |
* ``` | |
* @Directive({ selector: '[my-directive]' }) | |
* class MyDirective { | |
* constructor(@Query(Dependency) dependencies:QueryList<Dependency>) { | |
* } | |
* } | |
* ``` | |
* | |
* This directive would be instantiated with a <a href='QueryList'>QueryList</a> 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 | |
* | |
* Note: This is will be implemented in later release. () | |
* | |
* Similar to `@Query` above, but also includes the children of the child elements. | |
* | |
* ``` | |
* @Directive({ selector: '[my-directive]' }) | |
* class MyDirective { | |
* constructor(@QueryDescendents(Dependency) dependencies:QueryList<Dependency>) { | |
* } | |
* } | |
* ``` | |
* | |
* This directive would be instantiated with a Query which would contain `Dependency` 4, 5 and 6. | |
* | |
* ### 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. | |
* | |
* ``` | |
* @Directive({ selector: '[my-directive]' }) | |
* class MyDirective { | |
* constructor(@Optional() dependency:Dependency) { | |
* } | |
* } | |
* ``` | |
* | |
* 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 | |
* | |
* Here we use a decorator directive to simply define basic tool-tip behavior. | |
* | |
* ``` | |
* @Directive({ | |
* selector: '[tooltip]', | |
* properties: [ | |
* 'text: tooltip' | |
* ], | |
* hostListeners: { | |
* 'onmouseenter': 'onMouseEnter()', | |
* 'onmouseleave': 'onMouseLeave()' | |
* } | |
* }) | |
* class Tooltip{ | |
* text:string; | |
* overlay:Overlay; // NOT YET IMPLEMENTED | |
* overlayManager:OverlayManager; // NOT YET IMPLEMENTED | |
* | |
* constructor(overlayManager:OverlayManager) { | |
* this.overlay = overlay; | |
* } | |
* | |
* onMouseEnter() { | |
* // exact signature to be determined | |
* this.overlay = this.overlayManager.open(text, ...); | |
* } | |
* | |
* onMouseLeave() { | |
* this.overlay.close(); | |
* this.overlay = null; | |
* } | |
* } | |
* ``` | |
* 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: | |
* | |
* A directive uses a <a href='/angular2/angular2/ViewContainerRef'><code>ViewContainerRef</code></a> to instantiate, insert, move, and destroy views at | |
* runtime. | |
* The <a href='/angular2/angular2/ViewContainerRef'><code>ViewContainerRef</code></a> 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 <a href='/angular2/angular2/View'><code>View</code></a>, 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. | |
* | |
* Thus, | |
* | |
* ``` | |
* <ul> | |
* <li *foo="bar" title="text"></li> | |
* </ul> | |
* ``` | |
* | |
* Expands in use to: | |
* | |
* ``` | |
* <ul> | |
* <template [foo]="bar"> | |
* <li title="text"></li> | |
* </template> | |
* </ul> | |
* ``` | |
* | |
* 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. | |
* | |
* | |
* ## Example | |
* | |
* Let's suppose we want to implement the `unless` behavior, to conditionally include a template. | |
* | |
* Here is a simple directive that triggers on an `unless` selector: | |
* | |
* ``` | |
* @Directive({ | |
* selector: '[unless]', | |
* properties: ['unless'] | |
* }) | |
* export class Unless { | |
* viewContainer: ViewContainerRef; | |
* protoViewRef: ProtoViewRef; | |
* prevCondition: boolean; | |
* | |
* constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef) { | |
* this.viewContainer = viewContainer; | |
* this.protoViewRef = protoViewRef; | |
* this.prevCondition = null; | |
* } | |
* | |
* set unless(newCondition) { | |
* if (newCondition && (isBlank(this.prevCondition) || !this.prevCondition)) { | |
* this.prevCondition = true; | |
* this.viewContainer.clear(); | |
* } else if (!newCondition && (isBlank(this.prevCondition) || this.prevCondition)) { | |
* this.prevCondition = false; | |
* this.viewContainer.create(this.protoViewRef); | |
* } | |
* } | |
* } | |
* ``` | |
* | |
* We can then use this `unless` selector in a template: | |
* ``` | |
* <ul> | |
* <li *unless="expr"></li> | |
* </ul> | |
* ``` | |
* | |
* Once the directive instantiates the child view, the shorthand notation for the template expands | |
* and the result is: | |
* | |
* ``` | |
* <ul> | |
* <template [unless]="exp"> | |
* <li></li> | |
* </template> | |
* <li></li> | |
* </ul> | |
* ``` | |
* | |
* 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 | |
*/ | |
class Directive extends Injectable { | |
/** | |
* If set to true the compiler does not compile the children of this directive. | |
*/ | |
compileChildren: boolean; | |
/** | |
* Enumerates the set of emitted events. | |
* | |
* ## Syntax | |
* | |
* ``` | |
* @Component({ | |
* events: ['statusChange'] | |
* }) | |
* class TaskComponent { | |
* statusChange:EventEmitter; | |
* | |
* constructor() { | |
* this.statusChange = new EventEmitter(); | |
* } | |
* | |
* onComplete() { | |
* this.statusChange.next('completed'); | |
* } | |
* } | |
* ``` | |
*/ | |
events: List<string>; | |
/** | |
* Specifies which DOM methods a directive can invoke. | |
* | |
* ## Syntax | |
* | |
* ``` | |
* @Directive({ | |
* selector: 'input', | |
* hostActions: { | |
* 'emitFocus': 'focus()' | |
* } | |
* }) | |
* class InputDirective { | |
* constructor() { | |
* this.emitFocus = new EventEmitter(); | |
* } | |
* | |
* focus() { | |
* this.emitFocus.next(); | |
* } | |
* } | |
* | |
* In this example calling focus on InputDirective will result in calling focus on the DOM | |
* element. | |
* ``` | |
*/ | |
hostActions: StringMap<string, string>; | |
/** | |
* 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 | |
* | |
* ``` | |
* @Directive({ | |
* selector: '[my-button]', | |
* hostAttributes: { | |
* 'role': 'button' | |
* } | |
* }) | |
* class MyButton { | |
* } | |
* | |
* 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: StringMap<string, string>; | |
/** | |
* Defines the set of injectable objects that are visible to a Directive and its light dom | |
* children. | |
* | |
* ## Simple Example | |
* | |
* Here is an example of a class that can be injected: | |
* | |
* ``` | |
* class Greeter { | |
* greet(name:string) { | |
* return 'Hello ' + name + '!'; | |
* } | |
* } | |
* | |
* @Directive({ | |
* selector: 'greet', | |
* hostInjector: [ | |
* Greeter | |
* ] | |
* }) | |
* class HelloWorld { | |
* greeter:Greeter; | |
* | |
* constructor(greeter:Greeter) { | |
* this.greeter = greeter; | |
* } | |
* } | |
* ``` | |
*/ | |
hostInjector: List<any>; | |
/** | |
* Specifies which DOM hostListeners a directive listens to. | |
* | |
* The `hostListeners` property defines a set of `event` to `method` key-value pairs: | |
* | |
* - `event1`: the DOM event that the directive listens to. | |
* - `statement`: the statement to execute when the event occurs. | |
* 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. | |
* (will be implemented in later release) | |
* | |
* | |
* ## Syntax | |
* | |
* ``` | |
* @Directive({ | |
* hostListeners: { | |
* 'event1': 'onMethod1(arguments)', | |
* 'target:event2': 'onMethod2(arguments)', | |
* ... | |
* } | |
* } | |
* ``` | |
* | |
* ## Basic Event Binding: | |
* | |
* 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: | |
* | |
* ``` | |
* @Directive({ | |
* selector: 'input', | |
* hostListeners: { | |
* 'change': 'onChange($event)', | |
* 'window:resize': 'onResize($event)' | |
* } | |
* }) | |
* class InputDirective { | |
* onChange(event:Event) { | |
* } | |
* onResize(event:Event) { | |
* } | |
* } | |
* ``` | |
* | |
* Here the `onChange` method of `InputDirective` is invoked whenever the DOM element fires the | |
* 'change' event. | |
*/ | |
hostListeners: StringMap<string, string>; | |
/** | |
* Specifies which DOM properties a directives updates. | |
* | |
* ## Syntax | |
* | |
* ``` | |
* @Directive({ | |
* selector: 'input', | |
* hostProperties: { | |
* 'value': 'value' | |
* } | |
* }) | |
* class InputDirective { | |
* value:string; | |
* } | |
* | |
* In this example every time the value property of the decorator changes, Angular will update the | |
* value property of | |
* the host element. | |
* ``` | |
*/ | |
hostProperties: StringMap<string, string>; | |
/** | |
* Specifies a set of lifecycle hostListeners in which the directive participates. | |
* | |
* See <a href='annotations/onChange'>onChange</a>, <a href='annotations/onDestroy'>onDestroy</a>, | |
* <a href='annotations/onAllChangesDone'>onAllChangesDone</a> for details. | |
*/ | |
lifecycle: List<LifecycleEvent>; | |
/** | |
* Enumerates the set of properties that accept data binding for a directive. | |
* | |
* The `properties` property defines a set of `directiveProperty` to `bindingProperty` | |
* configuration: | |
* | |
* - `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 <a href='/angular2/angular2/Pipe'><code>Pipe</code></a> 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. | |
* | |
* ## Syntax | |
* | |
* There is no need to specify both `directiveProperty` and `bindingProperty` when they both have | |
* the same value. | |
* | |
* ``` | |
* @Directive({ | |
* properties: [ | |
* 'propertyName', // shorthand notation for 'propertyName: propertyName' | |
* 'directiveProperty1: bindingProperty1', | |
* 'directiveProperty2: bindingProperty2 | pipe1 | ...', | |
* ... | |
* ] | |
* } | |
* ``` | |
* | |
* | |
* ## Basic Property Binding | |
* | |
* 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: | |
* | |
* ``` | |
* @Directive({ | |
* selector: '[tooltip]', | |
* properties: [ | |
* 'text: tooltip' | |
* ] | |
* }) | |
* class Tooltip { | |
* set text(value: string) { | |
* // This will get called every time with the new value when the 'tooltip' property changes | |
* } | |
* } | |
* ``` | |
* | |
* 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 | |
* <div [tooltip]="someExpression">...</div> | |
* <div tooltip="Some Text">...</div> | |
* ``` | |
* | |
* Whenever the `someExpression` expression changes, the `properties` declaration instructs | |
* Angular to update the `Tooltip`'s `text` property. | |
* | |
* ## Bindings With Pipes | |
* | |
* 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 changes, as normally occurs in change detection. | |
* | |
* See <a href='/angular2/angular2/Pipe'><code>Pipe</code></a> and <a href='pipes/keyValDiff'>keyValDiff</a> documentation for more details. | |
* | |
* ``` | |
* @Directive({ | |
* selector: '[class-set]', | |
* properties: [ | |
* 'classChanges: classSet | keyValDiff' | |
* ] | |
* }) | |
* class ClassSet { | |
* set classChanges(changes: KeyValueChanges) { | |
* // This will get called every time the `class-set` expressions changes its structure. | |
* } | |
* } | |
* ``` | |
* | |
* The template that this directive is used in may also contain its own pipes. For example: | |
* | |
* ```html | |
* <div [class-set]="someExpression | somePipe"> | |
* ``` | |
* | |
* In this case, the two pipes compose as if they were inlined: `someExpression | somePipe | | |
* keyValDiff`. | |
*/ | |
properties: List<string>; | |
/** | |
* 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. | |
* | |
* `selector` may be declared as one of the following: | |
* | |
* - `element-name`: select by element name. | |
* - `.class`: select by class name. | |
* - `[attribute]`: select by attribute name. | |
* - `[attribute=value]`: select by attribute name and value. | |
* - `:not(sub_selector)`: select only if the element does not match the `sub_selector`. | |
* - `selector1, selector2`: select if either `selector1` or `selector2` matches. | |
* | |
* | |
* ## Example | |
* | |
* Suppose we have a directive with an `input[type=text]` selector. | |
* | |
* And the following HTML: | |
* | |
* ```html | |
* <form> | |
* <input type="text"> | |
* <input type="radio"> | |
* <form> | |
* ``` | |
* | |
* The directive would only be instantiated on the `<input type="text">` element. | |
*/ | |
selector: string; | |
} | |
class LifecycleEvent { | |
name: string; | |
} | |
interface FormDirective { | |
addControl(dir: ControlDirective): void; | |
addControlGroup(dir: ControlGroupDirective): void; | |
removeControl(dir: ControlDirective): void; | |
removeControlGroup(dir: ControlGroupDirective): void; | |
updateModel(dir: ControlDirective, value: any): void; | |
} | |
/** | |
* A directive that contains a group of [ControlDirective]. | |
* | |
* @exportedAs angular2/forms | |
*/ | |
class ControlContainerDirective { | |
formDirective: FormDirective; | |
name: string; | |
path: List<string>; | |
} | |
/** | |
* A marker annotation that marks a class as available to `Injector` for creation. Used by tooling | |
* for generating constructor stubs. | |
* | |
* ``` | |
* class NeedsService { | |
* constructor(svc:UsefulService) {} | |
* } | |
* | |
* @Injectable | |
* class UsefulService {} | |
* ``` | |
* @exportedAs angular2/di_annotations | |
*/ | |
class Injectable { | |
} | |
/** | |
* 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. | |
* | |
* In the future this class will implement an Observable interface. | |
* For now it uses a plain list of observable callbacks. | |
* | |
* @exportedAs angular2/view | |
*/ | |
class BaseQueryList { | |
add(obj); | |
fireCallbacks(); | |
onChange(callback); | |
removeCallback(callback); | |
reset(newList); | |
} | |
class AppProtoView { | |
bindElement(parent: ElementBinder, distanceToParent: int, protoElementInjector: ProtoElementInjector, componentDirective?: DirectiveBinding): ElementBinder; | |
/** | |
* Adds an event binding for the last created ElementBinder via bindElement. | |
* | |
* If the directive index is a positive integer, the event is evaluated in the context of | |
* the given directive. | |
* | |
* If the directive index is -1, the event is evaluated in the context of the enclosing view. | |
* | |
* @param {string} eventName | |
* @param {AST} expression | |
* @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): void; | |
elementBinders: List<ElementBinder>; | |
protoChangeDetector: ProtoChangeDetector; | |
protoLocals: Map<string, any>; | |
render: renderApi.RenderProtoViewRef; | |
variableBindings: Map<string, string>; | |
} | |
class Visibility extends DependencyAnnotation { | |
crossComponentBoundaries: boolean; | |
depth: number; | |
includeSelf: boolean; | |
} | |
class ASTWithSource extends AST { | |
assign(context, locals, value); | |
ast: AST; | |
eval(context, locals); | |
isAssignable: boolean; | |
location: string; | |
source: string; | |
toString(): string; | |
visit(visitor); | |
} | |
class AST { | |
assign(context, locals, value); | |
eval(context, locals); | |
isAssignable: boolean; | |
toString(): string; | |
visit(visitor): any; | |
} | |
class AstTransformer { | |
visitAccessMember(ast: AccessMember); | |
visitAll(asts: List<any>); | |
visitBinary(ast: Binary); | |
visitConditional(ast: Conditional); | |
visitFunctionCall(ast: FunctionCall); | |
visitImplicitReceiver(ast: ImplicitReceiver); | |
visitInterpolation(ast: Interpolation); | |
visitKeyedAccess(ast: KeyedAccess); | |
visitLiteralArray(ast: LiteralArray); | |
visitLiteralMap(ast: LiteralMap); | |
visitLiteralPrimitive(ast: LiteralPrimitive); | |
visitMethodCall(ast: MethodCall); | |
visitPipe(ast: Pipe); | |
visitPrefixNot(ast: PrefixNot); | |
visitSafeAccessMember(ast: SafeAccessMember); | |
visitSafeMethodCall(ast: SafeMethodCall); | |
} | |
class AccessMember extends AST { | |
assign(context, locals, value); | |
eval(context, locals); | |
getter: Function; | |
isAssignable: boolean; | |
name: string; | |
receiver: AST; | |
setter: Function; | |
visit(visitor); | |
} | |
class LiteralArray extends AST { | |
eval(context, locals); | |
expressions: List<any>; | |
visit(visitor); | |
} | |
class ImplicitReceiver extends AST { | |
eval(context, locals); | |
visit(visitor); | |
} | |
class Lexer { | |
tokenize(text: string): List<any>; | |
} | |
class Parser { | |
addPipes(bindingAst: ASTWithSource, pipes: List<string>): ASTWithSource; | |
parseAction(input: string, location: any): ASTWithSource; | |
parseBinding(input: string, location: any): ASTWithSource; | |
parseInterpolation(input: string, location: any): ASTWithSource; | |
parseTemplateBindings(input: string, location: any): List<TemplateBinding>; | |
wrapLiteralPrimitive(input: string, location: any): ASTWithSource; | |
} | |
class Locals { | |
clearValues(): void; | |
contains(name: string): boolean; | |
current: Map<any, any>; | |
get(name: string); | |
parent: Locals; | |
set(name: string, value): void; | |
} | |
class ExpressionChangedAfterItHasBeenChecked extends BaseException { | |
message: string; | |
toString(): string; | |
} | |
class ChangeDetectionError extends BaseException { | |
location: string; | |
message: string; | |
originalException: any; | |
toString(): string; | |
} | |
class ProtoChangeDetector { | |
instantiate(dispatcher: any): ChangeDetector; | |
} | |
class ChangeDispatcher { | |
notifyOnBinding(bindingRecord: BindingRecord, value: any); | |
} | |
class ChangeDetector { | |
addChild(cd: ChangeDetector); | |
addShadowDomChild(cd: ChangeDetector); | |
checkNoChanges(); | |
dehydrate(); | |
detectChanges(); | |
hydrate(context: any, locals: Locals, directives: any); | |
markPathToRootAsCheckOnce(); | |
mode: string; | |
parent: ChangeDetector; | |
remove(); | |
removeChild(cd: ChangeDetector); | |
removeShadowDomChild(cd: ChangeDetector); | |
} | |
/** | |
* Interface used by Angular to control the change detection strategy for an application. | |
* | |
* Angular implements the following change detection strategies by default: | |
* | |
* - <a href='DynamicChangeDetection'>DynamicChangeDetection</a>: slower, but does not require `eval()`. | |
* - <a href='JitChangeDetection'>JitChangeDetection</a>: faster, but requires `eval()`. | |
* | |
* In JavaScript, you should always use `JitChangeDetection`, unless you are in an environment that | |
* has | |
* [CSP](https://developer.mozilla.org/en-US/docs/Web/Security/CSP), such as a Chrome Extension. | |
* | |
* In Dart, use `DynamicChangeDetection` during development. The Angular transformer generates an | |
* analog to the | |
* `JitChangeDetection` strategy at compile time. | |
* | |
* | |
* See: <a href='DynamicChangeDetection'>DynamicChangeDetection</a>, <a href='JitChangeDetection'>JitChangeDetection</a> | |
* | |
* # Example | |
* ```javascript | |
* bootstrap(MyApp, [bind(ChangeDetection).toClass(DynamicChangeDetection)]); | |
* ``` | |
* @exportedAs angular2/change_detection | |
*/ | |
class ChangeDetection { | |
createProtoChangeDetector(definition: ChangeDetectorDefinition): ProtoChangeDetector; | |
} | |
class ChangeDetectorDefinition { | |
bindingRecords: List<BindingRecord>; | |
directiveRecords: List<DirectiveRecord>; | |
id: string; | |
strategy: string; | |
variableNames: List<string>; | |
} | |
/** | |
* CHECK_ONCE means that after calling detectChanges the mode of the change detector | |
* will become CHECKED. | |
*/ | |
const CHECK_ONCE; | |
/** | |
* CHECK_ALWAYS means that after calling detectChanges the mode of the change detector | |
* will remain CHECK_ALWAYS. | |
*/ | |
const CHECK_ALWAYS; | |
/** | |
* DETACHED means that the change detector sub tree is not a part of the main tree and | |
* should be skipped. | |
*/ | |
const DETACHED; | |
/** | |
* CHECKED means that the change detector should be skipped until its mode changes to | |
* CHECK_ONCE or CHECK_ALWAYS. | |
*/ | |
const CHECKED; | |
/** | |
* ON_PUSH means that the change detector's mode will be set to CHECK_ONCE during hydration. | |
*/ | |
const ON_PUSH; | |
/** | |
* DEFAULT means that the change detector's mode will be set to CHECK_ALWAYS during hydration. | |
*/ | |
const DEFAULT; | |
class DynamicProtoChangeDetector extends ProtoChangeDetector { | |
definition: ChangeDetectorDefinition; | |
instantiate(dispatcher: any); | |
} | |
class JitProtoChangeDetector extends ProtoChangeDetector { | |
definition: ChangeDetectorDefinition; | |
instantiate(dispatcher: any); | |
} | |
class BindingRecord { | |
ast: AST; | |
callOnChange(); | |
directiveRecord: DirectiveRecord; | |
elementIndex: number; | |
implicitReceiver: any; | |
isDirective(); | |
isDirectiveLifecycle(); | |
isElement(); | |
isOnPushChangeDetection(); | |
isTextNode(); | |
lifecycleEvent: string; | |
mode: string; | |
propertyName: string; | |
setter: SetterFn; | |
} | |
class DirectiveIndex { | |
directiveIndex: number; | |
elementIndex: number; | |
name; | |
} | |
class DirectiveRecord { | |
callOnAllChangesDone: boolean; | |
callOnChange: boolean; | |
callOnCheck: boolean; | |
callOnInit: boolean; | |
changeDetection: string; | |
directiveIndex: DirectiveIndex; | |
isOnPushChangeDetection(): boolean; | |
} | |
class DynamicChangeDetector extends AbstractChangeDetector { | |
alreadyChecked: boolean; | |
callOnAllChangesDone(); | |
changeControlStrategy: string; | |
changes: List<any>; | |
dehydrate(); | |
detectChangesInRecords(throwOnChange: boolean); | |
directiveRecords: List<any>; | |
directives: any; | |
dispatcher: any; | |
hydrate(context: any, locals: any, directives: any); | |
hydrated(): boolean; | |
locals: any; | |
pipeRegistry: PipeRegistry; | |
pipes: List<any>; | |
prevContexts: List<any>; | |
protos: List<ProtoRecord>; | |
values: List<any>; | |
} | |
/** | |
* Controls change detection. | |
* | |
* <a href='/angular2/angular2/ChangeDetectorRef'><code>ChangeDetectorRef</code></a> allows requesting checks for detectors that rely on observables. It | |
* also allows detaching and | |
* attaching change detector subtrees. | |
* | |
* @exportedAs angular2/change_detection | |
*/ | |
class ChangeDetectorRef { | |
/** | |
* Detaches the change detector from the change detector tree. | |
* | |
* The detached change detector will not be checked until it is reattached. | |
*/ | |
detach(); | |
/** | |
* Reattach the change detector to the change detector tree. | |
* | |
* This also requests a check of this change detector. This reattached change detector will be | |
* checked during the | |
* next change detection run. | |
*/ | |
reattach(); | |
/** | |
* Request to check all ON_PUSH ancestors. | |
*/ | |
requestCheck(); | |
} | |
class PipeRegistry { | |
config; | |
get(type: string, obj, cdRef: ChangeDetectorRef): Pipe; | |
} | |
var uninitialized; | |
/** | |
* Indicates that the result of a <a href='/angular2/angular2/Pipe'><code>Pipe</code></a> transformation has changed even though the reference | |
* has not changed. | |
* | |
* The wrapped value will be unwrapped by change detection, and the unwrapped value will be stored. | |
* | |
* @exportedAs angular2/pipes | |
*/ | |
class WrappedValue { | |
wrapped: any; | |
} | |
/** | |
* An interface for extending the list of pipes known to Angular. | |
* | |
* If you are writing a custom <a href='/angular2/angular2/Pipe'><code>Pipe</code></a>, you must extend this interface. | |
* | |
* #Example | |
* | |
* ``` | |
* class DoublePipe extends Pipe { | |
* supports(obj) { | |
* return true; | |
* } | |
* | |
* transform(value) { | |
* return `${value}${value}`; | |
* } | |
* } | |
* ``` | |
* | |
* @exportedAs angular2/pipes | |
*/ | |
class Pipe { | |
onDestroy(); | |
supports(obj): boolean; | |
transform(value: any): any; | |
} | |
class PipeFactory { | |
create(cdRef): Pipe; | |
supports(obs): boolean; | |
} | |
/** | |
* @exportedAs angular2/pipes | |
*/ | |
class NullPipe extends Pipe { | |
called: boolean; | |
supports(obj); | |
transform(value); | |
} | |
/** | |
* @exportedAs angular2/pipes | |
*/ | |
class NullPipeFactory extends PipeFactory { | |
create(cdRef): Pipe; | |
supports(obj): boolean; | |
} | |
var defaultPipes; | |
/** | |
* Implements change detection that does not require `eval()`. | |
* | |
* This is slower than <a href='JitChangeDetection'>JitChangeDetection</a>. | |
* | |
* @exportedAs angular2/change_detection | |
*/ | |
class DynamicChangeDetection extends ChangeDetection { | |
createProtoChangeDetector(definition: ChangeDetectorDefinition): ProtoChangeDetector; | |
registry: PipeRegistry; | |
} | |
/** | |
* Implements faster change detection, by generating source code. | |
* | |
* This requires `eval()`. For change detection that does not require `eval()`, see | |
* <a href='DynamicChangeDetection'>DynamicChangeDetection</a>. | |
* | |
* @exportedAs angular2/change_detection | |
*/ | |
class JitChangeDetection extends ChangeDetection { | |
createProtoChangeDetector(definition: ChangeDetectorDefinition): ProtoChangeDetector; | |
registry: PipeRegistry; | |
} | |
/** | |
* Implements change detection using a map of pregenerated proto detectors. | |
* | |
* @exportedAs angular2/change_detection | |
*/ | |
class PreGeneratedChangeDetection extends ChangeDetection { | |
createProtoChangeDetector(definition: ChangeDetectorDefinition): ProtoChangeDetector; | |
registry: PipeRegistry; | |
} | |
var preGeneratedProtoDetectors; | |
var defaultPipeRegistry : PipeRegistry ; | |
/** | |
* @exportedAs angular2/view | |
*/ | |
class ViewRef { | |
render: RenderViewRef; | |
setLocal(contextName: string, value: any): void; | |
} | |
/** | |
* @exportedAs angular2/view | |
*/ | |
class ProtoViewRef { | |
} | |
/** | |
* @exportedAs angular2/core | |
*/ | |
class ViewContainerRef { | |
clear(): void; | |
create(protoViewRef?: ProtoViewRef, atIndex?: number, context?: ElementRef, injector?: Injector): ViewRef; | |
/** | |
* 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): ViewRef; | |
element: ElementRef; | |
get(index: number): ViewRef; | |
indexOf(viewRef: ViewRef); | |
insert(viewRef: ViewRef, atIndex?: number): ViewRef; | |
length; | |
remove(atIndex?: number): void; | |
viewManager: avmModule.AppViewManager; | |
} | |
/** | |
* @exportedAs angular2/view | |
*/ | |
class ElementRef { | |
boundElementIndex: number; | |
/** | |
* Exposes the underlying DOM element. | |
* (DEPRECATED way of accessing the DOM, replacement coming) | |
*/ | |
domElement; | |
/** | |
* Gets an attribute from the underlying DOM element. | |
* (DEPRECATED way of accessing the DOM, replacement coming) | |
*/ | |
getAttribute(name: string): string; | |
parentView: ViewRef; | |
} | |
/** | |
* A wrapper around zones that lets you schedule tasks after it has executed a task. | |
* | |
* The wrapper maintains an "inner" and an "mount" `Zone`. The application code will executes | |
* in the "inner" zone unless `runOutsideAngular` is explicitely called. | |
* | |
* A typical application will create a singleton `NgZone`. The outer `Zone` is a fork of the root | |
* `Zone`. The default `onTurnDone` runs the Angular change detection. | |
* | |
* @exportedAs angular2/core | |
*/ | |
class NgZone { | |
/** | |
* Initializes the zone hooks. | |
* | |
* @param {() => void} onTurnStart called before code executes in the inner zone for each VM turn | |
* @param {() => void} onTurnDone called at the end of a VM turn if code has executed in the inner | |
* zone | |
* @param {(error, stack) => void} onErrorHandler called when an exception is thrown by a macro or | |
* micro task | |
*/ | |
initCallbacks({onTurnStart, onTurnDone, onErrorHandler}?: { | |
onTurnStart?: /*() => void*/ Function, | |
onTurnDone?: /*() => void*/ Function, | |
onErrorHandler?: /*(error, stack) => void*/ Function | |
}); | |
/** | |
* Runs `fn` in the inner zone and returns whatever it returns. | |
* | |
* In a typical app where the inner zone is the Angular zone, this allows one to make use of the | |
* Angular's auto digest mechanism. | |
* | |
* ``` | |
* var zone: NgZone = [ref to the application zone]; | |
* | |
* zone.run(() => { | |
* // the change detection will run after this function and the microtasks it enqueues have | |
* executed. | |
* }); | |
* ``` | |
*/ | |
run(fn); | |
/** | |
* Runs `fn` in the outer zone and returns whatever it returns. | |
* | |
* In a typical app where the inner zone is the Angular zone, this allows one to escape Angular's | |
* auto-digest mechanism. | |
* | |
* ``` | |
* var zone: NgZone = [ref to the application zone]; | |
* | |
* zone.runOusideAngular(() => { | |
* element.onClick(() => { | |
* // Clicking on the element would not trigger the change detection | |
* }); | |
* }); | |
* ``` | |
*/ | |
runOutsideAngular(fn); | |
} | |
/** | |
* Specifies that an injector should retrieve a dependency from its element. | |
* | |
* ## Example | |
* | |
* Here is a simple directive that retrieves a dependency from its element. | |
* | |
* ``` | |
* @Directive({ | |
* selector: '[dependency]', | |
* properties: [ | |
* 'id: dependency' | |
* ] | |
* }) | |
* class Dependency { | |
* id:string; | |
* } | |
* | |
* | |
* @Directive({ | |
* selector: '[my-directive]' | |
* }) | |
* class Dependency { | |
* constructor(@Self() dependency:Dependency) { | |
* expect(dependency.id).toEqual(1); | |
* }; | |
* } | |
* ``` | |
* | |
* We use this with the following HTML template: | |
* | |
* ``` | |
* <div dependency="1" my-directive></div> | |
* ``` | |
* | |
* @exportedAs angular2/annotations | |
*/ | |
class SelfAnnotation extends Visibility { | |
} | |
/** | |
* 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. | |
* | |
* | |
* ## Example | |
* | |
* Here is a simple directive that retrieves a dependency from an ancestor element. | |
* | |
* ``` | |
* @Directive({ | |
* selector: '[dependency]', | |
* properties: [ | |
* 'id: dependency' | |
* ] | |
* }) | |
* class Dependency { | |
* id:string; | |
* } | |
* | |
* | |
* @Directive({ | |
* selector: '[my-directive]' | |
* }) | |
* class Dependency { | |
* constructor(@Ancestor() dependency:Dependency) { | |
* expect(dependency.id).toEqual(2); | |
* }; | |
* } | |
* ``` | |
* | |
* We use this with the following HTML template: | |
* | |
* ``` | |
* <div dependency="1"> | |
* <div dependency="2"> | |
* <div> | |
* <div dependency="3" my-directive></div> | |
* </div> | |
* </div> | |
* </div> | |
* ``` | |
* | |
* 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>` | |
* - Next parent has the `Dependency` directive and so the dependency is satisfied. | |
* | |
* Angular injects `dependency=2`. | |
* | |
* @exportedAs angular2/annotations | |
*/ | |
class AncestorAnnotation extends Visibility { | |
} | |
/** | |
* Specifies that an injector should retrieve a dependency from the direct parent. | |
* | |
* ## Example | |
* | |
* Here is a simple directive that retrieves a dependency from its parent element. | |
* | |
* ``` | |
* @Directive({ | |
* selector: '[dependency]', | |
* properties: [ | |
* 'id: dependency' | |
* ] | |
* }) | |
* class Dependency { | |
* id:string; | |
* } | |
* | |
* | |
* @Directive({ | |
* selector: '[my-directive]' | |
* }) | |
* class Dependency { | |
* constructor(@Parent() dependency:Dependency) { | |
* expect(dependency.id).toEqual(1); | |
* }; | |
* } | |
* ``` | |
* | |
* We use this with the following HTML template: | |
* | |
* ``` | |
* <div dependency="1"> | |
* <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`. | |
* | |
* @exportedAs angular2/annotations | |
*/ | |
class ParentAnnotation extends Visibility { | |
} | |
/** | |
* Specifies that an injector should retrieve a dependency from any ancestor element. | |
* | |
* An ancestor is any element between the parent element and shadow root. | |
* | |
* | |
* ## Example | |
* | |
* Here is a simple directive that retrieves a dependency from an ancestor element. | |
* | |
* ``` | |
* @Directive({ | |
* selector: '[dependency]', | |
* properties: [ | |
* 'id: dependency' | |
* ] | |
* }) | |
* class Dependency { | |
* id:string; | |
* } | |
* | |
* | |
* @Directive({ | |
* selector: '[my-directive]' | |
* }) | |
* class Dependency { | |
* constructor(@Unbounded() dependency:Dependency) { | |
* expect(dependency.id).toEqual(2); | |
* }; | |
* } | |
* ``` | |
* | |
* @exportedAs angular2/annotations | |
*/ | |
class UnboundedAnnotation extends Visibility { | |
} | |
/** | |
* 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. | |
* | |
* 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 <a href='/angular2/angular2/Component'><code>Component</code></a>. | |
* | |
* ## Example | |
* | |
* ``` | |
* @Component({ | |
* selector: 'greet' | |
* }) | |
* @View({ | |
* template: 'Hello {{name}}!', | |
* directives: [GreetUser, Bold] | |
* }) | |
* class Greet { | |
* name: string; | |
* | |
* constructor() { | |
* this.name = 'World'; | |
* } | |
* } | |
* ``` | |
* | |
* @exportedAs angular2/annotations | |
*/ | |
class ViewAnnotation { | |
/** | |
* Specifies a list of directives that can be used within a template. | |
* | |
* Directives must be listed explicitly to provide proper component encapsulation. | |
* | |
* ## Example | |
* | |
* ```javascript | |
* @Component({ | |
* selector: 'my-component' | |
* }) | |
* @View({ | |
* directives: [For] | |
* template: ' | |
* <ul> | |
* <li *ng-for="#item of items">{{item}}</li> | |
* </ul>' | |
* }) | |
* class MyComponent { | |
* } | |
* ``` | |
*/ | |
directives: List<Type | any | List<any>>; | |
/** | |
* Specify a custom renderer for this View. | |
* If this is set, neither `template`, `templateURL` nor `directives` are used. | |
*/ | |
renderer: string; | |
/** | |
* Specifies an inline template for an angular component. | |
* | |
* NOTE: either `templateUrl` or `template` should be used, but not both. | |
*/ | |
template: string; | |
/** | |
* Specifies a template URL for an angular component. | |
* | |
* NOTE: either `templateUrl` or `template` should be used, but not both. | |
*/ | |
templateUrl: string; | |
} | |
/** | |
* 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 | |
* <a href='/angular2/angular2/Component'><code>Component</code></a> 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 <a href='/angular2/angular2/Injector'><code>Injector</code></a>. | |
* | |
* @exportedAs angular2/core | |
*/ | |
function bootstrap(appComponentType: Type, componentInjectableBindings?: List<Type | Binding | List<any>>, errorReporter?: Function) : Promise<ApplicationRef> ; | |
class ApplicationRef { | |
dispose(); | |
hostComponent; | |
hostComponentType; | |
injector; | |
} | |
var appComponentRefToken : OpaqueToken ; | |
var appComponentTypeToken : OpaqueToken ; | |
/** | |
* Specifies that a <a href='QueryList'>QueryList</a> should be injected. | |
* | |
* See <a href='QueryList'>QueryList</a> for usage and example. | |
* | |
* @exportedAs angular2/annotations | |
*/ | |
class QueryAnnotation extends DependencyAnnotation { | |
directive: any; | |
} | |
/** | |
* Specifies that a constant attribute value should be injected. | |
* | |
* The directive can inject constant string literals of host element attributes. | |
* | |
* ## Example | |
* | |
* Suppose we have an `<input>` element and want to know its `type`. | |
* | |
* ```html | |
* <input type="text"> | |
* ``` | |
* | |
* A decorator can inject string literal `text` like so: | |
* | |
* ```javascript | |
* @Directive({ | |
* selector: `input' | |
* }) | |
* class InputDirective { | |
* constructor(@Attribute('type') type) { | |
* // type would be `text` in this example | |
* } | |
* } | |
* ``` | |
* | |
* @exportedAs angular2/annotations | |
*/ | |
class AttributeAnnotation extends DependencyAnnotation { | |
attributeName: string; | |
token; | |
} | |
/** | |
* Cache that stores the AppProtoView of the template of a component. | |
* Used to prevent duplicate work and resolve cyclic dependencies. | |
*/ | |
class CompilerCache { | |
clear(): void; | |
get(component: Type): AppProtoView; | |
set(component: Type, protoView: AppProtoView): void; | |
} | |
/** | |
* @exportedAs angular2/view | |
*/ | |
class Compiler { | |
compile(component: Type): Promise<ProtoViewRef>; | |
compileInHost(componentTypeOrBinding: Type | Binding): Promise<ProtoViewRef>; | |
} | |
/** | |
* Defines lifecycle method [onChange] called after all of component's bound | |
* properties are updated. | |
*/ | |
interface OnChange { | |
onChange(changes: StringMap<string, any>): void; | |
} | |
/** | |
* Defines lifecycle method [onDestroy] called when a directive is being destroyed. | |
*/ | |
interface OnDestroy { | |
onDestroy(): void; | |
} | |
/** | |
* Defines lifecycle method [onCheck] called when a directive is being checked. | |
*/ | |
interface OnCheck { | |
onCheck(): void; | |
} | |
/** | |
* Defines lifecycle method [onInit] called when a directive is being checked the first time. | |
*/ | |
interface OnInit { | |
onInit(): void; | |
} | |
/** | |
* Defines lifecycle method [onAllChangesDone ] called when the bindings of all its children have | |
* been changed. | |
*/ | |
interface OnAllChangesDone { | |
onAllChangesDone(): void; | |
} | |
/** | |
* An iterable live list of components in the Light DOM. | |
* | |
* 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 | |
* 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 | |
* callbacks. | |
* | |
* # Example: | |
* | |
* Assume that `<tabs>` component would like to get a list its children which are `<pane>` | |
* components as shown in this | |
* example: | |
* | |
* ```html | |
* <tabs> | |
* <pane title="Overview">...</pane> | |
* <pane *ng-for="#o of objects" [title]="o.title">{{o.text}}</pane> | |
* </tabs> | |
* ``` | |
* | |
* 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 preferred solution is to inject a `QueryList` which is a live list of directives in the | |
* component`s light DOM. | |
* | |
* ```javascript | |
* @Component({ | |
* selector: 'tabs' | |
* }) | |
* @View({ | |
* template: ` | |
* <ul> | |
* <li *ng-for="#pane of panes">{{pane.title}}</li> | |
* </ul> | |
* <content></content> | |
* ` | |
* }) | |
* class Tabs { | |
* panes: QueryList<Pane> | |
* | |
* constructor(@Query(Pane) panes:QueryList<Pane>) { | |
* this.panes = panes; | |
* } | |
* } | |
* | |
* @Component({ | |
* selector: 'pane', | |
* properties: ['title'] | |
* }) | |
* @View(...) | |
* class Pane { | |
* title:string; | |
* } | |
* ``` | |
* | |
* @exportedAs angular2/view | |
*/ | |
class QueryList extends BaseQueryList { | |
onChange(callback); | |
removeCallback(callback); | |
} | |
class DirectiveResolver { | |
resolve(type: Type): Directive; | |
} | |
/** | |
* @exportedAs angular2/view | |
*/ | |
class ComponentRef { | |
dispose: Function; | |
hostView: ViewRef; | |
instance: any; | |
location: ElementRef; | |
} | |
/** | |
* Service for dynamically loading a Component into an arbitrary position in the internal Angular | |
* application tree. | |
* | |
* @exportedAs angular2/view | |
*/ | |
class DynamicComponentLoader { | |
/** | |
* 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?, injector?: Injector): Promise<ComponentRef>; | |
/** | |
* 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): Promise<ComponentRef>; | |
/** | |
* 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): Promise<ComponentRef>; | |
/** | |
* Loads a component next to the provided ElementRef. The loaded component receives | |
* injection normally as a hosted view. | |
*/ | |
loadNextToExistingLocation(typeOrBinding, location: ElementRef, injector?: Injector): Promise<ComponentRef>; | |
} | |
/** | |
* 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. | |
* | |
* When a component is instantiated, Angular | |
* - creates a shadow DOM for the component. | |
* - loads the selected template into the shadow DOM. | |
* - creates a child <a href='/angular2/angular2/Injector'><code>Injector</code></a> which is configured with the `appInjector` for the | |
* <a href='/angular2/angular2/Component'><code>Component</code></a>. | |
* | |
* All template expressions and statements are then evaluated against the component instance. | |
* | |
* For details on the `@View` annotation, see <a href='/angular2/angular2/View'><code>View</code></a>. | |
* | |
* ## Example | |
* | |
* ``` | |
* @Component({ | |
* selector: 'greet' | |
* }) | |
* @View({ | |
* template: 'Hello {{name}}!' | |
* }) | |
* class Greet { | |
* name: string; | |
* | |
* constructor() { | |
* this.name = 'World'; | |
* } | |
* } | |
* ``` | |
* | |
* | |
* 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, | |
* 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 | |
* `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 | |
* locations. | |
* | |
* ``` | |
* @Component({ | |
* selector: 'dynamic-comp' | |
* }) | |
* class DynamicComp { | |
* helloCmp:HelloCmp; | |
* constructor(loader:DynamicComponentLoader, location:ElementRef) { | |
* loader.load(HelloCmp, location).then((helloCmp) => { | |
* this.helloCmp = helloCmp; | |
* }); | |
* } | |
* } | |
* | |
* @Component({ | |
* selector: 'hello-cmp' | |
* }) | |
* @View({ | |
* template: "{{greeting}}" | |
* }) | |
* class HelloCmp { | |
* greeting:string; | |
* constructor() { | |
* this.greeting = "hello"; | |
* } | |
* } | |
* ``` | |
* | |
* | |
* @exportedAs angular2/annotations | |
*/ | |
class ComponentAnnotation extends Directive { | |
/** | |
* 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 | |
* 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 | |
* are children in the component's light DOM. | |
* | |
* | |
* The syntax for configuring the `appInjector` injectable is identical to <a href='/angular2/angular2/Injector'><code>Injector</code></a> | |
* injectable configuration. | |
* See <a href='/angular2/angular2/Injector'><code>Injector</code></a> for additional detail. | |
* | |
* | |
* ## Simple Example | |
* | |
* Here is an example of a class that can be injected: | |
* | |
* ``` | |
* class Greeter { | |
* greet(name:string) { | |
* return 'Hello ' + name + '!'; | |
* } | |
* } | |
* | |
* @Component({ | |
* selector: 'greet', | |
* appInjector: [ | |
* Greeter | |
* ] | |
* }) | |
* @View({ | |
* template: `{{greeter.greet('world')}}!`, | |
* directives: [Child] | |
* }) | |
* class HelloWorld { | |
* greeter:Greeter; | |
* | |
* constructor(greeter:Greeter) { | |
* this.greeter = greeter; | |
* } | |
* } | |
* ``` | |
*/ | |
appInjector: List<any>; | |
/** | |
* Defines the used change detection strategy. | |
* | |
* 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 | |
* tells it to do so. | |
*/ | |
changeDetection: string; | |
/** | |
* Defines the set of injectable objects that are visible to its view dom children. | |
* | |
* ## Simple Example | |
* | |
* Here is an example of a class that can be injected: | |
* | |
* ``` | |
* class Greeter { | |
* greet(name:string) { | |
* return 'Hello ' + name + '!'; | |
* } | |
* } | |
* | |
* @Directive({ | |
* selector: 'needs-greeter' | |
* }) | |
* class NeedsGreeter { | |
* greeter:Greeter; | |
* | |
* constructor(greeter:Greeter) { | |
* this.greeter = greeter; | |
* } | |
* } | |
* | |
* @Component({ | |
* selector: 'greet', | |
* viewInjector: [ | |
* Greeter | |
* ] | |
* }) | |
* @View({ | |
* template: `<needs-greeter></needs-greeter>`, | |
* directives: [NeedsGreeter] | |
* }) | |
* class HelloWorld { | |
* } | |
* | |
* ``` | |
*/ | |
viewInjector: List<any>; | |
} | |
/** | |
* Directives allow you to attach behavior to elements in the DOM. | |
* | |
* <a href='/angular2/annotations/Directive'><code>Directive</code></a>s with an embedded view are called <a href='/angular2/angular2/Component'><code>Component</code></a>s. | |
* | |
* 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, | |
* as declared in the HTML. | |
* | |
* ## Understanding How Injection Works | |
* | |
* There are three stages of injection resolution. | |
* - *Pre-existing Injectors*: | |
* - The terminal <a href='/angular2/angular2/Injector'><code>Injector</code></a> 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 <a href='/angular2/angular2/Injector'><code>Injector</code></a>, 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` | |
* 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 | |
* 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 | |
* <a href='/angular2/angular2/View'><code>View</code></a>: | |
* | |
* 1. Dependencies on the current element | |
* 2. Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary | |
* 3. Dependencies on component injectors and their parents until it encounters the root component | |
* 4. Dependencies on pre-existing injectors | |
* | |
* | |
* 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 | |
* 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. | |
* | |
* 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 | |
* <a href='/angular2/annotations/Directive'><code>Directive</code></a> 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. | |
* | |
* | |
* Assume this HTML template: | |
* | |
* ``` | |
* <div dependency="1"> | |
* <div dependency="2"> | |
* <div dependency="3" my-directive> | |
* <div dependency="4"> | |
* <div dependency="5"></div> | |
* </div> | |
* <div dependency="6"></div> | |
* </div> | |
* </div> | |
* </div> | |
* ``` | |
* | |
* With the following `dependency` decorator and `SomeService` injectable class. | |
* | |
* ``` | |
* @Injectable() | |
* class SomeService { | |
* } | |
* | |
* @Directive({ | |
* selector: '[dependency]', | |
* properties: [ | |
* 'id: dependency' | |
* ] | |
* }) | |
* class Dependency { | |
* id:string; | |
* } | |
* ``` | |
* | |
* Let's step through the different ways in which `MyDirective` could be declared... | |
* | |
* | |
* ### No injection | |
* | |
* Here the constructor is declared with no arguments, therefore nothing is injected into | |
* `MyDirective`. | |
* | |
* ``` | |
* @Directive({ selector: '[my-directive]' }) | |
* class MyDirective { | |
* constructor() { | |
* } | |
* } | |
* ``` | |
* | |
* This directive would be instantiated with no dependencies. | |
* | |
* | |
* ### Component-level injection | |
* | |
* 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 | |
* component's injector. | |
* ``` | |
* @Directive({ selector: '[my-directive]' }) | |
* class MyDirective { | |
* constructor(someService: SomeService) { | |
* } | |
* } | |
* ``` | |
* | |
* This directive would be instantiated with a dependency on `SomeService`. | |
* | |
* | |
* ### Injecting a directive from the current element | |
* | |
* Directives can inject other directives declared on the current element. | |
* | |
* ``` | |
* @Directive({ selector: '[my-directive]' }) | |
* class MyDirective { | |
* constructor(dependency: Dependency) { | |
* expect(dependency.id).toEqual(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 | |
* the dependency. | |
* | |
* ``` | |
* @Directive({ selector: '[my-directive]' }) | |
* class MyDirective { | |
* constructor(@Parent() dependency: Dependency) { | |
* expect(dependency.id).toEqual(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 | |
* resolve dependencies for the current element, even if this would satisfy the dependency. | |
* | |
* ``` | |
* @Directive({ selector: '[my-directive]' }) | |
* class MyDirective { | |
* constructor(@Ancestor() dependency: Dependency) { | |
* expect(dependency.id).toEqual(2); | |
* } | |
* } | |
* ``` | |
* | |
* 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 | |
* `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 directives, a directive can't simply inject the list of child directives. Instead, | |
* the directive injects a <a href='QueryList'>QueryList</a>, which updates its contents as children are added, | |
* removed, or moved by a directive that uses a <a href='/angular2/angular2/ViewContainerRef'><code>ViewContainerRef</code></a> such as a `ng-for`, an | |
* `ng-if`, or an `ng-switch`. | |
* | |
* ``` | |
* @Directive({ selector: '[my-directive]' }) | |
* class MyDirective { | |
* constructor(@Query(Dependency) dependencies:QueryList<Dependency>) { | |
* } | |
* } | |
* ``` | |
* | |
* This directive would be instantiated with a <a href='QueryList'>QueryList</a> 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 | |
* | |
* Note: This is will be implemented in later release. () | |
* | |
* Similar to `@Query` above, but also includes the children of the child elements. | |
* | |
* ``` | |
* @Directive({ selector: '[my-directive]' }) | |
* class MyDirective { | |
* constructor(@QueryDescendents(Dependency) dependencies:QueryList<Dependency>) { | |
* } | |
* } | |
* ``` | |
* | |
* This directive would be instantiated with a Query which would contain `Dependency` 4, 5 and 6. | |
* | |
* ### 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. | |
* | |
* ``` | |
* @Directive({ selector: '[my-directive]' }) | |
* class MyDirective { | |
* constructor(@Optional() dependency:Dependency) { | |
* } | |
* } | |
* ``` | |
* | |
* 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 | |
* | |
* Here we use a decorator directive to simply define basic tool-tip behavior. | |
* | |
* ``` | |
* @Directive({ | |
* selector: '[tooltip]', | |
* properties: [ | |
* 'text: tooltip' | |
* ], | |
* hostListeners: { | |
* 'onmouseenter': 'onMouseEnter()', | |
* 'onmouseleave': 'onMouseLeave()' | |
* } | |
* }) | |
* class Tooltip{ | |
* text:string; | |
* overlay:Overlay; // NOT YET IMPLEMENTED | |
* overlayManager:OverlayManager; // NOT YET IMPLEMENTED | |
* | |
* constructor(overlayManager:OverlayManager) { | |
* this.overlay = overlay; | |
* } | |
* | |
* onMouseEnter() { | |
* // exact signature to be determined | |
* this.overlay = this.overlayManager.open(text, ...); | |
* } | |
* | |
* onMouseLeave() { | |
* this.overlay.close(); | |
* this.overlay = null; | |
* } | |
* } | |
* ``` | |
* 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: | |
* | |
* A directive uses a <a href='/angular2/angular2/ViewContainerRef'><code>ViewContainerRef</code></a> to instantiate, insert, move, and destroy views at | |
* runtime. | |
* The <a href='/angular2/angular2/ViewContainerRef'><code>ViewContainerRef</code></a> 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 <a href='/angular2/angular2/View'><code>View</code></a>, 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. | |
* | |
* Thus, | |
* | |
* ``` | |
* <ul> | |
* <li *foo="bar" title="text"></li> | |
* </ul> | |
* ``` | |
* | |
* Expands in use to: | |
* | |
* ``` | |
* <ul> | |
* <template [foo]="bar"> | |
* <li title="text"></li> | |
* </template> | |
* </ul> | |
* ``` | |
* | |
* 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. | |
* | |
* | |
* ## Example | |
* | |
* Let's suppose we want to implement the `unless` behavior, to conditionally include a template. | |
* | |
* Here is a simple directive that triggers on an `unless` selector: | |
* | |
* ``` | |
* @Directive({ | |
* selector: '[unless]', | |
* properties: ['unless'] | |
* }) | |
* export class Unless { | |
* viewContainer: ViewContainerRef; | |
* protoViewRef: ProtoViewRef; | |
* prevCondition: boolean; | |
* | |
* constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef) { | |
* this.viewContainer = viewContainer; | |
* this.protoViewRef = protoViewRef; | |
* this.prevCondition = null; | |
* } | |
* | |
* set unless(newCondition) { | |
* if (newCondition && (isBlank(this.prevCondition) || !this.prevCondition)) { | |
* this.prevCondition = true; | |
* this.viewContainer.clear(); | |
* } else if (!newCondition && (isBlank(this.prevCondition) || this.prevCondition)) { | |
* this.prevCondition = false; | |
* this.viewContainer.create(this.protoViewRef); | |
* } | |
* } | |
* } | |
* ``` | |
* | |
* We can then use this `unless` selector in a template: | |
* ``` | |
* <ul> | |
* <li *unless="expr"></li> | |
* </ul> | |
* ``` | |
* | |
* Once the directive instantiates the child view, the shorthand notation for the template expands | |
* and the result is: | |
* | |
* ``` | |
* <ul> | |
* <template [unless]="exp"> | |
* <li></li> | |
* </template> | |
* <li></li> | |
* </ul> | |
* ``` | |
* | |
* 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 | |
*/ | |
class DirectiveAnnotation extends Injectable { | |
/** | |
* If set to true the compiler does not compile the children of this directive. | |
*/ | |
compileChildren: boolean; | |
/** | |
* Enumerates the set of emitted events. | |
* | |
* ## Syntax | |
* | |
* ``` | |
* @Component({ | |
* events: ['statusChange'] | |
* }) | |
* class TaskComponent { | |
* statusChange:EventEmitter; | |
* | |
* constructor() { | |
* this.statusChange = new EventEmitter(); | |
* } | |
* | |
* onComplete() { | |
* this.statusChange.next('completed'); | |
* } | |
* } | |
* ``` | |
*/ | |
events: List<string>; | |
/** | |
* Specifies which DOM methods a directive can invoke. | |
* | |
* ## Syntax | |
* | |
* ``` | |
* @Directive({ | |
* selector: 'input', | |
* hostActions: { | |
* 'emitFocus': 'focus()' | |
* } | |
* }) | |
* class InputDirective { | |
* constructor() { | |
* this.emitFocus = new EventEmitter(); | |
* } | |
* | |
* focus() { | |
* this.emitFocus.next(); | |
* } | |
* } | |
* | |
* In this example calling focus on InputDirective will result in calling focus on the DOM | |
* element. | |
* ``` | |
*/ | |
hostActions: StringMap<string, string>; | |
/** | |
* 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 | |
* | |
* ``` | |
* @Directive({ | |
* selector: '[my-button]', | |
* hostAttributes: { | |
* 'role': 'button' | |
* } | |
* }) | |
* class MyButton { | |
* } | |
* | |
* 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: StringMap<string, string>; | |
/** | |
* Defines the set of injectable objects that are visible to a Directive and its light dom | |
* children. | |
* | |
* ## Simple Example | |
* | |
* Here is an example of a class that can be injected: | |
* | |
* ``` | |
* class Greeter { | |
* greet(name:string) { | |
* return 'Hello ' + name + '!'; | |
* } | |
* } | |
* | |
* @Directive({ | |
* selector: 'greet', | |
* hostInjector: [ | |
* Greeter | |
* ] | |
* }) | |
* class HelloWorld { | |
* greeter:Greeter; | |
* | |
* constructor(greeter:Greeter) { | |
* this.greeter = greeter; | |
* } | |
* } | |
* ``` | |
*/ | |
hostInjector: List<any>; | |
/** | |
* Specifies which DOM hostListeners a directive listens to. | |
* | |
* The `hostListeners` property defines a set of `event` to `method` key-value pairs: | |
* | |
* - `event1`: the DOM event that the directive listens to. | |
* - `statement`: the statement to execute when the event occurs. | |
* 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. | |
* (will be implemented in later release) | |
* | |
* | |
* ## Syntax | |
* | |
* ``` | |
* @Directive({ | |
* hostListeners: { | |
* 'event1': 'onMethod1(arguments)', | |
* 'target:event2': 'onMethod2(arguments)', | |
* ... | |
* } | |
* } | |
* ``` | |
* | |
* ## Basic Event Binding: | |
* | |
* 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: | |
* | |
* ``` | |
* @Directive({ | |
* selector: 'input', | |
* hostListeners: { | |
* 'change': 'onChange($event)', | |
* 'window:resize': 'onResize($event)' | |
* } | |
* }) | |
* class InputDirective { | |
* onChange(event:Event) { | |
* } | |
* onResize(event:Event) { | |
* } | |
* } | |
* ``` | |
* | |
* Here the `onChange` method of `InputDirective` is invoked whenever the DOM element fires the | |
* 'change' event. | |
*/ | |
hostListeners: StringMap<string, string>; | |
/** | |
* Specifies which DOM properties a directives updates. | |
* | |
* ## Syntax | |
* | |
* ``` | |
* @Directive({ | |
* selector: 'input', | |
* hostProperties: { | |
* 'value': 'value' | |
* } | |
* }) | |
* class InputDirective { | |
* value:string; | |
* } | |
* | |
* In this example every time the value property of the decorator changes, Angular will update the | |
* value property of | |
* the host element. | |
* ``` | |
*/ | |
hostProperties: StringMap<string, string>; | |
/** | |
* Specifies a set of lifecycle hostListeners in which the directive participates. | |
* | |
* See <a href='annotations/onChange'>onChange</a>, <a href='annotations/onDestroy'>onDestroy</a>, | |
* <a href='annotations/onAllChangesDone'>onAllChangesDone</a> for details. | |
*/ | |
lifecycle: List<LifecycleEvent>; | |
/** | |
* Enumerates the set of properties that accept data binding for a directive. | |
* | |
* The `properties` property defines a set of `directiveProperty` to `bindingProperty` | |
* configuration: | |
* | |
* - `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 <a href='/angular2/angular2/Pipe'><code>Pipe</code></a> 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. | |
* | |
* ## Syntax | |
* | |
* There is no need to specify both `directiveProperty` and `bindingProperty` when they both have | |
* the same value. | |
* | |
* ``` | |
* @Directive({ | |
* properties: [ | |
* 'propertyName', // shorthand notation for 'propertyName: propertyName' | |
* 'directiveProperty1: bindingProperty1', | |
* 'directiveProperty2: bindingProperty2 | pipe1 | ...', | |
* ... | |
* ] | |
* } | |
* ``` | |
* | |
* | |
* ## Basic Property Binding | |
* | |
* 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: | |
* | |
* ``` | |
* @Directive({ | |
* selector: '[tooltip]', | |
* properties: [ | |
* 'text: tooltip' | |
* ] | |
* }) | |
* class Tooltip { | |
* set text(value: string) { | |
* // This will get called every time with the new value when the 'tooltip' property changes | |
* } | |
* } | |
* ``` | |
* | |
* 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 | |
* <div [tooltip]="someExpression">...</div> | |
* <div tooltip="Some Text">...</div> | |
* ``` | |
* | |
* Whenever the `someExpression` expression changes, the `properties` declaration instructs | |
* Angular to update the `Tooltip`'s `text` property. | |
* | |
* ## Bindings With Pipes | |
* | |
* 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 changes, as normally occurs in change detection. | |
* | |
* See <a href='/angular2/angular2/Pipe'><code>Pipe</code></a> and <a href='pipes/keyValDiff'>keyValDiff</a> documentation for more details. | |
* | |
* ``` | |
* @Directive({ | |
* selector: '[class-set]', | |
* properties: [ | |
* 'classChanges: classSet | keyValDiff' | |
* ] | |
* }) | |
* class ClassSet { | |
* set classChanges(changes: KeyValueChanges) { | |
* // This will get called every time the `class-set` expressions changes its structure. | |
* } | |
* } | |
* ``` | |
* | |
* The template that this directive is used in may also contain its own pipes. For example: | |
* | |
* ```html | |
* <div [class-set]="someExpression | somePipe"> | |
* ``` | |
* | |
* In this case, the two pipes compose as if they were inlined: `someExpression | somePipe | | |
* keyValDiff`. | |
*/ | |
properties: List<string>; | |
/** | |
* 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. | |
* | |
* `selector` may be declared as one of the following: | |
* | |
* - `element-name`: select by element name. | |
* - `.class`: select by class name. | |
* - `[attribute]`: select by attribute name. | |
* - `[attribute=value]`: select by attribute name and value. | |
* - `:not(sub_selector)`: select only if the element does not match the `sub_selector`. | |
* - `selector1, selector2`: select if either `selector1` or `selector2` matches. | |
* | |
* | |
* ## Example | |
* | |
* Suppose we have a directive with an `input[type=text]` selector. | |
* | |
* And the following HTML: | |
* | |
* ```html | |
* <form> | |
* <input type="text"> | |
* <input type="radio"> | |
* <form> | |
* ``` | |
* | |
* The directive would only be instantiated on the `<input type="text">` element. | |
*/ | |
selector: string; | |
} | |
/** | |
* Notify a directive whenever a <a href='/angular2/angular2/View'><code>View</code></a> that contains it is destroyed. | |
* | |
* ## Example | |
* | |
* ``` | |
* @Directive({ | |
* ..., | |
* lifecycle: [onDestroy] | |
* }) | |
* class ClassSet { | |
* onDestroy() { | |
* // invoked to notify directive of the containing view destruction. | |
* } | |
* } | |
* ``` | |
* @exportedAs angular2/annotations | |
*/ | |
const onDestroy; | |
/** | |
* Notify a directive when any of its bindings have changed. | |
* | |
* This method is called right after the directive's bindings have been checked, | |
* and before any of its children's bindings have been checked. | |
* | |
* It is invoked only if at least one of the directive's bindings has changed. | |
* | |
* ## Example: | |
* | |
* ``` | |
* @Directive({ | |
* selector: '[class-set]', | |
* properties: [ | |
* 'propA', | |
* 'propB' | |
* ], | |
* lifecycle: [onChange] | |
* }) | |
* class ClassSet { | |
* propA; | |
* propB; | |
* onChange(changes:{[idx: string, PropertyUpdate]}) { | |
* // This will get called after any of the properties have been updated. | |
* if (changes['propA']) { | |
* // if propA was updated | |
* } | |
* if (changes['propA']) { | |
* // if propB was updated | |
* } | |
* } | |
* } | |
* ``` | |
* @exportedAs angular2/annotations | |
*/ | |
const onChange; | |
/** | |
* Notify a directive when it has been checked. | |
* | |
* This method is called right after the directive's bindings have been checked, | |
* and before any of its children's bindings have been checked. | |
* | |
* It is invoked every time even when none of the directive's bindings has changed. | |
* | |
* ## Example: | |
* | |
* ``` | |
* @Directive({ | |
* selector: '[class-set]', | |
* lifecycle: [onCheck] | |
* }) | |
* class ClassSet { | |
* onCheck() { | |
* } | |
* } | |
* ``` | |
* @exportedAs angular2/annotations | |
*/ | |
const onCheck; | |
/** | |
* Notify a directive when it has been checked the first itme. | |
* | |
* This method is called right after the directive's bindings have been checked, | |
* and before any of its children's bindings have been checked. | |
* | |
* It is invoked only once. | |
* | |
* ## Example: | |
* | |
* ``` | |
* @Directive({ | |
* selector: '[class-set]', | |
* lifecycle: [onInit] | |
* }) | |
* class ClassSet { | |
* onInit() { | |
* } | |
* } | |
* ``` | |
* @exportedAs angular2/annotations | |
*/ | |
const onInit; | |
/** | |
* Notify a directive when the bindings of all its children have been changed. | |
* | |
* ## Example: | |
* | |
* ``` | |
* @Directive({ | |
* selector: '[class-set]', | |
* lifecycle: [onAllChangesDone] | |
* }) | |
* class ClassSet { | |
* | |
* onAllChangesDone() { | |
* } | |
* | |
* } | |
* ``` | |
* @exportedAs angular2/annotations | |
*/ | |
const onAllChangesDone; | |
var Component; | |
var View; | |
var Self; | |
var Parent; | |
var Ancestor; | |
var Unbounded; | |
var Attribute; | |
var Query; | |
/** | |
* A collection of the Angular core directives that are likely to be used in each and every Angular | |
* application. | |
* | |
* This collection can be used to quickly enumerate all the built-in directives in the `@View` | |
* annotation. For example, | |
* instead of writing: | |
* | |
* ``` | |
* import {If, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/angular2'; | |
* import {OtherDirective} from 'myDirectives'; | |
* | |
* @Component({ | |
* selector: 'my-component' | |
* }) | |
* @View({ | |
* templateUrl: 'myComponent.html', | |
* directives: [If, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault, OtherDirective] | |
* }) | |
* export class MyComponent { | |
* ... | |
* } | |
* ``` | |
* one could enumerate all the core directives at once: | |
* | |
* ``` | |
* import {coreDirectives} from 'angular2/angular2'; | |
* import {OtherDirective} from 'myDirectives'; | |
* | |
* @Component({ | |
* selector: 'my-component' | |
* }) | |
* @View({ | |
* templateUrl: 'myComponent.html', | |
* directives: [coreDirectives, OtherDirective] | |
* }) | |
* export class MyComponent { | |
* ... | |
* } | |
* ``` | |
*/ | |
const coreDirectives : List<Type> ; | |
class CSSClass { | |
iterableChanges; | |
} | |
/** | |
* The `NgFor` directive instantiates a template once per item from an iterable. The context for | |
* each instantiated template inherits from the outer context with the given loop variable set | |
* to the current item from the iterable. | |
* | |
* It is possible to alias the `index` to a local variable that will be set to the current loop | |
* iteration in the template context. | |
* | |
* When the contents of the iterator changes, `NgFor` makes the corresponding changes to the DOM: | |
* | |
* * When an item is added, a new instance of the template is added to the DOM. | |
* * When an item is removed, its template instance is removed from the DOM. | |
* * When items are reordered, their respective templates are reordered in the DOM. | |
* | |
* # Example | |
* | |
* ``` | |
* <ul> | |
* <li *ng-for="#error of errors; #i = index"> | |
* Error {{i}} of {{errors.length}}: {{error.message}} | |
* </li> | |
* </ul> | |
* ``` | |
* | |
* # Syntax | |
* | |
* - `<li *ng-for="#item of items; #i = index">...</li>` | |
* - `<li template="ng-for #item of items; #i = index">...</li>` | |
* - `<template [ng-for] #item [ng-for-of]="items" #i="index"><li>...</li></template>` | |
* | |
* @exportedAs angular2/directives | |
*/ | |
class NgFor { | |
iterableChanges; | |
perViewChange(view, record); | |
protoViewRef: ProtoViewRef; | |
viewContainer: ViewContainerRef; | |
} | |
/** | |
* Removes or recreates a portion of the DOM tree based on an {expression}. | |
* | |
* If the expression assigned to `ng-if` evaluates to a false value then the element | |
* is removed from the DOM, otherwise a clone of the element is reinserted into the DOM. | |
* | |
* # Example: | |
* | |
* ``` | |
* <div *ng-if="errorCount > 0" class="error"> | |
* <!-- Error message displayed when the errorCount property on the current context is greater | |
* than 0. --> | |
* {{errorCount}} errors detected | |
* </div> | |
* ``` | |
* | |
* # Syntax | |
* | |
* - `<div *ng-if="condition">...</div>` | |
* - `<div template="ng-if condition">...</div>` | |
* - `<template [ng-if]="condition"><div>...</div></template>` | |
* | |
* @exportedAs angular2/directives | |
*/ | |
class NgIf { | |
ngIf; | |
prevCondition: boolean; | |
protoViewRef: ProtoViewRef; | |
viewContainer: ViewContainerRef; | |
} | |
/** | |
* The `NgNonBindable` directive tells Angular not to compile or bind the contents of the current | |
* DOM element. This is useful if the element contains what appears to be Angular directives and | |
* bindings but which should be ignored by Angular. This could be the case if you have a site that | |
* displays snippets of code, for instance. | |
* | |
* Example: | |
* | |
* ``` | |
* <div>Normal: {{1 + 2}}</div> // output "Normal: 3" | |
* <div non-bindable>Ignored: {{1 + 2}}</div> // output "Ignored: {{1 + 2}}" | |
* ``` | |
* | |
* @exportedAs angular2/directives | |
*/ | |
class NgNonBindable { | |
} | |
class SwitchView { | |
create(); | |
destroy(); | |
} | |
/** | |
* The `NgSwitch` directive is used to conditionally swap DOM structure on your template based on a | |
* scope expression. | |
* Elements within `NgSwitch` but without `NgSwitchWhen` or `NgSwitchDefault` directives will be | |
* preserved at the location as specified in the template. | |
* | |
* `NgSwitch` simply chooses nested elements and makes them visible based on which element matches | |
* the value obtained from the evaluated expression. In other words, you define a container element | |
* (where you place the directive), place an expression on the **`[ng-switch]="..."` attribute**), | |
* define any inner elements inside of the directive and place a `[ng-switch-when]` attribute per | |
* element. | |
* The when attribute is used to inform NgSwitch which element to display when the expression is | |
* evaluated. If a matching expression is not found via a when attribute then an element with the | |
* default attribute is displayed. | |
* | |
* # Example: | |
* | |
* ``` | |
* <ANY [ng-switch]="expression"> | |
* <template [ng-switch-when]="whenExpression1">...</template> | |
* <template [ng-switch-when]="whenExpression1">...</template> | |
* <template [ng-switch-default]>...</template> | |
* </ANY> | |
* ``` | |
* | |
* @exportedAs angular2/directives | |
*/ | |
class NgSwitch { | |
ngSwitch; | |
} | |
/** | |
* Defines a case statement as an expression. | |
* | |
* If multiple `NgSwitchWhen` match the `NgSwitch` value, all of them are displayed. | |
* | |
* Example: | |
* | |
* ``` | |
* // match against a context variable | |
* <template [ng-switch-when]="contextVariable">...</template> | |
* | |
* // match against a constant string | |
* <template [ng-switch-when]="'stringValue'">...</template> | |
* ``` | |
* | |
* @exportedAs angular2/directives | |
*/ | |
class NgSwitchWhen { | |
ngSwitchWhen; | |
onDestroy(); | |
} | |
/** | |
* Defines a default case statement. | |
* | |
* Default case statements are displayed when no `NgSwitchWhen` match the `ng-switch` value. | |
* | |
* Example: | |
* | |
* ``` | |
* <template [ng-switch-default]>...</template> | |
* ``` | |
* | |
* @exportedAs angular2/directives | |
*/ | |
class NgSwitchDefault { | |
} | |
/** | |
* Indicates that a Control is valid, i.e. that no errors exist in the input value. | |
* | |
* @exportedAs angular2/forms | |
*/ | |
const VALID; | |
/** | |
* Indicates that a Control is invalid, i.e. that an error exists in the input value. | |
* | |
* @exportedAs angular2/forms | |
*/ | |
const INVALID; | |
function isControl(c: Object) : boolean ; | |
/** | |
* Omitting from external API doc as this is really an abstract internal concept. | |
*/ | |
class AbstractControl { | |
dirty: boolean; | |
errors: StringMap<string, any>; | |
pristine: boolean; | |
setParent(parent); | |
status: string; | |
touch(): void; | |
touched: boolean; | |
untouched: boolean; | |
updateValidity({onlySelf}?: {onlySelf?: boolean}): void; | |
updateValueAndValidity({onlySelf, emitEvent}?: {onlySelf?: boolean, | |
emitEvent?: boolean}): void; | |
valid: boolean; | |
validator: Function; | |
value: any; | |
valueChanges: Observable; | |
} | |
/** | |
* Defines a part of a form that cannot be divided into other controls. | |
* | |
* `Control` is one of the three fundamental building blocks used to define forms in Angular, along | |
* with | |
* <a href='ControlGroup'>ControlGroup</a> and <a href='ControlArray'>ControlArray</a>. | |
* | |
* @exportedAs angular2/forms | |
*/ | |
class Control extends AbstractControl { | |
registerOnChange(fn: Function): void; | |
updateValue(value: any, {onlySelf, emitEvent}?: {onlySelf?: boolean, emitEvent?: boolean}): void; | |
} | |
/** | |
* Defines a part of a form, of fixed length, that can contain other controls. | |
* | |
* A ControlGroup aggregates the values and errors of each <a href='Control'>Control</a> in the group. Thus, if | |
* one of the controls | |
* in a group is invalid, the entire group is invalid. Similarly, if a control changes its value, | |
* the entire group | |
* changes as well. | |
* | |
* `ControlGroup` is one of the three fundamental building blocks used to define forms in Angular, | |
* along with | |
* <a href='Control'>Control</a> and <a href='ControlArray'>ControlArray</a>. <a href='ControlArray'>ControlArray</a> can also contain other controls, | |
* but is of variable | |
* length. | |
* | |
* @exportedAs angular2/forms | |
*/ | |
class ControlGroup extends AbstractControl { | |
addControl(name: string, c: AbstractControl); | |
contains(controlName: string): boolean; | |
controls: StringMap<string, AbstractControl>; | |
exclude(controlName: string): void; | |
find(path: string | List<string>): AbstractControl; | |
include(controlName: string): void; | |
removeControl(name: string); | |
} | |
/** | |
* Defines a part of a form, of variable length, that can contain other controls. | |
* | |
* A `ControlArray` aggregates the values and errors of each <a href='Control'>Control</a> in the group. Thus, if | |
* one of the controls | |
* in a group is invalid, the entire group is invalid. Similarly, if a control changes its value, | |
* the entire group | |
* changes as well. | |
* | |
* `ControlArray` is one of the three fundamental building blocks used to define forms in Angular, | |
* along with | |
* <a href='Control'>Control</a> and <a href='ControlGroup'>ControlGroup</a>. <a href='ControlGroup'>ControlGroup</a> can also contain other controls, | |
* but is of fixed | |
* length. | |
* | |
* @exportedAs angular2/forms | |
*/ | |
class ControlArray extends AbstractControl { | |
at(index: number): AbstractControl; | |
controls: List<AbstractControl>; | |
insert(index: number, control: AbstractControl): void; | |
length: number; | |
push(control: AbstractControl): void; | |
removeAt(index: number): void; | |
} | |
/** | |
* Binds a control with the specified name to a DOM element. | |
* | |
* # Example | |
* | |
* In this example, we bind the login control to an input element. When the value of the input | |
* element | |
* changes, the value of | |
* the control will reflect that change. Likewise, if the value of the control changes, the input | |
* element reflects that | |
* change. | |
* | |
* Here we use <a href='/angular2/angular2/formDirectives'><code>formDirectives</code></a>, rather than importing each form directive individually, e.g. | |
* `ControlDirective`, `ControlGroupDirective`. This is just a shorthand for the same end result. | |
* | |
* ``` | |
* @Component({selector: "login-comp"}) | |
* @View({ | |
* directives: [formDirectives], | |
* template: | |
* "<form [ng-form-model]='loginForm'>" + | |
* "Login <input type='text' ng-control='login'>" + | |
* "<button (click)="onLogin()">Login</button>" + | |
* "</form>" | |
* }) | |
* class LoginComp { | |
* loginForm:ControlGroup; | |
* | |
* constructor() { | |
* this.loginForm = new ControlGroup({ | |
* login: new Control(""), | |
* }); | |
* } | |
* | |
* onLogin() { | |
* // this.loginForm.value | |
* } | |
* } | |
* | |
* ``` | |
* | |
* @exportedAs angular2/forms | |
*/ | |
class ControlNameDirective extends ControlDirective { | |
formDirective: any; | |
model: any; | |
ngModel: EventEmitter; | |
onChange(c: StringMap<string, any>); | |
onDestroy(); | |
path: List<string>; | |
viewToModelUpdate(newValue: any): void; | |
} | |
/** | |
* Binds a control to a DOM element. | |
* | |
* # Example | |
* | |
* In this example, we bind the control to an input element. When the value of the input element | |
* changes, the value of | |
* the control will reflect that change. Likewise, if the value of the control changes, the input | |
* element reflects that | |
* change. | |
* | |
* Here we use <a href='/angular2/angular2/formDirectives'><code>formDirectives</code></a>, rather than importing each form directive individually, e.g. | |
* `ControlDirective`, `ControlGroupDirective`. This is just a shorthand for the same end result. | |
* | |
* ``` | |
* @Component({selector: "login-comp"}) | |
* @View({ | |
* directives: [formDirectives], | |
* template: "<input type='text' [ng-form-control]='loginControl'>" | |
* }) | |
* class LoginComp { | |
* loginControl:Control; | |
* | |
* constructor() { | |
* this.loginControl = new Control(''); | |
* } | |
* } | |
* | |
* ``` | |
* | |
* @exportedAs angular2/forms | |
*/ | |
class FormControlDirective extends ControlDirective { | |
control: Control; | |
model: any; | |
ngModel: EventEmitter; | |
onChange(c); | |
viewToModelUpdate(newValue: any): void; | |
} | |
class NgModelDirective extends ControlDirective { | |
control: Control; | |
model: any; | |
ngModel: EventEmitter; | |
onChange(c); | |
path: List<string>; | |
viewToModelUpdate(newValue: any): void; | |
} | |
/** | |
* A directive that bind a [ng-control] object to a DOM element. | |
* | |
* @exportedAs angular2/forms | |
*/ | |
class ControlDirective { | |
name: string; | |
path: List<string>; | |
validator: Function; | |
valueAccessor: ControlValueAccessor; | |
viewToModelUpdate(newValue: any): void; | |
} | |
/** | |
* Binds a ng-control group to a DOM element. | |
* | |
* # Example | |
* | |
* In this example, we create a ng-control group, and we bind the login and | |
* password controls to the login and password elements. | |
* | |
* Here we use <a href='/angular2/angular2/formDirectives'><code>formDirectives</code></a>, rather than importing each form directive individually, e.g. | |
* `ControlDirective`, `ControlGroupDirective`. This is just a shorthand for the same end result. | |
* | |
* ``` | |
* @Component({selector: "login-comp"}) | |
* @View({ | |
* directives: [formDirectives], | |
* template: | |
* "<form [ng-form-model]='loginForm'>" + | |
* "<div ng-control-group="credentials"> | |
* "Login <input type='text' ng-control='login'>" + | |
* "Password <input type='password' ng-control='password'>" + | |
* "<button (click)="onLogin()">Login</button>" + | |
* "</div>" | |
* "</form>" | |
* }) | |
* class LoginComp { | |
* loginForm:ControlGroup; | |
* | |
* constructor() { | |
* this.loginForm = new ControlGroup({ | |
* credentials: new ControlGroup({ | |
* login: new Cntrol(""), | |
* password: new Control("") | |
* }) | |
* }); | |
* } | |
* | |
* onLogin() { | |
* // this.loginForm.value | |
* } | |
* } | |
* | |
* ``` | |
* | |
* @exportedAs angular2/forms | |
*/ | |
class ControlGroupDirective extends ControlContainerDirective { | |
formDirective: any; | |
onDestroy(); | |
onInit(); | |
path: List<string>; | |
} | |
/** | |
* Binds a control group to a DOM element. | |
* | |
* # Example | |
* | |
* In this example, we bind the control group to the form element, and we bind the login and | |
* password controls to the | |
* login and password elements. | |
* | |
* Here we use <a href='/angular2/angular2/formDirectives'><code>formDirectives</code></a>, rather than importing each form directive individually, e.g. | |
* `ControlDirective`, `ControlGroupDirective`. This is just a shorthand for the same end result. | |
* | |
* ``` | |
* @Component({selector: "login-comp"}) | |
* @View({ | |
* directives: [formDirectives], | |
* template: "<form [ng-form-model]='loginForm'>" + | |
* "Login <input type='text' ng-control='login'>" + | |
* "Password <input type='password' ng-control='password'>" + | |
* "<button (click)="onLogin()">Login</button>" + | |
* "</form>" | |
* }) | |
* class LoginComp { | |
* loginForm:ControlGroup; | |
* | |
* constructor() { | |
* this.loginForm = new ControlGroup({ | |
* login: new Control(""), | |
* password: new Control("") | |
* }); | |
* } | |
* | |
* onLogin() { | |
* // this.loginForm.value | |
* } | |
* } | |
* | |
* ``` | |
* | |
* @exportedAs angular2/forms | |
*/ | |
class FormModelDirective extends ControlContainerDirective { | |
addControl(dir: ControlDirective): void; | |
addControlGroup(dir: ControlGroupDirective); | |
directives: List<ControlDirective>; | |
form: ControlGroup; | |
formDirective: FormDirective; | |
onChange(_); | |
path: List<string>; | |
removeControl(dir: ControlDirective): void; | |
removeControlGroup(dir: ControlGroupDirective); | |
updateModel(dir: ControlDirective, value: any): void; | |
} | |
class TemplateDrivenFormDirective extends ControlContainerDirective { | |
addControl(dir: ControlDirective): void; | |
addControlGroup(dir: ControlGroupDirective): void; | |
controls: StringMap<string, AbstractControl>; | |
form: ControlGroup; | |
formDirective: FormDirective; | |
path: List<string>; | |
removeControl(dir: ControlDirective): void; | |
removeControlGroup(dir: ControlGroupDirective): void; | |
updateModel(dir: ControlDirective, value: any): void; | |
value: any; | |
} | |
interface ControlValueAccessor { | |
registerOnChange(fn: any): void; | |
registerOnTouched(fn: any): void; | |
writeValue(obj: any): void; | |
} | |
/** | |
* The default accessor for writing a value and listening to changes that is used by a | |
* <a href='Control'>Control</a> directive. | |
* | |
* This is the default strategy that Angular uses when no other accessor is applied. | |
* | |
* # Example | |
* ``` | |
* <input type="text" [ng-form-control]="loginControl"> | |
* ``` | |
* | |
* @exportedAs angular2/forms | |
*/ | |
class DefaultValueAccessor { | |
onChange: Function; | |
onTouched: Function; | |
registerOnChange(fn): void; | |
registerOnTouched(fn): void; | |
value; | |
writeValue(value); | |
} | |
/** | |
* The accessor for writing a value and listening to changes on a checkbox input element. | |
* | |
* | |
* # Example | |
* ``` | |
* <input type="checkbox" [ng-control]="rememberLogin"> | |
* ``` | |
* | |
* @exportedAs angular2/forms | |
*/ | |
class CheckboxControlValueAccessor { | |
checked: boolean; | |
onChange: Function; | |
onTouched: Function; | |
registerOnChange(fn): void; | |
registerOnTouched(fn): void; | |
writeValue(value); | |
} | |
/** | |
* The accessor for writing a value and listening to changes that is used by a | |
* <a href='Control'>Control</a> directive. | |
* | |
* This is the default strategy that Angular uses when no other accessor is applied. | |
* | |
* # Example | |
* ``` | |
* <input type="text" [ng-control]="loginControl"> | |
* ``` | |
* | |
* @exportedAs angular2/forms | |
*/ | |
class SelectControlValueAccessor { | |
onChange: Function; | |
onTouched: Function; | |
registerOnChange(fn): void; | |
registerOnTouched(fn): void; | |
value; | |
writeValue(value); | |
} | |
/** | |
* A list of all the form directives used as part of a `@View` annotation. | |
* | |
* This is a shorthand for importing them each individually. | |
* | |
* @exportedAs angular2/forms | |
*/ | |
const formDirectives : List<Type> ; | |
/** | |
* Provides a set of validators used by form controls. | |
* | |
* # Example | |
* | |
* ``` | |
* var loginControl = new Control("", Validators.required) | |
* ``` | |
* | |
* @exportedAs angular2/forms | |
*/ | |
class Validators { | |
} | |
class RequiredValidatorDirective { | |
} | |
/** | |
* Creates a form object from a user-specified configuration. | |
* | |
* # Example | |
* | |
* ``` | |
* import {Component, View, bootstrap} from 'angular2/angular2'; | |
* import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms'; | |
* | |
* @Component({ | |
* selector: 'login-comp', | |
* appInjector: [ | |
* FormBuilder | |
* ] | |
* }) | |
* @View({ | |
* template: ` | |
* <form [control-group]="loginForm"> | |
* Login <input control="login"> | |
* | |
* <div control-group="passwordRetry"> | |
* Password <input type="password" control="password"> | |
* Confirm password <input type="password" control="passwordConfirmation"> | |
* </div> | |
* </form> | |
* `, | |
* directives: [ | |
* formDirectives | |
* ] | |
* }) | |
* class LoginComp { | |
* loginForm: ControlGroup; | |
* | |
* constructor(builder: FormBuilder) { | |
* this.loginForm = builder.group({ | |
* login: ["", Validators.required], | |
* | |
* passwordRetry: builder.group({ | |
* password: ["", Validators.required], | |
* passwordConfirmation: ["", Validators.required] | |
* }) | |
* }); | |
* } | |
* } | |
* | |
* bootstrap(LoginComp) | |
* ``` | |
* | |
* This example creates a <a href='ControlGroup'>ControlGroup</a> that consists of a `login` <a href='Control'>Control</a>, and a | |
* nested | |
* <a href='ControlGroup'>ControlGroup</a> that defines a `password` and a `passwordConfirmation` <a href='Control'>Control</a>: | |
* | |
* ``` | |
* var loginForm = builder.group({ | |
* login: ["", Validators.required], | |
* | |
* passwordRetry: builder.group({ | |
* password: ["", Validators.required], | |
* passwordConfirmation: ["", Validators.required] | |
* }) | |
* }); | |
* | |
* ``` | |
* @exportedAs angular2/forms | |
*/ | |
class FormBuilder { | |
array(controlsConfig: List<any>, validator?: Function): modelModule.ControlArray; | |
control(value: Object, validator?: Function): modelModule.Control; | |
group(controlsConfig: StringMap<string, any>, extra?: StringMap<string, any>): modelModule.ControlGroup; | |
} | |
function resolveBindings(bindings: List<Type | Binding | List<any>>) : List<ResolvedBinding> ; | |
/** | |
* A dependency injection container used for resolving dependencies. | |
* | |
* An `Injector` is a replacement for a `new` operator, which can automatically resolve the | |
* constructor dependencies. | |
* In typical use, application code asks for the dependencies in the constructor and they are | |
* resolved by the `Injector`. | |
* | |
* ## Example: | |
* | |
* Suppose that we want to inject an `Engine` into class `Car`, we would define it like this: | |
* | |
* ```javascript | |
* class Engine { | |
* } | |
* | |
* class Car { | |
* constructor(@Inject(Engine) engine) { | |
* } | |
* } | |
* | |
* ``` | |
* | |
* Next we need to write the code that creates and instantiates the `Injector`. We then ask for the | |
* `root` object, `Car`, so that the `Injector` can recursively build all of that object's | |
* dependencies. | |
* | |
* ```javascript | |
* main() { | |
* var injector = Injector.resolveAndCreate([Car, Engine]); | |
* | |
* // Get a reference to the `root` object, which will recursively instantiate the tree. | |
* var car = injector.get(Car); | |
* } | |
* ``` | |
* Notice that we don't use the `new` operator because we explicitly want to have the `Injector` | |
* resolve all of the object's dependencies automatically. | |
* | |
* @exportedAs angular2/di | |
*/ | |
class Injector { | |
/** | |
* Retrieves an instance from the injector asynchronously. Used with asynchronous bindings. | |
* | |
* @param `token`: usually a `Type`. (Same as token used while setting up a binding). | |
* @returns a `Promise` which resolves to the instance represented by the token. | |
*/ | |
asyncGet(token): Promise<any>; | |
/** | |
* Creates a child injector and loads a new set of <a href='/angular2/angular2/ResolvedBinding'><code>ResolvedBinding</code></a>s into it. | |
* | |
* @param `bindings`: A sparse list of <a href='/angular2/angular2/ResolvedBinding'><code>ResolvedBinding</code></a>s. | |
* See `resolve` for the <a href='/angular2/angular2/Injector'><code>Injector</code></a>. | |
* @returns a new child <a href='/angular2/angular2/Injector'><code>Injector</code></a>. | |
*/ | |
createChildFromResolved(bindings: List<ResolvedBinding>): Injector; | |
/** | |
* Retrieves an instance from the injector. | |
* | |
* @param `token`: usually the `Type` of an object. (Same as the token used while setting up a | |
* binding). | |
* @returns an instance represented by the token. Throws if not found. | |
*/ | |
get(token); | |
/** | |
* Retrieves an instance from the injector. | |
* | |
* @param `token`: usually a `Type`. (Same as the token used while setting up a binding). | |
* @returns an instance represented by the token. Returns `null` if not found. | |
*/ | |
getOptional(token); | |
/** | |
* Direct parent of this injector. | |
*/ | |
parent: Injector; | |
/** | |
* Creates a child injector and loads a new set of bindings into it. | |
* | |
* A resolution is a process of flattening multiple nested lists and converting individual | |
* bindings into a list of <a href='/angular2/angular2/ResolvedBinding'><code>ResolvedBinding</code></a>s. The resolution can be cached by `resolve` | |
* for the <a href='/angular2/angular2/Injector'><code>Injector</code></a> for performance-sensitive code. | |
* | |
* @param `bindings` can be a list of `Type`, <a href='/angular2/angular2/Binding'><code>Binding</code></a>, <a href='/angular2/angular2/ResolvedBinding'><code>ResolvedBinding</code></a>, or a | |
* recursive list of more bindings. | |
*/ | |
resolveAndCreateChild(bindings: List<Type | Binding | List<any>>): Injector; | |
} | |
/** | |
* Describes how the <a href='/angular2/angular2/Injector'><code>Injector</code></a> should instantiate a given token. | |
* | |
* See <a href='/angular2/angular2/bind'><code>bind</code></a>. | |
* | |
* ## Example | |
* | |
* ```javascript | |
* var injector = Injector.resolveAndCreate([ | |
* new Binding(String, { toValue: 'Hello' }) | |
* ]); | |
* | |
* expect(injector.get(String)).toEqual('Hello'); | |
* ``` | |
* | |
* @exportedAs angular2/di | |
*/ | |
class Binding { | |
/** | |
* Used in conjunction with `toFactory` or `toAsyncFactory` and specifies a set of dependencies | |
* (as `token`s) which should be injected into the factory function. | |
* | |
* ## Example | |
* | |
* ```javascript | |
* var injector = Injector.resolveAndCreate([ | |
* new Binding(Number, { toFactory: () => { return 1+2; }}), | |
* new Binding(String, { toFactory: (value) => { return "Value: " + value; }, | |
* dependencies: [Number] }) | |
* ]); | |
* | |
* expect(injector.get(Number)).toEqual(3); | |
* expect(injector.get(String)).toEqual('Value: 3'); | |
* ``` | |
*/ | |
dependencies: List<any>; | |
/** | |
* Converts the <a href='/angular2/angular2/Binding'><code>Binding</code></a> into <a href='/angular2/angular2/ResolvedBinding'><code>ResolvedBinding</code></a>. | |
* | |
* <a href='/angular2/angular2/Injector'><code>Injector</code></a> internally only uses <a href='/angular2/angular2/ResolvedBinding'><code>ResolvedBinding</code></a>, <a href='/angular2/angular2/Binding'><code>Binding</code></a> contains | |
* convenience binding syntax. | |
*/ | |
resolve(): ResolvedBinding; | |
/** | |
* Binds a key to the alias for an existing key. | |
* | |
* An alias means that <a href='/angular2/angular2/Injector'><code>Injector</code></a> returns the same instance as if the alias token was used. | |
* This is in contrast to `toClass` where a separate instance of `toClass` is returned. | |
* | |
* ## Example | |
* | |
* Becuse `toAlias` and `toClass` are often confused the example contains both use cases for easy | |
* comparison. | |
* | |
* ```javascript | |
* | |
* class Vehicle {} | |
* | |
* class Car extends Vehicle {} | |
* | |
* var injectorAlias = Injector.resolveAndCreate([ | |
* Car, | |
* new Binding(Vehicle, { toAlias: Car }) | |
* ]); | |
* var injectorClass = Injector.resolveAndCreate([ | |
* Car, | |
* new Binding(Vehicle, { toClass: Car }) | |
* ]); | |
* | |
* expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car)); | |
* expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true); | |
* | |
* expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car)); | |
* expect(injectorClass.get(Vehicle) instanceof Car).toBe(true); | |
* ``` | |
*/ | |
toAlias; | |
/** | |
* Binds a key to a function which computes the value asynchronously. | |
* | |
* ## Example | |
* | |
* ```javascript | |
* var injector = Injector.resolveAndCreate([ | |
* new Binding(Number, { toAsyncFactory: () => { | |
* return new Promise((resolve) => resolve(1 + 2)); | |
* }}), | |
* new Binding(String, { toFactory: (value) => { return "Value: " + value; }, | |
* dependencies: [Number]}) | |
* ]); | |
* | |
* injector.asyncGet(Number).then((v) => expect(v).toBe(3)); | |
* injector.asyncGet(String).then((v) => expect(v).toBe('Value: 3')); | |
* ``` | |
* | |
* The interesting thing to note is that event though `Number` has an async factory, the `String` | |
* factory function takes the resolved value. This shows that the <a href='/angular2/angular2/Injector'><code>Injector</code></a> delays | |
* executing the | |
* `String` factory | |
* until after the `Number` is resolved. This can only be done if the `token` is retrieved using | |
* the `asyncGet` API in the <a href='/angular2/angular2/Injector'><code>Injector</code></a>. | |
*/ | |
toAsyncFactory: Function; | |
/** | |
* Binds an interface to an implementation / subclass. | |
* | |
* ## Example | |
* | |
* Becuse `toAlias` and `toClass` are often confused, the example contains both use cases for easy | |
* comparison. | |
* | |
* ```javascript | |
* | |
* class Vehicle {} | |
* | |
* class Car extends Vehicle {} | |
* | |
* var injectorClass = Injector.resolveAndCreate([ | |
* Car, | |
* new Binding(Vehicle, { toClass: Car }) | |
* ]); | |
* var injectorAlias = Injector.resolveAndCreate([ | |
* Car, | |
* new Binding(Vehicle, { toAlias: Car }) | |
* ]); | |
* | |
* expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car)); | |
* expect(injectorClass.get(Vehicle) instanceof Car).toBe(true); | |
* | |
* expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car)); | |
* expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true); | |
* ``` | |
*/ | |
toClass: Type; | |
/** | |
* Binds a key to a function which computes the value. | |
* | |
* ## Example | |
* | |
* ```javascript | |
* var injector = Injector.resolveAndCreate([ | |
* new Binding(Number, { toFactory: () => { return 1+2; }}), | |
* new Binding(String, { toFactory: (value) => { return "Value: " + value; }, | |
* dependencies: [Number] }) | |
* ]); | |
* | |
* expect(injector.get(Number)).toEqual(3); | |
* expect(injector.get(String)).toEqual('Value: 3'); | |
* ``` | |
*/ | |
toFactory: Function; | |
/** | |
* Binds a key to a value. | |
* | |
* ## Example | |
* | |
* ```javascript | |
* var injector = Injector.resolveAndCreate([ | |
* new Binding(String, { toValue: 'Hello' }) | |
* ]); | |
* | |
* expect(injector.get(String)).toEqual('Hello'); | |
* ``` | |
*/ | |
toValue; | |
/** | |
* Token used when retrieving this binding. Usually the `Type`. | |
*/ | |
token; | |
} | |
/** | |
* Helper class for the <a href='/angular2/angular2/bind'><code>bind</code></a> function. | |
* | |
* @exportedAs angular2/di | |
*/ | |
class BindingBuilder { | |
/** | |
* Binds a key to the alias for an existing key. | |
* | |
* An alias means that we will return the same instance as if the alias token was used. (This is | |
* in contrast to `toClass` where a separet instance of `toClass` will be returned.) | |
* | |
* ## Example | |
* | |
* Becuse `toAlias` and `toClass` are often confused, the example contains both use cases for easy | |
* comparison. | |
* | |
* ```javascript | |
* | |
* class Vehicle {} | |
* | |
* class Car extends Vehicle {} | |
* | |
* var injectorAlias = Injector.resolveAndCreate([ | |
* Car, | |
* bind(Vehicle).toAlias(Car) | |
* ]); | |
* var injectorClass = Injector.resolveAndCreate([ | |
* Car, | |
* bind(Vehicle).toClass(Car) | |
* ]); | |
* | |
* expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car)); | |
* expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true); | |
* | |
* expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car)); | |
* expect(injectorClass.get(Vehicle) instanceof Car).toBe(true); | |
* ``` | |
*/ | |
toAlias(aliasToken): Binding; | |
/** | |
* Binds a key to a function which computes the value asynchronously. | |
* | |
* ## Example | |
* | |
* ```javascript | |
* var injector = Injector.resolveAndCreate([ | |
* bind(Number).toAsyncFactory(() => { | |
* return new Promise((resolve) => resolve(1 + 2)); | |
* }), | |
* bind(String).toFactory((v) => { return "Value: " + v; }, [Number]) | |
* ]); | |
* | |
* injector.asyncGet(Number).then((v) => expect(v).toBe(3)); | |
* injector.asyncGet(String).then((v) => expect(v).toBe('Value: 3')); | |
* ``` | |
* | |
* The interesting thing to note is that event though `Number` has an async factory, the `String` | |
* factory function takes the resolved value. This shows that the <a href='/angular2/angular2/Injector'><code>Injector</code></a> delays | |
* executing of the `String` factory | |
* until after the `Number` is resolved. This can only be done if the `token` is retrieved using | |
* the `asyncGet` API in the <a href='/angular2/angular2/Injector'><code>Injector</code></a>. | |
*/ | |
toAsyncFactory(factoryFunction: Function, dependencies?: List<any>): Binding; | |
/** | |
* Binds an interface to an implementation / subclass. | |
* | |
* ## Example | |
* | |
* Because `toAlias` and `toClass` are often confused, the example contains both use cases for | |
* easy comparison. | |
* | |
* ```javascript | |
* | |
* class Vehicle {} | |
* | |
* class Car extends Vehicle {} | |
* | |
* var injectorClass = Injector.resolveAndCreate([ | |
* Car, | |
* bind(Vehicle).toClass(Car) | |
* ]); | |
* var injectorAlias = Injector.resolveAndCreate([ | |
* Car, | |
* bind(Vehicle).toAlias(Car) | |
* ]); | |
* | |
* expect(injectorClass.get(Vehicle)).not.toBe(injectorClass.get(Car)); | |
* expect(injectorClass.get(Vehicle) instanceof Car).toBe(true); | |
* | |
* expect(injectorAlias.get(Vehicle)).toBe(injectorAlias.get(Car)); | |
* expect(injectorAlias.get(Vehicle) instanceof Car).toBe(true); | |
* ``` | |
*/ | |
toClass(type: Type): Binding; | |
/** | |
* Binds a key to a function which computes the value. | |
* | |
* ## Example | |
* | |
* ```javascript | |
* var injector = Injector.resolveAndCreate([ | |
* bind(Number).toFactory(() => { return 1+2; }), | |
* bind(String).toFactory((v) => { return "Value: " + v; }, [Number]) | |
* ]); | |
* | |
* expect(injector.get(Number)).toEqual(3); | |
* expect(injector.get(String)).toEqual('Value: 3'); | |
* ``` | |
*/ | |
toFactory(factoryFunction: Function, dependencies?: List<any>): Binding; | |
/** | |
* Binds a key to a value. | |
* | |
* ## Example | |
* | |
* ```javascript | |
* var injector = Injector.resolveAndCreate([ | |
* bind(String).toValue('Hello') | |
* ]); | |
* | |
* expect(injector.get(String)).toEqual('Hello'); | |
* ``` | |
*/ | |
toValue(value): Binding; | |
token; | |
} | |
/** | |
* An internal resolved representation of a <a href='/angular2/angular2/Binding'><code>Binding</code></a> used by the <a href='/angular2/angular2/Injector'><code>Injector</code></a>. | |
* | |
* A <a href='/angular2/angular2/Binding'><code>Binding</code></a> is resolved when it has a factory function. Binding to a class, alias, or | |
* value, are just convenience methods, as <a href='/angular2/angular2/Injector'><code>Injector</code></a> only operates on calling factory | |
* functions. | |
* | |
* @exportedAs angular2/di | |
*/ | |
class ResolvedBinding { | |
/** | |
* Arguments (dependencies) to the `factory` function. | |
*/ | |
dependencies: List<Dependency>; | |
/** | |
* Factory function which can return an instance of an object represented by a key. | |
*/ | |
factory: Function; | |
/** | |
* A key, usually a `Type`. | |
*/ | |
key: Key; | |
/** | |
* Specifies whether the `factory` function returns a `Promise`. | |
*/ | |
providedAsPromise: boolean; | |
} | |
/** | |
* @private | |
*/ | |
class Dependency { | |
asPromise: boolean; | |
key: Key; | |
lazy: boolean; | |
optional: boolean; | |
properties: List<any>; | |
} | |
/** | |
* Provides an API for imperatively constructing <a href='/angular2/angular2/Binding'><code>Binding</code></a>s. | |
* | |
* This is only relevant for JavaScript. See <a href='/angular2/angular2/BindingBuilder'><code>BindingBuilder</code></a>. | |
* | |
* ## Example | |
* | |
* ```javascript | |
* bind(MyInterface).toClass(MyClass) | |
* | |
* ``` | |
* | |
* @exportedAs angular2/di | |
*/ | |
function bind(token) : BindingBuilder ; | |
/** | |
* A unique object used for retrieving items from the <a href='/angular2/angular2/Injector'><code>Injector</code></a>. | |
* | |
* Keys have: | |
* - a system-wide unique `id`. | |
* - a `token`, usually the `Type` of the instance. | |
* | |
* Keys are used internally by the <a href='/angular2/angular2/Injector'><code>Injector</code></a> because their system-wide unique `id`s allow the | |
* injector to index in arrays rather than looking up items in maps. | |
* | |
* @exportedAs angular2/di | |
*/ | |
class Key { | |
displayName; | |
id: number; | |
token: Object; | |
} | |
/** | |
* @private | |
*/ | |
class KeyRegistry { | |
get(token: Object): Key; | |
numberOfKeys; | |
} | |
/** | |
* Type literals is a Dart-only feature. This is here only so we can x-compile | |
* to multiple languages. | |
*/ | |
class TypeLiteral { | |
type: any; | |
} | |
/** | |
* Thrown when trying to retrieve a dependency by `Key` from <a href='/angular2/angular2/Injector'><code>Injector</code></a>, but the | |
* <a href='/angular2/angular2/Injector'><code>Injector</code></a> does not have a <a href='/angular2/angular2/Binding'><code>Binding</code></a> for <a href='/angular2/angular2/Key'><code>Key</code></a>. | |
* | |
* @exportedAs angular2/di_errors | |
*/ | |
class NoBindingError extends AbstractBindingError { | |
} | |
/** | |
* Base class for all errors arising from misconfigured bindings. | |
* | |
* @exportedAs angular2/di_errors | |
*/ | |
class AbstractBindingError extends BaseException { | |
addKey(key): void; | |
constructResolvingMessage: Function; | |
keys: List<any>; | |
message: string; | |
name: string; | |
toString(): string; | |
} | |
/** | |
* Thrown when trying to retrieve an async <a href='/angular2/angular2/Binding'><code>Binding</code></a> using the sync API. | |
* | |
* ## Example | |
* | |
* ```javascript | |
* var injector = Injector.resolveAndCreate([ | |
* bind(Number).toAsyncFactory(() => { | |
* return new Promise((resolve) => resolve(1 + 2)); | |
* }), | |
* bind(String).toFactory((v) => { return "Value: " + v; }, [String]) | |
* ]); | |
* | |
* injector.asyncGet(String).then((v) => expect(v).toBe('Value: 3')); | |
* expect(() => { | |
* injector.get(String); | |
* }).toThrowError(AsycBindingError); | |
* ``` | |
* | |
* The above example throws because `String` depends on `Number` which is async. If any binding in | |
* the dependency graph is async then the graph can only be retrieved using the `asyncGet` API. | |
* | |
* @exportedAs angular2/di_errors | |
*/ | |
class AsyncBindingError extends AbstractBindingError { | |
} | |
/** | |
* Thrown when dependencies form a cycle. | |
* | |
* ## Example: | |
* | |
* ```javascript | |
* class A { | |
* constructor(b:B) {} | |
* } | |
* class B { | |
* constructor(a:A) {} | |
* } | |
* ``` | |
* | |
* Retrieving `A` or `B` throws a `CyclicDependencyError` as the graph above cannot be constructed. | |
* | |
* @exportedAs angular2/di_errors | |
*/ | |
class CyclicDependencyError extends AbstractBindingError { | |
} | |
/** | |
* Thrown when a constructing type returns with an Error. | |
* | |
* The `InstantiationError` class contains the original error plus the dependency graph which caused | |
* this object to be instantiated. | |
* | |
* @exportedAs angular2/di_errors | |
*/ | |
class InstantiationError extends AbstractBindingError { | |
cause; | |
causeKey; | |
} | |
/** | |
* Thrown when an object other then <a href='/angular2/angular2/Binding'><code>Binding</code></a> (or `Type`) is passed to <a href='/angular2/angular2/Injector'><code>Injector</code></a> | |
* creation. | |
* | |
* @exportedAs angular2/di_errors | |
*/ | |
class InvalidBindingError extends BaseException { | |
message: string; | |
toString(): string; | |
} | |
/** | |
* Thrown when the class has no annotation information. | |
* | |
* Lack of annotation information prevents the <a href='/angular2/angular2/Injector'><code>Injector</code></a> from determining which dependencies | |
* need to be injected into the constructor. | |
* | |
* @exportedAs angular2/di_errors | |
*/ | |
class NoAnnotationError extends BaseException { | |
message: string; | |
name: string; | |
toString(): string; | |
} | |
/** | |
* @exportedAs angular2/di | |
*/ | |
class OpaqueToken { | |
toString(): string; | |
} | |
/** | |
* A parameter annotation that specifies a dependency. | |
* | |
* ``` | |
* class AComponent { | |
* constructor(@Inject(MyService) aService:MyService) {} | |
* } | |
* ``` | |
* | |
* @exportedAs angular2/di_annotations | |
*/ | |
class InjectAnnotation { | |
token; | |
} | |
/** | |
* A parameter annotation that specifies a `Promise` of a dependency. | |
* | |
* ``` | |
* class AComponent { | |
* constructor(@InjectPromise(MyService) aServicePromise:Promise<MyService>) { | |
* aServicePromise.then(aService:MyService => ...); | |
* } | |
* } | |
* ``` | |
* | |
* @exportedAs angular2/di_annotations | |
*/ | |
class InjectPromiseAnnotation { | |
token; | |
} | |
/** | |
* A parameter annotation that creates a synchronous lazy dependency. | |
* | |
* ``` | |
* class AComponent { | |
* constructor(@InjectLazy(MyService) aServiceFn:Function) { | |
* var aService:MyService = aServiceFn(); | |
* } | |
* } | |
* ``` | |
* | |
* @exportedAs angular2/di_annotations | |
*/ | |
class InjectLazyAnnotation { | |
token; | |
} | |
/** | |
* A parameter annotation that marks a dependency as optional. <a href='/angular2/angular2/Injector'><code>Injector</code></a> provides `null` if | |
* the dependency is not found. | |
* | |
* ``` | |
* class AComponent { | |
* constructor(@Optional() aService:MyService) { | |
* this.aService = aService; | |
* } | |
* } | |
* ``` | |
* | |
* @exportedAs angular2/di_annotations | |
*/ | |
class OptionalAnnotation { | |
} | |
/** | |
* A marker annotation that marks a class as available to `Injector` for creation. Used by tooling | |
* for generating constructor stubs. | |
* | |
* ``` | |
* class NeedsService { | |
* constructor(svc:UsefulService) {} | |
* } | |
* | |
* @Injectable | |
* class UsefulService {} | |
* ``` | |
* @exportedAs angular2/di_annotations | |
*/ | |
class InjectableAnnotation { | |
} | |
/** | |
* `DependencyAnnotation` is used by the framework to extend DI. | |
* | |
* Only annotations implementing `DependencyAnnotation` are added to the list of dependency | |
* properties. | |
* | |
* For example: | |
* | |
* ``` | |
* class Parent extends DependencyAnnotation {} | |
* class NotDependencyProperty {} | |
* | |
* class AComponent { | |
* constructor(@Parent @NotDependencyProperty aService:AService) {} | |
* } | |
* ``` | |
* | |
* will create the following dependency: | |
* | |
* ``` | |
* new Dependency(Key.get(AService), [new Parent()]) | |
* ``` | |
* | |
* The framework can use `new Parent()` to handle the `aService` dependency | |
* in a specific way. | |
* | |
* @exportedAs angular2/di_annotations | |
*/ | |
class DependencyAnnotation { | |
token; | |
} | |
var Inject; | |
var InjectPromise; | |
var InjectLazy; | |
var Optional; | |
interface ForwardRefFn { | |
} | |
/** | |
* Allows to refer to references which are not yet defined. | |
* | |
* This situation arises when the key which we need te refer to for the purposes of DI is declared, | |
* but not yet defined. | |
* | |
* ## Example: | |
* | |
* ``` | |
* class Door { | |
* // Incorrect way to refer to a reference which is defined later. | |
* // This fails because `Lock` is undefined at this point. | |
* constructor(lock:Lock) { } | |
* | |
* // Correct way to refer to a reference which is defined later. | |
* // The reference needs to be captured in a closure. | |
* constructor(@Inject(forwardRef(() => Lock)) lock:Lock) { } | |
* } | |
* | |
* // Only at this point the lock is defined. | |
* class Lock { | |
* } | |
* ``` | |
* | |
* @exportedAs angular2/di | |
*/ | |
function forwardRef(forwardRefFn: ForwardRefFn) : Type ; | |
var FORWARD_REF; | |
/** | |
* Lazily retrieve the reference value. | |
* | |
* See: <a href='/angular2/angular2/forwardRef'><code>forwardRef</code></a> | |
* | |
* @exportedAs angular2/di | |
*/ | |
function resolveForwardRef(type: any) : any ; | |
/** | |
* General notes: | |
* | |
* The methods for creating / destroying views in this API are used in the AppViewHydrator | |
* and RenderViewHydrator as well. | |
* | |
* We are already parsing expressions on the render side: | |
* - this makes the ElementBinders more compact | |
* (e.g. no need to distinguish interpolations from regular expressions from literals) | |
* - allows to retrieve which properties should be accessed from the event | |
* by looking at the expression | |
* - we need the parse at least for the `template` attribute to match | |
* directives in it | |
* - render compiler is not on the critical path as | |
* its output will be stored in precompiled templates. | |
*/ | |
class EventBinding { | |
fullName: string; | |
source: ASTWithSource; | |
} | |
class ElementBinder { | |
directives: List<DirectiveBinder>; | |
distanceToParent: number; | |
eventBindings: List<EventBinding>; | |
index: number; | |
nestedProtoView: ProtoViewDto; | |
parentIndex: number; | |
propertyBindings: Map<string, ASTWithSource>; | |
readAttributes: Map<string, string>; | |
textBindings: List<ASTWithSource>; | |
variableBindings: Map<string, ASTWithSource>; | |
} | |
class DirectiveBinder { | |
directiveIndex: number; | |
eventBindings: List<EventBinding>; | |
hostPropertyBindings: Map<string, ASTWithSource>; | |
propertyBindings: Map<string, ASTWithSource>; | |
} | |
class ProtoViewDto { | |
elementBinders: List<ElementBinder>; | |
render: RenderProtoViewRef; | |
type: number; | |
variableBindings: Map<string, string>; | |
} | |
class DirectiveMetadata { | |
callOnAllChangesDone: boolean; | |
callOnChange: boolean; | |
callOnCheck: boolean; | |
callOnDestroy: boolean; | |
callOnInit: boolean; | |
changeDetection: string; | |
compileChildren: boolean; | |
events: List<string>; | |
hostActions: Map<string, string>; | |
hostAttributes: Map<string, string>; | |
hostListeners: Map<string, string>; | |
hostProperties: Map<string, string>; | |
id: any; | |
properties: List<string>; | |
readAttributes: List<string>; | |
selector: string; | |
type: number; | |
} | |
class RenderProtoViewRef { | |
} | |
class RenderViewRef { | |
} | |
class ViewDefinition { | |
absUrl: string; | |
componentId: string; | |
directives: List<DirectiveMetadata>; | |
template: string; | |
} | |
class RenderCompiler { | |
/** | |
* Compiles a single DomProtoView. Non recursive so that | |
* we don't need to serialize all possible components over the wire, | |
* but only the needed ones based on previous calls. | |
*/ | |
compile(template: ViewDefinition): Promise<ProtoViewDto>; | |
/** | |
* Creats a ProtoViewDto that contains a single nested component with the given componentId. | |
*/ | |
compileHost(directiveMetadata: DirectiveMetadata): Promise<ProtoViewDto>; | |
} | |
class Renderer { | |
/** | |
* Attaches a componentView into the given hostView at the given element | |
*/ | |
attachComponentView(hostViewRef: RenderViewRef, elementIndex: number, componentViewRef: RenderViewRef); | |
/** | |
* Attaches a view into a ViewContainer (in the given parentView at the given element) at the | |
* given index. | |
*/ | |
attachViewInContainer(parentViewRef: RenderViewRef, boundElementIndex: number, atIndex: number, viewRef: RenderViewRef); | |
/** | |
* Calls an action. | |
* Note: This will fail if the action was not mentioned previously as a host action | |
* in the ProtoView | |
*/ | |
callAction(viewRef: RenderViewRef, elementIndex: number, actionExpression: string, actionArgs: any); | |
/** | |
* Creates a root host view that includes the given element. | |
* @param {RenderProtoViewRef} hostProtoViewRef a RenderProtoViewRef of type | |
* ProtoViewDto.HOST_VIEW_TYPE | |
* @param {any} hostElementSelector css selector for the host element (will be queried against the | |
* main document) | |
* @return {RenderViewRef} the created view | |
*/ | |
createRootHostView(hostProtoViewRef: RenderProtoViewRef, hostElementSelector: string): RenderViewRef; | |
/** | |
* Creates a regular view out of the given ProtoView | |
*/ | |
createView(protoViewRef: RenderProtoViewRef): RenderViewRef; | |
/** | |
* Dehydrates a view after it has been attached. Hydration/dehydration is used for reusing views | |
* inside of the view pool. | |
*/ | |
dehydrateView(viewRef: RenderViewRef); | |
/** | |
* Destroys the given view after it has been dehydrated and detached | |
*/ | |
destroyView(viewRef: RenderViewRef); | |
/** | |
* Detaches a componentView into the given hostView at the given element | |
*/ | |
detachComponentView(hostViewRef: RenderViewRef, boundElementIndex: number, componentViewRef: RenderViewRef); | |
/** | |
* Detaches a free host view's element from the DOM. | |
*/ | |
detachFreeHostView(parentHostViewRef: RenderViewRef, hostViewRef: RenderViewRef); | |
/** | |
* Detaches a view into a ViewContainer (in the given parentView at the given element) at the | |
* given index. | |
*/ | |
detachViewInContainer(parentViewRef: RenderViewRef, boundElementIndex: number, atIndex: number, viewRef: RenderViewRef); | |
/** | |
* Hydrates a view after it has been attached. Hydration/dehydration is used for reusing views | |
* inside of the view pool. | |
*/ | |
hydrateView(viewRef: RenderViewRef); | |
/** | |
* Sets a property on an element. | |
* Note: This will fail if the property was not mentioned previously as a host property | |
* in the ProtoView | |
*/ | |
setElementProperty(viewRef: RenderViewRef, elementIndex: number, propertyName: string, propertyValue: any); | |
/** | |
* Sets the dispatcher for all events of the given view | |
*/ | |
setEventDispatcher(viewRef: RenderViewRef, dispatcher: EventDispatcher); | |
/** | |
* Sets the value of a text node. | |
*/ | |
setText(viewRef: RenderViewRef, textNodeIndex: number, text: string); | |
} | |
/** | |
* A dispatcher for all events happening in a view. | |
*/ | |
interface EventDispatcher { | |
/** | |
* Called when an event was triggered for a on-* attribute on an element. | |
* @param {Map<string, any>} locals Locals to be used to evaluate the | |
* event expressions | |
*/ | |
dispatchEvent(elementIndex: number, eventName: string, locals: Map<string, any>); | |
} | |
class TreeNode<T extends TreeNode<any>> { | |
T; | |
/** | |
* Adds a child to the parent node. The child MUST NOT be a part of a tree. | |
*/ | |
addChild(child: T): void; | |
/** | |
* Adds a child to the parent node after a given sibling. | |
* The child MUST NOT be a part of a tree and the sibling must be present. | |
*/ | |
addChildAfter(child: T, prevSibling: T): void; | |
children; | |
parent; | |
/** | |
* Detaches a node from the parent's tree. | |
*/ | |
remove(): void; | |
} | |
class DependencyWithVisibility extends Dependency { | |
visibility: Visibility; | |
} | |
class DirectiveDependency extends DependencyWithVisibility { | |
attributeName: string; | |
queryDirective; | |
} | |
class DirectiveBinding extends ResolvedBinding { | |
callOnAllChangesDone: boolean; | |
callOnChange: boolean; | |
callOnDestroy: boolean; | |
changeDetection; | |
displayName: string; | |
eventEmitters: List<string>; | |
hostActions: Map<string, string>; | |
metadata: DirectiveMetadata; | |
resolvedAppInjectables: List<ResolvedBinding>; | |
resolvedHostInjectables: List<ResolvedBinding>; | |
resolvedViewInjectables: List<ResolvedBinding>; | |
} | |
class PreBuiltObjects { | |
protoView: viewModule.AppProtoView; | |
view: viewModule.AppView; | |
viewManager: avmModule.AppViewManager; | |
} | |
class EventEmitterAccessor { | |
eventName: string; | |
getter: Function; | |
subscribe(view: viewModule.AppView, boundElementIndex: number, directive: Object); | |
} | |
class HostActionAccessor { | |
actionExpression: string; | |
getter: Function; | |
subscribe(view: viewModule.AppView, boundElementIndex: number, directive: Object); | |
} | |
class BindingData { | |
binding: ResolvedBinding; | |
createEventEmitterAccessors(); | |
createHostActionAccessors(); | |
getKeyId(); | |
visibility: number; | |
} | |
/** | |
* Difference between di.Injector and ElementInjector | |
* | |
* di.Injector: | |
* - imperative based (can create child injectors imperativly) | |
* - Lazy loading of code | |
* - Component/App Level services which are usually not DOM Related. | |
* | |
* | |
* ElementInjector: | |
* - ProtoBased (Injector structure fixed at compile time) | |
* - understands @Ancestor, @Parent, @Child, @Descendent | |
* - Fast | |
* - Query mechanism for children | |
* - 1:1 to DOM structure. | |
* | |
* PERF BENCHMARK: | |
* http://www.williambrownstreet.net/blog/2014/04/faster-angularjs-rendering-angularjs-and-reactjs/ | |
*/ | |
class ProtoElementInjector { | |
attributes: Map<string, string>; | |
directParent(): ProtoElementInjector; | |
distanceToParent: number; | |
eventEmitterAccessors: List<List<EventEmitterAccessor>>; | |
/** | |
* Whether the component instance is exported as $implicit. | |
*/ | |
exportComponent: boolean; | |
/** | |
* Whether the element is exported as $implicit. | |
*/ | |
exportElement: boolean; | |
/** | |
* The variable name that will be set to $implicit for the element. | |
*/ | |
exportImplicitName: string; | |
getBindingAtIndex(index: number): any; | |
hasBindings: boolean; | |
hostActionAccessors: List<List<HostActionAccessor>>; | |
index: int; | |
instantiate(parent: ElementInjector): ElementInjector; | |
parent: ProtoElementInjector; | |
view: viewModule.AppView; | |
} | |
class ElementInjector extends TreeNode<ElementInjector> { | |
dehydrate(): void; | |
directParent(): ElementInjector; | |
dynamicallyCreateComponent(componentDirective: DirectiveBinding, parentInjector: Injector): any; | |
get(token): any; | |
getBoundElementIndex(): number; | |
getComponent(): any; | |
getDirectiveAtIndex(index: number); | |
getDynamicallyLoadedComponent(): any; | |
getElementRef(): ElementRef; | |
getEventEmitterAccessors(): List<List<EventEmitterAccessor>>; | |
/** | |
* Get the name to which this element's $implicit is to be assigned. | |
*/ | |
getExportImplicitName(): string; | |
getHost(): ElementInjector; | |
getHostActionAccessors(): List<List<HostActionAccessor>>; | |
getLightDomAppInjector(): Injector; | |
getShadowDomAppInjector(): Injector; | |
getViewContainerRef(): ViewContainerRef; | |
hasDirective(type: Type): boolean; | |
hasInstances(): boolean; | |
hydrate(injector: Injector, host: ElementInjector, preBuiltObjects: PreBuiltObjects): void; | |
/** | |
* Gets whether this element is exporting a component instance as $implicit. | |
*/ | |
isExportingComponent(): boolean; | |
/** | |
* Gets whether this element is exporting its element as $implicit. | |
*/ | |
isExportingElement(): boolean; | |
link(parent: ElementInjector): void; | |
linkAfter(parent: ElementInjector, prevSibling: ElementInjector): void; | |
unlink(): void; | |
} | |
class EmptyExpr extends AST { | |
eval(context, locals); | |
visit(visitor); | |
} | |
/** | |
* Multiple expressions separated by a semicolon. | |
*/ | |
class Chain extends AST { | |
eval(context, locals); | |
expressions: List<any>; | |
visit(visitor); | |
} | |
class Conditional extends AST { | |
condition: AST; | |
eval(context, locals); | |
falseExp: AST; | |
trueExp: AST; | |
visit(visitor); | |
} | |
class SafeAccessMember extends AST { | |
eval(context, locals); | |
getter: Function; | |
name: string; | |
receiver: AST; | |
setter: Function; | |
visit(visitor); | |
} | |
class KeyedAccess extends AST { | |
assign(context, locals, value); | |
eval(context, locals); | |
isAssignable: boolean; | |
key: AST; | |
obj: AST; | |
visit(visitor); | |
} | |
class LiteralPrimitive extends AST { | |
eval(context, locals); | |
value; | |
visit(visitor); | |
} | |
class LiteralMap extends AST { | |
eval(context, locals); | |
keys: List<any>; | |
values: List<any>; | |
visit(visitor); | |
} | |
class Interpolation extends AST { | |
eval(context, locals); | |
expressions: List<any>; | |
strings: List<any>; | |
visit(visitor); | |
} | |
class Binary extends AST { | |
eval(context, locals); | |
left: AST; | |
operation: string; | |
right: AST; | |
visit(visitor); | |
} | |
class PrefixNot extends AST { | |
eval(context, locals); | |
expression: AST; | |
visit(visitor); | |
} | |
class Assignment extends AST { | |
eval(context, locals); | |
target: AST; | |
value: AST; | |
visit(visitor); | |
} | |
class MethodCall extends AST { | |
args: List<any>; | |
eval(context, locals); | |
fn: Function; | |
name: string; | |
receiver: AST; | |
visit(visitor); | |
} | |
class SafeMethodCall extends AST { | |
args: List<any>; | |
eval(context, locals); | |
fn: Function; | |
name: string; | |
receiver: AST; | |
visit(visitor); | |
} | |
class FunctionCall extends AST { | |
args: List<any>; | |
eval(context, locals); | |
target: AST; | |
visit(visitor); | |
} | |
class TemplateBinding { | |
expression: ASTWithSource; | |
key: string; | |
keyIsVar: boolean; | |
name: string; | |
} | |
class AstVisitor { | |
visitAccessMember(ast: AccessMember); | |
visitAssignment(ast: Assignment); | |
visitBinary(ast: Binary); | |
visitChain(ast: Chain); | |
visitConditional(ast: Conditional); | |
visitFunctionCall(ast: FunctionCall); | |
visitImplicitReceiver(ast: ImplicitReceiver); | |
visitKeyedAccess(ast: KeyedAccess); | |
visitLiteralArray(ast: LiteralArray); | |
visitLiteralMap(ast: LiteralMap); | |
visitLiteralPrimitive(ast: LiteralPrimitive); | |
visitMethodCall(ast: MethodCall); | |
visitPipe(ast: Pipe); | |
visitPrefixNot(ast: PrefixNot); | |
visitSafeAccessMember(ast: SafeAccessMember); | |
visitSafeMethodCall(ast: SafeMethodCall); | |
} | |
} | |
Ho Awesome i didn't notice that one!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
this is also missing other modules such as "angular2/router" and I'm getting