From 40b0c2661875cf6fcb3765f9a4325395b903b105 Mon Sep 17 00:00:00 2001 From: Alex Eagle Date: Fri, 5 Jun 2015 15:58:51 -0700 Subject: [PATCH] Update angular2.d.ts for alpha.26 --- angular2/angular2-tests.ts | 5 +- angular2/angular2.d.ts | 5556 +++++++++++++++++++++++++++++++++--- 2 files changed, 5144 insertions(+), 417 deletions(-) diff --git a/angular2/angular2-tests.ts b/angular2/angular2-tests.ts index bdd2628e56..80c7e3cd92 100644 --- a/angular2/angular2-tests.ts +++ b/angular2/angular2-tests.ts @@ -2,7 +2,6 @@ // Use Typescript 1.4 style imports import ng = require("angular2/angular2"); -import di = require("angular2/di"); class Service { @@ -17,11 +16,11 @@ class Cmp { Cmp.annotations = [ ng.Component({ selector: 'cmp', - injectables: [Service, di.bind(Service2).toValue(null)] + injectables: [Service, ng.bind(Service2).toValue(null)] }), ng.View({ template: '{{greeting}} world!', - directives: [ng.For, ng.If] + directives: [ng.NgFor, ng.NgIf] }) ]; diff --git a/angular2/angular2.d.ts b/angular2/angular2.d.ts index fa3cc77889..b70c4577da 100644 --- a/angular2/angular2.d.ts +++ b/angular2/angular2.d.ts @@ -1,299 +1,1839 @@ -// Type definitions for Angular v2.0.0-alpha.22 +// Type definitions for Angular v2.0.0-alpha.26 // Project: http://angular.io/ // Definitions by: angular team // Definitions: https://github.com/borisyankov/DefinitelyTyped -/****************** - * This is a minimal type definition for the Angular2 quickstart. - * We plan to publish a complete definition soon. - ******************/ +// *********************************************************** +// 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 +/// +/// interface List extends Array {} +interface Map {} +interface StringMap extends Map {} interface Type {} -interface _ComponentArg { - /** - * 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 - *
- * - * - * - * ``` - * - * The directive would only be instantiated on the `` element. - * - */ - selector: string; +declare module "angular2/angular2" { + type SetterFn = typeof Function; + type int = number; + + // See https://github.com/Microsoft/TypeScript/issues/1168 + class BaseException /* extends Error */ { + message: any; + stack: any; + toString(): string; + } +} + + +declare module "angular2/angular2" { + class AbstractChangeDetector extends ChangeDetector { + addChild(cd: ChangeDetector): any; + addShadowDomChild(cd: ChangeDetector): any; + callOnAllChangesDone(): any; + checkNoChanges(): any; + detectChanges(): any; + detectChangesInRecords(throwOnChange: boolean): any; + lightDomChildren: List; + markAsCheckOnce(): any; + markPathToRootAsCheckOnce(): any; + mode: string; + parent: ChangeDetector; + ref: ChangeDetectorRef; + remove(): any; + removeChild(cd: ChangeDetector): any; + removeShadowDomChild(cd: ChangeDetector): any; + shadowDomChildren: List; + } + class ProtoRecord { + args: List; + bindingRecord: BindingRecord; + contextIndex: number; + directiveIndex: DirectiveIndex; + expressionAsString: string; + fixedArgs: List; + funcOrValue: any; + isLifeCycleRecord(): boolean; + isPipeRecord(): boolean; + isPureFunction(): boolean; + lastInBinding: boolean; + lastInDirective: boolean; + mode: number; + name: string; + selfIndex: number; + } + + /** - * Enumerates the set of properties that accept data binding for a directive. - * - * The `properties` property defines a set of `directiveProperty` to `bindingProperty` - * key-value pairs: - * - * - `directiveProperty` specifies the component property where the value is written. - * - `bindingProperty` specifies the DOM property where the value is read from. - * - * You can include a {@link Pipe} when specifying a `bindingProperty` to allow for data transformation and structural - * change detection of the value. These pipes will be evaluated in the context of this component. - * - * - * ## Syntax - * + * Directives allow you to attach behavior to elements in the DOM. + * + * Directives with an embedded view are called Components. + * + * 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 Injector cannot resolve dependencies. It either throws an error or, if + * the dependency was + * specified as `@Optional`, returns `null`. + * - The platform injector resolves browser singleton resources, such as: cookies, title, + * location, and others. + * - *Component Injectors*: Each component instance has its own Injector, and they follow + * the same parent-child hierarchy + * as the component instances in the DOM. + * - *Element Injectors*: Each component instance has a Shadow DOM. Within the Shadow DOM each + * element has an `ElementInjector` + * 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 + * View: + * + * 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`: A live collection of direct child + * directives. + * - `@QueryDescendants(DirectiveType) query:QueryList`: 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 + * Directive directives only + * - `bindingPropagation: BindingPropagation` to control change detection in a more granular way. + * + * ## Example + * + * The following example demonstrates how dependency injection resolves constructor arguments in + * practice. + * + * + * Assume this HTML template: + * * ``` + *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * ``` + * + * With the following `dependency` decorator and `SomeService` injectable class. + * + * ``` + * @Injectable() + * class SomeService { + * } + * * @Directive({ - * properties: { - * 'directiveProperty1': 'bindingProperty1', - * 'directiveProperty2': 'bindingProperty2 | pipe1 | ...', - * ... + * 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() { * } * } * ``` - * - * - * ## 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: - * + * + * 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 QueryList, which updates its contents as children are added, + * removed, or moved by a directive that uses a ViewContainerRef such as a `ng-for`, an + * `ng-if`, or an `ng-switch`. + * + * ``` + * @Directive({ selector: '[my-directive]' }) + * class MyDirective { + * constructor(@Query(Dependency) dependencies:QueryList) { + * } + * } + * ``` + * + * This directive would be instantiated with a QueryList which contains `Dependency` 4 and + * 6. Here, `Dependency` 5 would not be included, because it is not a direct child. + * + * ### Injecting a live collection of descendant directives + * + * 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) { + * } + * } + * ``` + * + * 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' - * } - * }) - * class Tooltip { - * set text(text) { - * // This will get called every time the 'tooltip' binding changes with the new value. - * } - * } - * ``` - * - * 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 - *
...
- *
...
- * ``` - * - * 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 {@link Pipe} and {@link keyValDiff} 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 - *
- * ``` - * - * In this case, the two pipes compose as if they were inlined: `someExpression | somePipe | keyValDiff`. - * - */ - properties?: Object; - - /** - * 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({ + * properties: [ + * 'text: tooltip' + * ], * 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)' + * 'onmouseenter': 'onMouseEnter()', + * 'onmouseleave': 'onMouseLeave()' * } * }) - * class InputDirective { - * onChange(event:Event) { + * class Tooltip{ + * text:string; + * overlay:Overlay; // NOT YET IMPLEMENTED + * overlayManager:OverlayManager; // NOT YET IMPLEMENTED + * + * constructor(overlayManager:OverlayManager) { + * this.overlay = overlay; * } - * onResize(event:Event) { + * + * onMouseEnter() { + * // exact signature to be determined + * this.overlay = this.overlayManager.open(text, ...); + * } + * + * onMouseLeave() { + * this.overlay.close(); + * this.overlay = null; * } * } * ``` - * - * Here the `onChange` method of `InputDirective` is invoked whenever the DOM element fires the 'change' event. - * + * In our HTML template, we can then add this behavior to a `
` or any other element with the + * `tooltip` selector, + * like so: + * + * ``` + *
+ * ``` + * + * Directives can also control the instantiation, destruction, and positioning of inline template + * elements: + * + * A directive uses a ViewContainerRef to instantiate, insert, move, and destroy views at + * runtime. + * The ViewContainerRef is created as a result of `