` ) will ensure that this element will get the "button" role.
- *
- * ```typescript
- * @Directive({
- * selector: '[my-button]',
- * host: {
- * 'role': 'button'
- * }
- * })
- * class MyButton {
- * }
- * ```
- */
- host: {[key: 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',
- * bindings: [
- * Greeter
- * ]
- * })
- * class HelloWorld {
- * greeter:Greeter;
- *
- * constructor(greeter:Greeter) {
- * this.greeter = greeter;
- * }
- * }
- * ```
- */
- bindings: any[];
-
- /**
- * Defines the name that can be used in the template to assign this directive to a variable.
- *
- * ## Simple Example
- *
- * ```
- * @Directive({
- * selector: 'child-dir',
- * exportAs: 'child'
- * })
- * class ChildDir {
- * }
- *
- * @Component({
- * selector: 'main',
- * })
- * @View({
- * template: `
`,
- * directives: [ChildDir]
- * })
- * class MainComponent {
- * }
- *
- * ```
- */
- exportAs: string;
-
- /**
- * The module id of the module that contains the directive.
- * Needed to be able to resolve relative urls for templates and styles.
- * In Dart, this can be determined automatically and does not need to be set.
- * In CommonJS, this can always be set to `module.id`.
- *
- * ## Simple Example
- *
- * ```
- * @Directive({
- * selector: 'someDir',
- * moduleId: module.id
- * })
- * class SomeDir {
- * }
- *
- * ```
- */
- moduleId: string;
-
- /**
- * Configures the queries that will be injected into the directive.
- *
- * Content queries are set before the `afterContentInit` callback is called.
- * View queries are set before the `afterViewInit` callback is called.
- *
- * ### Example
- *
- * ```
- * @Component({
- * selector: 'someDir',
- * queries: {
- * contentChildren: new ContentChildren(ChildDirective),
- * viewChildren: new ViewChildren(ChildDirective)
- * }
- * })
- * @View({
- * template: '
',
- * directives: [ChildDirective]
- * })
- * class SomeDir {
- * contentChildren: QueryList
,
- * viewChildren: QueryList
- *
- * afterContentInit() {
- * // contentChildren is set
- * }
- *
- * afterViewInit() {
- * // viewChildren is set
- * }
- * }
- * ```
- */
- queries: {[key: string]: any};
-
- }
-
-
- /**
- * Declare reusable pipe function.
- *
- * ## Example
- *
- * ```
- * @Pipe({
- * name: 'lowercase'
- * })
- * class Lowercase {
- * transform(v, args) { return v.toLowerCase(); }
- * }
- * ```
- */
- class PipeMetadata extends InjectableMetadata {
-
- constructor({name, pure}: {name: string, pure: boolean});
-
- name: string;
-
- pure: boolean;
-
- }
-
-
- /**
- * Declares a data-bound input property.
- *
- * Angular automatically updates data-bound properties during change detection.
- *
- * `InputMetadata` takes an optional parameter that specifies the name
- * used when instantiating a component in the template. When not provided,
- * the name of the decorated property is used.
- *
- * ### Example
- *
- * The following example creates a component with two input properties.
- *
- * ```typescript
- * @Component({selector: 'bank-account'})
- * @View({
- * template: `
- * Bank Name: {{bankName}}
- * Account Id: {{id}}
- * `
- * })
- * class BankAccount {
- * @Input() bankName: string;
- * @Input('account-id') id: string;
- *
- * // this property is not bound, and won't be automatically updated by Angular
- * normalizedBankName: string;
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `
- *
- *
- * `,
- * directives: [IntervalDir]
- * })
- * class App {
- * everySecond() { console.log('second'); }
- * everyFiveSeconds() { console.log('five seconds'); }
- * }
- * bootstrap(App);
- * ```
- */
- class OutputMetadata {
-
- constructor(bindingPropertyName?: string);
-
- bindingPropertyName: string;
-
- }
-
-
- /**
- * Declares a host property binding.
- *
- * Angular automatically checks host property bindings during change detection.
- * If a binding changes, it will update the host element of the directive.
- *
- * `HostBindingMetadata` takes an optional parameter that specifies the property
- * name of the host element that will be updated. When not provided,
- * the class property name is used.
- *
- * ### Example
- *
- * The following example creates a directive that sets the `valid` and `invalid` classes
- * on the DOM element that has ng-model directive on it.
- *
- * ```typescript
- * @Directive({selector: '[ng-model]'})
- * class NgModelStatus {
- * constructor(public control:NgModel) {}
- * @HostBinding('[class.valid]') get valid { return this.control.valid; }
- * @HostBinding('[class.invalid]') get invalid { return this.control.invalid; }
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `Increment `,
- * directives: [CountClicks]
- * })
- * class App {}
- *
- * bootstrap(App);
- * ```
- */
- class HostListenerMetadata {
-
- constructor(eventName: string, args?: string[]);
-
- eventName: string;
-
- args: string[];
-
- }
-
-
- /**
- * Metadata properties available for configuring Views.
- *
- * 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 {@link ComponentMetadata}.
- *
- * ## Example
- *
- * ```
- * @Component({
- * selector: 'greet'
- * })
- * @View({
- * template: 'Hello {{name}}!',
- * directives: [GreetUser, Bold]
- * })
- * class Greet {
- * name: string;
- *
- * constructor() {
- * this.name = 'World';
- * }
- * }
- * ```
- */
- class ViewMetadata {
-
- constructor({templateUrl, template, directives, pipes, encapsulation, styles, styleUrls}?: {
- templateUrl?: string,
- template?: string,
- directives?: Array,
- pipes?: Array,
- encapsulation?: ViewEncapsulation,
- styles?: string[],
- styleUrls?: string[],
- });
-
- /**
- * Specifies a template URL for an Angular component.
- *
- * NOTE: Only one of `templateUrl` or `template` can be defined per View.
- *
- *
- */
- templateUrl: string;
-
- /**
- * Specifies an inline template for an Angular component.
- *
- * NOTE: Only one of `templateUrl` or `template` can be defined per View.
- */
- template: string;
-
- /**
- * Specifies stylesheet URLs for an Angular component.
- *
- *
- */
- styleUrls: string[];
-
- /**
- * Specifies an inline stylesheet for an Angular component.
- */
- styles: string[];
-
- /**
- * 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: [NgFor]
- * template: '
- * '
- * })
- * class MyComponent {
- * }
- * ```
- */
- directives: Array;
-
- pipes: Array;
-
- /**
- * Specify how the template and the styles should be encapsulated.
- * The default is {@link ViewEncapsulation#Emulated `ViewEncapsulation.Emulated`} if the view
- * has styles,
- * otherwise {@link ViewEncapsulation#None `ViewEncapsulation.None`}.
- */
- encapsulation: ViewEncapsulation;
-
- }
-
-
- /**
- * Defines template and style encapsulation options available for Component's {@link View}.
- *
- * See {@link ViewMetadata#encapsulation}.
- */
- enum ViewEncapsulation {
-
- /**
- * Emulate `Native` scoping of styles by adding an attribute containing surrogate id to the Host
- * Element and pre-processing the style rules provided via
- * {@link ViewMetadata#styles} or {@link ViewMetadata#stylesUrls}, and adding the new Host Element
- * attribute to all selectors.
- *
- * This is the default option.
- */
- Emulated,
-
- /**
- * Use the native encapsulation mechanism of the renderer.
- *
- * For the DOM this means using [Shadow DOM](https://w3c.github.io/webcomponents/spec/shadow/) and
- * creating a ShadowRoot for Component's Host Element.
- */
- Native,
-
- /**
- * Don't provide any template or style encapsulation.
- */
- None
- }
-
-
-
- /**
- * Interface for the {@link DirectiveMetadata} decorator function.
- *
- * See {@link DirectiveFactory}.
- */
- interface DirectiveDecorator extends TypeDecorator {
-
- }
-
-
- /**
- * Interface for the {@link ComponentMetadata} decorator function.
- *
- * See {@link ComponentFactory}.
- */
- interface ComponentDecorator extends TypeDecorator {
-
- /**
- * Chain {@link ViewMetadata} annotation.
- */
- View(obj: {
- templateUrl?: string,
- template?: string,
- directives?: Array,
- pipes?: Array,
- renderer?: string,
- styles?: string[],
- styleUrls?: string[],
- }): ViewDecorator;
-
- }
-
-
- /**
- * Interface for the {@link ViewMetadata} decorator function.
- *
- * See {@link ViewFactory}.
- */
- interface ViewDecorator extends TypeDecorator {
-
- /**
- * Chain {@link ViewMetadata} annotation.
- */
- View(obj: {
- templateUrl?: string,
- template?: string,
- directives?: Array,
- pipes?: Array,
- renderer?: string,
- styles?: string[],
- styleUrls?: string[],
- }): ViewDecorator;
-
- }
-
-
- /**
- * {@link DirectiveMetadata} factory for creating annotations, decorators or DSL.
- *
- * ## Example as TypeScript Decorator
- *
- * ```
- * import {Directive} from "angular2/angular2";
- *
- * @Directive({...})
- * class MyDirective {
- * constructor() {
- * ...
- * }
- * }
- * ```
- *
- * ## Example as ES5 DSL
- *
- * ```
- * var MyDirective = ng
- * .Directive({...})
- * .Class({
- * constructor: function() {
- * ...
- * }
- * })
- * ```
- *
- * ## Example as ES5 annotation
- *
- * ```
- * var MyDirective = function() {
- * ...
- * };
- *
- * MyDirective.annotations = [
- * new ng.Directive({...})
- * ]
- * ```
- */
- interface DirectiveFactory {
-
- new(obj: {
- selector?: string,
- inputs?: string[],
- outputs?: string[],
- properties?: string[],
- events?: string[],
- host?: {[key: string]: string},
- bindings?: any[],
- exportAs?: string,
- moduleId?: string,
- queries?: {[key: string]: any}
- }): DirectiveMetadata;
-
- (obj: {
- selector?: string,
- inputs?: string[],
- outputs?: string[],
- properties?: string[],
- events?: string[],
- host?: {[key: string]: string},
- bindings?: any[],
- exportAs?: string,
- moduleId?: string,
- queries?: {[key: string]: any}
- }): DirectiveDecorator;
-
- }
-
-
- /**
- * {@link ComponentMetadata} factory for creating annotations, decorators or DSL.
- *
- * ## Example as TypeScript Decorator
- *
- * ```
- * import {Component, View} from "angular2/angular2";
- *
- * @Component({...})
- * @View({...})
- * class MyComponent {
- * constructor() {
- * ...
- * }
- * }
- * ```
- *
- * ## Example as ES5 DSL
- *
- * ```
- * var MyComponent = ng
- * .Component({...})
- * .View({...})
- * .Class({
- * constructor: function() {
- * ...
- * }
- * })
- * ```
- *
- * ## Example as ES5 annotation
- *
- * ```
- * var MyComponent = function() {
- * ...
- * };
- *
- * MyComponent.annotations = [
- * new ng.Component({...}),
- * new ng.View({...})
- * ]
- * ```
- */
- interface ComponentFactory {
-
- new(obj: {
- selector?: string,
- inputs?: string[],
- outputs?: string[],
- properties?: string[],
- events?: string[],
- host?: {[key: string]: string},
- bindings?: any[],
- exportAs?: string,
- moduleId?: string,
- queries?: {[key: string]: any},
- viewBindings?: any[],
- changeDetection?: ChangeDetectionStrategy,
- }): ComponentMetadata;
-
- (obj: {
- selector?: string,
- inputs?: string[],
- outputs?: string[],
- properties?: string[],
- events?: string[],
- host?: {[key: string]: string},
- bindings?: any[],
- exportAs?: string,
- moduleId?: string,
- queries?: {[key: string]: any},
- viewBindings?: any[],
- changeDetection?: ChangeDetectionStrategy,
- }): ComponentDecorator;
-
- }
-
-
- /**
- * {@link ViewMetadata} factory for creating annotations, decorators or DSL.
- *
- * ## Example as TypeScript Decorator
- *
- * ```
- * import {Component, View} from "angular2/angular2";
- *
- * @Component({...})
- * @View({...})
- * class MyComponent {
- * constructor() {
- * ...
- * }
- * }
- * ```
- *
- * ## Example as ES5 DSL
- *
- * ```
- * var MyComponent = ng
- * .Component({...})
- * .View({...})
- * .Class({
- * constructor: function() {
- * ...
- * }
- * })
- * ```
- *
- * ## Example as ES5 annotation
- *
- * ```
- * var MyComponent = function() {
- * ...
- * };
- *
- * MyComponent.annotations = [
- * new ng.Component({...}),
- * new ng.View({...})
- * ]
- * ```
- */
- interface ViewFactory {
-
- new(obj: {
- templateUrl?: string,
- template?: string,
- directives?: Array,
- pipes?: Array,
- encapsulation?: ViewEncapsulation,
- styles?: string[],
- styleUrls?: string[],
- }): ViewMetadata;
-
- (obj: {
- templateUrl?: string,
- template?: string,
- directives?: Array,
- pipes?: Array,
- encapsulation?: ViewEncapsulation,
- styles?: string[],
- styleUrls?: string[],
- }): ViewDecorator;
-
- }
-
-
- /**
- * {@link AttributeMetadata} factory for creating annotations, decorators or DSL.
- *
- * ## Example as TypeScript Decorator
- *
- * ```
- * import {Attribute, Component, View} from "angular2/angular2";
- *
- * @Component({...})
- * @View({...})
- * class MyComponent {
- * constructor(@Attribute('title') title: string) {
- * ...
- * }
- * }
- * ```
- *
- * ## Example as ES5 DSL
- *
- * ```
- * var MyComponent = ng
- * .Component({...})
- * .View({...})
- * .Class({
- * constructor: [new ng.Attribute('title'), function(title) {
- * ...
- * }]
- * })
- * ```
- *
- * ## Example as ES5 annotation
- *
- * ```
- * var MyComponent = function(title) {
- * ...
- * };
- *
- * MyComponent.annotations = [
- * new ng.Component({...}),
- * new ng.View({...})
- * ]
- * MyComponent.parameters = [
- * [new ng.Attribute('title')]
- * ]
- * ```
- */
- interface AttributeFactory {
-
- new(name: string): AttributeMetadata;
-
- (name: string): TypeDecorator;
-
- }
-
-
- /**
- * {@link QueryMetadata} factory for creating annotations, decorators or DSL.
- *
- * ### Example as TypeScript Decorator
- *
- * ```
- * import {Query, QueryList, Component, View} from "angular2/angular2";
- *
- * @Component({...})
- * @View({...})
- * class MyComponent {
- * constructor(@Query(SomeType) queryList: QueryList) {
- * ...
- * }
- * }
- * ```
- *
- * ### Example as ES5 DSL
- *
- * ```
- * var MyComponent = ng
- * .Component({...})
- * .View({...})
- * .Class({
- * constructor: [new ng.Query(SomeType), function(queryList) {
- * ...
- * }]
- * })
- * ```
- *
- * ### Example as ES5 annotation
- *
- * ```
- * var MyComponent = function(queryList) {
- * ...
- * };
- *
- * MyComponent.annotations = [
- * new ng.Component({...}),
- * new ng.View({...})
- * ]
- * MyComponent.parameters = [
- * [new ng.Query(SomeType)]
- * ]
- * ```
- */
- interface QueryFactory {
-
- new(selector: Type | string, {descendants}?: {descendants?: boolean}): QueryMetadata;
-
- (selector: Type | string, {descendants}?: {descendants?: boolean}): ParameterDecorator;
-
- }
-
-
- interface ContentChildrenFactory {
-
- new(selector: Type | string, {descendants}?: {descendants?: boolean}): ContentChildrenMetadata;
-
- (selector: Type | string, {descendants}?: {descendants?: boolean}): any;
-
- }
-
-
- interface ContentChildFactory {
-
- new(selector: Type | string): ContentChildFactory;
-
- (selector: Type | string): any;
-
- }
-
-
- interface ViewChildrenFactory {
-
- new(selector: Type | string): ViewChildrenMetadata;
-
- (selector: Type | string): any;
-
- }
-
-
- interface ViewChildFactory {
-
- new(selector: Type | string): ViewChildFactory;
-
- (selector: Type | string): any;
-
- }
-
-
- /**
- * {@link PipeMetadata} factory for creating decorators.
- *
- * ## Example as TypeScript Decorator
- *
- * ```
- * import {Pipe} from "angular2/angular2";
- *
- * @Pipe({...})
- * class MyPipe {
- * constructor() {
- * ...
- * }
- *
- * transform(v, args) {}
- * }
- * ```
- */
- interface PipeFactory {
-
- new(obj: {name: string, pure?: boolean}): any;
-
- (obj: {name: string, pure?: boolean}): any;
-
- }
-
-
- /**
- * {@link InputMetadata} factory for creating decorators.
- *
- * See {@link InputMetadata}.
- */
- interface InputFactory {
-
- new(bindingPropertyName?: string): any;
-
- (bindingPropertyName?: string): any;
-
- }
-
-
- /**
- * {@link OutputMetadata} factory for creating decorators.
- *
- * See {@link OutputMetadata}.
- */
- interface OutputFactory {
-
- new(bindingPropertyName?: string): any;
-
- (bindingPropertyName?: string): any;
-
- }
-
-
- /**
- * {@link HostBindingMetadata} factory function.
- */
- interface HostBindingFactory {
-
- new(hostPropertyName?: string): any;
-
- (hostPropertyName?: string): any;
-
- }
-
-
- /**
- * {@link HostListenerMetadata} factory function.
- */
- interface HostListenerFactory {
-
- new(eventName: string, args?: string[]): any;
-
- (eventName: string, args?: string[]): any;
-
- }
-
-
- /**
- * {@link ComponentMetadata} factory function.
- */
- var Component: ComponentFactory;
-
-
-
- /**
- * {@link DirectiveMetadata} factory function.
- */
- var Directive: DirectiveFactory;
-
-
-
- /**
- * {@link ViewMetadata} factory function.
- */
- var View: ViewFactory;
-
-
-
- /**
- * {@link AttributeMetadata} factory function.
- */
- var Attribute: AttributeFactory;
-
-
-
- /**
- * {@link QueryMetadata} factory function.
- */
- var Query: QueryFactory;
-
-
-
- /**
- * {@link ContentChildrenMetadata} factory function.
- */
- var ContentChildren: ContentChildrenFactory;
-
-
-
- /**
- * {@link ContentChildMetadata} factory function.
- */
- var ContentChild: ContentChildFactory;
-
-
-
- /**
- * {@link ViewChildrenMetadata} factory function.
- */
- var ViewChildren: ViewChildrenFactory;
-
-
-
- /**
- * {@link ViewChildMetadata} factory function.
- */
- var ViewChild: ViewChildFactory;
-
-
-
- /**
- * {@link di/ViewQueryMetadata} factory function.
- */
- var ViewQuery: QueryFactory;
-
-
-
- /**
- * {@link PipeMetadata} factory function.
- */
- var Pipe: PipeFactory;
-
-
-
- /**
- * {@link InputMetadata} factory function.
- *
- * See {@link InputMetadata}.
- */
- var Input: InputFactory;
-
-
-
- /**
- * {@link OutputMetadata} factory function.
- *
- * See {@link OutputMetadatas}.
- */
- var Output: OutputFactory;
-
-
-
- /**
- * {@link HostBindingMetadata} factory function.
- */
- var HostBinding: HostBindingFactory;
-
-
-
- /**
- * {@link HostListenerMetadata} factory function.
- */
- var HostListener: HostListenerFactory;
-
-
-
- /**
- * Provides a way for expressing ES6 classes with parameter annotations in ES5.
- *
- * ## Basic Example
- *
- * ```
- * var Greeter = ng.Class({
- * constructor: function(name) {
- * this.name = name;
- * },
- *
- * greet: function() {
- * alert('Hello ' + this.name + '!');
- * }
- * });
- * ```
- *
- * is equivalent to ES6:
- *
- * ```
- * class Greeter {
- * constructor(name) {
- * this.name = name;
- * }
- *
- * greet() {
- * alert('Hello ' + this.name + '!');
- * }
- * }
- * ```
- *
- * or equivalent to ES5:
- *
- * ```
- * var Greeter = function (name) {
- * this.name = name;
- * }
- *
- * Greeter.prototype.greet = function () {
- * alert('Hello ' + this.name + '!');
- * }
- * ```
- *
- * ## Example with parameter annotations
- *
- * ```
- * var MyService = ng.Class({
- * constructor: [String, [new Query(), QueryList], function(name, queryList) {
- * ...
- * }]
- * });
- * ```
- *
- * is equivalent to ES6:
- *
- * ```
- * class MyService {
- * constructor(name: string, @Query() queryList: QueryList) {
- * ...
- * }
- * }
- * ```
- *
- * ## Example with inheritance
- *
- * ```
- * var Shape = ng.Class({
- * constructor: (color) {
- * this.color = color;
- * }
- * });
- *
- * var Square = ng.Class({
- * extends: Shape,
- * constructor: function(color, size) {
- * Shape.call(this, color);
- * this.size = size;
- * }
- * });
- * ```
- */
- function Class(clsDef: ClassDefinition): Type;
-
-
-
- /**
- * Declares the interface to be used with {@link Class}.
- */
- interface ClassDefinition {
-
- /**
- * Optional argument for specifying the superclass.
- */
- extends?: Type;
-
- /**
- * Required constructor function for a class.
- *
- * The function may be optionally wrapped in an `Array`, in which case additional parameter
- * annotations may be specified.
- * The number of arguments and the number of parameter annotations must match.
- *
- * See {@link Class} for example of usage.
- */
- constructor: Function | any[];
-
- }
-
-
- /**
- * An interface implemented by all Angular type decorators, which allows them to be used as ES7
- * decorators as well as
- * Angular DSL syntax.
- *
- * DSL syntax:
- *
- * ```
- * var MyClass = ng
- * .Component({...})
- * .View({...})
- * .Class({...});
- * ```
- *
- * ES7 syntax:
- *
- * ```
- * @ng.Component({...})
- * @ng.View({...})
- * class MyClass {...}
- * ```
- */
- interface TypeDecorator {
-
- /**
- * Invoke as ES7 decorator.
- */
- (type: T): T;
-
- /**
- * Storage for the accumulated annotations so far used by the DSL syntax.
- *
- * Used by {@link Class} to annotate the generated class.
- */
- annotations: any[];
-
- /**
- * Generate a class from the definition and annotate it with {@link TypeDecorator#annotations}.
- */
- Class(obj: ClassDefinition): Type;
-
- }
-
-
- /**
- * A parameter metadata that specifies a dependency.
- *
- * ### Example ([live demo](http://plnkr.co/edit/6uHYJK?p=preview))
- *
- * ```typescript
- * class Engine {}
- *
- * @Injectable()
- * class Car {
- * engine;
- * constructor(@Inject("MyEngine") engine:Engine) {
- * this.engine = engine;
- * }
- * }
- *
- * var injector = Injector.resolveAndCreate([
- * bind("MyEngine").toClass(Engine),
- * Car
- * ]);
- *
- * expect(injector.get(Car).engine instanceof Engine).toBe(true);
- * ```
- *
- * When `@Inject()` is not present, {@link Injector} will use the type annotation of the parameter.
- *
- * ### Example
- *
- * ```typescript
- * class Engine {}
- *
- * @Injectable()
- * class Car {
- * constructor(public engine: Engine) {} //same as constructor(@Inject(Engine) engine:Engine)
- * }
- *
- * var injector = Injector.resolveAndCreate([Engine, Car]);
- * expect(injector.get(Car).engine instanceof Engine).toBe(true);
- * ```
- */
- class InjectMetadata {
-
- constructor(token: any);
-
- token: any;
-
- toString(): string;
-
- }
-
-
- /**
- * A parameter metadata that marks a dependency as optional. {@link Injector} provides `null` if
- * the dependency is not found.
- *
- * ### Example ([live demo](http://plnkr.co/edit/AsryOm?p=preview))
- *
- * ```typescript
- * class Engine {}
- *
- * @Injectable()
- * class Car {
- * engine;
- * constructor(@Optional() engine:Engine) {
- * this.engine = engine;
- * }
- * }
- *
- * var injector = Injector.resolveAndCreate([Car]);
- * expect(injector.get(Car).engine).toBeNull();
- * ```
- */
- class OptionalMetadata {
-
- toString(): string;
-
- }
-
-
- /**
- * A marker metadata that marks a class as available to {@link Injector} for creation.
- *
- * ### Example ([live demo](http://plnkr.co/edit/Wk4DMQ?p=preview))
- *
- * ```typescript
- * @Injectable()
- * class UsefulService {}
- *
- * @Injectable()
- * class NeedsService {
- * constructor(public service:UsefulService) {}
- * }
- *
- * var injector = Injector.resolveAndCreate([NeedsService, UsefulService]);
- * expect(injector.get(NeedsService).service instanceof UsefulService).toBe(true);
- * ```
- * {@link Injector} will throw {@link NoAnnotationError} when trying to instantiate a class that
- * does not have `@Injectable` marker, as shown in the example below.
- *
- * ```typescript
- * class UsefulService {}
- *
- * class NeedsService {
- * constructor(public service:UsefulService) {}
- * }
- *
- * var injector = Injector.resolveAndCreate([NeedsService, UsefulService]);
- * expect(() => injector.get(NeedsService)).toThrowError();
- * ```
- */
- class InjectableMetadata {
-
- constructor();
-
- }
-
-
- /**
- * Specifies that an {@link Injector} should retrieve a dependency only from itself.
- *
- * ### Example ([live demo](http://plnkr.co/edit/NeagAg?p=preview))
- *
- * ```typescript
- * class Dependency {
- * }
- *
- * @Injectable()
- * class NeedsDependency {
- * dependency;
- *
- * dependency;
- * constructor(@Self() dependency:Dependency) {
- * this.dependency = dependency;
- * }
- * }
- *
- * var inj = Injector.resolveAndCreate([Dependency, NeedsDependency]);
- * var nd = inj.get(NeedsDependency);
- *
- * expect(nd.dependency instanceof Dependency).toBe(true);
- *
- * var inj = Injector.resolveAndCreate([Dependency]);
- * var child = inj.resolveAndCreateChild([NeedsDependency]);
- * expect(() => child.get(NeedsDependency)).toThrowError();
- * ```
- */
- class SelfMetadata {
-
- toString(): string;
-
- }
-
-
- /**
- * Specifies that an injector should retrieve a dependency from any injector until reaching the
- * closest host.
- *
- * In Angular, a component element is automatically declared as a host for all the injectors in
- * its view.
- *
- * ### Example ([live demo](http://plnkr.co/edit/GX79pV?p=preview))
- *
- * In the following example `App` contains `ParentCmp`, which contains `ChildDirective`.
- * So `ParentCmp` is the host of `ChildDirective`.
- *
- * `ChildDirective` depends on two services: `HostService` and `OtherService`.
- * `HostService` is defined at `ParentCmp`, and `OtherService` is defined at `App`.
- *
- * ```typescript
- * class OtherService {}
- * class HostService {}
- *
- * @Directive({
- * selector: 'child-directive'
- * })
- * class ChildDirective {
- * constructor(@Optional() @Host() os:OtherService, @Optional() @Host() hs:HostService){
- * console.log("os is null", os);
- * console.log("hs is NOT null", hs);
- * }
- * }
- *
- * @Component({
- * selector: 'parent-cmp',
- * bindings: [HostService]
- * })
- * @View({
- * template: `
- * Dir: ): ResolvedBinding[];
-
- /**
- * Resolves an array of bindings and creates an injector from those bindings.
- *
- * The passed-in bindings can be an array of `Type`, {@link Binding},
- * or a recursive array of more bindings.
- *
- * ### Example ([live demo](http://plnkr.co/edit/ePOccA?p=preview))
- *
- * ```typescript
- * @Injectable()
- * class Engine {
- * }
- *
- * @Injectable()
- * class Car {
- * constructor(public engine:Engine) {}
- * }
- *
- * var injector = Injector.resolveAndCreate([Car, Engine]);
- * expect(injector.get(Car) instanceof Car).toBe(true);
- * ```
- *
- * This function is slower than the corresponding `fromResolvedBindings`
- * because it needs to resolve the passed-in bindings first.
- * See {@link resolve} and {@link fromResolvedBindings}.
- */
- static resolveAndCreate(bindings: Array): Injector;
-
- /**
- * Creates an injector from previously resolved bindings.
- *
- * This API is the recommended way to construct injectors in performance-sensitive parts.
- *
- * ### Example ([live demo](http://plnkr.co/edit/KrSMci?p=preview))
- *
- * ```typescript
- * @Injectable()
- * class Engine {
- * }
- *
- * @Injectable()
- * class Car {
- * constructor(public engine:Engine) {}
- * }
- *
- * var bindings = Injector.resolve([Car, Engine]);
- * var injector = Injector.fromResolvedBindings(bindings);
- * expect(injector.get(Car) instanceof Car).toBe(true);
- * ```
- */
- static fromResolvedBindings(bindings: ResolvedBinding[]): Injector;
-
- /**
- * Retrieves an instance from the injector based on the provided token.
- * Throws {@link NoBindingError} if not found.
- *
- * ### Example ([live demo](http://plnkr.co/edit/HeXSHg?p=preview))
- *
- * ```typescript
- * var injector = Injector.resolveAndCreate([
- * bind("validToken").toValue("Value")
- * ]);
- * expect(injector.get("validToken")).toEqual("Value");
- * expect(() => injector.get("invalidToken")).toThrowError();
- * ```
- *
- * `Injector` returns itself when given `Injector` as a token.
- *
- * ```typescript
- * var injector = Injector.resolveAndCreate([]);
- * expect(injector.get(Injector)).toBe(injector);
- * ```
- */
- get(token: any): any;
-
- /**
- * Retrieves an instance from the injector based on the provided token.
- * Returns null if not found.
- *
- * ### Example ([live demo](http://plnkr.co/edit/tpEbEy?p=preview))
- *
- * ```typescript
- * var injector = Injector.resolveAndCreate([
- * bind("validToken").toValue("Value")
- * ]);
- * expect(injector.getOptional("validToken")).toEqual("Value");
- * expect(injector.getOptional("invalidToken")).toBe(null);
- * ```
- *
- * `Injector` returns itself when given `Injector` as a token.
- *
- * ```typescript
- * var injector = Injector.resolveAndCreate([]);
- * expect(injector.getOptional(Injector)).toBe(injector);
- * ```
- */
- getOptional(token: any): any;
-
- /**
- * Parent of this injector.
- *
- *
- *
- * ### Example ([live demo](http://plnkr.co/edit/eosMGo?p=preview))
- *
- * ```typescript
- * var parent = Injector.resolveAndCreate([]);
- * var child = parent.resolveAndCreateChild([]);
- * expect(child.parent).toBe(parent);
- * ```
- */
- parent: Injector;
-
- /**
- * Resolves an array of bindings and creates a child injector from those bindings.
- *
- *
- *
- * The passed-in bindings can be an array of `Type`, {@link Binding},
- * or a recursive array of more bindings.
- *
- * ### Example ([live demo](http://plnkr.co/edit/opB3T4?p=preview))
- *
- * ```typescript
- * class ParentBinding {}
- * class ChildBinding {}
- *
- * var parent = Injector.resolveAndCreate([ParentBinding]);
- * var child = parent.resolveAndCreateChild([ChildBinding]);
- *
- * expect(child.get(ParentBinding) instanceof ParentBinding).toBe(true);
- * expect(child.get(ChildBinding) instanceof ChildBinding).toBe(true);
- * expect(child.get(ParentBinding)).toBe(parent.get(ParentBinding));
- * ```
- *
- * This function is slower than the corresponding `createChildFromResolved`
- * because it needs to resolve the passed-in bindings first.
- * See {@link resolve} and {@link createChildFromResolved}.
- */
- resolveAndCreateChild(bindings: Array): Injector;
-
- /**
- * Creates a child injector from previously resolved bindings.
- *
- *
- *
- * This API is the recommended way to construct injectors in performance-sensitive parts.
- *
- * ### Example ([live demo](http://plnkr.co/edit/VhyfjN?p=preview))
- *
- * ```typescript
- * class ParentBinding {}
- * class ChildBinding {}
- *
- * var parentBindings = Injector.resolve([ParentBinding]);
- * var childBindings = Injector.resolve([ChildBinding]);
- *
- * var parent = Injector.fromResolvedBindings(parentBindings);
- * var child = parent.createChildFromResolved(childBindings);
- *
- * expect(child.get(ParentBinding) instanceof ParentBinding).toBe(true);
- * expect(child.get(ChildBinding) instanceof ChildBinding).toBe(true);
- * expect(child.get(ParentBinding)).toBe(parent.get(ParentBinding));
- * ```
- */
- createChildFromResolved(bindings: ResolvedBinding[]): Injector;
-
- /**
- * Resolves a binding and instantiates an object in the context of the injector.
- *
- * The created object does not get cached by the injector.
- *
- * ### Example ([live demo](http://plnkr.co/edit/yvVXoB?p=preview))
- *
- * ```typescript
- * @Injectable()
- * class Engine {
- * }
- *
- * @Injectable()
- * class Car {
- * constructor(public engine:Engine) {}
- * }
- *
- * var injector = Injector.resolveAndCreate([Engine]);
- *
- * var car = injector.resolveAndInstantiate(Car);
- * expect(car.engine).toBe(injector.get(Engine));
- * expect(car).not.toBe(injector.resolveAndInstantiate(Car));
- * ```
- */
- resolveAndInstantiate(binding: Type | Binding): any;
-
- /**
- * Instantiates an object using a resolved binding in the context of the injector.
- *
- * The created object does not get cached by the injector.
- *
- * ### Example ([live demo](http://plnkr.co/edit/ptCImQ?p=preview))
- *
- * ```typescript
- * @Injectable()
- * class Engine {
- * }
- *
- * @Injectable()
- * class Car {
- * constructor(public engine:Engine) {}
- * }
- *
- * var injector = Injector.resolveAndCreate([Engine]);
- * var carBinding = Injector.resolve([Car])[0];
- * var car = injector.instantiateResolved(carBinding);
- * expect(car.engine).toBe(injector.get(Engine));
- * expect(car).not.toBe(injector.instantiateResolved(carBinding));
- * ```
- */
- instantiateResolved(binding: ResolvedBinding): any;
-
- displayName: string;
-
- toString(): string;
-
- }
-
-
- /**
- * Describes how the {@link Injector} should instantiate a given token.
- *
- * See {@link bind}.
- *
- * ### Example ([live demo](http://plnkr.co/edit/GNAyj6K6PfYg2NBzgwZ5?p%3Dpreview&p=preview))
- *
- * ```javascript
- * var injector = Injector.resolveAndCreate([
- * new Binding("message", { toValue: 'Hello' })
- * ]);
- *
- * expect(injector.get("message")).toEqual('Hello');
- * ```
- */
- class Binding {
-
- constructor(token: any, {toClass, toValue, toAlias, toFactory, deps, multi}: {
- toClass?: Type,
- toValue?: any,
- toAlias?: any,
- toFactory?: Function,
- deps?: Object[],
- multi?: boolean
- });
-
- /**
- * Token used when retrieving this binding. Usually, it is a type {@link `Type`}.
- */
- token: any;
-
- /**
- * Binds a DI token to an implementation class.
- *
- * ### Example ([live demo](http://plnkr.co/edit/RSTG86qgmoxCyj9SWPwY?p=preview))
- *
- * Because `toAlias` and `toClass` are often confused, the example contains both use cases for
- * easy
- * comparison.
- *
- * ```typescript
- * 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 DI token to a value.
- *
- * ### Example ([live demo](http://plnkr.co/edit/UFVsMVQIDe7l4waWziES?p=preview))
- *
- * ```javascript
- * var injector = Injector.resolveAndCreate([
- * new Binding("message", { toValue: 'Hello' })
- * ]);
- *
- * expect(injector.get("message")).toEqual('Hello');
- * ```
- */
- toValue: any;
-
- /**
- * Binds a DI token as an alias for an existing token.
- *
- * An alias means that {@link Injector} 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 ([live demo](http://plnkr.co/edit/QsatsOJJ6P8T2fMe9gr8?p=preview))
- *
- * Because `toAlias` and `toClass` are often confused the example contains both use cases for easy
- * comparison.
- *
- * ```typescript
- * 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: any;
-
- /**
- * Binds a DI token to a function which computes the value.
- *
- * ### Example ([live demo](http://plnkr.co/edit/Scoxy0pJNqKGAPZY1VVC?p=preview))
- *
- * ```typescript
- * var injector = Injector.resolveAndCreate([
- * new Binding(Number, { toFactory: () => { return 1+2; }}),
- * new Binding(String, { toFactory: (value) => { return "Value: " + value; },
- * deps: [Number] })
- * ]);
- *
- * expect(injector.get(Number)).toEqual(3);
- * expect(injector.get(String)).toEqual('Value: 3');
- * ```
- *
- * Used in conjuction with dependencies.
- */
- toFactory: Function;
-
- /**
- * Specifies a set of dependencies
- * (as `token`s) which should be injected into the factory function.
- *
- * ### Example ([live demo](http://plnkr.co/edit/Scoxy0pJNqKGAPZY1VVC?p=preview))
- *
- * ```typescript
- * var injector = Injector.resolveAndCreate([
- * new Binding(Number, { toFactory: () => { return 1+2; }}),
- * new Binding(String, { toFactory: (value) => { return "Value: " + value; },
- * deps: [Number] })
- * ]);
- *
- * expect(injector.get(Number)).toEqual(3);
- * expect(injector.get(String)).toEqual('Value: 3');
- * ```
- *
- * Used in conjunction with `toFactory`.
- */
- dependencies: Object[];
-
- /**
- * Creates multiple bindings matching the same token (a multi-binding).
- *
- * Multi-bindings are used for creating pluggable service, where the system comes
- * with some default bindings, and the user can register additonal bindings.
- * The combination of the default bindings and the additional bindings will be
- * used to drive the behavior of the system.
- *
- * ### Example
- *
- * ```typescript
- * var injector = Injector.resolveAndCreate([
- * new Binding("Strings", { toValue: "String1", multi: true}),
- * new Binding("Strings", { toValue: "String2", multi: true})
- * ]);
- *
- * expect(injector.get("Strings")).toEqual(["String1", "String2"]);
- * ```
- *
- * Multi-bindings and regular bindings cannot be mixed. The following
- * will throw an exception:
- *
- * ```typescript
- * var injector = Injector.resolveAndCreate([
- * new Binding("Strings", { toValue: "String1", multi: true }),
- * new Binding("Strings", { toValue: "String2"})
- * ]);
- * ```
- */
- multi: boolean;
-
- }
-
-
- /**
- * Helper class for the {@link bind} function.
- */
- class BindingBuilder {
-
- constructor(token: any);
-
- token: any;
-
- /**
- * Binds a DI token to a class.
- *
- * ### Example ([live demo](http://plnkr.co/edit/ZpBCSYqv6e2ud5KXLdxQ?p=preview))
- *
- * Because `toAlias` and `toClass` are often confused, the example contains both use cases for
- * easy comparison.
- *
- * ```typescript
- * 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 DI token to a value.
- *
- * ### Example ([live demo](http://plnkr.co/edit/G024PFHmDL0cJFgfZK8O?p=preview))
- *
- * ```typescript
- * var injector = Injector.resolveAndCreate([
- * bind('message').toValue('Hello')
- * ]);
- *
- * expect(injector.get('message')).toEqual('Hello');
- * ```
- */
- toValue(value: any): Binding;
-
- /**
- * Binds a DI token as an alias for an existing token.
- *
- * 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 separate instance of `toClass` will be returned.)
- *
- * ### Example ([live demo](http://plnkr.co/edit/uBaoF2pN5cfc5AfZapNw?p=preview))
- *
- * Because `toAlias` and `toClass` are often confused, the example contains both use cases for
- * easy
- * comparison.
- *
- * ```typescript
- * 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: /*Type*/ any): Binding;
-
- /**
- * Binds a DI token to a function which computes the value.
- *
- * ### Example ([live demo](http://plnkr.co/edit/OejNIfTT3zb1iBxaIYOb?p=preview))
- *
- * ```typescript
- * 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(factory: Function, dependencies?: any[]): Binding;
-
- }
-
-
- /**
- * An internal resolved representation of a {@link Binding} used by the {@link Injector}.
- *
- * It is usually created automatically by `Injector.resolveAndCreate`.
- *
- * It can be created manually, as follows:
- *
- * ### Example ([live demo](http://plnkr.co/edit/RfEnhh8kUEI0G3qsnIeT?p%3Dpreview&p=preview))
- *
- * ```typescript
- * var resolvedBindings = Injector.resolve([new Binding('message', {toValue: 'Hello'})]);
- * var injector = Injector.fromResolvedBindings(resolvedBindings);
- *
- * expect(injector.get('message')).toEqual('Hello');
- * ```
- */
- interface ResolvedBinding {
-
- /**
- * A key, usually a `Type`.
- */
- key: Key;
-
- }
-
-
- /**
- * @private
- * An internal resolved representation of a factory function created by resolving {@link Binding}.
- */
- class ResolvedFactory {
-
- constructor(factory: Function, dependencies: Dependency[]);
-
- /**
- * Factory function which can return an instance of an object represented by a key.
- */
- factory: Function;
-
- /**
- * Arguments (dependencies) to the `factory` function.
- */
- dependencies: Dependency[];
-
- }
-
-
- /**
- * @private
- */
- class Dependency {
-
- constructor(key: Key, optional: boolean, lowerBoundVisibility: any, upperBoundVisibility: any, properties: any[]);
-
- static fromKey(key: Key): Dependency;
-
- key: Key;
-
- optional: boolean;
-
- lowerBoundVisibility: any;
-
- upperBoundVisibility: any;
-
- properties: any[];
-
- }
-
-
- /**
- * Creates a {@link Binding}.
- *
- * To construct a {@link Binding}, bind a `token` to either a class, a value, a factory function, or
- * to an alias to another `token`.
- * See {@link BindingBuilder} for more details.
- *
- * The `token` is most commonly a class or {@link angular2/di/OpaqueToken}.
- */
- function bind(token: any): BindingBuilder;
-
-
-
- /**
- * A unique object used for retrieving items from the {@link Injector}.
- *
- * Keys have:
- * - a system-wide unique `id`.
- * - a `token`.
- *
- * `Key` is used internally by {@link Injector} because its system-wide unique `id` allows the
- * injector to store created objects in a more efficient way.
- *
- * `Key` should not be created directly. {@link Injector} creates keys automatically when resolving
- * bindings.
- */
- class Key {
-
- /**
- * Private
- */
- constructor(token: Object, id: number);
-
- /**
- * Retrieves a `Key` for a token.
- */
- static get(token: Object): Key;
-
- /**
- * @returns the number of keys registered in the system.
- */
- static numberOfKeys: number;
-
- token: Object;
-
- id: number;
-
- /**
- * Returns a stringified token.
- */
- displayName: string;
-
- }
-
-
- /**
- * @private
- * 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 {@link Injector}, but the
- * {@link Injector} does not have a {@link Binding} for {@link Key}.
- *
- * ### Example ([live demo](http://plnkr.co/edit/vq8D3FRB9aGbnWJqtEPE?p=preview))
- *
- * ```typescript
- * class A {
- * constructor(b:B) {}
- * }
- *
- * expect(() => Injector.resolveAndCreate([A])).toThrowError();
- * ```
- */
- class NoBindingError extends AbstractBindingError {
-
- constructor(injector: Injector, key: Key);
-
- }
-
-
- /**
- * Base class for all errors arising from misconfigured bindings.
- */
- class AbstractBindingError extends BaseException {
-
- constructor(injector: Injector, key: Key, constructResolvingMessage: Function);
-
- addKey(injector: Injector, key: Key): void;
-
- context: any;
-
- }
-
-
- /**
- * Thrown when dependencies form a cycle.
- *
- * ### Example ([live demo](http://plnkr.co/edit/wYQdNos0Tzql3ei1EV9j?p=info))
- *
- * ```typescript
- * var injector = Injector.resolveAndCreate([
- * bind("one").toFactory((two) => "two", [[new Inject("two")]]),
- * bind("two").toFactory((one) => "one", [[new Inject("one")]])
- * ]);
- *
- * expect(() => injector.get("one")).toThrowError();
- * ```
- *
- * Retrieving `A` or `B` throws a `CyclicDependencyError` as the graph above cannot be constructed.
- */
- class CyclicDependencyError extends AbstractBindingError {
-
- constructor(injector: Injector, key: Key);
-
- }
-
-
- /**
- * 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.
- *
- * ### Example ([live demo](http://plnkr.co/edit/7aWYdcqTQsP0eNqEdUAf?p=preview))
- *
- * ```typescript
- * class A {
- * constructor() {
- * throw new Error('message');
- * }
- * }
- *
- * var injector = Injector.resolveAndCreate([A]);
- *
- * try {
- * injector.get(A);
- * } catch (e) {
- * expect(e instanceof InstantiationError).toBe(true);
- * expect(e.originalException.message).toEqual("message");
- * expect(e.originalStack).toBeDefined();
- * }
- * ```
- */
- interface InstantiationError extends WrappedException {
-
- addKey(injector: Injector, key: Key): void;
-
- wrapperMessage: string;
-
- causeKey: Key;
-
- context: any;
-
- }
-
-
- /**
- * Thrown when an object other then {@link Binding} (or `Type`) is passed to {@link Injector}
- * creation.
- *
- * ### Example ([live demo](http://plnkr.co/edit/YatCFbPAMCL0JSSQ4mvH?p=preview))
- *
- * ```typescript
- * expect(() => Injector.resolveAndCreate(["not a type"])).toThrowError();
- * ```
- */
- class InvalidBindingError extends BaseException {
-
- constructor(binding: any);
-
- }
-
-
- /**
- * Thrown when the class has no annotation information.
- *
- * Lack of annotation information prevents the {@link Injector} from determining which dependencies
- * need to be injected into the constructor.
- *
- * ### Example ([live demo](http://plnkr.co/edit/rHnZtlNS7vJOPQ6pcVkm?p=preview))
- *
- * ```typescript
- * class A {
- * constructor(b) {}
- * }
- *
- * expect(() => Injector.resolveAndCreate([A])).toThrowError();
- * ```
- *
- * This error is also thrown when the class not marked with {@link @Injectable} has parameter types.
- *
- * ```typescript
- * class B {}
- *
- * class A {
- * constructor(b:B) {} // no information about the parameter types of A is available at runtime.
- * }
- *
- * expect(() => Injector.resolveAndCreate([A,B])).toThrowError();
- * ```
- */
- class NoAnnotationError extends BaseException {
-
- constructor(typeOrFunc: any, params: any[][]);
-
- }
-
-
- /**
- * Thrown when getting an object by index.
- *
- * ### Example ([live demo](http://plnkr.co/edit/bRs0SX2OTQiJzqvjgl8P?p=preview))
- *
- * ```typescript
- * class A {}
- *
- * var injector = Injector.resolveAndCreate([A]);
- *
- * expect(() => injector.getAt(100)).toThrowError();
- * ```
- */
- class OutOfBoundsError extends BaseException {
-
- constructor(index: any);
-
- }
-
-
- /**
- * Creates a token that can be used in a DI Binding.
- *
- * ### Example ([live demo](http://plnkr.co/edit/Ys9ezXpj2Mnoy3Uc8KBp?p=preview))
- *
- * ```typescript
- * var t = new OpaqueToken("binding");
- *
- * var injector = Injector.resolveAndCreate([
- * bind(t).toValue("bindingValue")
- * ]);
- *
- * expect(injector.get(t)).toEqual("bindingValue");
- * ```
- *
- * Using an `OpaqueToken` is preferable to using strings as tokens because of possible collisions
- * caused by multiple bindings using the same string as two different tokens.
- *
- * Using an `OpaqueToken` is preferable to using an `Object` as tokens because it provides better
- * error messages.
- */
- class OpaqueToken {
-
- constructor(_desc: string);
-
- toString(): string;
-
- }
-
-
- /**
- * Factory for creating {@link InjectMetadata}.
- */
- interface InjectFactory {
-
- new(token: any): InjectMetadata;
-
- (token: any): any;
-
- }
-
-
- /**
- * Factory for creating {@link OptionalMetadata}.
- */
- interface OptionalFactory {
-
- new(): OptionalMetadata;
-
- (): any;
-
- }
-
-
- /**
- * Factory for creating {@link InjectableMetadata}.
- */
- interface InjectableFactory {
-
- new(): InjectableMetadata;
-
- (): any;
-
- }
-
-
- /**
- * Factory for creating {@link SelfMetadata}.
- */
- interface SelfFactory {
-
- new(): SelfMetadata;
-
- (): any;
-
- }
-
-
- /**
- * Factory for creating {@link HostMetadata}.
- */
- interface HostFactory {
-
- new(): HostMetadata;
-
- (): any;
-
- }
-
-
- /**
- * Factory for creating {@link SkipSelfMetadata}.
- */
- interface SkipSelfFactory {
-
- new(): SkipSelfMetadata;
-
- (): any;
-
- }
-
-
- /**
- * Factory for creating {@link InjectMetadata}.
- */
- var Inject: InjectFactory;
-
-
-
- /**
- * Factory for creating {@link OptionalMetadata}.
- */
- var Optional: OptionalFactory;
-
-
-
- /**
- * Factory for creating {@link InjectableMetadata}.
- */
- var Injectable: InjectableFactory;
-
-
-
- /**
- * Factory for creating {@link SelfMetadata}.
- */
- var Self: SelfFactory;
-
-
-
- /**
- * Factory for creating {@link HostMetadata}.
- */
- var Host: HostFactory;
-
-
-
- /**
- * Factory for creating {@link SkipSelfMetadata}.
- */
- var SkipSelf: SkipSelfFactory;
-
-
-
- /**
- * The `async` pipe subscribes to an Observable or Promise and returns the latest value it has
- * emitted.
- * When a new value is emitted, the `async` pipe marks the component to be checked for changes.
- *
- * # Example
- * The example below binds the `time` Observable to the view. Every 500ms, the `time` Observable
- * updates the view with the current time.
- *
- * ```
- * import {Observable} from 'angular2/core';
- * @Component({
- * selector: "task-cmp"
- * })
- * @View({
- * template: "Time: {{ time | async }}"
- * })
- * class Task {
- * time = new Observable(observer => {
- * setInterval(_ =>
- * observer.next(new Date().getTime()), 500);
- * });
- * }
- * ```
- */
- class AsyncPipe implements PipeTransform, PipeOnDestroy {
-
- constructor(_ref: ChangeDetectorRef);
-
- onDestroy(): void;
-
- transform(obj: Observable | Promise, args?: any[]): any;
-
- }
-
-
- /**
- * WARNING: this pipe uses the Internationalization API.
- * Therefore it is only reliable in Chrome and Opera browsers.
- *
- * Formats a date value to a string based on the requested format.
- *
- * # Usage
- *
- * expression | date[:format]
- *
- * where `expression` is a date object or a number (milliseconds since UTC epoch) and
- * `format` indicates which date/time components to include:
- *
- * | Component | Symbol | Short Form | Long Form | Numeric | 2-digit |
- * |-----------|:------:|--------------|-------------------|-----------|-----------|
- * | era | G | G (AD) | GGGG (Anno Domini)| - | - |
- * | year | y | - | - | y (2015) | yy (15) |
- * | month | M | MMM (Sep) | MMMM (September) | M (9) | MM (09) |
- * | day | d | - | - | d (3) | dd (03) |
- * | weekday | E | EEE (Sun) | EEEE (Sunday) | - | - |
- * | hour | j | - | - | j (13) | jj (13) |
- * | hour12 | h | - | - | h (1 PM) | hh (01 PM)|
- * | hour24 | H | - | - | H (13) | HH (13) |
- * | minute | m | - | - | m (5) | mm (05) |
- * | second | s | - | - | s (9) | ss (09) |
- * | timezone | z | - | z (Pacific Standard Time)| - | - |
- * | timezone | Z | Z (GMT-8:00) | - | - | - |
- *
- * In javascript, only the components specified will be respected (not the ordering,
- * punctuations, ...) and details of the formatting will be dependent on the locale.
- * On the other hand in Dart version, you can also include quoted text as well as some extra
- * date/time components such as quarter. For more information see:
- * https://api.dartlang.org/apidocs/channels/stable/dartdoc-viewer/intl/intl.DateFormat.
- *
- * `format` can also be one of the following predefined formats:
- *
- * - `'medium'`: equivalent to `'yMMMdjms'` (e.g. Sep 3, 2010, 12:05:08 PM for en-US)
- * - `'short'`: equivalent to `'yMdjm'` (e.g. 9/3/2010, 12:05 PM for en-US)
- * - `'fullDate'`: equivalent to `'yMMMMEEEEd'` (e.g. Friday, September 3, 2010 for en-US)
- * - `'longDate'`: equivalent to `'yMMMMd'` (e.g. September 3, 2010)
- * - `'mediumDate'`: equivalent to `'yMMMd'` (e.g. Sep 3, 2010 for en-US)
- * - `'shortDate'`: equivalent to `'yMd'` (e.g. 9/3/2010 for en-US)
- * - `'mediumTime'`: equivalent to `'jms'` (e.g. 12:05:08 PM for en-US)
- * - `'shortTime'`: equivalent to `'jm'` (e.g. 12:05 PM for en-US)
- *
- * Timezone of the formatted text will be the local system timezone of the end-users machine.
- *
- * # Examples
- *
- * Assuming `dateObj` is (year: 2015, month: 6, day: 15, hour: 21, minute: 43, second: 11)
- * in the _local_ time and locale is 'en-US':
- *
- * {{ dateObj | date }} // output is 'Jun 15, 2015'
- * {{ dateObj | date:'medium' }} // output is 'Jun 15, 2015, 9:43:11 PM'
- * {{ dateObj | date:'shortTime' }} // output is '9:43 PM'
- * {{ dateObj | date:'mmss' }} // output is '43:11'
- */
- class DatePipe implements PipeTransform {
-
- transform(value: any, args: any[]): string;
-
- supports(obj: any): boolean;
-
- }
-
-
- let DEFAULT_PIPES: Binding;
-
-
-
- let DEFAULT_PIPES_TOKEN: OpaqueToken;
-
-
-
- /**
- * Implements json transforms to any object.
- *
- * # Example
- *
- * In this example we transform the user object to json.
- *
- * ```
- * @Component({
- * selector: "user-cmp"
- * })
- * @View({
- * template: "User: {{ user | json }}"
- * })
- * class Username {
- * user:Object
- * constructor() {
- * this.user = { name: "PatrickJS" };
- * }
- * }
- *
- * ```
- */
- class JsonPipe implements PipeTransform {
-
- transform(value: any, args?: any[]): string;
-
- }
-
-
- /**
- * Creates a new List or String containing only a subset (slice) of the
- * elements.
- *
- * The starting index of the subset to return is specified by the `start` parameter.
- *
- * The ending index of the subset to return is specified by the optional `end` parameter.
- *
- * # Usage
- *
- * expression | slice:start[:end]
- *
- * All behavior is based on the expected behavior of the JavaScript API
- * Array.prototype.slice() and String.prototype.slice()
- *
- * Where the input expression is a [List] or [String], and `start` is:
- *
- * - **a positive integer**: return the item at _start_ index and all items after
- * in the list or string expression.
- * - **a negative integer**: return the item at _start_ index from the end and all items after
- * in the list or string expression.
- * - **`|start|` greater than the size of the expression**: return an empty list or string.
- * - **`|start|` negative greater than the size of the expression**: return entire list or
- * string expression.
- *
- * and where `end` is:
- *
- * - **omitted**: return all items until the end of the input
- * - **a positive integer**: return all items before _end_ index of the list or string
- * expression.
- * - **a negative integer**: return all items before _end_ index from the end of the list
- * or string expression.
- *
- * When operating on a [List], the returned list is always a copy even when all
- * the elements are being returned.
- *
- * # Examples
- *
- * ## List Example
- *
- * Assuming `var collection = ['a', 'b', 'c', 'd']`, this `ng-for` directive:
- *
- * {{i}}
- *
- * produces the following:
- *
- * b
- * c
- *
- * ## String Examples
- *
- * {{ 'abcdefghij' | slice:0:4 }} // output is 'abcd'
- * {{ 'abcdefghij' | slice:4:0 }} // output is ''
- * {{ 'abcdefghij' | slice:-4 }} // output is 'ghij'
- * {{ 'abcdefghij' | slice:-4,-2 }} // output is 'gh'
- * {{ 'abcdefghij' | slice: -100 }} // output is 'abcdefghij'
- * {{ 'abcdefghij' | slice: 100 }} // output is ''
- */
- class SlicePipe implements PipeTransform {
-
- transform(value: any, args?: any[]): any;
-
- supports(obj: any): boolean;
-
- }
-
-
- /**
- * Implements lowercase transforms to text.
- *
- * # Example
- *
- * In this example we transform the user text lowercase.
- *
- * ```
- * @Component({
- * selector: "username-cmp"
- * })
- * @View({
- * template: "Username: {{ user | lowercase }}"
- * })
- * class Username {
- * user:string;
- * }
- *
- * ```
- */
- class LowerCasePipe implements PipeTransform {
-
- transform(value: string, args?: any[]): string;
-
- }
-
-
- class NumberPipe {
-
- }
-
-
- /**
- * WARNING: this pipe uses the Internationalization API.
- * Therefore it is only reliable in Chrome and Opera browsers.
- *
- * Formats a number as local text. i.e. group sizing and separator and other locale-specific
- * configurations are based on the active locale.
- *
- * # Usage
- *
- * expression | number[:digitInfo]
- *
- * where `expression` is a number and `digitInfo` has the following format:
- *
- * {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
- *
- * - minIntegerDigits is the minimum number of integer digits to use. Defaults to 1.
- * - minFractionDigits is the minimum number of digits after fraction. Defaults to 0.
- * - maxFractionDigits is the maximum number of digits after fraction. Defaults to 3.
- *
- * For more information on the acceptable range for each of these numbers and other
- * details see your native internationalization library.
- *
- * # Examples
- *
- * {{ 123 | number }} // output is 123
- * {{ 123.1 | number: '.2-3' }} // output is 123.10
- * {{ 1 | number: '2.2' }} // output is 01.00
- */
- class DecimalPipe extends NumberPipe implements PipeTransform {
-
- transform(value: any, args: any[]): string;
-
- }
-
-
- /**
- * WARNING: this pipe uses the Internationalization API.
- * Therefore it is only reliable in Chrome and Opera browsers.
- *
- * Formats a number as local percent.
- *
- * # Usage
- *
- * expression | percent[:digitInfo]
- *
- * For more information about `digitInfo` see {@link DecimalPipe}
- */
- class PercentPipe extends NumberPipe implements PipeTransform {
-
- transform(value: any, args: any[]): string;
-
- }
-
-
- /**
- * WARNING: this pipe uses the Internationalization API.
- * Therefore it is only reliable in Chrome and Opera browsers.
- *
- * Formats a number as local currency.
- *
- * # Usage
- *
- * expression | currency[:currencyCode[:symbolDisplay[:digitInfo]]]
- *
- * where `currencyCode` is the ISO 4217 currency code, such as "USD" for the US dollar and
- * "EUR" for the euro. `symbolDisplay` is a boolean indicating whether to use the currency
- * symbol (e.g. $) or the currency code (e.g. USD) in the output. The default for this value
- * is `false`.
- * For more information about `digitInfo` see {@link DecimalPipe}
- */
- class CurrencyPipe extends NumberPipe implements PipeTransform {
-
- transform(value: any, args: any[]): string;
-
- }
-
-
- /**
- * Implements uppercase transforms to text.
- *
- * # Example
- *
- * In this example we transform the user text uppercase.
- *
- * ```
- * @Component({
- * selector: "username-cmp"
- * })
- * @View({
- * template: "Username: {{ user | uppercase }}"
- * })
- * class Username {
- * user:string;
- * }
- *
- * ```
- */
- class UpperCasePipe implements PipeTransform {
-
- transform(value: string, args?: any[]): string;
-
- }
-
-
- /**
- *
- * Runtime representation a type that a Component or other object is instances of.
- *
- * An example of a `Type` is `MyCustomComponent` class, which in JavaScript is be represented by
- * the `MyCustomComponent` constructor function.
- */
- interface Type extends Function {
-
- new(...args: any[]): any;
-
- }
-
-
- class Observable {
-
- observer(generator: any): Object;
-
- }
-
-
- /**
- * Use by directives and components to emit custom Events.
- *
- * ## Examples
- *
- * In the following example, `Zippy` alternatively emits `open` and `close` events when its
- * title gets clicked:
- *
- * ```
- * @Component({selector: 'zippy'})
- * @View({template: `
- *
- *
Toggle
- *
- *
- *
{
-
- (value: T, index?: number, array?: T[]): boolean;
-
- }
-
-
- class WrappedException extends Error {
-
- constructor(_wrapperMessage: string, _originalException: any, _originalStack?: any, _context?: any);
-
- wrapperMessage: string;
-
- wrapperStack: any;
-
- originalException: any;
-
- originalStack: any;
-
- context: any;
-
- message: string;
-
- toString(): string;
-
- }
-
-
- /**
- * An {@link angular2/di/OpaqueToken} representing the application root type in the {@link
- * Injector}.
- *
- * ```
- * @Component(...)
- * @View(...)
- * class MyApp {
- * ...
- * }
- *
- * bootstrap(MyApp).then((appRef:ApplicationRef) {
- * expect(appRef.injector.get(appComponentTypeToken)).toEqual(MyApp);
- * });
- *
- * ```
- */
- let APP_COMPONENT: OpaqueToken;
-
-
-
- /**
- * A DI Token representing a unique string id assigned to the application by Angular and used
- * primarily for prefixing application attributes and CSS styles when
- * {@link ViewEncapsulation#Emulated} is being used.
- *
- * If you need to avoid randomly generated value to be used as an application id, you can provide
- * a custom value via a DI binding configuring the root {@link Injector}
- * using this token.
- */
- let APP_ID: OpaqueToken;
-
-
-
- /**
- * Initialize the Angular 'platform' on the page.
- *
- * See {@link PlatformRef} for details on the Angular platform.
- *
- * # Without specified bindings
- *
- * If no bindings are specified, `platform`'s behavior depends on whether an existing
- * platform exists:
- *
- * If no platform exists, a new one will be created with the default {@link platformBindings}.
- *
- * If a platform already exists, it will be returned (regardless of what bindings it
- * was created with). This is a convenience feature, allowing for multiple applications
- * to be loaded into the same platform without awareness of each other.
- *
- * # With specified bindings
- *
- * It is also possible to specify bindings to be made in the new platform. These bindings
- * will be shared between all applications on the page. For example, an abstraction for
- * the browser cookie jar should be bound at the platform level, because there is only one
- * cookie jar regardless of how many applications on the age will be accessing it.
- *
- * If bindings are specified directly, `platform` will create the Angular platform with
- * them if a platform did not exist already. If it did exist, however, an error will be
- * thrown.
- *
- * # DOM Applications
- *
- * This version of `platform` initializes Angular to run in the UI thread, with direct
- * DOM access. Web-worker applications should call `platform` from
- * `src/web_workers/worker/application_common` instead.
- */
- function platform(bindings?: Array): PlatformRef;
-
-
-
- /**
- * The Angular platform is the entry point for Angular on a web page. Each page
- * has exactly one platform, and services (such as reflection) which are common
- * to every Angular application running on the page are bound in its scope.
- *
- * A page's platform is initialized implicitly when {@link bootstrap}() is called, or
- * explicitly by calling {@link platform}().
- */
- interface PlatformRef {
-
- /**
- * Retrieve the platform {@link Injector}, which is the parent injector for
- * every Angular application on the page and provides singleton bindings.
- */
- injector: Injector;
-
- /**
- * Instantiate a new Angular application on the page.
- *
- * # What is an application?
- *
- * Each Angular application has its own zone, change detection, compiler,
- * renderer, and other framework components. An application hosts one or more
- * root components, which can be initialized via `ApplicationRef.bootstrap()`.
- *
- * # Application Bindings
- *
- * Angular applications require numerous bindings to be properly instantiated.
- * When using `application()` to create a new app on the page, these bindings
- * must be provided. Fortunately, there are helper functions to configure
- * typical bindings, as shown in the example below.
- *
- * # Example
- * ```
- * var myAppBindings = [MyAppService];
- *
- * platform()
- * .application([applicationCommonBindings(), applicationDomBindings(), myAppBindings])
- * .bootstrap(MyTopLevelComponent);
- * ```
- * # See Also
- *
- * See the {@link bootstrap} documentation for more details.
- */
- application(bindings: Array): ApplicationRef;
-
- /**
- * Instantiate a new Angular application on the page, using bindings which
- * are only available asynchronously. One such use case is to initialize an
- * application running in a web worker.
- *
- * # Usage
- *
- * `bindingFn` is a function that will be called in the new application's zone.
- * It should return a {@link Promise} to a list of bindings to be used for the
- * new application. Once this promise resolves, the application will be
- * constructed in the same manner as a normal `application()`.
- */
- asyncApplication(bindingFn: (zone: NgZone) =>
- Promise>): Promise;
-
- /**
- * Destroy the Angular platform and all Angular applications on the page.
- */
- dispose(): void;
-
- }
-
-
- /**
- * A reference to an Angular application running on a page.
- *
- * For more about Angular applications, see the documentation for {@link bootstrap}.
- */
- interface ApplicationRef {
-
- /**
- * Register a listener to be called each time `bootstrap()` is called to bootstrap
- * a new root component.
- */
- registerBootstrapListener(listener: (ref: ComponentRef) => void): void;
-
- /**
- * Bootstrap a new component at the root level of the application.
- *
- * # Bootstrap process
- *
- * When bootstrapping a new root component into an application, Angular mounts the
- * specified application component onto DOM elements identified by the [componentType]'s
- * selector and kicks off automatic change detection to finish initializing the component.
- *
- * # Optional Bindings
- *
- * Bindings for the given component can optionally be overridden via the `bindings`
- * parameter. These bindings will only apply for the root component being added and any
- * child components under it.
- *
- * # Example
- * ```
- * var app = platform.application([applicationCommonBindings(), applicationDomBindings()];
- * app.bootstrap(FirstRootComponent);
- * app.bootstrap(SecondRootComponent, [bind(OverrideBinding).toClass(OverriddenBinding)]);
- * ```
- */
- bootstrap(componentType: Type, bindings?: Array): Promise;
-
- /**
- * Retrieve the application {@link Injector}.
- */
- injector: Injector;
-
- /**
- * Retrieve the application {@link NgZone}.
- */
- zone: NgZone;
-
- /**
- * Dispose of this application and all of its components.
- */
- dispose(): void;
-
- }
-
-
- /**
- * Construct a default set of bindings which should be included in any Angular
- * application, regardless of whether it runs on the UI thread or in a web worker.
- */
- function applicationCommonBindings(): Array;
-
-
-
- /**
- * Create an Angular zone.
- */
- function createNgZone(): NgZone;
-
-
-
- /**
- * @private
- */
- function platformCommon(bindings?: Array, initializer?: () => void): PlatformRef;
-
-
-
- /**
- * Constructs the set of bindings meant for use at the platform level.
- *
- * These are bindings that should be singletons shared among all Angular applications
- * running on the page.
- */
- function platformBindings(): Array;
-
-
-
- function bootstrap(appComponentType: /*Type*/ any, appBindings?: Array): Promise;
-
-
-
- /**
- * Specifies app root url for the application.
- *
- * Used by the {@link Compiler} when resolving HTML and CSS template URLs.
- *
- * This interface can be overridden by the application developer to create custom behavior.
- *
- * See {@link Compiler}
- */
- class AppRootUrl {
-
- constructor(value: string);
-
- /**
- * Returns the base URL of the currently running application.
- */
- value: any;
-
- }
-
-
- /**
- * Used by the {@link Compiler} when resolving HTML and CSS template URLs.
- *
- * This interface can be overridden by the application developer to create custom behavior.
- *
- * See {@link Compiler}
- */
- class UrlResolver {
-
- /**
- * Resolves the `url` given the `baseUrl`:
- * - when the `url` is null, the `baseUrl` is returned,
- * - if `url` is relative ('path/to/here', './path/to/here'), the resolved url is a combination of
- * `baseUrl` and `url`,
- * - if `url` is absolute (it has a scheme: 'http://', 'https://' or start with '/'), the `url` is
- * returned as is (ignoring the `baseUrl`)
- *
- * @param {string} baseUrl
- * @param {string} url
- * @returns {string} the resolved URL
- */
- resolve(baseUrl: string, url: string): string;
-
- }
-
-
- /**
- * A service that can be used to get and set the title of a current HTML document.
- *
- * Since an Angular 2 application can't be bootstrapped on the entire HTML document (`` tag)
- * it is not possible to bind to the `text` property of the `HTMLTitleElement` elements
- * (representing the `` tag). Instead, this service can be used to set and get the current
- * title value.
- */
- class Title {
-
- /**
- * Get the title of the current HTML document.
- * @returns {string}
- */
- getTitle(): string;
-
- /**
- * Set the title of the current HTML document.
- * @param newTitle
- */
- setTitle(newTitle: string): void;
-
- }
-
-
- /**
- * Implement this interface to get notified when your directive's content has been fully
- * initialized.
- *
- * ### Example ([live demo](http://plnkr.co/edit/plamXUpsLQbIXpViZhUO?p=preview))
- *
- * ```typescript
- * @Component({selector: 'child-cmp'})
- * @View({template: `{{where}} child`})
- * class ChildComponent {
- * @Property() where: string;
- * }
- *
- * @Component({selector: 'parent-cmp'})
- * @View({template: `<ng-content></ng-content>`})
- * class ParentComponent implements AfterContentInit {
- * @ContentChild(ChildComponent) contentChild: ChildComponent;
- *
- * constructor() {
- * // contentChild is not initialized yet
- * console.log(this.getMessage(this.contentChild));
- * }
- *
- * afterContentInit() {
- * // contentChild is updated after the content has been checked
- * console.log('AfterContentInit: ' + this.getMessage(this.contentChild));
- * }
- *
- * private getMessage(cmp: ChildComponent): string {
- * return cmp ? cmp.where + ' child' : 'no child';
- * }
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `
- * <parent-cmp>
- * <child-cmp where="content"></child-cmp>
- * </parent-cmp>`,
- * directives: [ParentComponent, ChildComponent]
- * })
- * export class App {
- * }
- *
- * bootstrap(App).catch(err => console.error(err));
- * ```
- */
- interface AfterContentInit {
-
- afterContentInit(): void;
-
- }
-
-
- /**
- * Implement this interface to get notified after every check of your directive's content.
- *
- * ### Example ([live demo](http://plnkr.co/edit/tGdrytNEKQnecIPkD7NU?p=preview))
- *
- * ```typescript
- * @Component({selector: 'child-cmp'})
- * @View({template: `{{where}} child`})
- * class ChildComponent {
- * @Property() where: string;
- * }
- *
- * @Component({selector: 'parent-cmp'})
- * @View({template: `<ng-content></ng-content>`})
- * class ParentComponent implements AfterContentChecked {
- * @ContentChild(ChildComponent) contentChild: ChildComponent;
- *
- * constructor() {
- * // contentChild is not initialized yet
- * console.log(this.getMessage(this.contentChild));
- * }
- *
- * afterContentChecked() {
- * // contentChild is updated after the content has been checked
- * console.log('AfterContentChecked: ' + this.getMessage(this.contentChild));
- * }
- *
- * private getMessage(cmp: ChildComponent): string {
- * return cmp ? cmp.where + ' child' : 'no child';
- * }
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `
- * <parent-cmp>
- * <button (click)="hasContent = !hasContent">Toggle content child</button>
- * <child-cmp *ng-if="hasContent" where="content"></child-cmp>
- * </parent-cmp>`,
- * directives: [NgIf, ParentComponent, ChildComponent]
- * })
- * export class App {
- * hasContent = true;
- * }
- *
- * bootstrap(App).catch(err => console.error(err));
- * ```
- */
- interface AfterContentChecked {
-
- afterContentChecked(): void;
-
- }
-
-
- /**
- * Implement this interface to get notified when your component's view has been fully initialized.
- *
- * ### Example ([live demo](http://plnkr.co/edit/LhTKVMEM0fkJgyp4CI1W?p=preview))
- *
- * ```typescript
- * @Component({selector: 'child-cmp'})
- * @View({template: `{{where}} child`})
- * class ChildComponent {
- * @Property() where: string;
- * }
- *
- * @Component({selector: 'parent-cmp'})
- * @View({
- * template: `<child-cmp where="view"></child-cmp>`,
- * directives: [ChildComponent]
- * })
- * class ParentComponent implements AfterViewInit {
- * @ViewChild(ChildComponent) viewChild: ChildComponent;
- *
- * constructor() {
- * // viewChild is not initialized yet
- * console.log(this.getMessage(this.viewChild));
- * }
- *
- * afterViewInit() {
- * // viewChild is updated after the view has been initialized
- * console.log('afterViewInit: ' + this.getMessage(this.viewChild));
- * }
- *
- * private getMessage(cmp: ChildComponent): string {
- * return cmp ? cmp.where + ' child' : 'no child';
- * }
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `<parent-cmp></parent-cmp>`,
- * directives: [ParentComponent]
- * })
- * export class App {
- * }
- *
- * bootstrap(App).catch(err => console.error(err));
- * ```
- */
- interface AfterViewInit {
-
- afterViewInit(): void;
-
- }
-
-
- /**
- * Implement this interface to get notified after every check of your component's view.
- *
- * ### Example ([live demo](http://plnkr.co/edit/0qDGHcPQkc25CXhTNzKU?p=preview))
- *
- * ```typescript
- * @Component({selector: 'child-cmp'})
- * @View({template: `{{where}} child`})
- * class ChildComponent {
- * @Property() where: string;
- * }
- *
- * @Component({selector: 'parent-cmp'})
- * @View({
- * template: `
- * <button (click)="showView = !showView">Toggle view child</button>
- * <child-cmp *ng-if="showView" where="view"></child-cmp>`,
- * directives: [NgIf, ChildComponent]
- * })
- * class ParentComponent implements AfterViewChecked {
- * @ViewChild(ChildComponent) viewChild: ChildComponent;
- * showView = true;
- *
- * constructor() {
- * // viewChild is not initialized yet
- * console.log(this.getMessage(this.viewChild));
- * }
- *
- * afterViewChecked() {
- * // viewChild is updated after the view has been checked
- * console.log('AfterViewChecked: ' + this.getMessage(this.viewChild));
- * }
- *
- * private getMessage(cmp: ChildComponent): string {
- * return cmp ? cmp.where + ' child' : 'no child';
- * }
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `<parent-cmp></parent-cmp>`,
- * directives: [ParentComponent]
- * })
- * export class App {
- * }
- *
- * bootstrap(App).catch(err => console.error(err));
- * ```
- */
- interface AfterViewChecked {
-
- afterViewChecked(): void;
-
- }
-
-
- /**
- * Lifecycle hooks are guaranteed to be called in the following order:
- * - `OnChanges` (if any bindings have changed),
- * - `OnInit` (after the first check only),
- * - `DoCheck`,
- * - `AfterContentInit`,
- * - `AfterContentChecked`,
- * - `AfterViewInit`,
- * - `AfterViewChecked`,
- * - `OnDestroy` (at the very end before destruction)
- * Implement this interface to get notified when any data-bound property of your directive changes.
- *
- * `onChanges` is called right after the data-bound properties have been checked and before view
- * and content children are checked if at least one of them has changed.
- *
- * The `changes` parameter contains an entry for each of the changed data-bound property. The key is
- * the property name and the value is an instance of {@link SimpleChange}.
- *
- * ### Example ([live example](http://plnkr.co/edit/AHrB6opLqHDBPkt4KpdT?p=preview)):
- *
- * ```typescript
- * @Component({selector: 'my-cmp'})
- * @View({template: `<p>myProp = {{myProp}}</p>`})
- * class MyComponent implements OnChanges {
- * @Property() myProp: any;
- *
- * onChanges(changes: {[propName: string]: SimpleChange}) {
- * console.log('onChanges - myProp = ' + changes['myProp'].currentValue);
- * }
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `
- * <button (click)="value = value + 1">Change MyComponent</button>
- * <my-cmp [my-prop]="value"></my-cmp>`,
- * directives: [MyComponent]
- * })
- * export class App {
- * value = 0;
- * }
- *
- * bootstrap(App).catch(err => console.error(err));
- * ```
- */
- interface OnChanges {
-
- onChanges(changes: {[key: string]: SimpleChange}): void;
-
- }
-
-
- /**
- * Implement this interface to get notified when your directive is destroyed.
- *
- * `onDestroy` callback is typically used for any custom cleanup that needs to occur when the
- * instance is destroyed
- *
- * ### Example ([live example](http://plnkr.co/edit/1MBypRryXd64v4pV03Yn?p=preview))
- *
- * ```typesript
- * @Component({selector: 'my-cmp'})
- * @View({template: `<p>my-component</p>`})
- * class MyComponent implements OnInit, OnDestroy {
- * onInit() {
- * console.log('onInit');
- * }
- *
- * onDestroy() {
- * console.log('onDestroy');
- * }
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `
- * <button (click)="hasChild = !hasChild">
- * {{hasChild ? 'Destroy' : 'Create'}} MyComponent
- * </button>
- * <my-cmp *ng-if="hasChild"></my-cmp>`,
- * directives: [MyComponent, NgIf]
- * })
- * export class App {
- * hasChild = true;
- * }
- *
- * bootstrap(App).catch(err => console.error(err));
- * * ```
- */
- interface OnDestroy {
-
- onDestroy(): void;
-
- }
-
-
- /**
- * Implement this interface to execute custom initialization logic after your directive's
- * data-bound properties have been initialized.
- *
- * `onInit` is called right after the directive's data-bound properties have been checked for the
- * first time, and before any of its children have been checked. It is invoked only once when the
- * directive is instantiated.
- *
- * ### Example ([live example](http://plnkr.co/edit/1MBypRryXd64v4pV03Yn?p=preview))
- *
- * ```typescript
- * @Component({selector: 'my-cmp'})
- * @View({template: `<p>my-component</p>`})
- * class MyComponent implements OnInit, OnDestroy {
- * onInit() {
- * console.log('onInit');
- * }
- *
- * onDestroy() {
- * console.log('onDestroy');
- * }
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `
- * <button (click)="hasChild = !hasChild">
- * {{hasChild ? 'Destroy' : 'Create'}} MyComponent
- * </button>
- * <my-cmp *ng-if="hasChild"></my-cmp>`,
- * directives: [MyComponent, NgIf]
- * })
- * export class App {
- * hasChild = true;
- * }
- *
- * bootstrap(App).catch(err => console.error(err));
- * ```
- */
- interface OnInit {
-
- onInit(): void;
-
- }
-
-
- /**
- * Implement this interface to override the default change detection algorithm for your directive.
- *
- * `doCheck` gets called to check the changes in the directives instead of the default algorithm.
- *
- * The default change detection algorithm looks for differences by comparing bound-property values
- * by reference across change detection runs. When `DoCheck` is implemented, the default algorithm
- * is disabled and `doCheck` is responsible for checking for changes.
- *
- * Implementing this interface allows improving performance by using insights about the component,
- * its implementation and data types of its properties.
- *
- * Note that a directive should not implement both `DoCheck` and {@link OnChanges} at the same time.
- * `onChanges` would not be called when a directive implements `DoCheck`. Reaction to the changes
- * have to be handled from within the `doCheck` callback.
- *
- * Use {@link KeyValueDiffers} and {@link IterableDiffers} to add your custom check mechanisms.
- *
- * ### Example ([live demo](http://plnkr.co/edit/QpnIlF0CR2i5bcYbHEUJ?p=preview))
- *
- * In the following example `doCheck` uses an {@link IterableDiffers} to detect the updates to the
- * array `list`:
- *
- * ```typescript
- * @Component({selector: 'custom-check'})
- * @View({
- * template: `
- * <p>Changes:</p>
- * <ul>
- * <li *ng-for="#line of logs">{{line}}</li>
- * </ul>`,
- * directives: [NgFor]
- * })
- * class CustomCheckComponent implements DoCheck {
- * @Property() list: any[];
- * differ: any;
- * logs = [];
- *
- * constructor(differs: IterableDiffers) {
- * this.differ = differs.find([]).create(null);
- * }
- *
- * doCheck() {
- * var changes = this.differ.diff(this.list);
- *
- * if (changes) {
- * changes.forEachAddedItem(r => this.logs.push('added ' + r.item));
- * changes.forEachRemovedItem(r => this.logs.push('removed ' + r.item))
- * }
- * }
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `
- * <button (click)="list.push(list.length)">Push</button>
- * <button (click)="list.pop()">Pop</button>
- * <custom-check [list]="list"></custom-check>`,
- * directives: [CustomCheckComponent]
- * })
- * export class App {
- * list = [];
- * }
- * ```
- */
- interface DoCheck {
-
- doCheck(): void;
-
- }
-
-
- class DirectiveResolver {
-
- /**
- * Return {@link DirectiveMetadata} for a given `Type`.
- */
- resolve(type: Type): DirectiveMetadata;
-
- }
-
-
- /**
- * Low-level service for compiling {@link Component}s into {@link ProtoViewRef ProtoViews}s, which
- * can later be used to create and render a Component instance.
- *
- * Most applications should instead use higher-level {@link DynamicComponentLoader} service, which
- * both compiles and instantiates a Component.
- */
- interface Compiler {
-
- compileInHost(componentType: Type): Promise<ProtoViewRef>;
-
- clearCache(): void;
-
- }
-
-
- /**
- * Service exposing low level API for creating, moving and destroying Views.
- *
- * Most applications should use higher-level abstractions like {@link DynamicComponentLoader} and
- * {@link ViewContainerRef} instead.
- */
- interface AppViewManager {
-
- /**
- * Returns a {@link ViewContainerRef} of the View Container at the specified location.
- */
- getViewContainer(location: ElementRef): ViewContainerRef;
-
- /**
- * Returns the {@link ElementRef} that makes up the specified Host View.
- */
- getHostElement(hostViewRef: HostViewRef): ElementRef;
-
- /**
- * Searches the Component View of the Component specified via `hostLocation` and returns the
- * {@link ElementRef} for the Element identified via a Variable Name `variableName`.
- *
- * Throws an exception if the specified `hostLocation` is not a Host Element of a Component, or if
- * variable `variableName` couldn't be found in the Component View of this Component.
- */
- getNamedElementInComponentView(hostLocation: ElementRef, variableName: string): ElementRef;
-
- /**
- * Returns the component instance for the provided Host Element.
- */
- getComponent(hostLocation: ElementRef): any;
-
- /**
- * Creates an instance of a Component and attaches it to the first element in the global View
- * (usually DOM Document) that matches the component's selector or `overrideSelector`.
- *
- * This as a low-level way to bootstrap an application and upgrade an existing Element to a
- * Host Element. Most applications should use {@link DynamicComponentLoader#loadAsRoot} instead.
- *
- * The Component and its View are created based on the `hostProtoViewRef` which can be obtained
- * by compiling the component with {@link Compiler#compileInHost}.
- *
- * Use {@link AppViewManager#destroyRootHostView} to destroy the created Component and it's Host
- * View.
- *
- * ## Example
- *
- * ```
- * @ng.Component({
- * selector: 'child-component'
- * })
- * @ng.View({
- * template: 'Child'
- * })
- * class ChildComponent {
- *
- * }
- *
- * @ng.Component({
- * selector: 'my-app'
- * })
- * @ng.View({
- * template: `
- * Parent (<some-component></some-component>)
- * `
- * })
- * class MyApp {
- * viewRef: ng.ViewRef;
- *
- * constructor(public appViewManager: ng.AppViewManager, compiler: ng.Compiler) {
- * compiler.compileInHost(ChildComponent).then((protoView: ng.ProtoViewRef) => {
- * this.viewRef = appViewManager.createRootHostView(protoView, 'some-component', null);
- * })
- * }
- *
- * onDestroy() {
- * this.appViewManager.destroyRootHostView(this.viewRef);
- * this.viewRef = null;
- * }
- * }
- *
- * ng.bootstrap(MyApp);
- * ```
- */
- createRootHostView(hostProtoViewRef: ProtoViewRef, overrideSelector: string, injector: Injector): HostViewRef;
-
- /**
- * Destroys the Host View created via {@link AppViewManager#createRootHostView}.
- *
- * Along with the Host View, the Component Instance as well as all nested View and Components are
- * destroyed as well.
- */
- destroyRootHostView(hostViewRef: HostViewRef): void;
-
- /**
- * Instantiates an Embedded View based on the {@link TemplateRef `templateRef`} and inserts it
- * into the View Container specified via `viewContainerLocation` at the specified `index`.
- *
- * Returns the {@link ViewRef} for the newly created View.
- *
- * This as a low-level way to create and attach an Embedded via to a View Container. Most
- * applications should used {@link ViewContainerRef#createEmbeddedView} instead.
- *
- * Use {@link AppViewManager#destroyViewInContainer} to destroy the created Embedded View.
- */
- createEmbeddedViewInContainer(viewContainerLocation: ElementRef, index: number, templateRef: TemplateRef): ViewRef;
-
- /**
- * Instantiates a single {@link Component} and inserts its Host View into the View Container
- * found at `viewContainerLocation`. Within the container, the view will be inserted at position
- * specified via `index`.
- *
- * The component is instantiated using its {@link ProtoViewRef `protoViewRef`} which can be
- * obtained via {@link Compiler#compileInHost}.
- *
- * You can optionally specify `imperativelyCreatedInjector`, which configure the {@link Injector}
- * that will be created for the Host View.
- *
- * Returns the {@link HostViewRef} of the Host View created for the newly instantiated Component.
- *
- * Use {@link AppViewManager#destroyViewInContainer} to destroy the created Host View.
- */
- createHostViewInContainer(viewContainerLocation: ElementRef, index: number, protoViewRef: ProtoViewRef, imperativelyCreatedInjector: ResolvedBinding[]): HostViewRef;
-
- /**
- * Destroys an Embedded or Host View attached to a View Container at the specified `index`.
- *
- * The View Container is located via `viewContainerLocation`.
- */
- destroyViewInContainer(viewContainerLocation: ElementRef, index: number): void;
-
- /**
- * See {@link AppViewManager#detachViewInContainer}.
- */
- attachViewInContainer(viewContainerLocation: ElementRef, index: number, viewRef: ViewRef): ViewRef;
-
- /**
- * See {@link AppViewManager#attachViewInContainer}.
- */
- detachViewInContainer(viewContainerLocation: ElementRef, index: number): ViewRef;
-
- }
-
-
- /**
- * An unmodifiable list of items that Angular keeps up to date when the state
- * of the application changes.
- *
- * The type of object that {@link QueryMetadata} and {@link ViewQueryMetadata} provide.
- *
- * Implements an iterable interface, therefore it can be used in both ES6
- * javascript `for (var i of items)` loops as well as in Angular templates with
- * `*ng-for="#i of myList"`.
- *
- * Changes can be observed by subscribing to the changes `Observable`.
- *
- * NOTE: In the future this class will implement an `Observable` interface.
- *
- * ### Example ([live demo](http://plnkr.co/edit/RX8sJnQYl9FWuSCWme5z?p=preview))
- * ```javascript
- * @Component({...})
- * class Container {
- * constructor(@Query(Item) items: QueryList<Item>) {
- * items.changes.subscribe(_ => console.log(items.length));
- * }
- * }
- * ```
- */
- class QueryList<T> {
-
- changes: Observable;
-
- length: number;
-
- first: T;
-
- last: T;
-
- /**
- * returns a new list with the passsed in function applied to each element.
- */
- map<U>(fn: (item: T) => U): U[];
-
- toString(): string;
-
- }
-
-
- /**
- * Service for instantiating a Component and attaching it to a View at a specified location.
- */
- interface DynamicComponentLoader {
-
- /**
- * Creates an instance of a Component `type` and attaches it to the first element in the
- * platform-specific global view that matches the component's selector.
- *
- * In a browser the platform-specific global view is the main DOM Document.
- *
- * If needed, the component's selector can be overridden via `overrideSelector`.
- *
- * You can optionally provide `injector` and this {@link Injector} will be used to instantiate the
- * Component.
- *
- * To be notified when this Component instance is destroyed, you can also optionally provide
- * `onDispose` callback.
- *
- * Returns a promise for the {@link ComponentRef} representing the newly created Component.
- *
- *
- * ## Example
- *
- * ```
- * @ng.Component({
- * selector: 'child-component'
- * })
- * @ng.View({
- * template: 'Child'
- * })
- * class ChildComponent {
- * }
- *
- *
- *
- * @ng.Component({
- * selector: 'my-app'
- * })
- * @ng.View({
- * template: `
- * Parent (<child id="child"></child>)
- * `
- * })
- * class MyApp {
- * constructor(dynamicComponentLoader: ng.DynamicComponentLoader, injector: ng.Injector) {
- * dynamicComponentLoader.loadAsRoot(ChildComponent, '#child', injector);
- * }
- * }
- *
- * ng.bootstrap(MyApp);
- * ```
- *
- * Resulting DOM:
- *
- * ```
- * <my-app>
- * Parent (
- * <child id="child">
- * Child
- * </child>
- * )
- * </my-app>
- * ```
- */
- loadAsRoot(type: Type, overrideSelector: string, injector: Injector, onDispose?: () => void): Promise<ComponentRef>;
-
- /**
- * Creates an instance of a Component and attaches it to a View Container located inside of the
- * Component View of another Component instance.
- *
- * The targeted Component Instance is specified via its `hostLocation` {@link ElementRef}. The
- * location within the Component View of this Component Instance is specified via `anchorName`
- * Template Variable Name.
- *
- * You can optionally provide `bindings` to configure the {@link Injector} provisioned for this
- * Component Instance.
- *
- * Returns a promise for the {@link ComponentRef} representing the newly created Component.
- *
- *
- * ## Example
- *
- * ```
- * @ng.Component({
- * selector: 'child-component'
- * })
- * @ng.View({
- * template: 'Child'
- * })
- * class ChildComponent {
- * }
- *
- *
- * @ng.Component({
- * selector: 'my-app'
- * })
- * @ng.View({
- * template: `
- * Parent (<div #child></div>)
- * `
- * })
- * class MyApp {
- * constructor(dynamicComponentLoader: ng.DynamicComponentLoader, elementRef: ng.ElementRef) {
- * dynamicComponentLoader.loadIntoLocation(ChildComponent, elementRef, 'child');
- * }
- * }
- *
- * ng.bootstrap(MyApp);
- * ```
- *
- * Resulting DOM:
- *
- * ```
- * <my-app>
- * Parent (
- * <div #child="" class="ng-binding"></div>
- * <child-component class="ng-binding">Child</child-component>
- * )
- * </my-app>
- * ```
- */
- loadIntoLocation(type: Type, hostLocation: ElementRef, anchorName: string, bindings?: ResolvedBinding[]): Promise<ComponentRef>;
-
- /**
- * Creates an instance of a Component and attaches it to the View Container found at the
- * `location` specified as {@link ElementRef}.
- *
- * You can optionally provide `bindings` to configure the {@link Injector} provisioned for this
- * Component Instance.
- *
- * Returns a promise for the {@link ComponentRef} representing the newly created Component.
- *
- *
- * ## Example
- *
- * ```
- * @ng.Component({
- * selector: 'child-component'
- * })
- * @ng.View({
- * template: 'Child'
- * })
- * class ChildComponent {
- * }
- *
- *
- * @ng.Component({
- * selector: 'my-app'
- * })
- * @ng.View({
- * template: `Parent`
- * })
- * class MyApp {
- * constructor(dynamicComponentLoader: ng.DynamicComponentLoader, elementRef: ng.ElementRef) {
- * dynamicComponentLoader.loadNextToLocation(ChildComponent, elementRef);
- * }
- * }
- *
- * ng.bootstrap(MyApp);
- * ```
- *
- * Resulting DOM:
- *
- * ```
- * <my-app>Parent</my-app>
- * <child-component>Child</child-component>
- * ```
- */
- loadNextToLocation(type: Type, location: ElementRef, bindings?: ResolvedBinding[]): Promise<ComponentRef>;
-
- }
-
-
- /**
- * Represents a location in a View that has an injection, change-detection and render context
- * associated with it.
- *
- * An `ElementRef` is created for each element in the Template that contains a Directive, Component
- * or data-binding.
- *
- * An `ElementRef` is backed by a render-specific element. In the browser, this is usually a DOM
- * element.
- */
- interface ElementRef extends RenderElementRef {
-
- /**
- * The underlying native element or `null` if direct access to native elements is not supported
- * (e.g. when the application runs in a web worker).
- *
- * <div class="callout is-critical">
- * <header>Use with caution</header>
- * <p>
- * Use this API as the last resort when direct access to DOM is needed. Use templating and
- * data-binding provided by Angular instead. Alternatively you take a look at {@link Renderer}
- * which provides API that can safely be used even when direct access to native elements is not
- * supported.
- * </p>
- * <p>
- * Relying on direct DOM access creates tight coupling between your application and rendering
- * layers which will make it impossible to separate the two and deploy your application into a
- * web worker.
- * </p>
- * </div>
- */
- nativeElement: any;
-
- }
-
-
- /**
- * Represents an Embedded Template that can be used to instantiate Embedded Views.
- *
- * You can access a `TemplateRef`, in two ways. Via a directive placed on a `<template>` element (or
- * directive prefixed with `*`) and have the `TemplateRef` for this Embedded View injected into the
- * constructor of the directive using the `TemplateRef` Token. Alternatively you can query for the
- * `TemplateRef` from a Component or a Directive via {@link Query}.
- *
- * To instantiate Embedded Views based on a Template, use
- * {@link ViewContainerRef#createEmbeddedView}, which will create the View and attach it to the
- * View Container.
- */
- interface TemplateRef {
-
- /**
- * The location in the View where the Embedded View logically belongs to.
- *
- * The data-binding and injection contexts of Embedded Views created from this `TemplateRef`
- * inherit from the contexts of this location.
- *
- * Typically new Embedded Views are attached to the View Container of this location, but in
- * advanced use-cases, the View can be attached to a different container while keeping the
- * data-binding and injection context from the original location.
- */
- elementRef: ElementRef;
-
- /**
- * Allows you to check if this Embedded Template defines Local Variable with name matching `name`.
- */
- hasLocal(name: string): boolean;
-
- }
-
-
- /**
- * Represents an Angular View.
- *
- * <!-- TODO: move the next two paragraphs to the dev guide -->
- * A View is a fundamental building block of the application UI. It is the smallest grouping of
- * Elements which are created and destroyed together.
- *
- * Properties of elements in a View can change, but the structure (number and order) of elements in
- * a View cannot. Changing the structure of Elements can only be done by inserting, moving or
- * removing nested Views via a {@link ViewContainer}. Each View can contain many View Containers.
- * <!-- /TODO -->
- *
- * ## Example
- *
- * Given this template...
- *
- * ```
- * Count: {{items.length}}
- * <ul>
- * <li *ng-for="var item of items">{{item}}</li>
- * </ul>
- * ```
- *
- * ... we have two {@link ProtoViewRef}s:
- *
- * Outer {@link ProtoViewRef}:
- * ```
- * Count: {{items.length}}
- * <ul>
- * <template ng-for var-item [ng-for-of]="items"></template>
- * </ul>
- * ```
- *
- * Inner {@link ProtoViewRef}:
- * ```
- * <li>{{item}}</li>
- * ```
- *
- * Notice that the original template is broken down into two separate {@link ProtoViewRef}s.
- *
- * The outer/inner {@link ProtoViewRef}s are then assembled into views like so:
- *
- * ```
- * <!-- ViewRef: outer-0 -->
- * Count: 2
- * <ul>
- * <template view-container-ref></template>
- * <!-- ViewRef: inner-1 --><li>first</li><!-- /ViewRef: inner-1 -->
- * <!-- ViewRef: inner-2 --><li>second</li><!-- /ViewRef: inner-2 -->
- * </ul>
- * <!-- /ViewRef: outer-0 -->
- * ```
- */
- interface ViewRef extends HostViewRef {
-
- /**
- * Sets `value` of local variable called `variableName` in this View.
- */
- setLocal(variableName: string, value: any): void;
-
- }
-
-
- /**
- * Represents a View containing a single Element that is the Host Element of a {@link Component}
- * instance.
- *
- * A Host View is created for every dynamically created Component that was compiled on its own (as
- * opposed to as a part of another Component's Template) via {@link Compiler#compileInHost} or one
- * of the higher-level APIs: {@link AppViewManager#createRootHostView},
- * {@link AppViewManager#createHostViewInContainer}, {@link ViewContainerRef#createHostView}.
- */
- interface HostViewRef {
-
- }
-
-
- /**
- * Represents an Angular ProtoView.
- *
- * A ProtoView is a prototypical {@link ViewRef View} that is the result of Template compilation and
- * is used by Angular to efficiently create an instance of this View based on the compiled Template.
- *
- * Most ProtoViews are created and used internally by Angular and you don't need to know about them,
- * except in advanced use-cases where you compile components yourself via the low-level
- * {@link Compiler#compileInHost} API.
- *
- *
- * ## Example
- *
- * Given this template:
- *
- * ```
- * Count: {{items.length}}
- * <ul>
- * <li *ng-for="var item of items">{{item}}</li>
- * </ul>
- * ```
- *
- * Angular desugars and compiles the template into two ProtoViews:
- *
- * Outer ProtoView:
- * ```
- * Count: {{items.length}}
- * <ul>
- * <template ng-for var-item [ng-for-of]="items"></template>
- * </ul>
- * ```
- *
- * Inner ProtoView:
- * ```
- * <li>{{item}}</li>
- * ```
- *
- * Notice that the original template is broken down into two separate ProtoViews.
- */
- interface ProtoViewRef {
-
- }
-
-
- /**
- * Represents a container where one or more Views can be attached.
- *
- * The container can contain two kinds of Views. Host Views, created by instantiating a
- * {@link Component} via {@link #createHostView}, and Embedded Views, created by instantiating an
- * {@link TemplateRef Embedded Template} via {@link #createEmbeddedView}.
- *
- * The location of the View Container within the containing View is specified by the Anchor
- * `element`. Each View Container can have only one Anchor Element and each Anchor Element can only
- * have a single View Container.
- *
- * Root elements of Views attached to this container become siblings of the Anchor Element in
- * the Rendered View.
- *
- * To access a `ViewContainerRef` of an Element, you can either place a {@link Directive} injected
- * with `ViewContainerRef` on the Element, or you obtain it via
- * {@link AppViewManager#getViewContainer}.
- *
- * <!-- TODO(i): we are also considering ElementRef#viewContainer api -->
- */
- interface ViewContainerRef {
-
- /**
- * Anchor element that specifies the location of this container in the containing View.
- * <!-- TODO: rename to anchorElement -->
- */
- element: ElementRef;
-
- /**
- * Destroys all Views in this container.
- */
- clear(): void;
-
- /**
- * Returns the {@link ViewRef} for the View located in this container at the specified index.
- */
- get(index: number): ViewRef;
-
- /**
- * Returns the number of Views currently attached to this container.
- */
- length: number;
-
- /**
- * Instantiates an Embedded View based on the {@link TemplateRef `templateRef`} and inserts it
- * into this container at the specified `index`.
- *
- * If `index` is not specified, the new View will be inserted as the last View in the container.
- *
- * Returns the {@link ViewRef} for the newly created View.
- */
- createEmbeddedView(templateRef: TemplateRef, index?: number): ViewRef;
-
- /**
- * Instantiates a single {@link Component} and inserts its Host View into this container at the
- * specified `index`.
- *
- * The component is instantiated using its {@link ProtoViewRef `protoView`} which can be
- * obtained via {@link Compiler#compileInHost}.
- *
- * If `index` is not specified, the new View will be inserted as the last View in the container.
- *
- * You can optionally specify `dynamicallyCreatedBindings`, which configure the {@link Injector}
- * that will be created for the Host View.
- *
- * Returns the {@link HostViewRef} of the Host View created for the newly instantiated Component.
- */
- createHostView(protoViewRef?: ProtoViewRef, index?: number, dynamicallyCreatedBindings?: ResolvedBinding[]): HostViewRef;
-
- /**
- * Inserts a View identified by a {@link ViewRef} into the container at the specified `index`.
- *
- * If `index` is not specified, the new View will be inserted as the last View in the container.
- *
- * Returns the inserted {@link ViewRef}.
- */
- insert(viewRef: ViewRef, index?: number): ViewRef;
-
- /**
- * Returns the index of the View, specified via {@link ViewRef}, within the current container or
- * `-1` if this container doesn't contain the View.
- */
- indexOf(viewRef: ViewRef): number;
-
- /**
- * Destroys a View attached to this container at the specified `index`.
- *
- * If `index` is not specified, the last View in the container will be removed.
- */
- remove(index?: number): void;
-
- /**
- * Use along with {@link #insert} to move a View within the current container.
- *
- * If the `index` param is omitted, the last {@link ViewRef} is detached.
- */
- detach(index?: number): ViewRef;
-
- }
-
-
- /**
- * Represents an instance of a Component created via {@link DynamicComponentLoader}.
- *
- * `ComponentRef` provides access to the Component Instance as well other objects related to this
- * Component Instance and allows you to destroy the Component Instance via the {@link #dispose}
- * method.
- */
- interface ComponentRef {
-
- /**
- * Location of the Host Element of this Component Instance.
- */
- location: ElementRef;
-
- /**
- * The instance of the Component.
- */
- instance: any;
-
- /**
- * The user defined component type, represented via the constructor function.
- *
- * <!-- TODO: customize wording for Dart docs -->
- */
- componentType: Type;
-
- /**
- * The {@link ViewRef} of the Host View of this Component instance.
- */
- hostView: HostViewRef;
-
- /**
- * Destroys the component instance and all of the data structures associated with it.
- *
- * TODO(i): rename to destroy to be consistent with AppViewManager and ViewContainerRef
- */
- dispose(): void;
-
- }
-
-
- /**
- * Provides access to explicitly trigger change detection in an application.
- *
- * By default, `Zone` triggers change detection in Angular on each virtual machine (VM) turn. When
- * testing, or in some
- * limited application use cases, a developer can also trigger change detection with the
- * `lifecycle.tick()` method.
- *
- * Each Angular application has a single `LifeCycle` instance.
- *
- * # Example
- *
- * This is a contrived example, since the bootstrap automatically runs inside of the `Zone`, which
- * invokes
- * `lifecycle.tick()` on your behalf.
- *
- * ```javascript
- * bootstrap(MyApp).then((ref:ComponentRef) => {
- * var lifeCycle = ref.injector.get(LifeCycle);
- * var myApp = ref.instance;
- *
- * ref.doSomething();
- * lifecycle.tick();
- * });
- * ```
- */
- interface LifeCycle {
-
- /**
- * Invoke this method to explicitly process change detection and its side-effects.
- *
- * In development mode, `tick()` also performs a second change detection cycle to ensure that no
- * further
- * changes are detected. If additional changes are picked up during this second cycle, bindings
- * in
- * the app have
- * side-effects that cannot be resolved in a single change detection pass. In this case, Angular
- * throws an error,
- * since an Angular application can only have one change detection pass during which all change
- * detection must
- * complete.
- */
- tick(): void;
-
- }
-
-
- /**
- * An injectable service for executing work inside or outside of the Angular zone.
- *
- * The most common use of this service is to optimize performance when starting a work consisting of
- * one or more asynchronous tasks that don't require UI updates or error handling to be handled by
- * Angular. Such tasks can be kicked off via {@link #runOutsideAngular} and if needed, these tasks
- * can reenter the Angular zone via {@link #run}.
- *
- * <!-- TODO: add/fix links to:
- * - docs explaining zones and the use of zones in Angular and change-detection
- * - link to runOutsideAngular/run (throughout this file!)
- * -->
- *
- * ### Example ([live demo](http://plnkr.co/edit/lY9m8HLy7z06vDoUaSN2?p=preview))
- * ```
- * import {Component, View, NgIf, NgZone} from 'angular2/angular2';
- *
- * @Component({
- * selector: 'ng-zone-demo'
- * })
- * @View({
- * template: `
- * <h2>Demo: NgZone</h2>
- *
- * <p>Progress: {{progress}}%</p>
- * <p *ng-if="progress >= 100">Done processing {{label}} of Angular zone!</p>
- *
- * <button (click)="processWithinAngularZone()">Process within Angular zone</button>
- * <button (click)="processOutsideOfAngularZone()">Process outside of Angular zone</button>
- * `,
- * directives: [NgIf]
- * })
- * export class NgZoneDemo {
- * progress: number = 0;
- * label: string;
- *
- * constructor(private _ngZone: NgZone) {}
- *
- * // Loop inside the Angular zone
- * // so the UI DOES refresh after each setTimeout cycle
- * processWithinAngularZone() {
- * this.label = 'inside';
- * this.progress = 0;
- * this._increaseProgress(() => console.log('Inside Done!'));
- * }
- *
- * // Loop outside of the Angular zone
- * // so the UI DOES NOT refresh after each setTimeout cycle
- * processOutsideOfAngularZone() {
- * this.label = 'outside';
- * this.progress = 0;
- * this._ngZone.runOutsideAngular(() => {
- * this._increaseProgress(() => {
- * // reenter the Angular zone and display done
- * this._ngZone.run(() => {console.log('Outside Done!') });
- * }}));
- * }
- *
- *
- * _increaseProgress(doneCallback: () => void) {
- * this.progress += 1;
- * console.log(`Current progress: ${this.progress}%`);
- *
- * if (this.progress < 100) {
- * window.setTimeout(() => this._increaseProgress(doneCallback)), 10)
- * } else {
- * doneCallback();
- * }
- * }
- * }
- * ```
- */
- interface NgZone {
-
- /**
- * Executes the `fn` function synchronously within the Angular zone and returns value returned by
- * the function.
- *
- * Running functions via `run` allows you to reenter Angular zone from a task that was executed
- * outside of the Angular zone (typically started via {@link #runOutsideAngular}).
- *
- * Any future tasks or microtasks scheduled from within this function will continue executing from
- * within the Angular zone.
- */
- run(fn: () => any): any;
-
- /**
- * Executes the `fn` function synchronously in Angular's parent zone and returns value returned by
- * the function.
- *
- * Running functions via `runOutsideAngular` allows you to escape Angular's zone and do work that
- * doesn't trigger Angular change-detection or is subject to Angular's error handling.
- *
- * Any future tasks or microtasks scheduled from within this function will continue executing from
- * outside of the Angular zone.
- *
- * Use {@link #run} to reenter the Angular zone and do work that updates the application model.
- */
- runOutsideAngular(fn: () => any): any;
-
- }
-
-
- /**
- * A dispatcher that relays all events that occur in a Render View.
- *
- * Use {@link Renderer#setEventDispatcher} to register a dispatcher for a particular Render View.
- */
- interface RenderEventDispatcher {
-
- /**
- * Called when Event called `eventName` was triggered on an Element with an Event Binding for this
- * Event.
- *
- * `elementIndex` specifies the depth-first index of the Element in the Render View.
- *
- * `locals` is a map for local variable to value mapping that should be used when evaluating the
- * Event Binding expression.
- *
- * Returns `false` if `preventDefault` should be called to stop the default behavior of the Event
- * in the Rendering Context.
- */
- dispatchRenderEvent(elementIndex: number, eventName: string, locals: Map<string, any>): boolean;
-
- }
-
-
- /**
- * Injectable service that provides a low-level interface for modifying the UI.
- *
- * Use this service to bypass Angular's templating and make custom UI changes that can't be
- * expressed declaratively. For example if you need to set a property or an attribute whose name is
- * not statically known, use {@link #setElementProperty} or {@link #setElementAttribute}
- * respectively.
- *
- * If you are implementing a custom renderer, you must implement this interface.
- *
- * The default Renderer implementation is {@link DomRenderer}. Also see {@link WebWorkerRenderer}.
- */
- interface Renderer {
-
- /**
- * Registers a component template represented as arrays of {@link RenderTemplateCmd}s and styles
- * with the Renderer.
- *
- * Once a template is registered it can be referenced via {@link RenderBeginComponentCmd} when
- * {@link #createProtoView creating Render ProtoView}.
- */
- registerComponentTemplate(templateId: number, commands: RenderTemplateCmd[], styles: string[], nativeShadow: boolean): void;
-
- /**
- * Creates a {@link RenderProtoViewRef} from an array of {@link RenderTemplateCmd}`s.
- */
- createProtoView(cmds: RenderTemplateCmd[]): RenderProtoViewRef;
-
- /**
- * Creates a Root Host View based on the provided `hostProtoViewRef`.
- *
- * `fragmentCount` is the number of nested {@link RenderFragmentRef}s in this View. This parameter
- * is non-optional so that the renderer can create a result synchronously even when application
- * runs in a different context (e.g. in a Web Worker).
- *
- * `hostElementSelector` is a (CSS) selector for querying the main document to find the Host
- * Element. The newly created Root Host View should be attached to this element.
- *
- * Returns an instance of {@link RenderViewWithFragments}, representing the Render View.
- */
- createRootHostView(hostProtoViewRef: RenderProtoViewRef, fragmentCount: number, hostElementSelector: string): RenderViewWithFragments;
-
- /**
- * Creates a Render View based on the provided `protoViewRef`.
- *
- * `fragmentCount` is the number of nested {@link RenderFragmentRef}s in this View. This parameter
- * is non-optional so that the renderer can create a result synchronously even when application
- * runs in a different context (e.g. in a Web Worker).
- *
- * Returns an instance of {@link RenderViewWithFragments}, representing the Render View.
- */
- createView(protoViewRef: RenderProtoViewRef, fragmentCount: number): RenderViewWithFragments;
-
- /**
- * Destroys a Render View specified via `viewRef`.
- *
- * This operation should be performed only on a View that has already been dehydrated and
- * all of its Render Fragments have been detached.
- *
- * Destroying a View indicates to the Renderer that this View is not going to be referenced in any
- * future operations. If the Renderer created any renderer-specific objects for this View, these
- * objects should now be destroyed to prevent memory leaks.
- */
- destroyView(viewRef: RenderViewRef): void;
-
- /**
- * Attaches the Nodes of a Render Fragment after the last Node of `previousFragmentRef`.
- */
- attachFragmentAfterFragment(previousFragmentRef: RenderFragmentRef, fragmentRef: RenderFragmentRef): void;
-
- /**
- * Attaches the Nodes of the Render Fragment after an Element.
- */
- attachFragmentAfterElement(elementRef: RenderElementRef, fragmentRef: RenderFragmentRef): void;
-
- /**
- * Detaches the Nodes of a Render Fragment from their parent.
- *
- * This operations should be called only on a View that has been already
- * {@link #dehydrateView dehydrated}.
- */
- detachFragment(fragmentRef: RenderFragmentRef): void;
-
- /**
- * Notifies a custom Renderer to initialize a Render View.
- *
- * This method is called by Angular after a Render View has been created, or when a previously
- * dehydrated Render View is about to be reused.
- */
- hydrateView(viewRef: RenderViewRef): void;
-
- /**
- * Notifies a custom Renderer that a Render View is no longer active.
- *
- * This method is called by Angular before a Render View will be destroyed, or when a hydrated
- * Render View is about to be put into a pool for future reuse.
- */
- dehydrateView(viewRef: RenderViewRef): void;
-
- /**
- * Returns the underlying native element at the specified `location`, or `null` if direct access
- * to native elements is not supported (e.g. when the application runs in a web worker).
- *
- * <div class="callout is-critical">
- * <header>Use with caution</header>
- * <p>
- * Use this api as the last resort when direct access to DOM is needed. Use templating and
- * data-binding, or other {@link Renderer} methods instead.
- * </p>
- * <p>
- * Relying on direct DOM access creates tight coupling between your application and rendering
- * layers which will make it impossible to separate the two and deploy your application into a
- * web worker.
- * </p>
- * </div>
- */
- getNativeElementSync(location: RenderElementRef): any;
-
- /**
- * Sets a property on the Element specified via `location`.
- */
- setElementProperty(location: RenderElementRef, propertyName: string, propertyValue: any): void;
-
- /**
- * Sets an attribute on the Element specified via `location`.
- *
- * If `attributeValue` is `null`, the attribute is removed.
- */
- setElementAttribute(location: RenderElementRef, attributeName: string, attributeValue: string): void;
-
- /**
- * Sets a (CSS) class on the Element specified via `location`.
- *
- * `isAdd` specifies if the class should be added or removed.
- */
- setElementClass(location: RenderElementRef, className: string, isAdd: boolean): void;
-
- /**
- * Sets a (CSS) inline style on the Element specified via `location`.
- *
- * If `styleValue` is `null`, the style is removed.
- */
- setElementStyle(location: RenderElementRef, styleName: string, styleValue: string): void;
-
- /**
- * Calls a method on the Element specified via `location`.
- */
- invokeElementMethod(location: RenderElementRef, methodName: string, args: any[]): void;
-
- /**
- * Sets the value of an interpolated TextNode at the specified index to the `text` value.
- *
- * `textNodeIndex` is the depth-first index of the Node among interpolated Nodes in the Render
- * View.
- */
- setText(viewRef: RenderViewRef, textNodeIndex: number, text: string): void;
-
- /**
- * Sets a dispatcher to relay all events triggered in the given Render View.
- *
- * Each Render View can have only one Event Dispatcher, if this method is called multiple times,
- * the last provided dispatcher will be used.
- */
- setEventDispatcher(viewRef: RenderViewRef, dispatcher: RenderEventDispatcher): void;
-
- }
-
-
- /**
- * Represents an Element that is part of a {@link RenderViewRef Render View}.
- *
- * `RenderElementRef` is a counterpart to {@link ElementRef} available in the Application Context.
- *
- * When using `Renderer` from the Application Context, `ElementRef` can be used instead of
- * `RenderElementRef`.
- */
- interface RenderElementRef {
-
- /**
- * Reference to the Render View that contains this Element.
- */
- renderView: RenderViewRef;
-
- /**
- * Index of the Element (in the depth-first order) inside the Render View.
- *
- * This index is used internally by Angular to locate elements.
- */
- boundElementIndex: number;
-
- }
-
-
- /**
- * Represents an Angular View in the Rendering Context.
- *
- * `RenderViewRef` specifies to the {@link Renderer} what View to update or destroy.
- *
- * Unlike a {@link ViewRef} available in the Application Context, Render View contains all the
- * static Component Views that have been recursively merged into a single Render View.
- *
- * Each `RenderViewRef` contains one or more {@link RenderFragmentRef Render Fragments}, these
- * Fragments are created, hydrated, dehydrated and destroyed as a single unit together with the
- * View.
- */
- class RenderViewRef {
-
- }
-
-
- /**
- * Represents an Angular ProtoView in the Rendering Context.
- *
- * When you implement a custom {@link Renderer}, `RenderProtoViewRef` specifies what Render View
- * your renderer should create.
- *
- * `RenderProtoViewRef` is a counterpart to {@link ProtoViewRef} available in the Application
- * Context. But unlike `ProtoViewRef`, `RenderProtoViewRef` contains all static nested Proto Views
- * that are recursively merged into a single Render Proto View.
- *
- *
- * <!-- TODO: this is created by Renderer#createProtoView in the new compiler -->
- */
- interface RenderProtoViewRef {
-
- }
-
-
- /**
- * Represents a list of sibling Nodes that can be moved by the {@link Renderer} independently of
- * other Render Fragments.
- *
- * Any {@link RenderView} has one Render Fragment.
- *
- * Additionally any View with an Embedded View that contains a {@link NgContent View Projection}
- * results in additional Render Fragment.
- */
- class RenderFragmentRef {
-
- }
-
-
- /**
- * Container class produced by a {@link Renderer} when creating a Render View.
- *
- * An instance of `RenderViewWithFragments` contains a {@link RenderViewRef} and an array of
- * {@link RenderFragmentRef}s belonging to this Render View.
- */
- class RenderViewWithFragments {
-
- constructor(viewRef: RenderViewRef, fragmentRefs: RenderFragmentRef[]);
-
- /**
- * Reference to the {@link RenderViewRef}.
- */
- viewRef: RenderViewRef;
-
- /**
- * Array of {@link RenderFragmentRef}s ordered in the depth-first order.
- */
- fragmentRefs: RenderFragmentRef[];
-
- }
-
-
- /**
- * A DI Token representing the main rendering context. In a browser this is the DOM Document.
- *
- * Note: Document might not be available in the Application Context when Application and Rendering
- * Contexts are not the same (e.g. when running the application into a Web Worker).
- */
- let DOCUMENT: OpaqueToken;
-
-
-
- interface RenderTemplateCmd {
-
- visit(visitor: RenderCommandVisitor, context: any): any;
-
- }
-
-
- interface RenderCommandVisitor {
-
- visitText(cmd: RenderTextCmd, context: any): any;
-
- visitNgContent(cmd: RenderNgContentCmd, context: any): any;
-
- visitBeginElement(cmd: RenderBeginElementCmd, context: any): any;
-
- visitEndElement(context: any): any;
-
- visitBeginComponent(cmd: RenderBeginComponentCmd, context: any): any;
-
- visitEndComponent(context: any): any;
-
- visitEmbeddedTemplate(cmd: RenderEmbeddedTemplateCmd, context: any): any;
-
- }
-
-
- interface RenderTextCmd extends RenderBeginCmd {
-
- value: string;
-
- }
-
-
- interface RenderNgContentCmd {
-
- ngContentIndex: number;
-
- }
-
-
- interface RenderBeginElementCmd extends RenderBeginCmd {
-
- name: string;
-
- attrNameAndValues: string[];
-
- eventTargetAndNames: string[];
-
- }
-
-
- interface RenderBeginComponentCmd extends RenderBeginElementCmd {
-
- nativeShadow: boolean;
-
- templateId: number;
-
- }
-
-
- interface RenderEmbeddedTemplateCmd extends RenderBeginElementCmd {
-
- isMerged: boolean;
-
- children: RenderTemplateCmd[];
-
- }
-
-
- interface RenderBeginCmd extends RenderTemplateCmd {
-
- ngContentIndex: number;
-
- isBound: boolean;
-
- }
-
-
- /**
- * Adds and removes CSS classes based on an {expression} value.
- *
- * The result of expression is used to add and remove CSS classes using the following logic,
- * based on expression's value type:
- * - {string} - all the CSS classes (space - separated) are added
- * - {Array} - all the CSS classes (Array elements) are added
- * - {Object} - each key corresponds to a CSS class name while values
- * are interpreted as {boolean} expression. If a given expression
- * evaluates to {true} a corresponding CSS class is added - otherwise
- * it is removed.
- *
- * # Example:
- *
- * ```
- * <div class="message" [ng-class]="{error: errorCount > 0}">
- * Please check errors.
- * </div>
- * ```
- */
- class NgClass implements DoCheck, OnDestroy {
-
- constructor(_iterableDiffers: IterableDiffers, _keyValueDiffers: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer);
-
- initialClasses: any;
-
- rawClass: any;
-
- doCheck(): void;
-
- onDestroy(): void;
-
- }
-
-
- /**
- * 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, and also to alias the 'last' to a local variable that will
- * be set to a boolean indicating if the item is the last one in the iteration
- *
- * 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>`
- */
- class NgFor implements DoCheck {
-
- constructor(_viewContainer: ViewContainerRef, _templateRef: TemplateRef, _iterableDiffers: IterableDiffers, _cdr: ChangeDetectorRef);
-
- ngForOf: any;
-
- doCheck(): void;
-
- }
-
-
- /**
- * 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 ([live demo](http://plnkr.co/edit/fe0kgemFBtmQOY31b4tw?p=preview)):
- *
- * ```
- * <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>`
- */
- class NgIf {
-
- constructor(_viewContainer: ViewContainerRef, _templateRef: TemplateRef);
-
- ngIf: any;
-
- }
-
-
- /**
- * Adds or removes styles based on an {expression}.
- *
- * When the expression assigned to `ng-style` evaluates to an object, the corresponding element
- * styles are updated. Style names to update are taken from the object keys and values - from the
- * corresponding object values.
- *
- * # Example:
- *
- * ```
- * <div [ng-style]="{'text-align': alignExp}"></div>
- * ```
- *
- * In the above example the `text-align` style will be updated based on the `alignExp` value
- * changes.
- *
- * # Syntax
- *
- * - `<div [ng-style]="{'text-align': alignExp}"></div>`
- * - `<div [ng-style]="styleExp"></div>`
- */
- class NgStyle implements DoCheck {
-
- constructor(_differs: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer);
-
- rawStyle: any;
-
- doCheck(): void;
-
- }
-
-
- /**
- * 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>
- * ```
- */
- class NgSwitch {
-
- ngSwitch: any;
-
- }
-
-
- /**
- * 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>
- * ```
- */
- class NgSwitchWhen {
-
- constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef, _switch: NgSwitch);
-
- ngSwitchWhen: any;
-
- }
-
-
- /**
- * Defines a default case statement.
- *
- * Default case statements are displayed when no `NgSwitchWhen` match the `ng-switch` value.
- *
- * Example:
- *
- * ```
- * <template ng-switch-default>...</template>
- * ```
- */
- class NgSwitchDefault {
-
- constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef, sswitch: NgSwitch);
-
- }
-
-
- /**
- * A collection of 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 `directives`
- * property of the `@View` annotation.
- *
- * ### Example ([live demo](http://plnkr.co/edit/yakGwpCdUkg0qfzX5m8g?p=preview))
- *
- * Instead of writing:
- *
- * ```typescript
- * import {NgClass, NgIf, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/angular2';
- * import {OtherDirective} from './myDirectives';
- *
- * @Component({
- * selector: 'my-component'
- * })
- * @View({
- * templateUrl: 'myComponent.html',
- * directives: [NgClass, NgIf, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault, OtherDirective]
- * })
- * export class MyComponent {
- * ...
- * }
- * ```
- * one could import all the core directives at once:
- *
- * ```typescript
- * import {CORE_DIRECTIVES} from 'angular2/angular2';
- * import {OtherDirective} from './myDirectives';
- *
- * @Component({
- * selector: 'my-component'
- * })
- * @View({
- * templateUrl: 'myComponent.html',
- * directives: [CORE_DIRECTIVES, OtherDirective]
- * })
- * export class MyComponent {
- * ...
- * }
- * ```
- */
- let CORE_DIRECTIVES: Type[];
-
-
-
- /**
- * Omitting from external API doc as this is really an abstract internal concept.
- */
- class AbstractControl {
-
- constructor(validator: Function);
-
- validator: Function;
-
- value: any;
-
- status: string;
-
- valid: boolean;
-
- errors: {[key: string]: any};
-
- pristine: boolean;
-
- dirty: boolean;
-
- touched: boolean;
-
- untouched: boolean;
-
- valueChanges: Observable;
-
- markAsTouched(): void;
-
- markAsDirty({onlySelf}?: {onlySelf?: boolean}): void;
-
- setParent(parent: ControlGroup | ControlArray): void;
-
- updateValidity({onlySelf}?: {onlySelf?: boolean}): void;
-
- updateValueAndValidity({onlySelf, emitEvent}?: {onlySelf?: boolean, emitEvent?: boolean}): void;
-
- find(path: Array<string | number>| string): AbstractControl;
-
- getError(errorCode: string, path?: string[]): any;
-
- hasError(errorCode: string, path?: string[]): boolean;
-
- }
-
-
- /**
- * Defines a part of a form that cannot be divided into other controls. `Control`s have values and
- * validation state, which is determined by an optional validation function.
- *
- * `Control` is one of the three fundamental building blocks used to define forms in Angular, along
- * with {@link ControlGroup} and {@link ControlArray}.
- *
- * # Usage
- *
- * By default, a `Control` is created for every `<input>` or other form component.
- * With {@link NgFormControl} or {@link NgFormModel} an existing {@link Control} can be
- * bound to a DOM element instead. This `Control` can be configured with a custom
- * validation function.
- *
- * ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
- */
- class Control extends AbstractControl {
-
- constructor(value?: any, validator?: Function);
-
- /**
- * Set the value of the control to `value`.
- *
- * If `onlySelf` is `true`, this change will only affect the validation of this `Control`
- * and not its parent component. If `emitEvent` is `true`, this change will cause a
- * `valueChanges` event on the `Control` to be emitted. Both of these options default to
- * `false`.
- *
- * If `emitModelToViewChange` is `true`, the view will be notified about the new value
- * via an `onChange` event. This is the default behavior if `emitModelToViewChange` is not
- * specified.
- */
- updateValue(value: any, {onlySelf, emitEvent, emitModelToViewChange}?:
- {onlySelf?: boolean, emitEvent?: boolean, emitModelToViewChange?: boolean}): void;
-
- /**
- * Register a listener for change events.
- */
- registerOnChange(fn: Function): void;
-
- }
-
-
- /**
- * Defines a part of a form, of fixed length, that can contain other controls.
- *
- * A `ControlGroup` aggregates the values and errors of each {@link Control} 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 {@link Control} and {@link ControlArray}. {@link ControlArray} can also contain other
- * controls, but is of variable length.
- *
- * ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
- */
- class ControlGroup extends AbstractControl {
-
- constructor(controls: {[key: string]: AbstractControl}, optionals?: {[key: string]: boolean}, validator?: Function);
-
- controls: {[key: string]: AbstractControl};
-
- addControl(name: string, control: AbstractControl): void;
-
- removeControl(name: string): void;
-
- include(controlName: string): void;
-
- exclude(controlName: string): void;
-
- contains(controlName: string): boolean;
-
- }
-
-
- /**
- * Defines a part of a form, of variable length, that can contain other controls.
- *
- * A `ControlArray` aggregates the values and errors of each {@link Control} 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 {@link Control} and {@link ControlGroup}. {@link ControlGroup} can also contain
- * other controls, but is of fixed length.
- *
- * # Adding or removing controls
- *
- * To change the controls in the array, use the `push`, `insert`, or `removeAt` methods
- * in `ControlArray` itself. These methods ensure the controls are properly tracked in the
- * form's hierarchy. Do not modify the array of `AbstractControl`s used to instantiate
- * the `ControlArray` directly, as that will result in strange and unexpected behavior such
- * as broken change detection.
- *
- * ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
- */
- class ControlArray extends AbstractControl {
-
- constructor(controls: AbstractControl[], validator?: Function);
-
- controls: AbstractControl[];
-
- /**
- * Get the {@link AbstractControl} at the given `index` in the array.
- */
- at(index: number): AbstractControl;
-
- /**
- * Insert a new {@link AbstractControl} at the end of the array.
- */
- push(control: AbstractControl): void;
-
- /**
- * Insert a new {@link AbstractControl} at the given `index` in the array.
- */
- insert(index: number, control: AbstractControl): void;
-
- /**
- * Remove the control at the given `index` in the array.
- */
- removeAt(index: number): void;
-
- /**
- * Get the length of the control array.
- */
- length: number;
-
- }
-
-
- class AbstractControlDirective {
-
- control: AbstractControl;
-
- value: any;
-
- valid: boolean;
-
- errors: {[key: string]: any};
-
- pristine: boolean;
-
- dirty: boolean;
-
- touched: boolean;
-
- untouched: boolean;
-
- }
-
-
- /**
- * An interface that {@link NgFormModel} and {@link NgForm} implement.
- *
- * Only used by the forms module.
- */
- interface Form {
-
- addControl(dir: NgControl): void;
-
- removeControl(dir: NgControl): void;
-
- getControl(dir: NgControl): Control;
-
- addControlGroup(dir: NgControlGroup): void;
-
- removeControlGroup(dir: NgControlGroup): void;
-
- getControlGroup(dir: NgControlGroup): ControlGroup;
-
- updateModel(dir: NgControl, value: any): void;
-
- }
-
-
- /**
- * A directive that contains multiple {@link NgControl}.
- *
- * Only used by the forms module.
- */
- class ControlContainer extends AbstractControlDirective {
-
- name: string;
-
- formDirective: Form;
-
- path: string[];
-
- }
-
-
- /**
- * Creates and binds a control with a specified name to a DOM element.
- *
- * This directive can only be used as a child of {@link NgForm} or {@link NgFormModel}.
- *
- * # Example
- *
- * In this example, we create the login and password controls.
- * We can work with each control separately: check its validity, get its value, listen to its
- * changes.
- *
- * ```
- * @Component({selector: "login-comp"})
- * @View({
- * directives: [FORM_DIRECTIVES],
- * template: `
- * <form #f="form" (submit)='onLogIn(f.value)'>
- * Login <input type='text' ng-control='login' #l="form">
- * <div *ng-if="!l.valid">Login is invalid</div>
- *
- * Password <input type='password' ng-control='password'>
- * <button type='submit'>Log in!</button>
- * </form>
- * `})
- * class LoginComp {
- * onLogIn(value): void {
- * // value === {login: 'some login', password: 'some password'}
- * }
- * }
- * ```
- *
- * We can also use ng-model to bind a domain model to the form.
- *
- * ```
- * @Component({selector: "login-comp"})
- * @View({
- * directives: [FORM_DIRECTIVES],
- * template: `
- * <form (submit)='onLogIn()'>
- * Login <input type='text' ng-control='login' [(ng-model)]="credentials.login">
- * Password <input type='password' ng-control='password'
- * [(ng-model)]="credentials.password">
- * <button type='submit'>Log in!</button>
- * </form>
- * `})
- * class LoginComp {
- * credentials: {login:string, password:string};
- *
- * onLogIn(): void {
- * // this.credentials.login === "some login"
- * // this.credentials.password === "some password"
- * }
- * }
- * ```
- */
- class NgControlName extends NgControl implements OnChanges,
- OnDestroy {
-
- constructor(parent: ControlContainer, validators: Function[], valueAccessors: ControlValueAccessor[]);
-
- update: any;
-
- model: any;
-
- viewModel: any;
-
- validators: Function[];
-
- onChanges(changes: {[key: string]: SimpleChange}): void;
-
- onDestroy(): void;
-
- viewToModelUpdate(newValue: any): void;
-
- path: string[];
-
- formDirective: any;
-
- control: Control;
-
- validator: Function;
-
- }
-
-
- /**
- * Binds an existing {@link Control} to a DOM element.
- *
- * ### Example ([live demo](http://plnkr.co/edit/jcQlZ2tTh22BZZ2ucNAT?p=preview))
- *
- * 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.
- *
- * ```typescript
- * @Component({
- * selector: 'my-app'
- * })
- * @View({
- * template: `
- * <div>
- * <h2>NgFormControl Example</h2>
- * <form>
- * <p>Element with existing control: <input type="text"
- * [ng-form-control]="loginControl"></p>
- * <p>Value of existing control: {{loginControl.value}}</p>
- * </form>
- * </div>
- * `,
- * directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
- * })
- * export class App {
- * loginControl: Control = new Control('');
- * }
- * ```
- *
- * # ng-model
- *
- * We can also use `ng-model` to bind a domain model to the form.
- *
- * ### Example ([live demo](http://plnkr.co/edit/yHMLuHO7DNgT8XvtjTDH?p=preview))
- *
- * ```typescript
- * @Component({selector: "login-comp"})
- * @View({
- * directives: [FORM_DIRECTIVES],
- * template: "<input type='text' [ng-form-control]='loginControl' [(ng-model)]='login'>"
- * })
- * class LoginComp {
- * loginControl: Control = new Control('');
- * login:string;
- * }
- * ```
- */
- class NgFormControl extends NgControl implements OnChanges {
-
- constructor(validators: Function[], valueAccessors: ControlValueAccessor[]);
-
- form: Control;
-
- update: any;
-
- model: any;
-
- viewModel: any;
-
- validators: Function[];
-
- onChanges(changes: {[key: string]: SimpleChange}): void;
-
- path: string[];
-
- control: Control;
-
- validator: Function;
-
- viewToModelUpdate(newValue: any): void;
-
- }
-
-
- /**
- * Binds a domain model to a form control.
- *
- * # Usage
- *
- * `ng-model` binds an existing domain model to a form control. For a
- * two-way binding, use `[(ng-model)]` to ensure the model updates in
- * both directions.
- *
- * ### Example ([live demo](http://plnkr.co/edit/R3UX5qDaUqFO2VYR0UzH?p=preview))
- * ```typescript
- * @Component({selector: "search-comp"})
- * @View({
- * directives: [FORM_DIRECTIVES],
- * template: `<input type='text' [(ng-model)]="searchQuery">`
- * })
- * class SearchComp {
- * searchQuery: string;
- * }
- * ```
- */
- class NgModel extends NgControl implements OnChanges {
-
- constructor(validators: Function[], valueAccessors: ControlValueAccessor[]);
-
- update: any;
-
- model: any;
-
- viewModel: any;
-
- validators: Function[];
-
- onChanges(changes: {[key: string]: SimpleChange}): void;
-
- control: Control;
-
- path: string[];
-
- validator: Function;
-
- viewToModelUpdate(newValue: any): void;
-
- }
-
-
- /**
- * A base class that all control directive extend.
- * It binds a {@link Control} object to a DOM element.
- */
- class NgControl extends AbstractControlDirective {
-
- name: string;
-
- valueAccessor: ControlValueAccessor;
-
- validator: Function;
-
- path: string[];
-
- viewToModelUpdate(newValue: any): void;
-
- }
-
-
- /**
- * Creates and binds a control group to a DOM element.
- *
- * This directive can only be used as a child of {@link NgForm} or {@link NgFormModel}.
- *
- * # Example
- *
- * In this example, we create the credentials and personal control groups.
- * We can work with each group separately: check its validity, get its value, listen to its changes.
- *
- * ```
- * @Component({selector: "signup-comp"})
- * @View({
- * directives: [FORM_DIRECTIVES],
- * template: `
- * <form #f="form" (submit)='onSignUp(f.value)'>
- * <div ng-control-group='credentials' #credentials="form">
- * Login <input type='text' ng-control='login'>
- * Password <input type='password' ng-control='password'>
- * </div>
- * <div *ng-if="!credentials.valid">Credentials are invalid</div>
- *
- * <div ng-control-group='personal'>
- * Name <input type='text' ng-control='name'>
- * </div>
- * <button type='submit'>Sign Up!</button>
- * </form>
- * `})
- * class SignupComp {
- * onSignUp(value) {
- * // value === {
- * // personal: {name: 'some name'},
- * // credentials: {login: 'some login', password: 'some password'}}
- * }
- * }
- *
- * ```
- */
- class NgControlGroup extends ControlContainer implements OnInit,
- OnDestroy {
-
- constructor(_parent: ControlContainer);
-
- onInit(): void;
-
- onDestroy(): void;
-
- control: ControlGroup;
-
- path: string[];
-
- formDirective: Form;
-
- }
-
-
- /**
- * Binds an existing control group to a DOM element.
- *
- * ### Example ([live demo](http://plnkr.co/edit/jqrVirudY8anJxTMUjTP?p=preview))
- *
- * 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.
- *
- * ```typescript
- * @Component({
- * selector: 'my-app'
- * })
- * @View({
- * template: `
- * <div>
- * <h2>NgFormModel Example</h2>
- * <form [ng-form-model]="loginForm">
- * <p>Login: <input type="text" ng-control="login"></p>
- * <p>Password: <input type="password" ng-control="password"></p>
- * </form>
- * <p>Value:</p>
- * <pre>{{value}}</pre>
- * </div>
- * `,
- * directives: [FORM_DIRECTIVES]
- * })
- * export class App {
- * loginForm: ControlGroup;
- *
- * constructor() {
- * this.loginForm = new ControlGroup({
- * login: new Control(""),
- * password: new Control("")
- * });
- * }
- *
- * get value(): string {
- * return JSON.stringify(this.loginForm.value, null, 2);
- * }
- * }
- * ```
- *
- * We can also use ng-model to bind a domain model to the form.
- *
- * ```typescript
- * @Component({selector: "login-comp"})
- * @View({
- * directives: [FORM_DIRECTIVES],
- * template: `
- * <form [ng-form-model]='loginForm'>
- * Login <input type='text' ng-control='login' [(ng-model)]='credentials.login'>
- * Password <input type='password' ng-control='password'
- * [(ng-model)]='credentials.password'>
- * <button (click)="onLogin()">Login</button>
- * </form>`
- * })
- * class LoginComp {
- * credentials: {login: string, password: string};
- * loginForm: ControlGroup;
- *
- * constructor() {
- * this.loginForm = new ControlGroup({
- * login: new Control(""),
- * password: new Control("")
- * });
- * }
- *
- * onLogin(): void {
- * // this.credentials.login === 'some login'
- * // this.credentials.password === 'some password'
- * }
- * }
- * ```
- */
- class NgFormModel extends ControlContainer implements Form,
- OnChanges {
-
- form: ControlGroup;
-
- directives: NgControl[];
-
- ngSubmit: any;
-
- onChanges(_: any): void;
-
- formDirective: Form;
-
- control: ControlGroup;
-
- path: string[];
-
- addControl(dir: NgControl): void;
-
- getControl(dir: NgControl): Control;
-
- removeControl(dir: NgControl): void;
-
- addControlGroup(dir: NgControlGroup): void;
-
- removeControlGroup(dir: NgControlGroup): void;
-
- getControlGroup(dir: NgControlGroup): ControlGroup;
-
- updateModel(dir: NgControl, value: any): void;
-
- onSubmit(): boolean;
-
- }
-
-
- /**
- * If `NgForm` is bound in a component, `<form>` elements in that component will be
- * upgraded to use the Angular form system.
- *
- * # Typical Use
- *
- * Include `FORM_DIRECTIVES` in the `directives` section of a {@link View} annotation
- * to use `NgForm` and its associated controls.
- *
- * # Structure
- *
- * An Angular form is a collection of {@link Control}s in some hierarchy.
- * `Control`s can be at the top level or can be organized in {@link ControlGroups}
- * or {@link ControlArray}s. This hierarchy is reflected in the form's `value`, a
- * JSON object that mirrors the form structure.
- *
- * # Submission
- *
- * The `ng-submit` event signals when the user triggers a form submission.
- *
- * ### Example ([live demo](http://plnkr.co/edit/ltdgYj4P0iY64AR71EpL?p=preview))
- *
- * ```typescript
- * @Component({
- * selector: 'my-app'
- * })
- * @View({
- * template: `
- * <div>
- * <p>Submit the form to see the data object Angular builds</p>
- * <h2>NgForm demo</h2>
- * <form #f="form" (ng-submit)="onSubmit(f.value)">
- * <h3>Control group: credentials</h3>
- * <div ng-control-group="credentials">
- * <p>Login: <input type="text" ng-control="login"></p>
- * <p>Password: <input type="password" ng-control="password"></p>
- * </div>
- * <h3>Control group: person</h3>
- * <div ng-control-group="person">
- * <p>First name: <input type="text" ng-control="firstName"></p>
- * <p>Last name: <input type="text" ng-control="lastName"></p>
- * </div>
- * <button type="submit">Submit Form</button>
- * <p>Form data submitted:</p>
- * </form>
- * <pre>{{data}}</pre>
- * </div>
- * `,
- * directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
- * })
- * export class App {
- * constructor() {}
- *
- * data: string;
- *
- * onSubmit(data) {
- * this.data = JSON.stringify(data, null, 2);
- * }
- * }
- * ```
- */
- class NgForm extends ControlContainer implements Form {
-
- form: ControlGroup;
-
- ngSubmit: any;
-
- formDirective: Form;
-
- control: ControlGroup;
-
- path: string[];
-
- controls: {[key: string]: AbstractControl};
-
- addControl(dir: NgControl): void;
-
- getControl(dir: NgControl): Control;
-
- removeControl(dir: NgControl): void;
-
- addControlGroup(dir: NgControlGroup): void;
-
- removeControlGroup(dir: NgControlGroup): void;
-
- getControlGroup(dir: NgControlGroup): ControlGroup;
-
- updateModel(dir: NgControl, value: any): void;
-
- onSubmit(): boolean;
-
- }
-
-
- /**
- * A bridge between a control and a native element.
- *
- * Please see {@link DefaultValueAccessor} for more information.
- */
- interface ControlValueAccessor {
-
- writeValue(obj: any): void;
-
- registerOnChange(fn: any): void;
-
- registerOnTouched(fn: any): void;
-
- }
-
-
- /**
- * The default accessor for writing a value and listening to changes that is used by the
- * {@link NgModel}, {@link NgFormControl}, and {@link NgControlName} directives.
- *
- * # Example
- * ```
- * <input type="text" [(ng-model)]="searchQuery">
- * ```
- */
- class DefaultValueAccessor implements ControlValueAccessor {
-
- constructor(_renderer: Renderer, _elementRef: ElementRef);
-
- onChange: any;
-
- onTouched: any;
-
- writeValue(value: any): void;
-
- registerOnChange(fn: (_: any) => void): void;
-
- registerOnTouched(fn: () => void): void;
-
- }
-
-
- class NgControlStatus {
-
- constructor(cd: NgControl);
-
- ngClassUntouched: boolean;
-
- ngClassTouched: boolean;
-
- ngClassPristine: boolean;
-
- ngClassDirty: boolean;
-
- ngClassValid: boolean;
-
- ngClassInvalid: boolean;
-
- }
-
-
- /**
- * The accessor for writing a value and listening to changes on a checkbox input element.
- *
- * # Example
- * ```
- * <input type="checkbox" [ng-control]="rememberLogin">
- * ```
- */
- class CheckboxControlValueAccessor implements ControlValueAccessor {
-
- constructor(_renderer: Renderer, _elementRef: ElementRef);
-
- onChange: any;
-
- onTouched: any;
-
- writeValue(value: any): void;
-
- registerOnChange(fn: (_: any) => {}): void;
-
- registerOnTouched(fn: () => {}): void;
-
- }
-
-
- /**
- * Marks `<option>` as dynamic, so Angular can be notified when options change.
- *
- * #Example:
- *
- * ```
- * <select ng-control="city">
- * <option *ng-for="#c of cities" [value]="c"></option>
- * </select>
- * ```
- */
- class NgSelectOption {
-
- }
-
-
- /**
- * The accessor for writing a value and listening to changes on a select element.
- */
- class SelectControlValueAccessor implements ControlValueAccessor {
-
- constructor(_renderer: Renderer, _elementRef: ElementRef, query: QueryList<NgSelectOption>);
-
- value: string;
-
- onChange: any;
-
- onTouched: any;
-
- writeValue(value: any): void;
-
- registerOnChange(fn: () => any): void;
-
- registerOnTouched(fn: () => any): void;
-
- }
-
-
- /**
- * A list of all the form directives used as part of a `@View` annotation.
- *
- * This is a shorthand for importing them each individually.
- *
- * ### Example:
- *
- * ```typescript
- * @View({
- * directives: [FORM_DIRECTIVES]
- * })
- * @Component({
- * selector: 'my-app'
- * })
- * class MyApp {}
- * ```
- */
- let FORM_DIRECTIVES: Type[];
-
-
-
- let NG_VALIDATORS: OpaqueToken;
-
-
-
- /**
- * Provides a set of validators used by form controls.
- *
- * # Example
- *
- * ```
- * var loginControl = new Control("", Validators.required)
- * ```
- */
- class Validators {
-
- static required(control:Control): {[key: string]: boolean};
-
- static nullValidator(c: any): {[key: string]: boolean};
-
- static compose(validators: Function[]): Function;
-
- static group(group:ControlGroup): {[key: string]: any[]};
-
- static array(array:ControlArray): {[key: string]: any[]};
-
- }
-
-
- class DefaultValidators {
-
- }
-
-
- /**
- * Creates a form object from a user-specified configuration.
- *
- * # Example
- *
- * ```
- * import {Component, View, bootstrap} from 'angular2/angular2';
- * import {FormBuilder, Validators, FORM_DIRECTIVES, ControlGroup} from 'angular2/core';
- *
- * @Component({
- * selector: 'login-comp',
- * viewBindings: [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: [FORM_DIRECTIVES]
- * })
- * 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 {@link ControlGroup} that consists of a `login` {@link Control}, and a
- * nested {@link ControlGroup} that defines a `password` and a `passwordConfirmation`
- * {@link Control}:
- *
- * ```
- * var loginForm = builder.group({
- * login: ["", Validators.required],
- *
- * passwordRetry: builder.group({
- * password: ["", Validators.required],
- * passwordConfirmation: ["", Validators.required]
- * })
- * });
- *
- * ```
- */
- class FormBuilder {
-
- group(controlsConfig: {[key: string]: any}, extra?: {[key: string]: any}): ControlGroup;
-
- control(value: Object, validator?: Function): Control;
-
- array(controlsConfig: any[], validator?: Function): ControlArray;
-
- }
-
-
- /**
- * Shorthand set of bindings used for building Angular forms.
- *
- * ### Example:
- *
- * ```typescript
- * bootstrap(MyApp, [FORM_BINDINGS]);
- * ```
- */
- let FORM_BINDINGS: Type[];
-
-
-
- function inspectNativeElement(element: any): DebugElement;
-
-
-
- let ELEMENT_PROBE_BINDINGS: any[];
-
-
-
- /**
- * A DebugElement contains information from the Angular compiler about an
- * element and provides access to the corresponding ElementInjector and
- * underlying DOM Element, as well as a way to query for children.
- */
- interface DebugElement {
-
- componentInstance: any;
-
- nativeElement: any;
-
- elementRef: ElementRef;
-
- getDirectiveInstance(directiveIndex: number): any;
-
- /**
- * Get child DebugElements from within the Light DOM.
- *
- * @return {DebugElement[]}
- */
- children: DebugElement[];
-
- /**
- * Get the root DebugElement children of a component. Returns an empty
- * list if the current DebugElement is not a component root.
- *
- * @return {DebugElement[]}
- */
- componentViewChildren: DebugElement[];
-
- triggerEventHandler(eventName: string, eventObj: Event): void;
-
- hasDirective(type: Type): boolean;
-
- inject(type: Type): any;
-
- getLocal(name: string): any;
-
- /**
- * Return the first descendant TestElement matching the given predicate
- * and scope.
- *
- * @param {Function: boolean} predicate
- * @param {Scope} scope
- *
- * @return {DebugElement}
- */
- query(predicate: Predicate<DebugElement>, scope?: Function): DebugElement;
-
- /**
- * Return descendant TestElememts matching the given predicate
- * and scope.
- *
- * @param {Function: boolean} predicate
- * @param {Scope} scope
- *
- * @return {DebugElement[]}
- */
- queryAll(predicate: Predicate<DebugElement>, scope?: Function): DebugElement[];
-
- }
-
-
- /**
- * Returns a DebugElement for a ElementRef.
- *
- * @param {ElementRef}: elementRef
- * @return {DebugElement}
- */
- function inspectElement(elementRef: ElementRef): DebugElement;
-
-
-
- function asNativeElements(arr: DebugElement[]): any[];
-
-
-
- class Scope {
-
- static all(debugElement: DebugElement): DebugElement[];
-
- static light(debugElement: DebugElement): DebugElement[];
-
- static view(debugElement: DebugElement): DebugElement[];
-
- }
-
-
- class By {
-
- static all(): Function;
-
- static css(selector: string): Predicate<DebugElement>;
-
- static directive(type: Type): Predicate<DebugElement>;
-
- }
-
-
- enum ChangeDetectionStrategy {
-
- /**
- * `CheckedOnce` means that after calling detectChanges the mode of the change detector
- * will become `Checked`.
- */
- CheckOnce,
-
- /**
- * `Checked` means that the change detector should be skipped until its mode changes to
- * `CheckOnce`.
- */
- Checked,
-
- /**
- * `CheckAlways` means that after calling detectChanges the mode of the change detector
- * will remain `CheckAlways`.
- */
- CheckAlways,
-
- /**
- * `Detached` means that the change detector sub tree is not a part of the main tree and
- * should be skipped.
- */
- Detached,
-
- /**
- * `OnPush` means that the change detector's mode will be set to `CheckOnce` during hydration.
- */
- OnPush,
-
- /**
- * `Default` means that the change detector's mode will be set to `CheckAlways` during hydration.
- */
- Default,
-
- /**
- * This is an experimental feature. Works only in Dart.
- */
- OnPushObserve
- }
-
-
-
- /**
- * An error thrown if application changes model breaking the top-down data flow.
- *
- * This exception is only thrown in dev mode.
- *
- * <!-- TODO: Add a link once the dev mode option is configurable -->
- *
- * ### Example
- *
- * ```typescript
- * @Component({selector: 'parent'})
- * @View({
- * template: `
- * <child [prop]="parentProp"></child>
- * `,
- * directives: [forwardRef(() => Child)]
- * })
- * class Parent {
- * parentProp = "init";
- * }
- *
- * @Directive({selector: 'child', inputs: ['prop']})
- * class Child {
- * constructor(public parent: Parent) {}
- *
- * set prop(v) {
- * // this updates the parent property, which is disallowed during change detection
- * // this will result in ExpressionChangedAfterItHasBeenCheckedException
- * this.parent.parentProp = "updated";
- * }
- * }
- * ```
- */
- class ExpressionChangedAfterItHasBeenCheckedException extends BaseException {
-
- constructor(exp: string, oldValue: any, currValue: any, context: any);
-
- }
-
-
- /**
- * Thrown when an expression evaluation raises an exception.
- *
- * This error wraps the original exception to attach additional contextual information that can
- * be useful for debugging.
- *
- * ### Example ([live demo](http://plnkr.co/edit/2Kywoz?p=preview))
- *
- * ```typescript
- * @Directive({selector: 'child', inputs: ['prop']})
- * class Child {
- * prop;
- * }
- *
- * @Component({
- * selector: 'app'
- * })
- * @View({
- * template: `
- * <child [prop]="field.first"></child>
- * `,
- * directives: [Child]
- * })
- * class App {
- * field = null;
- * }
- *
- * bootstrap(App);
- * ```
- *
- * You can access the original exception and stack through the `originalException` and
- * `originalStack` properties.
- */
- class ChangeDetectionError extends WrappedException {
-
- constructor(exp: string, originalException: any, originalStack: any, context: any);
-
- /**
- * Information about the expression that triggered the exception.
- */
- location: string;
-
- }
-
-
- /**
- * Reference to a component's change detection object.
- */
- interface ChangeDetectorRef {
-
- /**
- * Marks all {@link OnPush} ancestors as to be checked.
- *
- * <!-- TODO: Add a link to a chapter on OnPush components -->
- *
- * ### Example ([live demo](http://plnkr.co/edit/GC512b?p=preview))
- *
- * ```typescript
- * @Component({selector: 'cmp', changeDetection: ChangeDetectionStrategy.OnPush})
- * @View({template: `Number of ticks: {{numberOfTicks}}`})
- * class Cmp {
- * numberOfTicks = 0;
- *
- * constructor(ref: ChangeDetectorRef) {
- * setInterval(() => {
- * this.numberOfTicks ++
- * // the following is required, otherwise the view will not be updated
- * this.ref.markForCheck();
- * }, 1000);
- * }
- * }
- *
- * @Component({
- * selector: 'app',
- * changeDetection: ChangeDetectionStrategy.OnPush
- * })
- * @View({
- * template: `
- * <cmp><cmp>
- * `,
- * directives: [Cmp]
- * })
- * class App {
- * }
- *
- * bootstrap(App);
- * ```
- */
- markForCheck(): void;
-
- /**
- * Detaches the change detector from the change detector tree.
- *
- * The detached change detector will not be checked until it is reattached.
- *
- * This can also be used in combination with {@link detectChanges} to implement local change
- * detection checks.
- *
- * <!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
- * <!-- TODO: Add a live demo once ref.detectChanges is merged into master -->
- *
- * ### Example
- *
- * The following example defines a component with a large list of readonly data.
- * Imagine the data changes constantly, many times per second. For performance reasons,
- * we want to check and update the list every five seconds. We can do that by detaching
- * the component's change detector and doing a local check every five seconds.
- *
- * ```typescript
- * class DataProvider {
- * // in a real application the returned data will be different every time
- * get data() {
- * return [1,2,3,4,5];
- * }
- * }
- *
- * @Component({selector: 'giant-list'})
- * @View({
- * template: `
- * <li *ng-for="#d of dataProvider.data">Data {{d}}</lig>
- * `,
- * directives: [NgFor]
- * })
- * class GiantList {
- * constructor(private ref: ChangeDetectorRef, private dataProvider:DataProvider) {
- * ref.detach();
- * setInterval(() => {
- * this.ref.detectChanges();
- * }, 5000);
- * }
- * }
- *
- * @Component({
- * selector: 'app', bindings: [DataProvider]
- * })
- * @View({
- * template: `
- * <giant-list><giant-list>
- * `,
- * directives: [GiantList]
- * })
- * class App {
- * }
- *
- * bootstrap(App);
- * ```
- */
- detach(): void;
-
- /**
- * Checks the change detector and its children.
- *
- * This can also be used in combination with {@link detach} to implement local change detection
- * checks.
- *
- * <!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
- * <!-- TODO: Add a live demo once ref.detectChanges is merged into master -->
- *
- * ### Example
- *
- * The following example defines a component with a large list of readonly data.
- * Imagine, the data changes constantly, many times per second. For performance reasons,
- * we want to check and update the list every five seconds.
- *
- * We can do that by detaching the component's change detector and doing a local change detection
- * check
- * every five seconds.
- *
- * See {@link detach} for more information.
- */
- detectChanges(): void;
-
- /**
- * Reattach the change detector to the change detector tree.
- *
- * This also marks OnPush ancestors as to be checked. This reattached change detector will be
- * checked during the next change detection run.
- *
- * <!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
- *
- * ### Example ([live demo](http://plnkr.co/edit/aUhZha?p=preview))
- *
- * The following example creates a component displaying `live` data. The component will detach
- * its change detector from the main change detector tree when the component's live property
- * is set to false.
- *
- * ```typescript
- * class DataProvider {
- * data = 1;
- *
- * constructor() {
- * setInterval(() => {
- * this.data = this.data * 2;
- * }, 500);
- * }
- * }
- *
- * @Component({selector: 'live-data', inputs: ['live']})
- * @View({
- * template: `Data: {{dataProvider.data}}`
- * })
- * class LiveData {
- * constructor(private ref: ChangeDetectorRef, private dataProvider:DataProvider) {}
- *
- * set live(value) {
- * if (value)
- * this.ref.reattach();
- * else
- * this.ref.detach();
- * }
- * }
- *
- * @Component({
- * selector: 'app',
- * bindings: [DataProvider]
- * })
- * @View({
- * template: `
- * Live Update: <input type="checkbox" [(ng-model)]="live">
- * <live-data [live]="live"><live-data>
- * `,
- * directives: [LiveData, FORM_DIRECTIVES]
- * })
- * class App {
- * live = true;
- * }
- *
- * bootstrap(App);
- * ```
- */
- reattach(): void;
-
- }
-
-
- /**
- * Indicates that the result of a {@link PipeMetadata} 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.
- *
- * Example:
- *
- * ```
- * if (this._latestValue === this._latestReturnedValue) {
- * return this._latestReturnedValue;
- * } else {
- * this._latestReturnedValue = this._latestValue;
- * return WrappedValue.wrap(this._latestValue); // this will force update
- * }
- * ```
- */
- class WrappedValue {
-
- constructor(wrapped: any);
-
- static wrap(value: any): WrappedValue;
-
- wrapped: any;
-
- }
-
-
- class SimpleChange {
-
- constructor(previousValue: any, currentValue: any);
-
- previousValue: any;
-
- currentValue: any;
-
- isFirstChange(): boolean;
-
- }
-
-
- /**
- * To create a Pipe, you must implement this interface.
- *
- * Angular invokes the `transform` method with the value of a binding
- * as the first argument, and any parameters as the second argument in list form.
- *
- * ## Syntax
- *
- * `value | pipeName[:arg0[:arg1...]]`
- *
- * ### Example ([live demo](http://plnkr.co/edit/f5oyIked9M2cKzvZNKHV?p=preview))
- *
- * The `RepeatPipe` below repeats the value as many times as indicated by the first argument:
- *
- * ```
- * import {Pipe, PipeTransform} from 'angular2/angular2';
- *
- * @Pipe({name: 'repeat'})
- * export class RepeatPipe implements PipeTransform {
- * transform(value: any, args: any[] = []) {
- * if (args.length == 0) {
- * throw new Error('repeat pipe requires one argument');
- * }
- * let times: number = args[0];
- * return value.repeat(times);
- * }
- * }
- * ```
- *
- * Invoking `{{ 'ok' | repeat:3 }}` in a template produces `okokok`.
- */
- interface PipeTransform {
-
- transform(value: any, args: any[]): any;
-
- }
-
-
- /**
- * To create a stateful Pipe, you should implement this interface.
- *
- * A stateful pipe may produce different output, given the same input. It is
- * likely that a stateful pipe may contain state that should be cleaned up when
- * a binding is destroyed. For example, a subscription to a stream of data may need to
- * be disposed, or an interval may need to be cleared.
- *
- * ### Example ([live demo](http://plnkr.co/edit/hlaejwQAmWayxwc5YXQE?p=preview))
- *
- * In this example, a pipe is created to countdown its input value, updating it every
- * 50ms. Because it maintains an internal interval, it automatically clears
- * the interval when the binding is destroyed or the countdown completes.
- *
- * ```
- * import {Pipe, PipeTransform} from 'angular2/angular2'
- * @Pipe({name: 'countdown'})
- * class CountDown implements PipeTransform, PipeOnDestroy {
- * remainingTime:Number;
- * interval:SetInterval;
- * onDestroy() {
- * if (this.interval) {
- * clearInterval(this.interval);
- * }
- * }
- * transform(value: any, args: any[] = []) {
- * if (!parseInt(value, 10)) return null;
- * if (typeof this.remainingTime !== 'number') {
- * this.remainingTime = parseInt(value, 10);
- * }
- * if (!this.interval) {
- * this.interval = setInterval(() => {
- * this.remainingTime-=50;
- * if (this.remainingTime <= 0) {
- * this.remainingTime = 0;
- * clearInterval(this.interval);
- * delete this.interval;
- * }
- * }, 50);
- * }
- * return this.remainingTime;
- * }
- * }
- * ```
- *
- * Invoking `{{ 10000 | countdown }}` would cause the value to be decremented by 50,
- * every 50ms, until it reaches 0.
- */
- interface PipeOnDestroy {
-
- onDestroy(): void;
-
- }
-
-
- /**
- * A repository of different iterable diffing strategies used by NgFor, NgClass, and others.
- */
- class IterableDiffers {
-
- constructor(factories: IterableDifferFactory[]);
-
- static create(factories: IterableDifferFactory[], parent?: IterableDiffers): IterableDiffers;
-
- /**
- * Takes an array of {@link IterableDifferFactory} and returns a binding used to extend the
- * inherited {@link IterableDiffers} instance with the provided factories and return a new
- * {@link IterableDiffers} instance.
- *
- * The following example shows how to extend an existing list of factories,
- * which will only be applied to the injector for this component and its children.
- * This step is all that's required to make a new {@link IterableDiffer} available.
- *
- * # Example
- *
- * ```
- * @Component({
- * viewBindings: [
- * IterableDiffers.extend([new ImmutableListDiffer()])
- * ]
- * })
- * ```
- */
- static extend(factories: IterableDifferFactory[]): Binding;
-
- factories: IterableDifferFactory[];
-
- find(iterable: Object): IterableDifferFactory;
-
- }
-
-
- interface IterableDiffer {
-
- diff(object: Object): any;
-
- onDestroy(): void;
-
- }
-
-
- /**
- * Provides a factory for {@link IterableDiffer}.
- */
- interface IterableDifferFactory {
-
- supports(objects: Object): boolean;
-
- create(cdRef: ChangeDetectorRef): IterableDiffer;
-
- }
-
-
- /**
- * A repository of different Map diffing strategies used by NgClass, NgStyle, and others.
- */
- class KeyValueDiffers {
-
- constructor(factories: KeyValueDifferFactory[]);
-
- static create(factories: KeyValueDifferFactory[], parent?: KeyValueDiffers): KeyValueDiffers;
-
- /**
- * Takes an array of {@link KeyValueDifferFactory} and returns a binding used to extend the
- * inherited {@link KeyValueDiffers} instance with the provided factories and return a new
- * {@link KeyValueDiffers} instance.
- *
- * The following example shows how to extend an existing list of factories,
- * which will only be applied to the injector for this component and its children.
- * This step is all that's required to make a new {@link KeyValueDiffer} available.
- *
- * # Example
- *
- * ```
- * @Component({
- * viewBindings: [
- * KeyValueDiffers.extend([new ImmutableMapDiffer()])
- * ]
- * })
- * ```
- */
- static extend(factories: KeyValueDifferFactory[]): Binding;
-
- factories: KeyValueDifferFactory[];
-
- find(kv: Object): KeyValueDifferFactory;
-
- }
-
-
- interface KeyValueDiffer {
-
- diff(object: Object): void;
-
- onDestroy(): void;
-
- }
-
-
- /**
- * Provides a factory for {@link KeyValueDiffer}.
- */
- interface KeyValueDifferFactory {
-
- supports(objects: Object): boolean;
-
- create(cdRef: ChangeDetectorRef): KeyValueDiffer;
-
- }
-
-
- /**
- * Create trace scope.
- *
- * Scopes must be strictly nested and are analogous to stack frames, but
- * do not have to follow the stack frames. Instead it is recommended that they follow logical
- * nesting. You may want to use
- * [Event
- * Signatures](http://google.github.io/tracing-framework/instrumenting-code.html#custom-events)
- * as they are defined in WTF.
- *
- * Used to mark scope entry. The return value is used to leave the scope.
- *
- * var myScope = wtfCreateScope('MyClass#myMethod(ascii someVal)');
- *
- * someMethod() {
- * var s = myScope('Foo'); // 'Foo' gets stored in tracing UI
- * // DO SOME WORK HERE
- * return wtfLeave(s, 123); // Return value 123
- * }
- *
- * Note, adding try-finally block around the work to ensure that `wtfLeave` gets called can
- * negatively impact the performance of your application. For this reason we recommend that
- * you don't add them to ensure that `wtfLeave` gets called. In production `wtfLeave` is a noop and
- * so try-finally block has no value. When debugging perf issues, skipping `wtfLeave`, do to
- * exception, will produce incorrect trace, but presence of exception signifies logic error which
- * needs to be fixed before the app should be profiled. Add try-finally only when you expect that
- * an exception is expected during normal execution while profiling.
- */
- var wtfCreateScope: WtfScopeFn;
-
-
-
- /**
- * Used to mark end of Scope.
- *
- * - `scope` to end.
- * - `returnValue` (optional) to be passed to the WTF.
- *
- * Returns the `returnValue for easy chaining.
- */
- var wtfLeave: <T>(scope: any, returnValue?: T) => T;
-
-
-
- /**
- * Used to mark Async start. Async are similar to scope but they don't have to be strictly nested.
- * The return value is used in the call to [endAsync]. Async ranges only work if WTF has been
- * enabled.
- *
- * someMethod() {
- * var s = wtfStartTimeRange('HTTP:GET', 'some.url');
- * var future = new Future.delay(5).then((_) {
- * wtfEndTimeRange(s);
- * });
- * }
- */
- var wtfStartTimeRange: (rangeType: string, action: string) => any;
-
-
-
- /**
- * Ends a async time range operation.
- * [range] is the return value from [wtfStartTimeRange] Async ranges only work if WTF has been
- * enabled.
- */
- var wtfEndTimeRange: (range: any) => void;
-
-
-
- interface WtfScopeFn {
-
- (arg0?: any, arg1?: any): any;
-
- }
-
-
- var ResolvedBinding: InjectableReference;
-
-
-
- var InstantiationError: InjectableReference;
-
-
-
- var PlatformRef: InjectableReference;
-
-
-
- var ApplicationRef: InjectableReference;
-
-
-
- var Compiler: InjectableReference;
-
-
-
- var AppViewManager: InjectableReference;
-
-
-
- var DynamicComponentLoader: InjectableReference;
-
-
-
- var ElementRef: InjectableReference;
-
-
-
- var TemplateRef: InjectableReference;
-
-
-
- var ViewRef: InjectableReference;
-
-
-
- var ProtoViewRef: InjectableReference;
-
-
-
- var ViewContainerRef: InjectableReference;
-
-
-
- var ComponentRef: InjectableReference;
-
-
-
- var LifeCycle: InjectableReference;
-
-
-
- var NgZone: InjectableReference;
-
-
-
- var Renderer: InjectableReference;
-
-
-
- var RenderProtoViewRef: InjectableReference;
-
-
-
- var DebugElement: InjectableReference;
-
-
-
- var ChangeDetectorRef: InjectableReference;
-
-
-
-}
-
-declare module "angular2/angular2" {
- export = ng;
-}
-
-
-
-declare module ngWorker {
- /**
- * A dispatcher that relays all events that occur in a Render View.
- *
- * Use {@link Renderer#setEventDispatcher} to register a dispatcher for a particular Render View.
- */
- interface RenderEventDispatcher {
-
- /**
- * Called when Event called `eventName` was triggered on an Element with an Event Binding for this
- * Event.
- *
- * `elementIndex` specifies the depth-first index of the Element in the Render View.
- *
- * `locals` is a map for local variable to value mapping that should be used when evaluating the
- * Event Binding expression.
- *
- * Returns `false` if `preventDefault` should be called to stop the default behavior of the Event
- * in the Rendering Context.
- */
- dispatchRenderEvent(elementIndex: number, eventName: string, locals: Map<string, any>): boolean;
-
- }
-
-
- /**
- * Injectable service that provides a low-level interface for modifying the UI.
- *
- * Use this service to bypass Angular's templating and make custom UI changes that can't be
- * expressed declaratively. For example if you need to set a property or an attribute whose name is
- * not statically known, use {@link #setElementProperty} or {@link #setElementAttribute}
- * respectively.
- *
- * If you are implementing a custom renderer, you must implement this interface.
- *
- * The default Renderer implementation is {@link DomRenderer}. Also see {@link WebWorkerRenderer}.
- */
- interface Renderer {
-
- /**
- * Registers a component template represented as arrays of {@link RenderTemplateCmd}s and styles
- * with the Renderer.
- *
- * Once a template is registered it can be referenced via {@link RenderBeginComponentCmd} when
- * {@link #createProtoView creating Render ProtoView}.
- */
- registerComponentTemplate(templateId: number, commands: RenderTemplateCmd[], styles: string[], nativeShadow: boolean): void;
-
- /**
- * Creates a {@link RenderProtoViewRef} from an array of {@link RenderTemplateCmd}`s.
- */
- createProtoView(cmds: RenderTemplateCmd[]): RenderProtoViewRef;
-
- /**
- * Creates a Root Host View based on the provided `hostProtoViewRef`.
- *
- * `fragmentCount` is the number of nested {@link RenderFragmentRef}s in this View. This parameter
- * is non-optional so that the renderer can create a result synchronously even when application
- * runs in a different context (e.g. in a Web Worker).
- *
- * `hostElementSelector` is a (CSS) selector for querying the main document to find the Host
- * Element. The newly created Root Host View should be attached to this element.
- *
- * Returns an instance of {@link RenderViewWithFragments}, representing the Render View.
- */
- createRootHostView(hostProtoViewRef: RenderProtoViewRef, fragmentCount: number, hostElementSelector: string): RenderViewWithFragments;
-
- /**
- * Creates a Render View based on the provided `protoViewRef`.
- *
- * `fragmentCount` is the number of nested {@link RenderFragmentRef}s in this View. This parameter
- * is non-optional so that the renderer can create a result synchronously even when application
- * runs in a different context (e.g. in a Web Worker).
- *
- * Returns an instance of {@link RenderViewWithFragments}, representing the Render View.
- */
- createView(protoViewRef: RenderProtoViewRef, fragmentCount: number): RenderViewWithFragments;
-
- /**
- * Destroys a Render View specified via `viewRef`.
- *
- * This operation should be performed only on a View that has already been dehydrated and
- * all of its Render Fragments have been detached.
- *
- * Destroying a View indicates to the Renderer that this View is not going to be referenced in any
- * future operations. If the Renderer created any renderer-specific objects for this View, these
- * objects should now be destroyed to prevent memory leaks.
- */
- destroyView(viewRef: RenderViewRef): void;
-
- /**
- * Attaches the Nodes of a Render Fragment after the last Node of `previousFragmentRef`.
- */
- attachFragmentAfterFragment(previousFragmentRef: RenderFragmentRef, fragmentRef: RenderFragmentRef): void;
-
- /**
- * Attaches the Nodes of the Render Fragment after an Element.
- */
- attachFragmentAfterElement(elementRef: RenderElementRef, fragmentRef: RenderFragmentRef): void;
-
- /**
- * Detaches the Nodes of a Render Fragment from their parent.
- *
- * This operations should be called only on a View that has been already
- * {@link #dehydrateView dehydrated}.
- */
- detachFragment(fragmentRef: RenderFragmentRef): void;
-
- /**
- * Notifies a custom Renderer to initialize a Render View.
- *
- * This method is called by Angular after a Render View has been created, or when a previously
- * dehydrated Render View is about to be reused.
- */
- hydrateView(viewRef: RenderViewRef): void;
-
- /**
- * Notifies a custom Renderer that a Render View is no longer active.
- *
- * This method is called by Angular before a Render View will be destroyed, or when a hydrated
- * Render View is about to be put into a pool for future reuse.
- */
- dehydrateView(viewRef: RenderViewRef): void;
-
- /**
- * Returns the underlying native element at the specified `location`, or `null` if direct access
- * to native elements is not supported (e.g. when the application runs in a web worker).
- *
- * <div class="callout is-critical">
- * <header>Use with caution</header>
- * <p>
- * Use this api as the last resort when direct access to DOM is needed. Use templating and
- * data-binding, or other {@link Renderer} methods instead.
- * </p>
- * <p>
- * Relying on direct DOM access creates tight coupling between your application and rendering
- * layers which will make it impossible to separate the two and deploy your application into a
- * web worker.
- * </p>
- * </div>
- */
- getNativeElementSync(location: RenderElementRef): any;
-
- /**
- * Sets a property on the Element specified via `location`.
- */
- setElementProperty(location: RenderElementRef, propertyName: string, propertyValue: any): void;
-
- /**
- * Sets an attribute on the Element specified via `location`.
- *
- * If `attributeValue` is `null`, the attribute is removed.
- */
- setElementAttribute(location: RenderElementRef, attributeName: string, attributeValue: string): void;
-
- /**
- * Sets a (CSS) class on the Element specified via `location`.
- *
- * `isAdd` specifies if the class should be added or removed.
- */
- setElementClass(location: RenderElementRef, className: string, isAdd: boolean): void;
-
- /**
- * Sets a (CSS) inline style on the Element specified via `location`.
- *
- * If `styleValue` is `null`, the style is removed.
- */
- setElementStyle(location: RenderElementRef, styleName: string, styleValue: string): void;
-
- /**
- * Calls a method on the Element specified via `location`.
- */
- invokeElementMethod(location: RenderElementRef, methodName: string, args: any[]): void;
-
- /**
- * Sets the value of an interpolated TextNode at the specified index to the `text` value.
- *
- * `textNodeIndex` is the depth-first index of the Node among interpolated Nodes in the Render
- * View.
- */
- setText(viewRef: RenderViewRef, textNodeIndex: number, text: string): void;
-
- /**
- * Sets a dispatcher to relay all events triggered in the given Render View.
- *
- * Each Render View can have only one Event Dispatcher, if this method is called multiple times,
- * the last provided dispatcher will be used.
- */
- setEventDispatcher(viewRef: RenderViewRef, dispatcher: RenderEventDispatcher): void;
-
- }
-
-
- /**
- * Represents an Element that is part of a {@link RenderViewRef Render View}.
- *
- * `RenderElementRef` is a counterpart to {@link ElementRef} available in the Application Context.
- *
- * When using `Renderer` from the Application Context, `ElementRef` can be used instead of
- * `RenderElementRef`.
- */
- interface RenderElementRef {
-
- /**
- * Reference to the Render View that contains this Element.
- */
- renderView: RenderViewRef;
-
- /**
- * Index of the Element (in the depth-first order) inside the Render View.
- *
- * This index is used internally by Angular to locate elements.
- */
- boundElementIndex: number;
-
- }
-
-
- /**
- * Represents an Angular View in the Rendering Context.
- *
- * `RenderViewRef` specifies to the {@link Renderer} what View to update or destroy.
- *
- * Unlike a {@link ViewRef} available in the Application Context, Render View contains all the
- * static Component Views that have been recursively merged into a single Render View.
- *
- * Each `RenderViewRef` contains one or more {@link RenderFragmentRef Render Fragments}, these
- * Fragments are created, hydrated, dehydrated and destroyed as a single unit together with the
- * View.
- */
- class RenderViewRef {
-
- }
-
-
- /**
- * Represents an Angular ProtoView in the Rendering Context.
- *
- * When you implement a custom {@link Renderer}, `RenderProtoViewRef` specifies what Render View
- * your renderer should create.
- *
- * `RenderProtoViewRef` is a counterpart to {@link ProtoViewRef} available in the Application
- * Context. But unlike `ProtoViewRef`, `RenderProtoViewRef` contains all static nested Proto Views
- * that are recursively merged into a single Render Proto View.
- *
- *
- * <!-- TODO: this is created by Renderer#createProtoView in the new compiler -->
- */
- interface RenderProtoViewRef {
-
- }
-
-
- /**
- * Represents a list of sibling Nodes that can be moved by the {@link Renderer} independently of
- * other Render Fragments.
- *
- * Any {@link RenderView} has one Render Fragment.
- *
- * Additionally any View with an Embedded View that contains a {@link NgContent View Projection}
- * results in additional Render Fragment.
- */
- class RenderFragmentRef {
-
- }
-
-
- /**
- * Container class produced by a {@link Renderer} when creating a Render View.
- *
- * An instance of `RenderViewWithFragments` contains a {@link RenderViewRef} and an array of
- * {@link RenderFragmentRef}s belonging to this Render View.
- */
- class RenderViewWithFragments {
-
- constructor(viewRef: RenderViewRef, fragmentRefs: RenderFragmentRef[]);
-
- /**
- * Reference to the {@link RenderViewRef}.
- */
- viewRef: RenderViewRef;
-
- /**
- * Array of {@link RenderFragmentRef}s ordered in the depth-first order.
- */
- fragmentRefs: RenderFragmentRef[];
-
- }
-
-
- interface RenderTemplateCmd {
-
- visit(visitor: RenderCommandVisitor, context: any): any;
-
- }
-
-
- interface RenderCommandVisitor {
-
- visitText(cmd: RenderTextCmd, context: any): any;
-
- visitNgContent(cmd: RenderNgContentCmd, context: any): any;
-
- visitBeginElement(cmd: RenderBeginElementCmd, context: any): any;
-
- visitEndElement(context: any): any;
-
- visitBeginComponent(cmd: RenderBeginComponentCmd, context: any): any;
-
- visitEndComponent(context: any): any;
-
- visitEmbeddedTemplate(cmd: RenderEmbeddedTemplateCmd, context: any): any;
-
- }
-
-
- interface RenderTextCmd extends RenderBeginCmd {
-
- value: string;
-
- }
-
-
- interface RenderNgContentCmd {
-
- ngContentIndex: number;
-
- }
-
-
- interface RenderBeginElementCmd extends RenderBeginCmd {
-
- name: string;
-
- attrNameAndValues: string[];
-
- eventTargetAndNames: string[];
-
- }
-
-
- interface RenderBeginComponentCmd extends RenderBeginElementCmd {
-
- nativeShadow: boolean;
-
- templateId: number;
-
- }
-
-
- interface RenderEmbeddedTemplateCmd extends RenderBeginElementCmd {
-
- isMerged: boolean;
-
- children: RenderTemplateCmd[];
-
- }
-
-
- interface RenderBeginCmd extends RenderTemplateCmd {
-
- ngContentIndex: number;
-
- isBound: boolean;
-
- }
-
-
- let PRIMITIVE: Type;
-
-
-
- /**
- * Implement this interface to get notified when your directive's content has been fully
- * initialized.
- *
- * ### Example ([live demo](http://plnkr.co/edit/plamXUpsLQbIXpViZhUO?p=preview))
- *
- * ```typescript
- * @Component({selector: 'child-cmp'})
- * @View({template: `{{where}} child`})
- * class ChildComponent {
- * @Property() where: string;
- * }
- *
- * @Component({selector: 'parent-cmp'})
- * @View({template: `<ng-content></ng-content>`})
- * class ParentComponent implements AfterContentInit {
- * @ContentChild(ChildComponent) contentChild: ChildComponent;
- *
- * constructor() {
- * // contentChild is not initialized yet
- * console.log(this.getMessage(this.contentChild));
- * }
- *
- * afterContentInit() {
- * // contentChild is updated after the content has been checked
- * console.log('AfterContentInit: ' + this.getMessage(this.contentChild));
- * }
- *
- * private getMessage(cmp: ChildComponent): string {
- * return cmp ? cmp.where + ' child' : 'no child';
- * }
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `
- * <parent-cmp>
- * <child-cmp where="content"></child-cmp>
- * </parent-cmp>`,
- * directives: [ParentComponent, ChildComponent]
- * })
- * export class App {
- * }
- *
- * bootstrap(App).catch(err => console.error(err));
- * ```
- */
- interface AfterContentInit {
-
- afterContentInit(): void;
-
- }
-
-
- /**
- * Implement this interface to get notified after every check of your directive's content.
- *
- * ### Example ([live demo](http://plnkr.co/edit/tGdrytNEKQnecIPkD7NU?p=preview))
- *
- * ```typescript
- * @Component({selector: 'child-cmp'})
- * @View({template: `{{where}} child`})
- * class ChildComponent {
- * @Property() where: string;
- * }
- *
- * @Component({selector: 'parent-cmp'})
- * @View({template: `<ng-content></ng-content>`})
- * class ParentComponent implements AfterContentChecked {
- * @ContentChild(ChildComponent) contentChild: ChildComponent;
- *
- * constructor() {
- * // contentChild is not initialized yet
- * console.log(this.getMessage(this.contentChild));
- * }
- *
- * afterContentChecked() {
- * // contentChild is updated after the content has been checked
- * console.log('AfterContentChecked: ' + this.getMessage(this.contentChild));
- * }
- *
- * private getMessage(cmp: ChildComponent): string {
- * return cmp ? cmp.where + ' child' : 'no child';
- * }
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `
- * <parent-cmp>
- * <button (click)="hasContent = !hasContent">Toggle content child</button>
- * <child-cmp *ng-if="hasContent" where="content"></child-cmp>
- * </parent-cmp>`,
- * directives: [NgIf, ParentComponent, ChildComponent]
- * })
- * export class App {
- * hasContent = true;
- * }
- *
- * bootstrap(App).catch(err => console.error(err));
- * ```
- */
- interface AfterContentChecked {
-
- afterContentChecked(): void;
-
- }
-
-
- /**
- * Implement this interface to get notified when your component's view has been fully initialized.
- *
- * ### Example ([live demo](http://plnkr.co/edit/LhTKVMEM0fkJgyp4CI1W?p=preview))
- *
- * ```typescript
- * @Component({selector: 'child-cmp'})
- * @View({template: `{{where}} child`})
- * class ChildComponent {
- * @Property() where: string;
- * }
- *
- * @Component({selector: 'parent-cmp'})
- * @View({
- * template: `<child-cmp where="view"></child-cmp>`,
- * directives: [ChildComponent]
- * })
- * class ParentComponent implements AfterViewInit {
- * @ViewChild(ChildComponent) viewChild: ChildComponent;
- *
- * constructor() {
- * // viewChild is not initialized yet
- * console.log(this.getMessage(this.viewChild));
- * }
- *
- * afterViewInit() {
- * // viewChild is updated after the view has been initialized
- * console.log('afterViewInit: ' + this.getMessage(this.viewChild));
- * }
- *
- * private getMessage(cmp: ChildComponent): string {
- * return cmp ? cmp.where + ' child' : 'no child';
- * }
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `<parent-cmp></parent-cmp>`,
- * directives: [ParentComponent]
- * })
- * export class App {
- * }
- *
- * bootstrap(App).catch(err => console.error(err));
- * ```
- */
- interface AfterViewInit {
-
- afterViewInit(): void;
-
- }
-
-
- /**
- * Implement this interface to get notified after every check of your component's view.
- *
- * ### Example ([live demo](http://plnkr.co/edit/0qDGHcPQkc25CXhTNzKU?p=preview))
- *
- * ```typescript
- * @Component({selector: 'child-cmp'})
- * @View({template: `{{where}} child`})
- * class ChildComponent {
- * @Property() where: string;
- * }
- *
- * @Component({selector: 'parent-cmp'})
- * @View({
- * template: `
- * <button (click)="showView = !showView">Toggle view child</button>
- * <child-cmp *ng-if="showView" where="view"></child-cmp>`,
- * directives: [NgIf, ChildComponent]
- * })
- * class ParentComponent implements AfterViewChecked {
- * @ViewChild(ChildComponent) viewChild: ChildComponent;
- * showView = true;
- *
- * constructor() {
- * // viewChild is not initialized yet
- * console.log(this.getMessage(this.viewChild));
- * }
- *
- * afterViewChecked() {
- * // viewChild is updated after the view has been checked
- * console.log('AfterViewChecked: ' + this.getMessage(this.viewChild));
- * }
- *
- * private getMessage(cmp: ChildComponent): string {
- * return cmp ? cmp.where + ' child' : 'no child';
- * }
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `<parent-cmp></parent-cmp>`,
- * directives: [ParentComponent]
- * })
- * export class App {
- * }
- *
- * bootstrap(App).catch(err => console.error(err));
- * ```
- */
- interface AfterViewChecked {
-
- afterViewChecked(): void;
-
- }
-
-
- /**
- * Lifecycle hooks are guaranteed to be called in the following order:
- * - `OnChanges` (if any bindings have changed),
- * - `OnInit` (after the first check only),
- * - `DoCheck`,
- * - `AfterContentInit`,
- * - `AfterContentChecked`,
- * - `AfterViewInit`,
- * - `AfterViewChecked`,
- * - `OnDestroy` (at the very end before destruction)
- * Implement this interface to get notified when any data-bound property of your directive changes.
- *
- * `onChanges` is called right after the data-bound properties have been checked and before view
- * and content children are checked if at least one of them has changed.
- *
- * The `changes` parameter contains an entry for each of the changed data-bound property. The key is
- * the property name and the value is an instance of {@link SimpleChange}.
- *
- * ### Example ([live example](http://plnkr.co/edit/AHrB6opLqHDBPkt4KpdT?p=preview)):
- *
- * ```typescript
- * @Component({selector: 'my-cmp'})
- * @View({template: `<p>myProp = {{myProp}}</p>`})
- * class MyComponent implements OnChanges {
- * @Property() myProp: any;
- *
- * onChanges(changes: {[propName: string]: SimpleChange}) {
- * console.log('onChanges - myProp = ' + changes['myProp'].currentValue);
- * }
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `
- * <button (click)="value = value + 1">Change MyComponent</button>
- * <my-cmp [my-prop]="value"></my-cmp>`,
- * directives: [MyComponent]
- * })
- * export class App {
- * value = 0;
- * }
- *
- * bootstrap(App).catch(err => console.error(err));
- * ```
- */
- interface OnChanges {
-
- onChanges(changes: {[key: string]: SimpleChange}): void;
-
- }
-
-
- /**
- * Implement this interface to get notified when your directive is destroyed.
- *
- * `onDestroy` callback is typically used for any custom cleanup that needs to occur when the
- * instance is destroyed
- *
- * ### Example ([live example](http://plnkr.co/edit/1MBypRryXd64v4pV03Yn?p=preview))
- *
- * ```typesript
- * @Component({selector: 'my-cmp'})
- * @View({template: `<p>my-component</p>`})
- * class MyComponent implements OnInit, OnDestroy {
- * onInit() {
- * console.log('onInit');
- * }
- *
- * onDestroy() {
- * console.log('onDestroy');
- * }
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `
- * <button (click)="hasChild = !hasChild">
- * {{hasChild ? 'Destroy' : 'Create'}} MyComponent
- * </button>
- * <my-cmp *ng-if="hasChild"></my-cmp>`,
- * directives: [MyComponent, NgIf]
- * })
- * export class App {
- * hasChild = true;
- * }
- *
- * bootstrap(App).catch(err => console.error(err));
- * * ```
- */
- interface OnDestroy {
-
- onDestroy(): void;
-
- }
-
-
- /**
- * Implement this interface to execute custom initialization logic after your directive's
- * data-bound properties have been initialized.
- *
- * `onInit` is called right after the directive's data-bound properties have been checked for the
- * first time, and before any of its children have been checked. It is invoked only once when the
- * directive is instantiated.
- *
- * ### Example ([live example](http://plnkr.co/edit/1MBypRryXd64v4pV03Yn?p=preview))
- *
- * ```typescript
- * @Component({selector: 'my-cmp'})
- * @View({template: `<p>my-component</p>`})
- * class MyComponent implements OnInit, OnDestroy {
- * onInit() {
- * console.log('onInit');
- * }
- *
- * onDestroy() {
- * console.log('onDestroy');
- * }
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `
- * <button (click)="hasChild = !hasChild">
- * {{hasChild ? 'Destroy' : 'Create'}} MyComponent
- * </button>
- * <my-cmp *ng-if="hasChild"></my-cmp>`,
- * directives: [MyComponent, NgIf]
- * })
- * export class App {
- * hasChild = true;
- * }
- *
- * bootstrap(App).catch(err => console.error(err));
- * ```
- */
- interface OnInit {
-
- onInit(): void;
-
- }
-
-
- /**
- * Implement this interface to override the default change detection algorithm for your directive.
- *
- * `doCheck` gets called to check the changes in the directives instead of the default algorithm.
- *
- * The default change detection algorithm looks for differences by comparing bound-property values
- * by reference across change detection runs. When `DoCheck` is implemented, the default algorithm
- * is disabled and `doCheck` is responsible for checking for changes.
- *
- * Implementing this interface allows improving performance by using insights about the component,
- * its implementation and data types of its properties.
- *
- * Note that a directive should not implement both `DoCheck` and {@link OnChanges} at the same time.
- * `onChanges` would not be called when a directive implements `DoCheck`. Reaction to the changes
- * have to be handled from within the `doCheck` callback.
- *
- * Use {@link KeyValueDiffers} and {@link IterableDiffers} to add your custom check mechanisms.
- *
- * ### Example ([live demo](http://plnkr.co/edit/QpnIlF0CR2i5bcYbHEUJ?p=preview))
- *
- * In the following example `doCheck` uses an {@link IterableDiffers} to detect the updates to the
- * array `list`:
- *
- * ```typescript
- * @Component({selector: 'custom-check'})
- * @View({
- * template: `
- * <p>Changes:</p>
- * <ul>
- * <li *ng-for="#line of logs">{{line}}</li>
- * </ul>`,
- * directives: [NgFor]
- * })
- * class CustomCheckComponent implements DoCheck {
- * @Property() list: any[];
- * differ: any;
- * logs = [];
- *
- * constructor(differs: IterableDiffers) {
- * this.differ = differs.find([]).create(null);
- * }
- *
- * doCheck() {
- * var changes = this.differ.diff(this.list);
- *
- * if (changes) {
- * changes.forEachAddedItem(r => this.logs.push('added ' + r.item));
- * changes.forEachRemovedItem(r => this.logs.push('removed ' + r.item))
- * }
- * }
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `
- * <button (click)="list.push(list.length)">Push</button>
- * <button (click)="list.pop()">Pop</button>
- * <custom-check [list]="list"></custom-check>`,
- * directives: [CustomCheckComponent]
- * })
- * export class App {
- * list = [];
- * }
- * ```
- */
- interface DoCheck {
-
- doCheck(): void;
-
- }
-
-
- /**
- * Declares an injectable parameter to be a live list of directives or variable
- * bindings from the content children of a directive.
- *
- * ### Example ([live demo](http://plnkr.co/edit/lY9m8HLy7z06vDoUaSN2?p=preview))
- *
- * Assume that `<tabs>` component would like to get a list its children `<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>
- * ```
- *
- * The preferred solution is to query for `Pane` directives using this decorator.
- *
- * ```javascript
- * @Component({
- * selector: 'pane',
- * inputs: ['title']
- * })
- * @View(...)
- * class Pane {
- * title:string;
- * }
- *
- * @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;
- * }
- * }
- * ```
- *
- * A query can look for variable bindings by passing in a string with desired binding symbol.
- *
- * ### Example ([live demo](http://plnkr.co/edit/sT2j25cH1dURAyBRCKx1?p=preview))
- * ```html
- * <seeker>
- * <div #findme>...</div>
- * </seeker>
- *
- * @Component({
- * selector: 'foo'
- * })
- * @View(...)
- * class seeker {
- * constructor(@Query('findme') elList: QueryList<ElementRef>) {...}
- * }
- * ```
- *
- * In this case the object that is injected depend on the type of the variable
- * binding. It can be an ElementRef, a directive or a component.
- *
- * Passing in a comma separated list of variable bindings will query for all of them.
- *
- * ```html
- * <seeker>
- * <div #find-me>...</div>
- * <div #find-me-too>...</div>
- * </seeker>
- *
- * @Component({
- * selector: 'foo'
- * })
- * @View(...)
- * class Seeker {
- * constructor(@Query('findMe, findMeToo') elList: QueryList<ElementRef>) {...}
- * }
- * ```
- *
- * Configure whether query looks for direct children or all descendants
- * of the querying element, by using the `descendants` parameter.
- * It is set to `false` by default.
- *
- * ### Example ([live demo](http://plnkr.co/edit/wtGeB977bv7qvA5FTYl9?p=preview))
- * ```html
- * <container #first>
- * <item>a</item>
- * <item>b</item>
- * <container #second>
- * <item>c</item>
- * </container>
- * </container>
- * ```
- *
- * When querying for items, the first container will see only `a` and `b` by default,
- * but with `Query(TextDirective, {descendants: true})` it will see `c` too.
- *
- * The queried directives are kept in a depth-first pre-order with respect to their
- * positions in the DOM.
- *
- * Query does not look deep into any subcomponent views.
- *
- * Query is updated as part of the change-detection cycle. Since change detection
- * happens after construction of a directive, QueryList will always be empty when observed in the
- * constructor.
- *
- * The injected object is an unmodifiable live list.
- * See {@link QueryList} for more details.
- */
- class QueryMetadata extends DependencyMetadata {
-
- constructor(_selector: Type | string, {descendants, first}?: {descendants?: boolean, first?: boolean});
-
- /**
- * whether we want to query only direct children (false) or all
- * children (true).
- */
- descendants: boolean;
-
- first: boolean;
-
- /**
- * always `false` to differentiate it with {@link ViewQueryMetadata}.
- */
- isViewQuery: boolean;
-
- /**
- * what this is querying for.
- */
- selector: any;
-
- /**
- * whether this is querying for a variable binding or a directive.
- */
- isVarBindingQuery: boolean;
-
- /**
- * returns a list of variable bindings this is querying for.
- * Only applicable if this is a variable bindings query.
- */
- varBindings: string[];
-
- toString(): string;
-
- }
-
-
- /**
- * Configures a content query.
- *
- * Content queries are set before the `afterContentInit` callback is called.
- *
- * ### Example
- *
- * ```
- * @Directive({
- * selector: 'someDir'
- * })
- * class SomeDir {
- * @ContentChildren(ChildDirective) contentChildren: QueryList<ChildDirective>;
- *
- * afterContentInit() {
- * // contentChildren is set
- * }
- * }
- * ```
- */
- class ContentChildrenMetadata extends QueryMetadata {
-
- constructor(_selector: Type | string, {descendants}?: {descendants?: boolean});
-
- }
-
-
- /**
- * Configures a content query.
- *
- * Content queries are set before the `afterContentInit` callback is called.
- *
- * ### Example
- *
- * ```
- * @Directive({
- * selector: 'someDir'
- * })
- * class SomeDir {
- * @ContentChild(ChildDirective) contentChild;
- *
- * afterContentInit() {
- * // contentChild is set
- * }
- * }
- * ```
- */
- class ContentChildMetadata extends QueryMetadata {
-
- constructor(_selector: Type | string);
-
- }
-
-
- /**
- * Configures a view query.
- *
- * View queries are set before the `afterViewInit` callback is called.
- *
- * ### Example
- *
- * ```
- * @Component({
- * selector: 'someDir'
- * })
- * @View({templateUrl: 'someTemplate', directives: [ItemDirective]})
- * class SomeDir {
- * @ViewChildren(ItemDirective) viewChildren: QueryList<ItemDirective>;
- *
- * afterViewInit() {
- * // viewChildren is set
- * }
- * }
- * ```
- */
- class ViewChildrenMetadata extends ViewQueryMetadata {
-
- constructor(_selector: Type | string);
-
- }
-
-
- /**
- * Similar to {@link QueryMetadata}, but querying the component view, instead of
- * the content children.
- *
- * ### Example ([live demo](http://plnkr.co/edit/eNsFHDf7YjyM6IzKxM1j?p=preview))
- *
- * ```javascript
- * @Component({...})
- * @View({
- * template: `
- * <item> a </item>
- * <item> b </item>
- * <item> c </item>
- * `
- * })
- * class MyComponent {
- * shown: boolean;
- *
- * constructor(private @Query(Item) items:QueryList<Item>) {
- * items.onChange(() => console.log(items.length));
- * }
- * }
- * ```
- *
- * Supports the same querying parameters as {@link QueryMetadata}, except
- * `descendants`. This always queries the whole view.
- *
- * As `shown` is flipped between true and false, items will contain zero of one
- * items.
- *
- * Specifies that a {@link QueryList} should be injected.
- *
- * The injected object is an iterable and observable live list.
- * See {@link QueryList} for more details.
- */
- class ViewQueryMetadata extends QueryMetadata {
-
- constructor(_selector: Type | string, {descendants, first}?: {descendants?: boolean, first?: boolean});
-
- /**
- * always `true` to differentiate it with {@link QueryMetadata}.
- */
- isViewQuery: any;
-
- toString(): string;
-
- }
-
-
- /**
- * Configures a view query.
- *
- * View queries are set before the `afterViewInit` callback is called.
- *
- * ### Example
- *
- * ```
- * @Component({
- * selector: 'someDir'
- * })
- * @View({templateUrl: 'someTemplate', directives: [ItemDirective]})
- * class SomeDir {
- * @ViewChild(ItemDirective) viewChild:ItemDirective;
- *
- * afterViewInit() {
- * // viewChild is set
- * }
- * }
- * ```
- */
- class ViewChildMetadata extends ViewQueryMetadata {
-
- constructor(_selector: Type | string);
-
- }
-
-
- /**
- * 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
- * }
- * }
- * ```
- */
- class AttributeMetadata extends DependencyMetadata {
-
- constructor(attributeName: string);
-
- attributeName: string;
-
- token: any;
-
- toString(): string;
-
- }
-
-
- /**
- * 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 all the injectable objects configured with `bindings` and `viewBindings`.
- *
- * All template expressions and statements are then evaluated against the component instance.
- *
- * For details on the `@View` annotation, see {@link ViewMetadata}.
- *
- * ## Lifecycle hooks
- *
- * When the component class implements some {@link angular2/lifecycle_hooks} the callbacks are
- * called by the change detection at defined points in time during the life of the component.
- *
- * ## Example
- *
- * ```
- * @Component({
- * selector: 'greet'
- * })
- * @View({
- * template: 'Hello {{name}}!'
- * })
- * class Greet {
- * name: string;
- *
- * constructor() {
- * this.name = 'World';
- * }
- * }
- * ```
- */
- class ComponentMetadata extends DirectiveMetadata {
-
- constructor({selector, inputs, outputs, properties, events, host, exportAs, moduleId, bindings,
- viewBindings, changeDetection, queries}?: {
- selector?: string,
- inputs?: string[],
- outputs?: string[],
- properties?: string[],
- events?: string[],
- host?: {[key: string]: string},
- bindings?: any[],
- exportAs?: string,
- moduleId?: string,
- viewBindings?: any[],
- queries?: {[key: string]: any},
- changeDetection?: ChangeDetectionStrategy,
- });
-
- /**
- * 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: ChangeDetectionStrategy;
-
- /**
- * 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',
- * viewBindings: [
- * Greeter
- * ]
- * })
- * @View({
- * template: `<needs-greeter></needs-greeter>`,
- * directives: [NeedsGreeter]
- * })
- * class HelloWorld {
- * }
- *
- * ```
- */
- viewBindings: any[];
-
- }
-
-
- /**
- * Directives allow you to attach behavior to elements in the DOM.
- *
- * {@link DirectiveMetadata}s with an embedded view are called {@link ComponentMetadata}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 {@link Injector} cannot resolve dependencies. It either throws an error or, if
- * the dependency was
- * specified as `@Optional`, returns `null`.
- * - The platform injector resolves browser singleton resources, such as: cookies, title,
- * location, and others.
- * - *Component Injectors*: Each component instance has its own {@link Injector}, and they follow
- * the same parent-child hierarchy
- * 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
- * {@link ViewMetadata}:
- *
- * 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
- * - `@Host() directive:DirectiveType`: any directive that matches the type between the current
- * element and the
- * Shadow DOM root.
- * - `@Query(DirectiveType) query:QueryList<DirectiveType>`: A live collection of direct child
- * directives.
- * - `@QueryDescendants(DirectiveType) query:QueryList<DirectiveType>`: A live collection of any
- * child directives.
- *
- * To inject element-specific special objects, declare the constructor parameter as:
- * - `element: ElementRef` to obtain a reference to logical element in the view.
- * - `viewContainer: ViewContainerRef` to control child template instantiation, for
- * {@link DirectiveMetadata} 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]',
- * inputs: [
- * '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 any ancestor elements
- *
- * Directives can inject other directives declared on any ancestor element (in the current Shadow
- * DOM), i.e. on the current element, the
- * parent element, or its parents.
- * ```
- * @Directive({ selector: '[my-directive]' })
- * class MyDirective {
- * constructor(@Host() dependency: Dependency) {
- * expect(dependency.id).toEqual(2);
- * }
- * }
- * ```
- *
- * `@Host` checks the current element, 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 {@link QueryList}, which updates its contents as children are added,
- * removed, or moved by a directive that uses a {@link ViewContainerRef} 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 {@link QueryList} which contains `Dependency` 4 and
- * 6. Here, `Dependency` 5 would not be included, because it is not a direct child.
- *
- * ### Injecting a live collection of descendant directives
- *
- * By passing the descendant flag to `@Query` above, we can include the children of the child
- * elements.
- *
- * ```
- * @Directive({ selector: '[my-directive]' })
- * class MyDirective {
- * constructor(@Query(Dependency, {descendants: true}) 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]',
- * inputs: [
- * 'text: tooltip'
- * ],
- * host: {
- * '(mouseenter)': 'onMouseEnter()',
- * '(mouseleave)': '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 {@link ViewContainerRef} to instantiate, insert, move, and destroy views at
- * runtime.
- * The {@link ViewContainerRef} is created as a result of `<template>` element, and represents a
- * location in the current view
- * where these actions are performed.
- *
- * Views are always created as children of the current {@link ViewMetadata}, 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.
- *
- * ## Lifecycle hooks
- *
- * When the directive class implements some {@link angular2/lifecycle_hooks} the callbacks are
- * called by the change detection at defined points in time during the life of the directive.
- *
- * ## 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]',
- * inputs: ['unless']
- * })
- * export class Unless {
- * viewContainer: ViewContainerRef;
- * templateRef: TemplateRef;
- * prevCondition: boolean;
- *
- * constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef) {
- * this.viewContainer = viewContainer;
- * this.templateRef = templateRef;
- * 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.templateRef);
- * }
- * }
- * }
- * ```
- *
- * 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.
- */
- class DirectiveMetadata extends InjectableMetadata {
-
- constructor({selector, inputs, outputs, properties, events, host, bindings, exportAs, moduleId,
- queries}?: {
- selector?: string,
- inputs?: string[],
- outputs?: string[],
- properties?: string[],
- events?: string[],
- host?: {[key: string]: string},
- bindings?: any[],
- exportAs?: string,
- moduleId?: string,
- queries?: {[key: string]: any}
- });
-
- /**
- * 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;
-
- /**
- * Enumerates the set of data-bound input properties for a directive
- *
- * Angular automatically updates input properties during change detection.
- *
- * The `inputs` 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.
- *
- * When `bindingProperty` is not provided, it is assumed to be equal to `directiveProperty`.
- *
- * ### Example ([live demo](http://plnkr.co/edit/ivhfXY?p=preview))
- *
- * The following example creates a component with two data-bound properties.
- *
- * ```typescript
- * @Component({
- * selector: 'bank-account',
- * inputs: ['bankName', 'id: account-id']
- * })
- * @View({
- * template: `
- * Bank Name: {{bankName}}
- * Account Id: {{id}}
- * `
- * })
- * class BankAccount {
- * bankName: string;
- * id: string;
- *
- * // this property is not bound, and won't be automatically updated by Angular
- * normalizedBankName: string;
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `
- * <bank-account bank-name="RBC" account-id="4747"></bank-account>
- * `,
- * directives: [BankAccount]
- * })
- * class App {}
- *
- * bootstrap(App);
- * ```
- */
- inputs: string[];
-
- /**
- * @deprecated
- * Same as `inputs`. This is to enable easier migration.
- */
- properties: string[];
-
- /**
- * Enumerates the set of event-bound output properties.
- *
- * When an output property emits an event, an event handler attached to that event
- * the template is invoked.
- *
- * The `outputs` property defines a set of `directiveProperty` to `bindingProperty`
- * configuration:
- *
- * - `directiveProperty` specifies the component property that emits events.
- * - `bindingProperty` specifies the DOM property the event handler is attached to.
- *
- * ### Example ([live demo](http://plnkr.co/edit/d5CNq7?p=preview))
- *
- * ```typescript
- * @Directive({
- * selector: 'interval-dir',
- * outputs: ['everySecond', 'five5Secs: everyFiveSeconds']
- * })
- * class IntervalDir {
- * everySecond = new EventEmitter();
- * five5Secs = new EventEmitter();
- *
- * constructor() {
- * setInterval(() => this.everySecond.next("event"), 1000);
- * setInterval(() => this.five5Secs.next("event"), 5000);
- * }
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `
- * <interval-dir (every-second)="everySecond()" (every-five-seconds)="everyFiveSeconds()">
- * </interval-dir>
- * `,
- * directives: [IntervalDir]
- * })
- * class App {
- * everySecond() { console.log('second'); }
- * everyFiveSeconds() { console.log('five seconds'); }
- * }
- * bootstrap(App);
- * ```
- */
- outputs: string[];
-
- /**
- * @deprecated
- * Same as `outputs`. This is to enable easier migration.
- */
- events: string[];
-
- /**
- * Specify the events, actions, properties and attributes related to the host element.
- *
- * ## Host Listeners
- *
- * Specifies which DOM events a directive listens to via 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 evaluation 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 $event local variable.
- *
- * ### Example ([live demo](http://plnkr.co/edit/DlA5KU?p=preview))
- *
- * The following example declares a directive that attaches a click listener to the button and
- * counts clicks.
- *
- * ```typescript
- * @Directive({
- * selector: 'button[counting]',
- * host: {
- * '(click)': 'onClick($event.target)'
- * }
- * })
- * class CountClicks {
- * numberOfClicks = 0;
- *
- * onClick(btn) {
- * console.log("button", btn, "number of clicks:", this.numberOfClicks++);
- * }
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `<button counting>Increment</button>`,
- * directives: [CountClicks]
- * })
- * class App {}
- *
- * bootstrap(App);
- * ```
- *
- * ## Host Property Bindings
- *
- * Specifies which DOM properties a directive updates.
- *
- * Angular automatically checks host property bindings during change detection.
- * If a binding changes, it will update the host element of the directive.
- *
- * ### Example ([live demo](http://plnkr.co/edit/gNg0ED?p=preview))
- *
- * The following example creates a directive that sets the `valid` and `invalid` classes
- * on the DOM element that has ng-model directive on it.
- *
- * ```typescript
- * @Directive({
- * selector: '[ng-model]',
- * host: {
- * '[class.valid]': 'valid',
- * '[class.invalid]': 'invalid'
- * }
- * })
- * class NgModelStatus {
- * constructor(public control:NgModel) {}
- * get valid { return this.control.valid; }
- * get invalid { return this.control.invalid; }
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `<input [(ng-model)]="prop">`,
- * directives: [FORM_DIRECTIVES, NgModelStatus]
- * })
- * class App {
- * prop;
- * }
- *
- * bootstrap(App);
- * ```
- *
- * ## Attributes
- *
- * Specifies static attributes that should be propagated to a host element.
- *
- * ### Example
- *
- * 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.
- *
- * ```typescript
- * @Directive({
- * selector: '[my-button]',
- * host: {
- * 'role': 'button'
- * }
- * })
- * class MyButton {
- * }
- * ```
- */
- host: {[key: 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',
- * bindings: [
- * Greeter
- * ]
- * })
- * class HelloWorld {
- * greeter:Greeter;
- *
- * constructor(greeter:Greeter) {
- * this.greeter = greeter;
- * }
- * }
- * ```
- */
- bindings: any[];
-
- /**
- * Defines the name that can be used in the template to assign this directive to a variable.
- *
- * ## Simple Example
- *
- * ```
- * @Directive({
- * selector: 'child-dir',
- * exportAs: 'child'
- * })
- * class ChildDir {
- * }
- *
- * @Component({
- * selector: 'main',
- * })
- * @View({
- * template: `<child-dir #c="child"></child-dir>`,
- * directives: [ChildDir]
- * })
- * class MainComponent {
- * }
- *
- * ```
- */
- exportAs: string;
-
- /**
- * The module id of the module that contains the directive.
- * Needed to be able to resolve relative urls for templates and styles.
- * In Dart, this can be determined automatically and does not need to be set.
- * In CommonJS, this can always be set to `module.id`.
- *
- * ## Simple Example
- *
- * ```
- * @Directive({
- * selector: 'someDir',
- * moduleId: module.id
- * })
- * class SomeDir {
- * }
- *
- * ```
- */
- moduleId: string;
-
- /**
- * Configures the queries that will be injected into the directive.
- *
- * Content queries are set before the `afterContentInit` callback is called.
- * View queries are set before the `afterViewInit` callback is called.
- *
- * ### Example
- *
- * ```
- * @Component({
- * selector: 'someDir',
- * queries: {
- * contentChildren: new ContentChildren(ChildDirective),
- * viewChildren: new ViewChildren(ChildDirective)
- * }
- * })
- * @View({
- * template: '<child-directive></child-directive>',
- * directives: [ChildDirective]
- * })
- * class SomeDir {
- * contentChildren: QueryList<ChildDirective>,
- * viewChildren: QueryList<ChildDirective>
- *
- * afterContentInit() {
- * // contentChildren is set
- * }
- *
- * afterViewInit() {
- * // viewChildren is set
- * }
- * }
- * ```
- */
- queries: {[key: string]: any};
-
- }
-
-
- /**
- * Declare reusable pipe function.
- *
- * ## Example
- *
- * ```
- * @Pipe({
- * name: 'lowercase'
- * })
- * class Lowercase {
- * transform(v, args) { return v.toLowerCase(); }
- * }
- * ```
- */
- class PipeMetadata extends InjectableMetadata {
-
- constructor({name, pure}: {name: string, pure: boolean});
-
- name: string;
-
- pure: boolean;
-
- }
-
-
- /**
- * Declares a data-bound input property.
- *
- * Angular automatically updates data-bound properties during change detection.
- *
- * `InputMetadata` takes an optional parameter that specifies the name
- * used when instantiating a component in the template. When not provided,
- * the name of the decorated property is used.
- *
- * ### Example
- *
- * The following example creates a component with two input properties.
- *
- * ```typescript
- * @Component({selector: 'bank-account'})
- * @View({
- * template: `
- * Bank Name: {{bankName}}
- * Account Id: {{id}}
- * `
- * })
- * class BankAccount {
- * @Input() bankName: string;
- * @Input('account-id') id: string;
- *
- * // this property is not bound, and won't be automatically updated by Angular
- * normalizedBankName: string;
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `
- * <bank-account bank-name="RBC" account-id="4747"></bank-account>
- * `,
- * directives: [BankAccount]
- * })
- * class App {}
- *
- * bootstrap(App);
- * ```
- */
- class InputMetadata {
-
- constructor(bindingPropertyName?: string);
-
- /**
- * Name used when instantiating a component in the temlate.
- */
- bindingPropertyName: string;
-
- }
-
-
- /**
- * Declares an event-bound output property.
- *
- * When an output property emits an event, an event handler attached to that event
- * the template is invoked.
- *
- * `OutputMetadata` takes an optional parameter that specifies the name
- * used when instantiating a component in the template. When not provided,
- * the name of the decorated property is used.
- *
- * ### Example
- *
- * ```typescript
- * @Directive({
- * selector: 'interval-dir',
- * })
- * class IntervalDir {
- * @Output() everySecond = new EventEmitter();
- * @Output('everyFiveSeconds') five5Secs = new EventEmitter();
- *
- * constructor() {
- * setInterval(() => this.everySecond.next("event"), 1000);
- * setInterval(() => this.five5Secs.next("event"), 5000);
- * }
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `
- * <interval-dir (every-second)="everySecond()" (every-five-seconds)="everyFiveSeconds()">
- * </interval-dir>
- * `,
- * directives: [IntervalDir]
- * })
- * class App {
- * everySecond() { console.log('second'); }
- * everyFiveSeconds() { console.log('five seconds'); }
- * }
- * bootstrap(App);
- * ```
- */
- class OutputMetadata {
-
- constructor(bindingPropertyName?: string);
-
- bindingPropertyName: string;
-
- }
-
-
- /**
- * Declares a host property binding.
- *
- * Angular automatically checks host property bindings during change detection.
- * If a binding changes, it will update the host element of the directive.
- *
- * `HostBindingMetadata` takes an optional parameter that specifies the property
- * name of the host element that will be updated. When not provided,
- * the class property name is used.
- *
- * ### Example
- *
- * The following example creates a directive that sets the `valid` and `invalid` classes
- * on the DOM element that has ng-model directive on it.
- *
- * ```typescript
- * @Directive({selector: '[ng-model]'})
- * class NgModelStatus {
- * constructor(public control:NgModel) {}
- * @HostBinding('[class.valid]') get valid { return this.control.valid; }
- * @HostBinding('[class.invalid]') get invalid { return this.control.invalid; }
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `<input [(ng-model)]="prop">`,
- * directives: [FORM_DIRECTIVES, NgModelStatus]
- * })
- * class App {
- * prop;
- * }
- *
- * bootstrap(App);
- * ```
- */
- class HostBindingMetadata {
-
- constructor(hostPropertyName?: string);
-
- hostPropertyName: string;
-
- }
-
-
- /**
- * Declares a host listener.
- *
- * Angular will invoke the decorated method when the host element emits the specified event.
- *
- * If the decorated method returns `false`, then `preventDefault` is applied on the DOM
- * event.
- *
- * ### Example
- *
- * The following example declares a directive that attaches a click listener to the button and
- * counts clicks.
- *
- * ```typescript
- * @Directive({selector: 'button[counting]'})
- * class CountClicks {
- * numberOfClicks = 0;
- *
- * @HostListener('click', ['$event.target'])
- * onClick(btn) {
- * console.log("button", btn, "number of clicks:", this.numberOfClicks++);
- * }
- * }
- *
- * @Component({selector: 'app'})
- * @View({
- * template: `<button counting>Increment</button>`,
- * directives: [CountClicks]
- * })
- * class App {}
- *
- * bootstrap(App);
- * ```
- */
- class HostListenerMetadata {
-
- constructor(eventName: string, args?: string[]);
-
- eventName: string;
-
- args: string[];
-
- }
-
-
- /**
- * Metadata properties available for configuring Views.
- *
- * 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 {@link ComponentMetadata}.
- *
- * ## Example
- *
- * ```
- * @Component({
- * selector: 'greet'
- * })
- * @View({
- * template: 'Hello {{name}}!',
- * directives: [GreetUser, Bold]
- * })
- * class Greet {
- * name: string;
- *
- * constructor() {
- * this.name = 'World';
- * }
- * }
- * ```
- */
- class ViewMetadata {
-
- constructor({templateUrl, template, directives, pipes, encapsulation, styles, styleUrls}?: {
- templateUrl?: string,
- template?: string,
- directives?: Array<Type | any[]>,
- pipes?: Array<Type | any[]>,
- encapsulation?: ViewEncapsulation,
- styles?: string[],
- styleUrls?: string[],
- });
-
- /**
- * Specifies a template URL for an Angular component.
- *
- * NOTE: Only one of `templateUrl` or `template` can be defined per View.
- *
- * <!-- TODO: what's the url relative to? -->
- */
- templateUrl: string;
-
- /**
- * Specifies an inline template for an Angular component.
- *
- * NOTE: Only one of `templateUrl` or `template` can be defined per View.
- */
- template: string;
-
- /**
- * Specifies stylesheet URLs for an Angular component.
- *
- * <!-- TODO: what's the url relative to? -->
- */
- styleUrls: string[];
-
- /**
- * Specifies an inline stylesheet for an Angular component.
- */
- styles: string[];
-
- /**
- * 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: [NgFor]
- * template: '
- * <ul>
- * <li *ng-for="#item of items">{{item}}</li>
- * </ul>'
- * })
- * class MyComponent {
- * }
- * ```
- */
- directives: Array<Type | any[]>;
-
- pipes: Array<Type | any[]>;
-
- /**
- * Specify how the template and the styles should be encapsulated.
- * The default is {@link ViewEncapsulation#Emulated `ViewEncapsulation.Emulated`} if the view
- * has styles,
- * otherwise {@link ViewEncapsulation#None `ViewEncapsulation.None`}.
- */
- encapsulation: ViewEncapsulation;
-
- }
-
-
- /**
- * Defines template and style encapsulation options available for Component's {@link View}.
- *
- * See {@link ViewMetadata#encapsulation}.
- */
- enum ViewEncapsulation {
-
- /**
- * Emulate `Native` scoping of styles by adding an attribute containing surrogate id to the Host
- * Element and pre-processing the style rules provided via
- * {@link ViewMetadata#styles} or {@link ViewMetadata#stylesUrls}, and adding the new Host Element
- * attribute to all selectors.
- *
- * This is the default option.
- */
- Emulated,
-
- /**
- * Use the native encapsulation mechanism of the renderer.
- *
- * For the DOM this means using [Shadow DOM](https://w3c.github.io/webcomponents/spec/shadow/) and
- * creating a ShadowRoot for Component's Host Element.
- */
- Native,
-
- /**
- * Don't provide any template or style encapsulation.
- */
- None
- }
-
-
-
- /**
- * Interface for the {@link DirectiveMetadata} decorator function.
- *
- * See {@link DirectiveFactory}.
- */
- interface DirectiveDecorator extends TypeDecorator {
-
- }
-
-
- /**
- * Interface for the {@link ComponentMetadata} decorator function.
- *
- * See {@link ComponentFactory}.
- */
- interface ComponentDecorator extends TypeDecorator {
-
- /**
- * Chain {@link ViewMetadata} annotation.
- */
- View(obj: {
- templateUrl?: string,
- template?: string,
- directives?: Array<Type | any[]>,
- pipes?: Array<Type | any[]>,
- renderer?: string,
- styles?: string[],
- styleUrls?: string[],
- }): ViewDecorator;
-
- }
-
-
- /**
- * Interface for the {@link ViewMetadata} decorator function.
- *
- * See {@link ViewFactory}.
- */
- interface ViewDecorator extends TypeDecorator {
-
- /**
- * Chain {@link ViewMetadata} annotation.
- */
- View(obj: {
- templateUrl?: string,
- template?: string,
- directives?: Array<Type | any[]>,
- pipes?: Array<Type | any[]>,
- renderer?: string,
- styles?: string[],
- styleUrls?: string[],
- }): ViewDecorator;
-
- }
-
-
- /**
- * {@link DirectiveMetadata} factory for creating annotations, decorators or DSL.
- *
- * ## Example as TypeScript Decorator
- *
- * ```
- * import {Directive} from "angular2/angular2";
- *
- * @Directive({...})
- * class MyDirective {
- * constructor() {
- * ...
- * }
- * }
- * ```
- *
- * ## Example as ES5 DSL
- *
- * ```
- * var MyDirective = ng
- * .Directive({...})
- * .Class({
- * constructor: function() {
- * ...
- * }
- * })
- * ```
- *
- * ## Example as ES5 annotation
- *
- * ```
- * var MyDirective = function() {
- * ...
- * };
- *
- * MyDirective.annotations = [
- * new ng.Directive({...})
- * ]
- * ```
- */
- interface DirectiveFactory {
-
- new(obj: {
- selector?: string,
- inputs?: string[],
- outputs?: string[],
- properties?: string[],
- events?: string[],
- host?: {[key: string]: string},
- bindings?: any[],
- exportAs?: string,
- moduleId?: string,
- queries?: {[key: string]: any}
- }): DirectiveMetadata;
-
- (obj: {
- selector?: string,
- inputs?: string[],
- outputs?: string[],
- properties?: string[],
- events?: string[],
- host?: {[key: string]: string},
- bindings?: any[],
- exportAs?: string,
- moduleId?: string,
- queries?: {[key: string]: any}
- }): DirectiveDecorator;
-
- }
-
-
- /**
- * {@link ComponentMetadata} factory for creating annotations, decorators or DSL.
- *
- * ## Example as TypeScript Decorator
- *
- * ```
- * import {Component, View} from "angular2/angular2";
- *
- * @Component({...})
- * @View({...})
- * class MyComponent {
- * constructor() {
- * ...
- * }
- * }
- * ```
- *
- * ## Example as ES5 DSL
- *
- * ```
- * var MyComponent = ng
- * .Component({...})
- * .View({...})
- * .Class({
- * constructor: function() {
- * ...
- * }
- * })
- * ```
- *
- * ## Example as ES5 annotation
- *
- * ```
- * var MyComponent = function() {
- * ...
- * };
- *
- * MyComponent.annotations = [
- * new ng.Component({...}),
- * new ng.View({...})
- * ]
- * ```
- */
- interface ComponentFactory {
-
- new(obj: {
- selector?: string,
- inputs?: string[],
- outputs?: string[],
- properties?: string[],
- events?: string[],
- host?: {[key: string]: string},
- bindings?: any[],
- exportAs?: string,
- moduleId?: string,
- queries?: {[key: string]: any},
- viewBindings?: any[],
- changeDetection?: ChangeDetectionStrategy,
- }): ComponentMetadata;
-
- (obj: {
- selector?: string,
- inputs?: string[],
- outputs?: string[],
- properties?: string[],
- events?: string[],
- host?: {[key: string]: string},
- bindings?: any[],
- exportAs?: string,
- moduleId?: string,
- queries?: {[key: string]: any},
- viewBindings?: any[],
- changeDetection?: ChangeDetectionStrategy,
- }): ComponentDecorator;
-
- }
-
-
- /**
- * {@link ViewMetadata} factory for creating annotations, decorators or DSL.
- *
- * ## Example as TypeScript Decorator
- *
- * ```
- * import {Component, View} from "angular2/angular2";
- *
- * @Component({...})
- * @View({...})
- * class MyComponent {
- * constructor() {
- * ...
- * }
- * }
- * ```
- *
- * ## Example as ES5 DSL
- *
- * ```
- * var MyComponent = ng
- * .Component({...})
- * .View({...})
- * .Class({
- * constructor: function() {
- * ...
- * }
- * })
- * ```
- *
- * ## Example as ES5 annotation
- *
- * ```
- * var MyComponent = function() {
- * ...
- * };
- *
- * MyComponent.annotations = [
- * new ng.Component({...}),
- * new ng.View({...})
- * ]
- * ```
- */
- interface ViewFactory {
-
- new(obj: {
- templateUrl?: string,
- template?: string,
- directives?: Array<Type | any[]>,
- pipes?: Array<Type | any[]>,
- encapsulation?: ViewEncapsulation,
- styles?: string[],
- styleUrls?: string[],
- }): ViewMetadata;
-
- (obj: {
- templateUrl?: string,
- template?: string,
- directives?: Array<Type | any[]>,
- pipes?: Array<Type | any[]>,
- encapsulation?: ViewEncapsulation,
- styles?: string[],
- styleUrls?: string[],
- }): ViewDecorator;
-
- }
-
-
- /**
- * {@link AttributeMetadata} factory for creating annotations, decorators or DSL.
- *
- * ## Example as TypeScript Decorator
- *
- * ```
- * import {Attribute, Component, View} from "angular2/angular2";
- *
- * @Component({...})
- * @View({...})
- * class MyComponent {
- * constructor(@Attribute('title') title: string) {
- * ...
- * }
- * }
- * ```
- *
- * ## Example as ES5 DSL
- *
- * ```
- * var MyComponent = ng
- * .Component({...})
- * .View({...})
- * .Class({
- * constructor: [new ng.Attribute('title'), function(title) {
- * ...
- * }]
- * })
- * ```
- *
- * ## Example as ES5 annotation
- *
- * ```
- * var MyComponent = function(title) {
- * ...
- * };
- *
- * MyComponent.annotations = [
- * new ng.Component({...}),
- * new ng.View({...})
- * ]
- * MyComponent.parameters = [
- * [new ng.Attribute('title')]
- * ]
- * ```
- */
- interface AttributeFactory {
-
- new(name: string): AttributeMetadata;
-
- (name: string): TypeDecorator;
-
- }
-
-
- /**
- * {@link QueryMetadata} factory for creating annotations, decorators or DSL.
- *
- * ### Example as TypeScript Decorator
- *
- * ```
- * import {Query, QueryList, Component, View} from "angular2/angular2";
- *
- * @Component({...})
- * @View({...})
- * class MyComponent {
- * constructor(@Query(SomeType) queryList: QueryList<SomeType>) {
- * ...
- * }
- * }
- * ```
- *
- * ### Example as ES5 DSL
- *
- * ```
- * var MyComponent = ng
- * .Component({...})
- * .View({...})
- * .Class({
- * constructor: [new ng.Query(SomeType), function(queryList) {
- * ...
- * }]
- * })
- * ```
- *
- * ### Example as ES5 annotation
- *
- * ```
- * var MyComponent = function(queryList) {
- * ...
- * };
- *
- * MyComponent.annotations = [
- * new ng.Component({...}),
- * new ng.View({...})
- * ]
- * MyComponent.parameters = [
- * [new ng.Query(SomeType)]
- * ]
- * ```
- */
- interface QueryFactory {
-
- new(selector: Type | string, {descendants}?: {descendants?: boolean}): QueryMetadata;
-
- (selector: Type | string, {descendants}?: {descendants?: boolean}): ParameterDecorator;
-
- }
-
-
- interface ContentChildrenFactory {
-
- new(selector: Type | string, {descendants}?: {descendants?: boolean}): ContentChildrenMetadata;
-
- (selector: Type | string, {descendants}?: {descendants?: boolean}): any;
-
- }
-
-
- interface ContentChildFactory {
-
- new(selector: Type | string): ContentChildFactory;
-
- (selector: Type | string): any;
-
- }
-
-
- interface ViewChildrenFactory {
-
- new(selector: Type | string): ViewChildrenMetadata;
-
- (selector: Type | string): any;
-
- }
-
-
- interface ViewChildFactory {
-
- new(selector: Type | string): ViewChildFactory;
-
- (selector: Type | string): any;
-
- }
-
-
- /**
- * {@link PipeMetadata} factory for creating decorators.
- *
- * ## Example as TypeScript Decorator
- *
- * ```
- * import {Pipe} from "angular2/angular2";
- *
- * @Pipe({...})
- * class MyPipe {
- * constructor() {
- * ...
- * }
- *
- * transform(v, args) {}
- * }
- * ```
- */
- interface PipeFactory {
-
- new(obj: {name: string, pure?: boolean}): any;
-
- (obj: {name: string, pure?: boolean}): any;
-
- }
-
-
- /**
- * {@link InputMetadata} factory for creating decorators.
- *
- * See {@link InputMetadata}.
- */
- interface InputFactory {
-
- new(bindingPropertyName?: string): any;
-
- (bindingPropertyName?: string): any;
-
- }
-
-
- /**
- * {@link OutputMetadata} factory for creating decorators.
- *
- * See {@link OutputMetadata}.
- */
- interface OutputFactory {
-
- new(bindingPropertyName?: string): any;
-
- (bindingPropertyName?: string): any;
-
- }
-
-
- /**
- * {@link HostBindingMetadata} factory function.
- */
- interface HostBindingFactory {
-
- new(hostPropertyName?: string): any;
-
- (hostPropertyName?: string): any;
-
- }
-
-
- /**
- * {@link HostListenerMetadata} factory function.
- */
- interface HostListenerFactory {
-
- new(eventName: string, args?: string[]): any;
-
- (eventName: string, args?: string[]): any;
-
- }
-
-
- /**
- * {@link ComponentMetadata} factory function.
- */
- var Component: ComponentFactory;
-
-
-
- /**
- * {@link DirectiveMetadata} factory function.
- */
- var Directive: DirectiveFactory;
-
-
-
- /**
- * {@link ViewMetadata} factory function.
- */
- var View: ViewFactory;
-
-
-
- /**
- * {@link AttributeMetadata} factory function.
- */
- var Attribute: AttributeFactory;
-
-
-
- /**
- * {@link QueryMetadata} factory function.
- */
- var Query: QueryFactory;
-
-
-
- /**
- * {@link ContentChildrenMetadata} factory function.
- */
- var ContentChildren: ContentChildrenFactory;
-
-
-
- /**
- * {@link ContentChildMetadata} factory function.
- */
- var ContentChild: ContentChildFactory;
-
-
-
- /**
- * {@link ViewChildrenMetadata} factory function.
- */
- var ViewChildren: ViewChildrenFactory;
-
-
-
- /**
- * {@link ViewChildMetadata} factory function.
- */
- var ViewChild: ViewChildFactory;
-
-
-
- /**
- * {@link di/ViewQueryMetadata} factory function.
- */
- var ViewQuery: QueryFactory;
-
-
-
- /**
- * {@link PipeMetadata} factory function.
- */
- var Pipe: PipeFactory;
-
-
-
- /**
- * {@link InputMetadata} factory function.
- *
- * See {@link InputMetadata}.
- */
- var Input: InputFactory;
-
-
-
- /**
- * {@link OutputMetadata} factory function.
- *
- * See {@link OutputMetadatas}.
- */
- var Output: OutputFactory;
-
-
-
- /**
- * {@link HostBindingMetadata} factory function.
- */
- var HostBinding: HostBindingFactory;
-
-
-
- /**
- * {@link HostListenerMetadata} factory function.
- */
- var HostListener: HostListenerFactory;
-
-
-
- /**
- * Provides a way for expressing ES6 classes with parameter annotations in ES5.
- *
- * ## Basic Example
- *
- * ```
- * var Greeter = ng.Class({
- * constructor: function(name) {
- * this.name = name;
- * },
- *
- * greet: function() {
- * alert('Hello ' + this.name + '!');
- * }
- * });
- * ```
- *
- * is equivalent to ES6:
- *
- * ```
- * class Greeter {
- * constructor(name) {
- * this.name = name;
- * }
- *
- * greet() {
- * alert('Hello ' + this.name + '!');
- * }
- * }
- * ```
- *
- * or equivalent to ES5:
- *
- * ```
- * var Greeter = function (name) {
- * this.name = name;
- * }
- *
- * Greeter.prototype.greet = function () {
- * alert('Hello ' + this.name + '!');
- * }
- * ```
- *
- * ## Example with parameter annotations
- *
- * ```
- * var MyService = ng.Class({
- * constructor: [String, [new Query(), QueryList], function(name, queryList) {
- * ...
- * }]
- * });
- * ```
- *
- * is equivalent to ES6:
- *
- * ```
- * class MyService {
- * constructor(name: string, @Query() queryList: QueryList) {
- * ...
- * }
- * }
- * ```
- *
- * ## Example with inheritance
- *
- * ```
- * var Shape = ng.Class({
- * constructor: (color) {
- * this.color = color;
- * }
- * });
- *
- * var Square = ng.Class({
- * extends: Shape,
- * constructor: function(color, size) {
- * Shape.call(this, color);
- * this.size = size;
- * }
- * });
- * ```
- */
- function Class(clsDef: ClassDefinition): Type;
-
-
-
- /**
- * Declares the interface to be used with {@link Class}.
- */
- interface ClassDefinition {
-
- /**
- * Optional argument for specifying the superclass.
- */
- extends?: Type;
-
- /**
- * Required constructor function for a class.
- *
- * The function may be optionally wrapped in an `Array`, in which case additional parameter
- * annotations may be specified.
- * The number of arguments and the number of parameter annotations must match.
- *
- * See {@link Class} for example of usage.
- */
- constructor: Function | any[];
-
- }
-
-
- /**
- * An interface implemented by all Angular type decorators, which allows them to be used as ES7
- * decorators as well as
- * Angular DSL syntax.
- *
- * DSL syntax:
- *
- * ```
- * var MyClass = ng
- * .Component({...})
- * .View({...})
- * .Class({...});
- * ```
- *
- * ES7 syntax:
- *
- * ```
- * @ng.Component({...})
- * @ng.View({...})
- * class MyClass {...}
- * ```
- */
- interface TypeDecorator {
-
- /**
- * Invoke as ES7 decorator.
- */
- <T extends Type>(type: T): T;
-
- /**
- * Storage for the accumulated annotations so far used by the DSL syntax.
- *
- * Used by {@link Class} to annotate the generated class.
- */
- annotations: any[];
-
- /**
- * Generate a class from the definition and annotate it with {@link TypeDecorator#annotations}.
- */
- Class(obj: ClassDefinition): Type;
-
- }
-
-
- /**
- * A parameter metadata that specifies a dependency.
- *
- * ### Example ([live demo](http://plnkr.co/edit/6uHYJK?p=preview))
- *
- * ```typescript
- * class Engine {}
- *
- * @Injectable()
- * class Car {
- * engine;
- * constructor(@Inject("MyEngine") engine:Engine) {
- * this.engine = engine;
- * }
- * }
- *
- * var injector = Injector.resolveAndCreate([
- * bind("MyEngine").toClass(Engine),
- * Car
- * ]);
- *
- * expect(injector.get(Car).engine instanceof Engine).toBe(true);
- * ```
- *
- * When `@Inject()` is not present, {@link Injector} will use the type annotation of the parameter.
- *
- * ### Example
- *
- * ```typescript
- * class Engine {}
- *
- * @Injectable()
- * class Car {
- * constructor(public engine: Engine) {} //same as constructor(@Inject(Engine) engine:Engine)
- * }
- *
- * var injector = Injector.resolveAndCreate([Engine, Car]);
- * expect(injector.get(Car).engine instanceof Engine).toBe(true);
- * ```
- */
- class InjectMetadata {
-
- constructor(token: any);
-
- token: any;
-
- toString(): string;
-
- }
-
-
- /**
- * A parameter metadata that marks a dependency as optional. {@link Injector} provides `null` if
- * the dependency is not found.
- *
- * ### Example ([live demo](http://plnkr.co/edit/AsryOm?p=preview))
- *
- * ```typescript
- * class Engine {}
- *
- * @Injectable()
- * class Car {
- * engine;
- * constructor(@Optional() engine:Engine) {
- * this.engine = engine;
- * }
- * }
- *
- * var injector = Injector.resolveAndCreate([Car]);
- * expect(injector.get(Car).engine).toBeNull();
- * ```
- */
- class OptionalMetadata {
-
- toString(): string;
-
- }
-
-
- /**
- * A marker metadata that marks a class as available to {@link Injector} for creation.
- *
- * ### Example ([live demo](http://plnkr.co/edit/Wk4DMQ?p=preview))
- *
- * ```typescript
- * @Injectable()
- * class UsefulService {}
- *
- * @Injectable()
- * class NeedsService {
- * constructor(public service:UsefulService) {}
- * }
- *
- * var injector = Injector.resolveAndCreate([NeedsService, UsefulService]);
- * expect(injector.get(NeedsService).service instanceof UsefulService).toBe(true);
- * ```
- * {@link Injector} will throw {@link NoAnnotationError} when trying to instantiate a class that
- * does not have `@Injectable` marker, as shown in the example below.
- *
- * ```typescript
- * class UsefulService {}
- *
- * class NeedsService {
- * constructor(public service:UsefulService) {}
- * }
- *
- * var injector = Injector.resolveAndCreate([NeedsService, UsefulService]);
- * expect(() => injector.get(NeedsService)).toThrowError();
- * ```
- */
- class InjectableMetadata {
-
- constructor();
-
- }
-
-
- /**
- * Specifies that an {@link Injector} should retrieve a dependency only from itself.
- *
- * ### Example ([live demo](http://plnkr.co/edit/NeagAg?p=preview))
- *
- * ```typescript
- * class Dependency {
- * }
- *
- * @Injectable()
- * class NeedsDependency {
- * dependency;
- *
- * dependency;
- * constructor(@Self() dependency:Dependency) {
- * this.dependency = dependency;
- * }
- * }
- *
- * var inj = Injector.resolveAndCreate([Dependency, NeedsDependency]);
- * var nd = inj.get(NeedsDependency);
- *
- * expect(nd.dependency instanceof Dependency).toBe(true);
- *
- * var inj = Injector.resolveAndCreate([Dependency]);
- * var child = inj.resolveAndCreateChild([NeedsDependency]);
- * expect(() => child.get(NeedsDependency)).toThrowError();
- * ```
- */
- class SelfMetadata {
-
- toString(): string;
-
- }
-
-
- /**
- * Specifies that an injector should retrieve a dependency from any injector until reaching the
- * closest host.
- *
- * In Angular, a component element is automatically declared as a host for all the injectors in
- * its view.
- *
- * ### Example ([live demo](http://plnkr.co/edit/GX79pV?p=preview))
- *
- * In the following example `App` contains `ParentCmp`, which contains `ChildDirective`.
- * So `ParentCmp` is the host of `ChildDirective`.
- *
- * `ChildDirective` depends on two services: `HostService` and `OtherService`.
- * `HostService` is defined at `ParentCmp`, and `OtherService` is defined at `App`.
- *
- * ```typescript
- * class OtherService {}
- * class HostService {}
- *
- * @Directive({
- * selector: 'child-directive'
- * })
- * class ChildDirective {
- * constructor(@Optional() @Host() os:OtherService, @Optional() @Host() hs:HostService){
- * console.log("os is null", os);
- * console.log("hs is NOT null", hs);
- * }
- * }
- *
- * @Component({
- * selector: 'parent-cmp',
- * bindings: [HostService]
- * })
- * @View({
- * template: `
- * Dir: <child-directive></child-directive>
- * `,
- * directives: [ChildDirective]
- * })
- * class ParentCmp {
- * }
- *
- * @Component({
- * selector: 'app',
- * bindings: [OtherService]
- * })
- * @View({
- * template: `
- * Parent: <parent-cmp></parent-cmp>
- * `,
- * directives: [ParentCmp]
- * })
- * class App {
- * }
- *
- * bootstrap(App);
- * ```
- */
- class HostMetadata {
-
- toString(): string;
-
- }
-
-
- /**
- * Specifies that the dependency resolution should start from the parent injector.
- *
- * ### Example ([live demo](http://plnkr.co/edit/Wchdzb?p=preview))
- *
- * ```typescript
- * class Dependency {
- * }
- *
- * @Injectable()
- * class NeedsDependency {
- * dependency;
- * constructor(@SkipSelf() dependency:Dependency) {
- * this.dependency = dependency;
- * }
- * }
- *
- * var parent = Injector.resolveAndCreate([Dependency]);
- * var child = parent.resolveAndCreateChild([NeedsDependency]);
- * expect(child.get(NeedsDependency).dependency instanceof Depedency).toBe(true);
- *
- * var inj = Injector.resolveAndCreate([Dependency, NeedsDependency]);
- * expect(() => inj.get(NeedsDependency)).toThrowError();
- * ```
- */
- class SkipSelfMetadata {
-
- toString(): string;
-
- }
-
-
- /**
- * `DependencyMetadata` is used by the framework to extend DI.
- * This is internal to Angular and should not be used directly.
- */
- class DependencyMetadata {
-
- token: any;
-
- }
-
-
- /**
- * Allows to refer to references which are not yet defined.
- *
- * For instance, `forwardRef` is used when the `token` which we need to refer to for the purposes of
- * DI is declared,
- * but not yet defined. It is also used when the `token` which we use when creating a query is not
- * yet defined.
- *
- * ### Example ([live demo](http://plnkr.co/edit/bRs0SX2OTQiJzqvjgl8P?p=preview))
- *
- * ```typescript
- * class Door {
- * lock: Lock;
- * constructor(@Inject(forwardRef(() => Lock)) lock:Lock) {
- * this.lock = lock;
- * }
- * }
- *
- * // Only at this point Lock is defined.
- * class Lock {
- * }
- *
- * var injector = Injector.resolveAndCreate([Door, Lock]);
- * var door = injector.get(Door);
- * expect(door instanceof Door).toBe(true);
- * expect(door.lock instanceof Lock).toBe(true);
- * ```
- */
- function forwardRef(forwardRefFn: ForwardRefFn): Type;
-
-
-
- /**
- * Lazily retrieves the reference value from a forwardRef.
- *
- * Acts as the identity function when given a non-forward-ref value.
- *
- * ### Example ([live demo](http://plnkr.co/edit/GU72mJrk1fiodChcmiDR?p=preview))
- *
- * ```typescript
- * var ref = forwardRef(() => "refValue");
- * expect(resolveForwardRef(ref)).toEqual("refValue");
- * expect(resolveForwardRef("regularValue")).toEqual("regularValue");
- * ```
- *
- * See: {@link forwardRef}
- */
- function resolveForwardRef(type: any): any;
-
-
-
- /**
- * An interface that a function passed into {@link forwardRef} has to implement.
- *
- * ### Example
- *
- * ```typescript
- * var fn:ForwardRefFn = forwardRef(() => Lock);
- * ```
- */
- interface ForwardRefFn {
-
- (): any;
-
- }
-
-
- /**
- * A dependency injection container used for instantiating objects and 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 ([live demo](http://plnkr.co/edit/jzjec0?p=preview))
- *
- * The following example creates an `Injector` configured to create `Engine` and `Car`.
- *
- * ```typescript
- * @Injectable()
- * class Engine {
- * }
- *
- * @Injectable()
- * class Car {
- * constructor(public engine:Engine) {}
- * }
- *
- * var injector = Injector.resolveAndCreate([Car, Engine]);
- * var car = injector.get(Car);
- * expect(car instanceof Car).toBe(true);
- * expect(car.engine instanceof Engine).toBe(true);
- * ```
- *
- * Notice, we don't use the `new` operator because we explicitly want to have the `Injector`
- * resolve all of the object's dependencies automatically.
- */
- class Injector {
-
- /**
- * Private
- */
- constructor(_proto: any, _parent?: Injector, _depProvider?: any, _debugContext?: Function);
-
- /**
- * Turns an array of binding definitions into an array of resolved bindings.
- *
- * A resolution is a process of flattening multiple nested arrays and converting individual
- * bindings into an array of {@link ResolvedBinding}s.
- *
- * ### Example ([live demo](http://plnkr.co/edit/AiXTHi?p=preview))
- *
- * ```typescript
- * @Injectable()
- * class Engine {
- * }
- *
- * @Injectable()
- * class Car {
- * constructor(public engine:Engine) {}
- * }
- *
- * var bindings = Injector.resolve([Car, [[Engine]]]);
- *
- * expect(bindings.length).toEqual(2);
- *
- * expect(bindings[0] instanceof ResolvedBinding).toBe(true);
- * expect(bindings[0].key.displayName).toBe("Car");
- * expect(bindings[0].dependencies.length).toEqual(1);
- * expect(bindings[0].factory).toBeDefined();
- *
- * expect(bindings[1].key.displayName).toBe("Engine");
- * });
- * ```
- *
- * See {@link fromResolvedBindings} for more info.
- */
- static resolve(bindings: Array<Type | Binding | any[]>): ResolvedBinding[];
-
- /**
- * Resolves an array of bindings and creates an injector from those bindings.
- *
- * The passed-in bindings can be an array of `Type`, {@link Binding},
- * or a recursive array of more bindings.
- *
- * ### Example ([live demo](http://plnkr.co/edit/ePOccA?p=preview))
- *
- * ```typescript
- * @Injectable()
- * class Engine {
- * }
- *
- * @Injectable()
- * class Car {
- * constructor(public engine:Engine) {}
- * }
- *
- * var injector = Injector.resolveAndCreate([Car, Engine]);
- * expect(injector.get(Car) instanceof Car).toBe(true);
- * ```
- *
- * This function is slower than the corresponding `fromResolvedBindings`
- * because it needs to resolve the passed-in bindings first.
- * See {@link resolve} and {@link fromResolvedBindings}.
- */
- static resolveAndCreate(bindings: Array<Type | Binding | any[]>): Injector;
-
- /**
- * Creates an injector from previously resolved bindings.
- *
- * This API is the recommended way to construct injectors in performance-sensitive parts.
- *
- * ### Example ([live demo](http://plnkr.co/edit/KrSMci?p=preview))
- *
- * ```typescript
- * @Injectable()
- * class Engine {
- * }
- *
- * @Injectable()
- * class Car {
- * constructor(public engine:Engine) {}
- * }
- *
- * var bindings = Injector.resolve([Car, Engine]);
- * var injector = Injector.fromResolvedBindings(bindings);
- * expect(injector.get(Car) instanceof Car).toBe(true);
- * ```
- */
- static fromResolvedBindings(bindings: ResolvedBinding[]): Injector;
-
- /**
- * Retrieves an instance from the injector based on the provided token.
- * Throws {@link NoBindingError} if not found.
- *
- * ### Example ([live demo](http://plnkr.co/edit/HeXSHg?p=preview))
- *
- * ```typescript
- * var injector = Injector.resolveAndCreate([
- * bind("validToken").toValue("Value")
- * ]);
- * expect(injector.get("validToken")).toEqual("Value");
- * expect(() => injector.get("invalidToken")).toThrowError();
- * ```
- *
- * `Injector` returns itself when given `Injector` as a token.
- *
- * ```typescript
- * var injector = Injector.resolveAndCreate([]);
- * expect(injector.get(Injector)).toBe(injector);
- * ```
- */
- get(token: any): any;
-
- /**
- * Retrieves an instance from the injector based on the provided token.
- * Returns null if not found.
- *
- * ### Example ([live demo](http://plnkr.co/edit/tpEbEy?p=preview))
- *
- * ```typescript
- * var injector = Injector.resolveAndCreate([
- * bind("validToken").toValue("Value")
- * ]);
- * expect(injector.getOptional("validToken")).toEqual("Value");
- * expect(injector.getOptional("invalidToken")).toBe(null);
- * ```
- *
- * `Injector` returns itself when given `Injector` as a token.
- *
- * ```typescript
- * var injector = Injector.resolveAndCreate([]);
- * expect(injector.getOptional(Injector)).toBe(injector);
- * ```
- */
- getOptional(token: any): any;
-
- /**
- * Parent of this injector.
- *
- * <!-- TODO: Add a link to the section of the user guide talking about hierarchical injection.
- * -->
- *
- * ### Example ([live demo](http://plnkr.co/edit/eosMGo?p=preview))
- *
- * ```typescript
- * var parent = Injector.resolveAndCreate([]);
- * var child = parent.resolveAndCreateChild([]);
- * expect(child.parent).toBe(parent);
- * ```
- */
- parent: Injector;
-
- /**
- * Resolves an array of bindings and creates a child injector from those bindings.
- *
- * <!-- TODO: Add a link to the section of the user guide talking about hierarchical injection.
- * -->
- *
- * The passed-in bindings can be an array of `Type`, {@link Binding},
- * or a recursive array of more bindings.
- *
- * ### Example ([live demo](http://plnkr.co/edit/opB3T4?p=preview))
- *
- * ```typescript
- * class ParentBinding {}
- * class ChildBinding {}
- *
- * var parent = Injector.resolveAndCreate([ParentBinding]);
- * var child = parent.resolveAndCreateChild([ChildBinding]);
- *
- * expect(child.get(ParentBinding) instanceof ParentBinding).toBe(true);
- * expect(child.get(ChildBinding) instanceof ChildBinding).toBe(true);
- * expect(child.get(ParentBinding)).toBe(parent.get(ParentBinding));
- * ```
- *
- * This function is slower than the corresponding `createChildFromResolved`
- * because it needs to resolve the passed-in bindings first.
- * See {@link resolve} and {@link createChildFromResolved}.
- */
- resolveAndCreateChild(bindings: Array<Type | Binding | any[]>): Injector;
-
- /**
- * Creates a child injector from previously resolved bindings.
- *
- * <!-- TODO: Add a link to the section of the user guide talking about hierarchical injection.
- * -->
- *
- * This API is the recommended way to construct injectors in performance-sensitive parts.
- *
- * ### Example ([live demo](http://plnkr.co/edit/VhyfjN?p=preview))
- *
- * ```typescript
- * class ParentBinding {}
- * class ChildBinding {}
- *
- * var parentBindings = Injector.resolve([ParentBinding]);
- * var childBindings = Injector.resolve([ChildBinding]);
- *
- * var parent = Injector.fromResolvedBindings(parentBindings);
- * var child = parent.createChildFromResolved(childBindings);
- *
- * expect(child.get(ParentBinding) instanceof ParentBinding).toBe(true);
- * expect(child.get(ChildBinding) instanceof ChildBinding).toBe(true);
- * expect(child.get(ParentBinding)).toBe(parent.get(ParentBinding));
- * ```
- */
- createChildFromResolved(bindings: ResolvedBinding[]): Injector;
-
- /**
- * Resolves a binding and instantiates an object in the context of the injector.
- *
- * The created object does not get cached by the injector.
- *
- * ### Example ([live demo](http://plnkr.co/edit/yvVXoB?p=preview))
- *
- * ```typescript
- * @Injectable()
- * class Engine {
- * }
- *
- * @Injectable()
- * class Car {
- * constructor(public engine:Engine) {}
- * }
- *
- * var injector = Injector.resolveAndCreate([Engine]);
- *
- * var car = injector.resolveAndInstantiate(Car);
- * expect(car.engine).toBe(injector.get(Engine));
- * expect(car).not.toBe(injector.resolveAndInstantiate(Car));
- * ```
- */
- resolveAndInstantiate(binding: Type | Binding): any;
-
- /**
- * Instantiates an object using a resolved binding in the context of the injector.
- *
- * The created object does not get cached by the injector.
- *
- * ### Example ([live demo](http://plnkr.co/edit/ptCImQ?p=preview))
- *
- * ```typescript
- * @Injectable()
- * class Engine {
- * }
- *
- * @Injectable()
- * class Car {
- * constructor(public engine:Engine) {}
- * }
- *
- * var injector = Injector.resolveAndCreate([Engine]);
- * var carBinding = Injector.resolve([Car])[0];
- * var car = injector.instantiateResolved(carBinding);
- * expect(car.engine).toBe(injector.get(Engine));
- * expect(car).not.toBe(injector.instantiateResolved(carBinding));
- * ```
- */
- instantiateResolved(binding: ResolvedBinding): any;
-
- displayName: string;
-
- toString(): string;
-
- }
-
-
- /**
- * Describes how the {@link Injector} should instantiate a given token.
- *
- * See {@link bind}.
- *
- * ### Example ([live demo](http://plnkr.co/edit/GNAyj6K6PfYg2NBzgwZ5?p%3Dpreview&p=preview))
- *
- * ```javascript
- * var injector = Injector.resolveAndCreate([
- * new Binding("message", { toValue: 'Hello' })
- * ]);
- *
- * expect(injector.get("message")).toEqual('Hello');
- * ```
- */
- class Binding {
-
- constructor(token: any, {toClass, toValue, toAlias, toFactory, deps, multi}: {
- toClass?: Type,
- toValue?: any,
- toAlias?: any,
- toFactory?: Function,
- deps?: Object[],
- multi?: boolean
- });
-
- /**
- * Token used when retrieving this binding. Usually, it is a type {@link `Type`}.
- */
- token: any;
-
- /**
- * Binds a DI token to an implementation class.
- *
- * ### Example ([live demo](http://plnkr.co/edit/RSTG86qgmoxCyj9SWPwY?p=preview))
- *
- * Because `toAlias` and `toClass` are often confused, the example contains both use cases for
- * easy
- * comparison.
- *
- * ```typescript
- * 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 DI token to a value.
- *
- * ### Example ([live demo](http://plnkr.co/edit/UFVsMVQIDe7l4waWziES?p=preview))
- *
- * ```javascript
- * var injector = Injector.resolveAndCreate([
- * new Binding("message", { toValue: 'Hello' })
- * ]);
- *
- * expect(injector.get("message")).toEqual('Hello');
- * ```
- */
- toValue: any;
-
- /**
- * Binds a DI token as an alias for an existing token.
- *
- * An alias means that {@link Injector} 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 ([live demo](http://plnkr.co/edit/QsatsOJJ6P8T2fMe9gr8?p=preview))
- *
- * Because `toAlias` and `toClass` are often confused the example contains both use cases for easy
- * comparison.
- *
- * ```typescript
- * 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: any;
-
- /**
- * Binds a DI token to a function which computes the value.
- *
- * ### Example ([live demo](http://plnkr.co/edit/Scoxy0pJNqKGAPZY1VVC?p=preview))
- *
- * ```typescript
- * var injector = Injector.resolveAndCreate([
- * new Binding(Number, { toFactory: () => { return 1+2; }}),
- * new Binding(String, { toFactory: (value) => { return "Value: " + value; },
- * deps: [Number] })
- * ]);
- *
- * expect(injector.get(Number)).toEqual(3);
- * expect(injector.get(String)).toEqual('Value: 3');
- * ```
- *
- * Used in conjuction with dependencies.
- */
- toFactory: Function;
-
- /**
- * Specifies a set of dependencies
- * (as `token`s) which should be injected into the factory function.
- *
- * ### Example ([live demo](http://plnkr.co/edit/Scoxy0pJNqKGAPZY1VVC?p=preview))
- *
- * ```typescript
- * var injector = Injector.resolveAndCreate([
- * new Binding(Number, { toFactory: () => { return 1+2; }}),
- * new Binding(String, { toFactory: (value) => { return "Value: " + value; },
- * deps: [Number] })
- * ]);
- *
- * expect(injector.get(Number)).toEqual(3);
- * expect(injector.get(String)).toEqual('Value: 3');
- * ```
- *
- * Used in conjunction with `toFactory`.
- */
- dependencies: Object[];
-
- /**
- * Creates multiple bindings matching the same token (a multi-binding).
- *
- * Multi-bindings are used for creating pluggable service, where the system comes
- * with some default bindings, and the user can register additonal bindings.
- * The combination of the default bindings and the additional bindings will be
- * used to drive the behavior of the system.
- *
- * ### Example
- *
- * ```typescript
- * var injector = Injector.resolveAndCreate([
- * new Binding("Strings", { toValue: "String1", multi: true}),
- * new Binding("Strings", { toValue: "String2", multi: true})
- * ]);
- *
- * expect(injector.get("Strings")).toEqual(["String1", "String2"]);
- * ```
- *
- * Multi-bindings and regular bindings cannot be mixed. The following
- * will throw an exception:
- *
- * ```typescript
- * var injector = Injector.resolveAndCreate([
- * new Binding("Strings", { toValue: "String1", multi: true }),
- * new Binding("Strings", { toValue: "String2"})
- * ]);
- * ```
- */
- multi: boolean;
-
- }
-
-
- /**
- * Helper class for the {@link bind} function.
- */
- class BindingBuilder {
-
- constructor(token: any);
-
- token: any;
-
- /**
- * Binds a DI token to a class.
- *
- * ### Example ([live demo](http://plnkr.co/edit/ZpBCSYqv6e2ud5KXLdxQ?p=preview))
- *
- * Because `toAlias` and `toClass` are often confused, the example contains both use cases for
- * easy comparison.
- *
- * ```typescript
- * 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 DI token to a value.
- *
- * ### Example ([live demo](http://plnkr.co/edit/G024PFHmDL0cJFgfZK8O?p=preview))
- *
- * ```typescript
- * var injector = Injector.resolveAndCreate([
- * bind('message').toValue('Hello')
- * ]);
- *
- * expect(injector.get('message')).toEqual('Hello');
- * ```
- */
- toValue(value: any): Binding;
-
- /**
- * Binds a DI token as an alias for an existing token.
- *
- * 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 separate instance of `toClass` will be returned.)
- *
- * ### Example ([live demo](http://plnkr.co/edit/uBaoF2pN5cfc5AfZapNw?p=preview))
- *
- * Because `toAlias` and `toClass` are often confused, the example contains both use cases for
- * easy
- * comparison.
- *
- * ```typescript
- * 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: /*Type*/ any): Binding;
-
- /**
- * Binds a DI token to a function which computes the value.
- *
- * ### Example ([live demo](http://plnkr.co/edit/OejNIfTT3zb1iBxaIYOb?p=preview))
- *
- * ```typescript
- * 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(factory: Function, dependencies?: any[]): Binding;
-
- }
-
-
- /**
- * An internal resolved representation of a {@link Binding} used by the {@link Injector}.
- *
- * It is usually created automatically by `Injector.resolveAndCreate`.
- *
- * It can be created manually, as follows:
- *
- * ### Example ([live demo](http://plnkr.co/edit/RfEnhh8kUEI0G3qsnIeT?p%3Dpreview&p=preview))
- *
- * ```typescript
- * var resolvedBindings = Injector.resolve([new Binding('message', {toValue: 'Hello'})]);
- * var injector = Injector.fromResolvedBindings(resolvedBindings);
- *
- * expect(injector.get('message')).toEqual('Hello');
- * ```
- */
- interface ResolvedBinding {
-
- /**
- * A key, usually a `Type`.
- */
- key: Key;
-
- }
-
-
- /**
- * @private
- * An internal resolved representation of a factory function created by resolving {@link Binding}.
- */
- class ResolvedFactory {
-
- constructor(factory: Function, dependencies: Dependency[]);
-
- /**
- * Factory function which can return an instance of an object represented by a key.
- */
- factory: Function;
-
- /**
- * Arguments (dependencies) to the `factory` function.
- */
- dependencies: Dependency[];
-
- }
-
-
- /**
- * @private
- */
- class Dependency {
-
- constructor(key: Key, optional: boolean, lowerBoundVisibility: any, upperBoundVisibility: any, properties: any[]);
-
- static fromKey(key: Key): Dependency;
-
- key: Key;
-
- optional: boolean;
-
- lowerBoundVisibility: any;
-
- upperBoundVisibility: any;
-
- properties: any[];
-
- }
-
-
- /**
- * Creates a {@link Binding}.
- *
- * To construct a {@link Binding}, bind a `token` to either a class, a value, a factory function, or
- * to an alias to another `token`.
- * See {@link BindingBuilder} for more details.
- *
- * The `token` is most commonly a class or {@link angular2/di/OpaqueToken}.
- */
- function bind(token: any): BindingBuilder;
-
-
-
- /**
- * A unique object used for retrieving items from the {@link Injector}.
- *
- * Keys have:
- * - a system-wide unique `id`.
- * - a `token`.
- *
- * `Key` is used internally by {@link Injector} because its system-wide unique `id` allows the
- * injector to store created objects in a more efficient way.
- *
- * `Key` should not be created directly. {@link Injector} creates keys automatically when resolving
- * bindings.
- */
- class Key {
-
- /**
- * Private
- */
- constructor(token: Object, id: number);
-
- /**
- * Retrieves a `Key` for a token.
- */
- static get(token: Object): Key;
-
- /**
- * @returns the number of keys registered in the system.
- */
- static numberOfKeys: number;
-
- token: Object;
-
- id: number;
-
- /**
- * Returns a stringified token.
- */
- displayName: string;
-
- }
-
-
- /**
- * @private
- * 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 {@link Injector}, but the
- * {@link Injector} does not have a {@link Binding} for {@link Key}.
- *
- * ### Example ([live demo](http://plnkr.co/edit/vq8D3FRB9aGbnWJqtEPE?p=preview))
- *
- * ```typescript
- * class A {
- * constructor(b:B) {}
- * }
- *
- * expect(() => Injector.resolveAndCreate([A])).toThrowError();
- * ```
- */
- class NoBindingError extends AbstractBindingError {
-
- constructor(injector: Injector, key: Key);
-
- }
-
-
- /**
- * Base class for all errors arising from misconfigured bindings.
- */
- class AbstractBindingError extends BaseException {
-
- constructor(injector: Injector, key: Key, constructResolvingMessage: Function);
-
- addKey(injector: Injector, key: Key): void;
-
- context: any;
-
- }
-
-
- /**
- * Thrown when dependencies form a cycle.
- *
- * ### Example ([live demo](http://plnkr.co/edit/wYQdNos0Tzql3ei1EV9j?p=info))
- *
- * ```typescript
- * var injector = Injector.resolveAndCreate([
- * bind("one").toFactory((two) => "two", [[new Inject("two")]]),
- * bind("two").toFactory((one) => "one", [[new Inject("one")]])
- * ]);
- *
- * expect(() => injector.get("one")).toThrowError();
- * ```
- *
- * Retrieving `A` or `B` throws a `CyclicDependencyError` as the graph above cannot be constructed.
- */
- class CyclicDependencyError extends AbstractBindingError {
-
- constructor(injector: Injector, key: Key);
-
- }
-
-
- /**
- * 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.
- *
- * ### Example ([live demo](http://plnkr.co/edit/7aWYdcqTQsP0eNqEdUAf?p=preview))
- *
- * ```typescript
- * class A {
- * constructor() {
- * throw new Error('message');
- * }
- * }
- *
- * var injector = Injector.resolveAndCreate([A]);
- *
- * try {
- * injector.get(A);
- * } catch (e) {
- * expect(e instanceof InstantiationError).toBe(true);
- * expect(e.originalException.message).toEqual("message");
- * expect(e.originalStack).toBeDefined();
- * }
- * ```
- */
- interface InstantiationError extends WrappedException {
-
- addKey(injector: Injector, key: Key): void;
-
- wrapperMessage: string;
-
- causeKey: Key;
-
- context: any;
-
- }
-
-
- /**
- * Thrown when an object other then {@link Binding} (or `Type`) is passed to {@link Injector}
- * creation.
- *
- * ### Example ([live demo](http://plnkr.co/edit/YatCFbPAMCL0JSSQ4mvH?p=preview))
- *
- * ```typescript
- * expect(() => Injector.resolveAndCreate(["not a type"])).toThrowError();
- * ```
- */
- class InvalidBindingError extends BaseException {
-
- constructor(binding: any);
-
- }
-
-
- /**
- * Thrown when the class has no annotation information.
- *
- * Lack of annotation information prevents the {@link Injector} from determining which dependencies
- * need to be injected into the constructor.
- *
- * ### Example ([live demo](http://plnkr.co/edit/rHnZtlNS7vJOPQ6pcVkm?p=preview))
- *
- * ```typescript
- * class A {
- * constructor(b) {}
- * }
- *
- * expect(() => Injector.resolveAndCreate([A])).toThrowError();
- * ```
- *
- * This error is also thrown when the class not marked with {@link @Injectable} has parameter types.
- *
- * ```typescript
- * class B {}
- *
- * class A {
- * constructor(b:B) {} // no information about the parameter types of A is available at runtime.
- * }
- *
- * expect(() => Injector.resolveAndCreate([A,B])).toThrowError();
- * ```
- */
- class NoAnnotationError extends BaseException {
-
- constructor(typeOrFunc: any, params: any[][]);
-
- }
-
-
- /**
- * Thrown when getting an object by index.
- *
- * ### Example ([live demo](http://plnkr.co/edit/bRs0SX2OTQiJzqvjgl8P?p=preview))
- *
- * ```typescript
- * class A {}
- *
- * var injector = Injector.resolveAndCreate([A]);
- *
- * expect(() => injector.getAt(100)).toThrowError();
- * ```
- */
- class OutOfBoundsError extends BaseException {
-
- constructor(index: any);
-
- }
-
-
- /**
- * Creates a token that can be used in a DI Binding.
- *
- * ### Example ([live demo](http://plnkr.co/edit/Ys9ezXpj2Mnoy3Uc8KBp?p=preview))
- *
- * ```typescript
- * var t = new OpaqueToken("binding");
- *
- * var injector = Injector.resolveAndCreate([
- * bind(t).toValue("bindingValue")
- * ]);
- *
- * expect(injector.get(t)).toEqual("bindingValue");
- * ```
- *
- * Using an `OpaqueToken` is preferable to using strings as tokens because of possible collisions
- * caused by multiple bindings using the same string as two different tokens.
- *
- * Using an `OpaqueToken` is preferable to using an `Object` as tokens because it provides better
- * error messages.
- */
- class OpaqueToken {
-
- constructor(_desc: string);
-
- toString(): string;
-
- }
-
-
- /**
- * Factory for creating {@link InjectMetadata}.
- */
- interface InjectFactory {
-
- new(token: any): InjectMetadata;
-
- (token: any): any;
-
- }
-
-
- /**
- * Factory for creating {@link OptionalMetadata}.
- */
- interface OptionalFactory {
-
- new(): OptionalMetadata;
-
- (): any;
-
- }
-
-
- /**
- * Factory for creating {@link InjectableMetadata}.
- */
- interface InjectableFactory {
-
- new(): InjectableMetadata;
-
- (): any;
-
- }
-
-
- /**
- * Factory for creating {@link SelfMetadata}.
- */
- interface SelfFactory {
-
- new(): SelfMetadata;
-
- (): any;
-
- }
-
-
- /**
- * Factory for creating {@link HostMetadata}.
- */
- interface HostFactory {
-
- new(): HostMetadata;
-
- (): any;
-
- }
-
-
- /**
- * Factory for creating {@link SkipSelfMetadata}.
- */
- interface SkipSelfFactory {
-
- new(): SkipSelfMetadata;
-
- (): any;
-
- }
-
-
- /**
- * Factory for creating {@link InjectMetadata}.
- */
- var Inject: InjectFactory;
-
-
-
- /**
- * Factory for creating {@link OptionalMetadata}.
- */
- var Optional: OptionalFactory;
-
-
-
- /**
- * Factory for creating {@link InjectableMetadata}.
- */
- var Injectable: InjectableFactory;
-
-
-
- /**
- * Factory for creating {@link SelfMetadata}.
- */
- var Self: SelfFactory;
-
-
-
- /**
- * Factory for creating {@link HostMetadata}.
- */
- var Host: HostFactory;
-
-
-
- /**
- * Factory for creating {@link SkipSelfMetadata}.
- */
- var SkipSelf: SkipSelfFactory;
-
-
-
- /**
- * The `async` pipe subscribes to an Observable or Promise and returns the latest value it has
- * emitted.
- * When a new value is emitted, the `async` pipe marks the component to be checked for changes.
- *
- * # Example
- * The example below binds the `time` Observable to the view. Every 500ms, the `time` Observable
- * updates the view with the current time.
- *
- * ```
- * import {Observable} from 'angular2/core';
- * @Component({
- * selector: "task-cmp"
- * })
- * @View({
- * template: "Time: {{ time | async }}"
- * })
- * class Task {
- * time = new Observable<number>(observer => {
- * setInterval(_ =>
- * observer.next(new Date().getTime()), 500);
- * });
- * }
- * ```
- */
- class AsyncPipe implements PipeTransform, PipeOnDestroy {
-
- constructor(_ref: ChangeDetectorRef);
-
- onDestroy(): void;
-
- transform(obj: Observable | Promise<any>, args?: any[]): any;
-
- }
-
-
- /**
- * WARNING: this pipe uses the Internationalization API.
- * Therefore it is only reliable in Chrome and Opera browsers.
- *
- * Formats a date value to a string based on the requested format.
- *
- * # Usage
- *
- * expression | date[:format]
- *
- * where `expression` is a date object or a number (milliseconds since UTC epoch) and
- * `format` indicates which date/time components to include:
- *
- * | Component | Symbol | Short Form | Long Form | Numeric | 2-digit |
- * |-----------|:------:|--------------|-------------------|-----------|-----------|
- * | era | G | G (AD) | GGGG (Anno Domini)| - | - |
- * | year | y | - | - | y (2015) | yy (15) |
- * | month | M | MMM (Sep) | MMMM (September) | M (9) | MM (09) |
- * | day | d | - | - | d (3) | dd (03) |
- * | weekday | E | EEE (Sun) | EEEE (Sunday) | - | - |
- * | hour | j | - | - | j (13) | jj (13) |
- * | hour12 | h | - | - | h (1 PM) | hh (01 PM)|
- * | hour24 | H | - | - | H (13) | HH (13) |
- * | minute | m | - | - | m (5) | mm (05) |
- * | second | s | - | - | s (9) | ss (09) |
- * | timezone | z | - | z (Pacific Standard Time)| - | - |
- * | timezone | Z | Z (GMT-8:00) | - | - | - |
- *
- * In javascript, only the components specified will be respected (not the ordering,
- * punctuations, ...) and details of the formatting will be dependent on the locale.
- * On the other hand in Dart version, you can also include quoted text as well as some extra
- * date/time components such as quarter. For more information see:
- * https://api.dartlang.org/apidocs/channels/stable/dartdoc-viewer/intl/intl.DateFormat.
- *
- * `format` can also be one of the following predefined formats:
- *
- * - `'medium'`: equivalent to `'yMMMdjms'` (e.g. Sep 3, 2010, 12:05:08 PM for en-US)
- * - `'short'`: equivalent to `'yMdjm'` (e.g. 9/3/2010, 12:05 PM for en-US)
- * - `'fullDate'`: equivalent to `'yMMMMEEEEd'` (e.g. Friday, September 3, 2010 for en-US)
- * - `'longDate'`: equivalent to `'yMMMMd'` (e.g. September 3, 2010)
- * - `'mediumDate'`: equivalent to `'yMMMd'` (e.g. Sep 3, 2010 for en-US)
- * - `'shortDate'`: equivalent to `'yMd'` (e.g. 9/3/2010 for en-US)
- * - `'mediumTime'`: equivalent to `'jms'` (e.g. 12:05:08 PM for en-US)
- * - `'shortTime'`: equivalent to `'jm'` (e.g. 12:05 PM for en-US)
- *
- * Timezone of the formatted text will be the local system timezone of the end-users machine.
- *
- * # Examples
- *
- * Assuming `dateObj` is (year: 2015, month: 6, day: 15, hour: 21, minute: 43, second: 11)
- * in the _local_ time and locale is 'en-US':
- *
- * {{ dateObj | date }} // output is 'Jun 15, 2015'
- * {{ dateObj | date:'medium' }} // output is 'Jun 15, 2015, 9:43:11 PM'
- * {{ dateObj | date:'shortTime' }} // output is '9:43 PM'
- * {{ dateObj | date:'mmss' }} // output is '43:11'
- */
- class DatePipe implements PipeTransform {
-
- transform(value: any, args: any[]): string;
-
- supports(obj: any): boolean;
-
- }
-
-
- let DEFAULT_PIPES: Binding;
-
-
-
- let DEFAULT_PIPES_TOKEN: OpaqueToken;
-
-
-
- /**
- * Implements json transforms to any object.
- *
- * # Example
- *
- * In this example we transform the user object to json.
- *
- * ```
- * @Component({
- * selector: "user-cmp"
- * })
- * @View({
- * template: "User: {{ user | json }}"
- * })
- * class Username {
- * user:Object
- * constructor() {
- * this.user = { name: "PatrickJS" };
- * }
- * }
- *
- * ```
- */
- class JsonPipe implements PipeTransform {
-
- transform(value: any, args?: any[]): string;
-
- }
-
-
- /**
- * Creates a new List or String containing only a subset (slice) of the
- * elements.
- *
- * The starting index of the subset to return is specified by the `start` parameter.
- *
- * The ending index of the subset to return is specified by the optional `end` parameter.
- *
- * # Usage
- *
- * expression | slice:start[:end]
- *
- * All behavior is based on the expected behavior of the JavaScript API
- * Array.prototype.slice() and String.prototype.slice()
- *
- * Where the input expression is a [List] or [String], and `start` is:
- *
- * - **a positive integer**: return the item at _start_ index and all items after
- * in the list or string expression.
- * - **a negative integer**: return the item at _start_ index from the end and all items after
- * in the list or string expression.
- * - **`|start|` greater than the size of the expression**: return an empty list or string.
- * - **`|start|` negative greater than the size of the expression**: return entire list or
- * string expression.
- *
- * and where `end` is:
- *
- * - **omitted**: return all items until the end of the input
- * - **a positive integer**: return all items before _end_ index of the list or string
- * expression.
- * - **a negative integer**: return all items before _end_ index from the end of the list
- * or string expression.
- *
- * When operating on a [List], the returned list is always a copy even when all
- * the elements are being returned.
- *
- * # Examples
- *
- * ## List Example
- *
- * Assuming `var collection = ['a', 'b', 'c', 'd']`, this `ng-for` directive:
- *
- * <li *ng-for="var i in collection | slice:1:3">{{i}}</li>
- *
- * produces the following:
- *
- * <li>b</li>
- * <li>c</li>
- *
- * ## String Examples
- *
- * {{ 'abcdefghij' | slice:0:4 }} // output is 'abcd'
- * {{ 'abcdefghij' | slice:4:0 }} // output is ''
- * {{ 'abcdefghij' | slice:-4 }} // output is 'ghij'
- * {{ 'abcdefghij' | slice:-4,-2 }} // output is 'gh'
- * {{ 'abcdefghij' | slice: -100 }} // output is 'abcdefghij'
- * {{ 'abcdefghij' | slice: 100 }} // output is ''
- */
- class SlicePipe implements PipeTransform {
-
- transform(value: any, args?: any[]): any;
-
- supports(obj: any): boolean;
-
- }
-
-
- /**
- * Implements lowercase transforms to text.
- *
- * # Example
- *
- * In this example we transform the user text lowercase.
- *
- * ```
- * @Component({
- * selector: "username-cmp"
- * })
- * @View({
- * template: "Username: {{ user | lowercase }}"
- * })
- * class Username {
- * user:string;
- * }
- *
- * ```
- */
- class LowerCasePipe implements PipeTransform {
-
- transform(value: string, args?: any[]): string;
-
- }
-
-
- class NumberPipe {
-
- }
-
-
- /**
- * WARNING: this pipe uses the Internationalization API.
- * Therefore it is only reliable in Chrome and Opera browsers.
- *
- * Formats a number as local text. i.e. group sizing and separator and other locale-specific
- * configurations are based on the active locale.
- *
- * # Usage
- *
- * expression | number[:digitInfo]
- *
- * where `expression` is a number and `digitInfo` has the following format:
- *
- * {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
- *
- * - minIntegerDigits is the minimum number of integer digits to use. Defaults to 1.
- * - minFractionDigits is the minimum number of digits after fraction. Defaults to 0.
- * - maxFractionDigits is the maximum number of digits after fraction. Defaults to 3.
- *
- * For more information on the acceptable range for each of these numbers and other
- * details see your native internationalization library.
- *
- * # Examples
- *
- * {{ 123 | number }} // output is 123
- * {{ 123.1 | number: '.2-3' }} // output is 123.10
- * {{ 1 | number: '2.2' }} // output is 01.00
- */
- class DecimalPipe extends NumberPipe implements PipeTransform {
-
- transform(value: any, args: any[]): string;
-
- }
-
-
- /**
- * WARNING: this pipe uses the Internationalization API.
- * Therefore it is only reliable in Chrome and Opera browsers.
- *
- * Formats a number as local percent.
- *
- * # Usage
- *
- * expression | percent[:digitInfo]
- *
- * For more information about `digitInfo` see {@link DecimalPipe}
- */
- class PercentPipe extends NumberPipe implements PipeTransform {
-
- transform(value: any, args: any[]): string;
-
- }
-
-
- /**
- * WARNING: this pipe uses the Internationalization API.
- * Therefore it is only reliable in Chrome and Opera browsers.
- *
- * Formats a number as local currency.
- *
- * # Usage
- *
- * expression | currency[:currencyCode[:symbolDisplay[:digitInfo]]]
- *
- * where `currencyCode` is the ISO 4217 currency code, such as "USD" for the US dollar and
- * "EUR" for the euro. `symbolDisplay` is a boolean indicating whether to use the currency
- * symbol (e.g. $) or the currency code (e.g. USD) in the output. The default for this value
- * is `false`.
- * For more information about `digitInfo` see {@link DecimalPipe}
- */
- class CurrencyPipe extends NumberPipe implements PipeTransform {
-
- transform(value: any, args: any[]): string;
-
- }
-
-
- /**
- * Implements uppercase transforms to text.
- *
- * # Example
- *
- * In this example we transform the user text uppercase.
- *
- * ```
- * @Component({
- * selector: "username-cmp"
- * })
- * @View({
- * template: "Username: {{ user | uppercase }}"
- * })
- * class Username {
- * user:string;
- * }
- *
- * ```
- */
- class UpperCasePipe implements PipeTransform {
-
- transform(value: string, args?: any[]): string;
-
- }
-
-
- /**
- *
- * Runtime representation a type that a Component or other object is instances of.
- *
- * An example of a `Type` is `MyCustomComponent` class, which in JavaScript is be represented by
- * the `MyCustomComponent` constructor function.
- */
- interface Type extends Function {
-
- new(...args: any[]): any;
-
- }
-
-
- class Observable {
-
- observer(generator: any): Object;
-
- }
-
-
- /**
- * Use by directives and components to emit custom Events.
- *
- * ## Examples
- *
- * In the following example, `Zippy` alternatively emits `open` and `close` events when its
- * title gets clicked:
- *
- * ```
- * @Component({selector: 'zippy'})
- * @View({template: `
- * <div class="zippy">
- * <div (click)="toggle()">Toggle</div>
- * <div [hidden]="!visible">
- * <ng-content></ng-content>
- * </div>
- * </div>`})
- * export class Zippy {
- * visible: boolean = true;
- * @Output() open: EventEmitter = new EventEmitter();
- * @Output() close: EventEmitter = new EventEmitter();
- *
- * toggle() {
- * this.visible = !this.visible;
- * if (this.visible) {
- * this.open.next(null);
- * } else {
- * this.close.next(null);
- * }
- * }
- * }
- * ```
- *
- * 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 {
-
- observer(generator: any): any;
-
- toRx(): any;
-
- next(value: any): void;
-
- throw(error: any): void;
-
- return(value?: any): void;
-
- }
-
-
- interface Predicate<T> {
-
- (value: T, index?: number, array?: T[]): boolean;
-
- }
-
-
- class WrappedException extends Error {
-
- constructor(_wrapperMessage: string, _originalException: any, _originalStack?: any, _context?: any);
-
- wrapperMessage: string;
-
- wrapperStack: any;
-
- originalException: any;
-
- originalStack: any;
-
- context: any;
-
- message: string;
-
- toString(): string;
-
- }
-
-
- /**
- * Constructs the set of bindings meant for use at the platform level.
- *
- * These are bindings that should be singletons shared among all Angular applications
- * running on the page.
- */
- function platformBindings(): Array<Type | Binding | any[]>;
-
-
-
- /**
- * Construct a default set of bindings which should be included in any Angular
- * application, regardless of whether it runs on the UI thread or in a web worker.
- */
- function applicationCommonBindings(): Array<Type | Binding | any[]>;
-
-
-
- /**
- * Create an Angular zone.
- */
- function createNgZone(): NgZone;
-
-
-
- /**
- * @private
- */
- function platformCommon(bindings?: Array<Type | Binding | any[]>, initializer?: () => void): PlatformRef;
-
-
-
- /**
- * The Angular platform is the entry point for Angular on a web page. Each page
- * has exactly one platform, and services (such as reflection) which are common
- * to every Angular application running on the page are bound in its scope.
- *
- * A page's platform is initialized implicitly when {@link bootstrap}() is called, or
- * explicitly by calling {@link platform}().
- */
- interface PlatformRef {
-
- /**
- * Retrieve the platform {@link Injector}, which is the parent injector for
- * every Angular application on the page and provides singleton bindings.
- */
- injector: Injector;
-
- /**
- * Instantiate a new Angular application on the page.
- *
- * # What is an application?
- *
- * Each Angular application has its own zone, change detection, compiler,
- * renderer, and other framework components. An application hosts one or more
- * root components, which can be initialized via `ApplicationRef.bootstrap()`.
- *
- * # Application Bindings
- *
- * Angular applications require numerous bindings to be properly instantiated.
- * When using `application()` to create a new app on the page, these bindings
- * must be provided. Fortunately, there are helper functions to configure
- * typical bindings, as shown in the example below.
- *
- * # Example
- * ```
- * var myAppBindings = [MyAppService];
- *
- * platform()
- * .application([applicationCommonBindings(), applicationDomBindings(), myAppBindings])
- * .bootstrap(MyTopLevelComponent);
- * ```
- * # See Also
- *
- * See the {@link bootstrap} documentation for more details.
- */
- application(bindings: Array<Type | Binding | any[]>): ApplicationRef;
-
- /**
- * Instantiate a new Angular application on the page, using bindings which
- * are only available asynchronously. One such use case is to initialize an
- * application running in a web worker.
- *
- * # Usage
- *
- * `bindingFn` is a function that will be called in the new application's zone.
- * It should return a {@link Promise} to a list of bindings to be used for the
- * new application. Once this promise resolves, the application will be
- * constructed in the same manner as a normal `application()`.
- */
- asyncApplication(bindingFn: (zone: NgZone) =>
- Promise<Array<Type | Binding | any[]>>): Promise<ApplicationRef>;
-
- /**
- * Destroy the Angular platform and all Angular applications on the page.
- */
- dispose(): void;
-
- }
-
-
- /**
- * A reference to an Angular application running on a page.
- *
- * For more about Angular applications, see the documentation for {@link bootstrap}.
- */
- interface ApplicationRef {
-
- /**
- * Register a listener to be called each time `bootstrap()` is called to bootstrap
- * a new root component.
- */
- registerBootstrapListener(listener: (ref: ComponentRef) => void): void;
-
- /**
- * Bootstrap a new component at the root level of the application.
- *
- * # Bootstrap process
- *
- * When bootstrapping a new root component into an application, Angular mounts the
- * specified application component onto DOM elements identified by the [componentType]'s
- * selector and kicks off automatic change detection to finish initializing the component.
- *
- * # Optional Bindings
- *
- * Bindings for the given component can optionally be overridden via the `bindings`
- * parameter. These bindings will only apply for the root component being added and any
- * child components under it.
- *
- * # Example
- * ```
- * var app = platform.application([applicationCommonBindings(), applicationDomBindings()];
- * app.bootstrap(FirstRootComponent);
- * app.bootstrap(SecondRootComponent, [bind(OverrideBinding).toClass(OverriddenBinding)]);
- * ```
- */
- bootstrap(componentType: Type, bindings?: Array<Type | Binding | any[]>): Promise<ComponentRef>;
-
- /**
- * Retrieve the application {@link Injector}.
- */
- injector: Injector;
-
- /**
- * Retrieve the application {@link NgZone}.
- */
- zone: NgZone;
-
- /**
- * Dispose of this application and all of its components.
- */
- dispose(): void;
-
- }
-
-
- /**
- * Specifies app root url for the application.
- *
- * Used by the {@link Compiler} when resolving HTML and CSS template URLs.
- *
- * This interface can be overridden by the application developer to create custom behavior.
- *
- * See {@link Compiler}
- */
- class AppRootUrl {
-
- constructor(value: string);
-
- /**
- * Returns the base URL of the currently running application.
- */
- value: any;
-
- }
-
-
- /**
- * Used by the {@link Compiler} when resolving HTML and CSS template URLs.
- *
- * This interface can be overridden by the application developer to create custom behavior.
- *
- * See {@link Compiler}
- */
- class UrlResolver {
-
- /**
- * Resolves the `url` given the `baseUrl`:
- * - when the `url` is null, the `baseUrl` is returned,
- * - if `url` is relative ('path/to/here', './path/to/here'), the resolved url is a combination of
- * `baseUrl` and `url`,
- * - if `url` is absolute (it has a scheme: 'http://', 'https://' or start with '/'), the `url` is
- * returned as is (ignoring the `baseUrl`)
- *
- * @param {string} baseUrl
- * @param {string} url
- * @returns {string} the resolved URL
- */
- resolve(baseUrl: string, url: string): string;
-
- }
-
-
- /**
- * A service that can be used to get and set the title of a current HTML document.
- *
- * Since an Angular 2 application can't be bootstrapped on the entire HTML document (`<html>` tag)
- * it is not possible to bind to the `text` property of the `HTMLTitleElement` elements
- * (representing the `<title>` tag). Instead, this service can be used to set and get the current
- * title value.
- */
- class Title {
-
- /**
- * Get the title of the current HTML document.
- * @returns {string}
- */
- getTitle(): string;
-
- /**
- * Set the title of the current HTML document.
- * @param newTitle
- */
- setTitle(newTitle: string): void;
-
- }
-
-
- class DirectiveResolver {
-
- /**
- * Return {@link DirectiveMetadata} for a given `Type`.
- */
- resolve(type: Type): DirectiveMetadata;
-
- }
-
-
- /**
- * Low-level service for compiling {@link Component}s into {@link ProtoViewRef ProtoViews}s, which
- * can later be used to create and render a Component instance.
- *
- * Most applications should instead use higher-level {@link DynamicComponentLoader} service, which
- * both compiles and instantiates a Component.
- */
- interface Compiler {
-
- compileInHost(componentType: Type): Promise<ProtoViewRef>;
-
- clearCache(): void;
-
- }
-
-
- /**
- * Service exposing low level API for creating, moving and destroying Views.
- *
- * Most applications should use higher-level abstractions like {@link DynamicComponentLoader} and
- * {@link ViewContainerRef} instead.
- */
- interface AppViewManager {
-
- /**
- * Returns a {@link ViewContainerRef} of the View Container at the specified location.
- */
- getViewContainer(location: ElementRef): ViewContainerRef;
-
- /**
- * Returns the {@link ElementRef} that makes up the specified Host View.
- */
- getHostElement(hostViewRef: HostViewRef): ElementRef;
-
- /**
- * Searches the Component View of the Component specified via `hostLocation` and returns the
- * {@link ElementRef} for the Element identified via a Variable Name `variableName`.
- *
- * Throws an exception if the specified `hostLocation` is not a Host Element of a Component, or if
- * variable `variableName` couldn't be found in the Component View of this Component.
- */
- getNamedElementInComponentView(hostLocation: ElementRef, variableName: string): ElementRef;
-
- /**
- * Returns the component instance for the provided Host Element.
- */
- getComponent(hostLocation: ElementRef): any;
-
- /**
- * Creates an instance of a Component and attaches it to the first element in the global View
- * (usually DOM Document) that matches the component's selector or `overrideSelector`.
- *
- * This as a low-level way to bootstrap an application and upgrade an existing Element to a
- * Host Element. Most applications should use {@link DynamicComponentLoader#loadAsRoot} instead.
- *
- * The Component and its View are created based on the `hostProtoViewRef` which can be obtained
- * by compiling the component with {@link Compiler#compileInHost}.
- *
- * Use {@link AppViewManager#destroyRootHostView} to destroy the created Component and it's Host
- * View.
- *
- * ## Example
- *
- * ```
- * @ng.Component({
- * selector: 'child-component'
- * })
- * @ng.View({
- * template: 'Child'
- * })
- * class ChildComponent {
- *
- * }
- *
- * @ng.Component({
- * selector: 'my-app'
- * })
- * @ng.View({
- * template: `
- * Parent (<some-component></some-component>)
- * `
- * })
- * class MyApp {
- * viewRef: ng.ViewRef;
- *
- * constructor(public appViewManager: ng.AppViewManager, compiler: ng.Compiler) {
- * compiler.compileInHost(ChildComponent).then((protoView: ng.ProtoViewRef) => {
- * this.viewRef = appViewManager.createRootHostView(protoView, 'some-component', null);
- * })
- * }
- *
- * onDestroy() {
- * this.appViewManager.destroyRootHostView(this.viewRef);
- * this.viewRef = null;
- * }
- * }
- *
- * ng.bootstrap(MyApp);
- * ```
- */
- createRootHostView(hostProtoViewRef: ProtoViewRef, overrideSelector: string, injector: Injector): HostViewRef;
-
- /**
- * Destroys the Host View created via {@link AppViewManager#createRootHostView}.
- *
- * Along with the Host View, the Component Instance as well as all nested View and Components are
- * destroyed as well.
- */
- destroyRootHostView(hostViewRef: HostViewRef): void;
-
- /**
- * Instantiates an Embedded View based on the {@link TemplateRef `templateRef`} and inserts it
- * into the View Container specified via `viewContainerLocation` at the specified `index`.
- *
- * Returns the {@link ViewRef} for the newly created View.
- *
- * This as a low-level way to create and attach an Embedded via to a View Container. Most
- * applications should used {@link ViewContainerRef#createEmbeddedView} instead.
- *
- * Use {@link AppViewManager#destroyViewInContainer} to destroy the created Embedded View.
- */
- createEmbeddedViewInContainer(viewContainerLocation: ElementRef, index: number, templateRef: TemplateRef): ViewRef;
-
- /**
- * Instantiates a single {@link Component} and inserts its Host View into the View Container
- * found at `viewContainerLocation`. Within the container, the view will be inserted at position
- * specified via `index`.
- *
- * The component is instantiated using its {@link ProtoViewRef `protoViewRef`} which can be
- * obtained via {@link Compiler#compileInHost}.
- *
- * You can optionally specify `imperativelyCreatedInjector`, which configure the {@link Injector}
- * that will be created for the Host View.
- *
- * Returns the {@link HostViewRef} of the Host View created for the newly instantiated Component.
- *
- * Use {@link AppViewManager#destroyViewInContainer} to destroy the created Host View.
- */
- createHostViewInContainer(viewContainerLocation: ElementRef, index: number, protoViewRef: ProtoViewRef, imperativelyCreatedInjector: ResolvedBinding[]): HostViewRef;
-
- /**
- * Destroys an Embedded or Host View attached to a View Container at the specified `index`.
- *
- * The View Container is located via `viewContainerLocation`.
- */
- destroyViewInContainer(viewContainerLocation: ElementRef, index: number): void;
-
- /**
- * See {@link AppViewManager#detachViewInContainer}.
- */
- attachViewInContainer(viewContainerLocation: ElementRef, index: number, viewRef: ViewRef): ViewRef;
-
- /**
- * See {@link AppViewManager#attachViewInContainer}.
- */
- detachViewInContainer(viewContainerLocation: ElementRef, index: number): ViewRef;
-
- }
-
-
- /**
- * An unmodifiable list of items that Angular keeps up to date when the state
- * of the application changes.
- *
- * The type of object that {@link QueryMetadata} and {@link ViewQueryMetadata} provide.
- *
- * Implements an iterable interface, therefore it can be used in both ES6
- * javascript `for (var i of items)` loops as well as in Angular templates with
- * `*ng-for="#i of myList"`.
- *
- * Changes can be observed by subscribing to the changes `Observable`.
- *
- * NOTE: In the future this class will implement an `Observable` interface.
- *
- * ### Example ([live demo](http://plnkr.co/edit/RX8sJnQYl9FWuSCWme5z?p=preview))
- * ```javascript
- * @Component({...})
- * class Container {
- * constructor(@Query(Item) items: QueryList<Item>) {
- * items.changes.subscribe(_ => console.log(items.length));
- * }
- * }
- * ```
- */
- class QueryList<T> {
-
- changes: Observable;
-
- length: number;
-
- first: T;
-
- last: T;
-
- /**
- * returns a new list with the passsed in function applied to each element.
- */
- map<U>(fn: (item: T) => U): U[];
-
- toString(): string;
-
- }
-
-
- /**
- * Service for instantiating a Component and attaching it to a View at a specified location.
- */
- interface DynamicComponentLoader {
-
- /**
- * Creates an instance of a Component `type` and attaches it to the first element in the
- * platform-specific global view that matches the component's selector.
- *
- * In a browser the platform-specific global view is the main DOM Document.
- *
- * If needed, the component's selector can be overridden via `overrideSelector`.
- *
- * You can optionally provide `injector` and this {@link Injector} will be used to instantiate the
- * Component.
- *
- * To be notified when this Component instance is destroyed, you can also optionally provide
- * `onDispose` callback.
- *
- * Returns a promise for the {@link ComponentRef} representing the newly created Component.
- *
- *
- * ## Example
- *
- * ```
- * @ng.Component({
- * selector: 'child-component'
- * })
- * @ng.View({
- * template: 'Child'
- * })
- * class ChildComponent {
- * }
- *
- *
- *
- * @ng.Component({
- * selector: 'my-app'
- * })
- * @ng.View({
- * template: `
- * Parent (<child id="child"></child>)
- * `
- * })
- * class MyApp {
- * constructor(dynamicComponentLoader: ng.DynamicComponentLoader, injector: ng.Injector) {
- * dynamicComponentLoader.loadAsRoot(ChildComponent, '#child', injector);
- * }
- * }
- *
- * ng.bootstrap(MyApp);
- * ```
- *
- * Resulting DOM:
- *
- * ```
- * <my-app>
- * Parent (
- * <child id="child">
- * Child
- * </child>
- * )
- * </my-app>
- * ```
- */
- loadAsRoot(type: Type, overrideSelector: string, injector: Injector, onDispose?: () => void): Promise<ComponentRef>;
-
- /**
- * Creates an instance of a Component and attaches it to a View Container located inside of the
- * Component View of another Component instance.
- *
- * The targeted Component Instance is specified via its `hostLocation` {@link ElementRef}. The
- * location within the Component View of this Component Instance is specified via `anchorName`
- * Template Variable Name.
- *
- * You can optionally provide `bindings` to configure the {@link Injector} provisioned for this
- * Component Instance.
- *
- * Returns a promise for the {@link ComponentRef} representing the newly created Component.
- *
- *
- * ## Example
- *
- * ```
- * @ng.Component({
- * selector: 'child-component'
- * })
- * @ng.View({
- * template: 'Child'
- * })
- * class ChildComponent {
- * }
- *
- *
- * @ng.Component({
- * selector: 'my-app'
- * })
- * @ng.View({
- * template: `
- * Parent (<div #child></div>)
- * `
- * })
- * class MyApp {
- * constructor(dynamicComponentLoader: ng.DynamicComponentLoader, elementRef: ng.ElementRef) {
- * dynamicComponentLoader.loadIntoLocation(ChildComponent, elementRef, 'child');
- * }
- * }
- *
- * ng.bootstrap(MyApp);
- * ```
- *
- * Resulting DOM:
- *
- * ```
- * <my-app>
- * Parent (
- * <div #child="" class="ng-binding"></div>
- * <child-component class="ng-binding">Child</child-component>
- * )
- * </my-app>
- * ```
- */
- loadIntoLocation(type: Type, hostLocation: ElementRef, anchorName: string, bindings?: ResolvedBinding[]): Promise<ComponentRef>;
-
- /**
- * Creates an instance of a Component and attaches it to the View Container found at the
- * `location` specified as {@link ElementRef}.
- *
- * You can optionally provide `bindings` to configure the {@link Injector} provisioned for this
- * Component Instance.
- *
- * Returns a promise for the {@link ComponentRef} representing the newly created Component.
- *
- *
- * ## Example
- *
- * ```
- * @ng.Component({
- * selector: 'child-component'
- * })
- * @ng.View({
- * template: 'Child'
- * })
- * class ChildComponent {
- * }
- *
- *
- * @ng.Component({
- * selector: 'my-app'
- * })
- * @ng.View({
- * template: `Parent`
- * })
- * class MyApp {
- * constructor(dynamicComponentLoader: ng.DynamicComponentLoader, elementRef: ng.ElementRef) {
- * dynamicComponentLoader.loadNextToLocation(ChildComponent, elementRef);
- * }
- * }
- *
- * ng.bootstrap(MyApp);
- * ```
- *
- * Resulting DOM:
- *
- * ```
- * <my-app>Parent</my-app>
- * <child-component>Child</child-component>
- * ```
- */
- loadNextToLocation(type: Type, location: ElementRef, bindings?: ResolvedBinding[]): Promise<ComponentRef>;
-
- }
-
-
- /**
- * Represents a location in a View that has an injection, change-detection and render context
- * associated with it.
- *
- * An `ElementRef` is created for each element in the Template that contains a Directive, Component
- * or data-binding.
- *
- * An `ElementRef` is backed by a render-specific element. In the browser, this is usually a DOM
- * element.
- */
- interface ElementRef extends RenderElementRef {
-
- /**
- * The underlying native element or `null` if direct access to native elements is not supported
- * (e.g. when the application runs in a web worker).
- *
- * <div class="callout is-critical">
- * <header>Use with caution</header>
- * <p>
- * Use this API as the last resort when direct access to DOM is needed. Use templating and
- * data-binding provided by Angular instead. Alternatively you take a look at {@link Renderer}
- * which provides API that can safely be used even when direct access to native elements is not
- * supported.
- * </p>
- * <p>
- * Relying on direct DOM access creates tight coupling between your application and rendering
- * layers which will make it impossible to separate the two and deploy your application into a
- * web worker.
- * </p>
- * </div>
- */
- nativeElement: any;
-
- }
-
-
- /**
- * Represents an Embedded Template that can be used to instantiate Embedded Views.
- *
- * You can access a `TemplateRef`, in two ways. Via a directive placed on a `<template>` element (or
- * directive prefixed with `*`) and have the `TemplateRef` for this Embedded View injected into the
- * constructor of the directive using the `TemplateRef` Token. Alternatively you can query for the
- * `TemplateRef` from a Component or a Directive via {@link Query}.
- *
- * To instantiate Embedded Views based on a Template, use
- * {@link ViewContainerRef#createEmbeddedView}, which will create the View and attach it to the
- * View Container.
- */
- interface TemplateRef {
-
- /**
- * The location in the View where the Embedded View logically belongs to.
- *
- * The data-binding and injection contexts of Embedded Views created from this `TemplateRef`
- * inherit from the contexts of this location.
- *
- * Typically new Embedded Views are attached to the View Container of this location, but in
- * advanced use-cases, the View can be attached to a different container while keeping the
- * data-binding and injection context from the original location.
- */
- elementRef: ElementRef;
-
- /**
- * Allows you to check if this Embedded Template defines Local Variable with name matching `name`.
- */
- hasLocal(name: string): boolean;
-
- }
-
-
- /**
- * Represents an Angular View.
- *
- * <!-- TODO: move the next two paragraphs to the dev guide -->
- * A View is a fundamental building block of the application UI. It is the smallest grouping of
- * Elements which are created and destroyed together.
- *
- * Properties of elements in a View can change, but the structure (number and order) of elements in
- * a View cannot. Changing the structure of Elements can only be done by inserting, moving or
- * removing nested Views via a {@link ViewContainer}. Each View can contain many View Containers.
- * <!-- /TODO -->
- *
- * ## Example
- *
- * Given this template...
- *
- * ```
- * Count: {{items.length}}
- * <ul>
- * <li *ng-for="var item of items">{{item}}</li>
- * </ul>
- * ```
- *
- * ... we have two {@link ProtoViewRef}s:
- *
- * Outer {@link ProtoViewRef}:
- * ```
- * Count: {{items.length}}
- * <ul>
- * <template ng-for var-item [ng-for-of]="items"></template>
- * </ul>
- * ```
- *
- * Inner {@link ProtoViewRef}:
- * ```
- * <li>{{item}}</li>
- * ```
- *
- * Notice that the original template is broken down into two separate {@link ProtoViewRef}s.
- *
- * The outer/inner {@link ProtoViewRef}s are then assembled into views like so:
- *
- * ```
- * <!-- ViewRef: outer-0 -->
- * Count: 2
- * <ul>
- * <template view-container-ref></template>
- * <!-- ViewRef: inner-1 --><li>first</li><!-- /ViewRef: inner-1 -->
- * <!-- ViewRef: inner-2 --><li>second</li><!-- /ViewRef: inner-2 -->
- * </ul>
- * <!-- /ViewRef: outer-0 -->
- * ```
- */
- interface ViewRef extends HostViewRef {
-
- /**
- * Sets `value` of local variable called `variableName` in this View.
- */
- setLocal(variableName: string, value: any): void;
-
- }
-
-
- /**
- * Represents a View containing a single Element that is the Host Element of a {@link Component}
- * instance.
- *
- * A Host View is created for every dynamically created Component that was compiled on its own (as
- * opposed to as a part of another Component's Template) via {@link Compiler#compileInHost} or one
- * of the higher-level APIs: {@link AppViewManager#createRootHostView},
- * {@link AppViewManager#createHostViewInContainer}, {@link ViewContainerRef#createHostView}.
- */
- interface HostViewRef {
-
- }
-
-
- /**
- * Represents an Angular ProtoView.
- *
- * A ProtoView is a prototypical {@link ViewRef View} that is the result of Template compilation and
- * is used by Angular to efficiently create an instance of this View based on the compiled Template.
- *
- * Most ProtoViews are created and used internally by Angular and you don't need to know about them,
- * except in advanced use-cases where you compile components yourself via the low-level
- * {@link Compiler#compileInHost} API.
- *
- *
- * ## Example
- *
- * Given this template:
- *
- * ```
- * Count: {{items.length}}
- * <ul>
- * <li *ng-for="var item of items">{{item}}</li>
- * </ul>
- * ```
- *
- * Angular desugars and compiles the template into two ProtoViews:
- *
- * Outer ProtoView:
- * ```
- * Count: {{items.length}}
- * <ul>
- * <template ng-for var-item [ng-for-of]="items"></template>
- * </ul>
- * ```
- *
- * Inner ProtoView:
- * ```
- * <li>{{item}}</li>
- * ```
- *
- * Notice that the original template is broken down into two separate ProtoViews.
- */
- interface ProtoViewRef {
-
- }
-
-
- /**
- * Represents a container where one or more Views can be attached.
- *
- * The container can contain two kinds of Views. Host Views, created by instantiating a
- * {@link Component} via {@link #createHostView}, and Embedded Views, created by instantiating an
- * {@link TemplateRef Embedded Template} via {@link #createEmbeddedView}.
- *
- * The location of the View Container within the containing View is specified by the Anchor
- * `element`. Each View Container can have only one Anchor Element and each Anchor Element can only
- * have a single View Container.
- *
- * Root elements of Views attached to this container become siblings of the Anchor Element in
- * the Rendered View.
- *
- * To access a `ViewContainerRef` of an Element, you can either place a {@link Directive} injected
- * with `ViewContainerRef` on the Element, or you obtain it via
- * {@link AppViewManager#getViewContainer}.
- *
- * <!-- TODO(i): we are also considering ElementRef#viewContainer api -->
- */
- interface ViewContainerRef {
-
- /**
- * Anchor element that specifies the location of this container in the containing View.
- * <!-- TODO: rename to anchorElement -->
- */
- element: ElementRef;
-
- /**
- * Destroys all Views in this container.
- */
- clear(): void;
-
- /**
- * Returns the {@link ViewRef} for the View located in this container at the specified index.
- */
- get(index: number): ViewRef;
-
- /**
- * Returns the number of Views currently attached to this container.
- */
- length: number;
-
- /**
- * Instantiates an Embedded View based on the {@link TemplateRef `templateRef`} and inserts it
- * into this container at the specified `index`.
- *
- * If `index` is not specified, the new View will be inserted as the last View in the container.
- *
- * Returns the {@link ViewRef} for the newly created View.
- */
- createEmbeddedView(templateRef: TemplateRef, index?: number): ViewRef;
-
- /**
- * Instantiates a single {@link Component} and inserts its Host View into this container at the
- * specified `index`.
- *
- * The component is instantiated using its {@link ProtoViewRef `protoView`} which can be
- * obtained via {@link Compiler#compileInHost}.
- *
- * If `index` is not specified, the new View will be inserted as the last View in the container.
- *
- * You can optionally specify `dynamicallyCreatedBindings`, which configure the {@link Injector}
- * that will be created for the Host View.
- *
- * Returns the {@link HostViewRef} of the Host View created for the newly instantiated Component.
- */
- createHostView(protoViewRef?: ProtoViewRef, index?: number, dynamicallyCreatedBindings?: ResolvedBinding[]): HostViewRef;
-
- /**
- * Inserts a View identified by a {@link ViewRef} into the container at the specified `index`.
- *
- * If `index` is not specified, the new View will be inserted as the last View in the container.
- *
- * Returns the inserted {@link ViewRef}.
- */
- insert(viewRef: ViewRef, index?: number): ViewRef;
-
- /**
- * Returns the index of the View, specified via {@link ViewRef}, within the current container or
- * `-1` if this container doesn't contain the View.
- */
- indexOf(viewRef: ViewRef): number;
-
- /**
- * Destroys a View attached to this container at the specified `index`.
- *
- * If `index` is not specified, the last View in the container will be removed.
- */
- remove(index?: number): void;
-
- /**
- * Use along with {@link #insert} to move a View within the current container.
- *
- * If the `index` param is omitted, the last {@link ViewRef} is detached.
- */
- detach(index?: number): ViewRef;
-
- }
-
-
- /**
- * Represents an instance of a Component created via {@link DynamicComponentLoader}.
- *
- * `ComponentRef` provides access to the Component Instance as well other objects related to this
- * Component Instance and allows you to destroy the Component Instance via the {@link #dispose}
- * method.
- */
- interface ComponentRef {
-
- /**
- * Location of the Host Element of this Component Instance.
- */
- location: ElementRef;
-
- /**
- * The instance of the Component.
- */
- instance: any;
-
- /**
- * The user defined component type, represented via the constructor function.
- *
- * <!-- TODO: customize wording for Dart docs -->
- */
- componentType: Type;
-
- /**
- * The {@link ViewRef} of the Host View of this Component instance.
- */
- hostView: HostViewRef;
-
- /**
- * Destroys the component instance and all of the data structures associated with it.
- *
- * TODO(i): rename to destroy to be consistent with AppViewManager and ViewContainerRef
- */
- dispose(): void;
-
- }
-
-
- /**
- * Provides access to explicitly trigger change detection in an application.
- *
- * By default, `Zone` triggers change detection in Angular on each virtual machine (VM) turn. When
- * testing, or in some
- * limited application use cases, a developer can also trigger change detection with the
- * `lifecycle.tick()` method.
- *
- * Each Angular application has a single `LifeCycle` instance.
- *
- * # Example
- *
- * This is a contrived example, since the bootstrap automatically runs inside of the `Zone`, which
- * invokes
- * `lifecycle.tick()` on your behalf.
- *
- * ```javascript
- * bootstrap(MyApp).then((ref:ComponentRef) => {
- * var lifeCycle = ref.injector.get(LifeCycle);
- * var myApp = ref.instance;
- *
- * ref.doSomething();
- * lifecycle.tick();
- * });
- * ```
- */
- interface LifeCycle {
-
- /**
- * Invoke this method to explicitly process change detection and its side-effects.
- *
- * In development mode, `tick()` also performs a second change detection cycle to ensure that no
- * further
- * changes are detected. If additional changes are picked up during this second cycle, bindings
- * in
- * the app have
- * side-effects that cannot be resolved in a single change detection pass. In this case, Angular
- * throws an error,
- * since an Angular application can only have one change detection pass during which all change
- * detection must
- * complete.
- */
- tick(): void;
-
- }
-
-
- /**
- * An injectable service for executing work inside or outside of the Angular zone.
- *
- * The most common use of this service is to optimize performance when starting a work consisting of
- * one or more asynchronous tasks that don't require UI updates or error handling to be handled by
- * Angular. Such tasks can be kicked off via {@link #runOutsideAngular} and if needed, these tasks
- * can reenter the Angular zone via {@link #run}.
- *
- * <!-- TODO: add/fix links to:
- * - docs explaining zones and the use of zones in Angular and change-detection
- * - link to runOutsideAngular/run (throughout this file!)
- * -->
- *
- * ### Example ([live demo](http://plnkr.co/edit/lY9m8HLy7z06vDoUaSN2?p=preview))
- * ```
- * import {Component, View, NgIf, NgZone} from 'angular2/angular2';
- *
- * @Component({
- * selector: 'ng-zone-demo'
- * })
- * @View({
- * template: `
- * <h2>Demo: NgZone</h2>
- *
- * <p>Progress: {{progress}}%</p>
- * <p *ng-if="progress >= 100">Done processing {{label}} of Angular zone!</p>
- *
- * <button (click)="processWithinAngularZone()">Process within Angular zone</button>
- * <button (click)="processOutsideOfAngularZone()">Process outside of Angular zone</button>
- * `,
- * directives: [NgIf]
- * })
- * export class NgZoneDemo {
- * progress: number = 0;
- * label: string;
- *
- * constructor(private _ngZone: NgZone) {}
- *
- * // Loop inside the Angular zone
- * // so the UI DOES refresh after each setTimeout cycle
- * processWithinAngularZone() {
- * this.label = 'inside';
- * this.progress = 0;
- * this._increaseProgress(() => console.log('Inside Done!'));
- * }
- *
- * // Loop outside of the Angular zone
- * // so the UI DOES NOT refresh after each setTimeout cycle
- * processOutsideOfAngularZone() {
- * this.label = 'outside';
- * this.progress = 0;
- * this._ngZone.runOutsideAngular(() => {
- * this._increaseProgress(() => {
- * // reenter the Angular zone and display done
- * this._ngZone.run(() => {console.log('Outside Done!') });
- * }}));
- * }
- *
- *
- * _increaseProgress(doneCallback: () => void) {
- * this.progress += 1;
- * console.log(`Current progress: ${this.progress}%`);
- *
- * if (this.progress < 100) {
- * window.setTimeout(() => this._increaseProgress(doneCallback)), 10)
- * } else {
- * doneCallback();
- * }
- * }
- * }
- * ```
- */
- interface NgZone {
-
- /**
- * Executes the `fn` function synchronously within the Angular zone and returns value returned by
- * the function.
- *
- * Running functions via `run` allows you to reenter Angular zone from a task that was executed
- * outside of the Angular zone (typically started via {@link #runOutsideAngular}).
- *
- * Any future tasks or microtasks scheduled from within this function will continue executing from
- * within the Angular zone.
- */
- run(fn: () => any): any;
-
- /**
- * Executes the `fn` function synchronously in Angular's parent zone and returns value returned by
- * the function.
- *
- * Running functions via `runOutsideAngular` allows you to escape Angular's zone and do work that
- * doesn't trigger Angular change-detection or is subject to Angular's error handling.
- *
- * Any future tasks or microtasks scheduled from within this function will continue executing from
- * outside of the Angular zone.
- *
- * Use {@link #run} to reenter the Angular zone and do work that updates the application model.
- */
- runOutsideAngular(fn: () => any): any;
-
- }
-
-
- /**
- * Adds and removes CSS classes based on an {expression} value.
- *
- * The result of expression is used to add and remove CSS classes using the following logic,
- * based on expression's value type:
- * - {string} - all the CSS classes (space - separated) are added
- * - {Array} - all the CSS classes (Array elements) are added
- * - {Object} - each key corresponds to a CSS class name while values
- * are interpreted as {boolean} expression. If a given expression
- * evaluates to {true} a corresponding CSS class is added - otherwise
- * it is removed.
- *
- * # Example:
- *
- * ```
- * <div class="message" [ng-class]="{error: errorCount > 0}">
- * Please check errors.
- * </div>
- * ```
- */
- class NgClass implements DoCheck, OnDestroy {
-
- constructor(_iterableDiffers: IterableDiffers, _keyValueDiffers: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer);
-
- initialClasses: any;
-
- rawClass: any;
-
- doCheck(): void;
-
- onDestroy(): void;
-
- }
-
-
- /**
- * 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, and also to alias the 'last' to a local variable that will
- * be set to a boolean indicating if the item is the last one in the iteration
- *
- * 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>`
- */
- class NgFor implements DoCheck {
-
- constructor(_viewContainer: ViewContainerRef, _templateRef: TemplateRef, _iterableDiffers: IterableDiffers, _cdr: ChangeDetectorRef);
-
- ngForOf: any;
-
- doCheck(): void;
-
- }
-
-
- /**
- * 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 ([live demo](http://plnkr.co/edit/fe0kgemFBtmQOY31b4tw?p=preview)):
- *
- * ```
- * <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>`
- */
- class NgIf {
-
- constructor(_viewContainer: ViewContainerRef, _templateRef: TemplateRef);
-
- ngIf: any;
-
- }
-
-
- /**
- * Adds or removes styles based on an {expression}.
- *
- * When the expression assigned to `ng-style` evaluates to an object, the corresponding element
- * styles are updated. Style names to update are taken from the object keys and values - from the
- * corresponding object values.
- *
- * # Example:
- *
- * ```
- * <div [ng-style]="{'text-align': alignExp}"></div>
- * ```
- *
- * In the above example the `text-align` style will be updated based on the `alignExp` value
- * changes.
- *
- * # Syntax
- *
- * - `<div [ng-style]="{'text-align': alignExp}"></div>`
- * - `<div [ng-style]="styleExp"></div>`
- */
- class NgStyle implements DoCheck {
-
- constructor(_differs: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer);
-
- rawStyle: any;
-
- doCheck(): void;
-
- }
-
-
- /**
- * 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>
- * ```
- */
- class NgSwitch {
-
- ngSwitch: any;
-
- }
-
-
- /**
- * 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>
- * ```
- */
- class NgSwitchWhen {
-
- constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef, _switch: NgSwitch);
-
- ngSwitchWhen: any;
-
- }
-
-
- /**
- * Defines a default case statement.
- *
- * Default case statements are displayed when no `NgSwitchWhen` match the `ng-switch` value.
- *
- * Example:
- *
- * ```
- * <template ng-switch-default>...</template>
- * ```
- */
- class NgSwitchDefault {
-
- constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef, sswitch: NgSwitch);
-
- }
-
-
- /**
- * A collection of 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 `directives`
- * property of the `@View` annotation.
- *
- * ### Example ([live demo](http://plnkr.co/edit/yakGwpCdUkg0qfzX5m8g?p=preview))
- *
- * Instead of writing:
- *
- * ```typescript
- * import {NgClass, NgIf, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/angular2';
- * import {OtherDirective} from './myDirectives';
- *
- * @Component({
- * selector: 'my-component'
- * })
- * @View({
- * templateUrl: 'myComponent.html',
- * directives: [NgClass, NgIf, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault, OtherDirective]
- * })
- * export class MyComponent {
- * ...
- * }
- * ```
- * one could import all the core directives at once:
- *
- * ```typescript
- * import {CORE_DIRECTIVES} from 'angular2/angular2';
- * import {OtherDirective} from './myDirectives';
- *
- * @Component({
- * selector: 'my-component'
- * })
- * @View({
- * templateUrl: 'myComponent.html',
- * directives: [CORE_DIRECTIVES, OtherDirective]
- * })
- * export class MyComponent {
- * ...
- * }
- * ```
- */
- let CORE_DIRECTIVES: Type[];
-
-
-
- /**
- * Omitting from external API doc as this is really an abstract internal concept.
- */
- class AbstractControl {
-
- constructor(validator: Function);
-
- validator: Function;
-
- value: any;
-
- status: string;
-
- valid: boolean;
-
- errors: {[key: string]: any};
-
- pristine: boolean;
-
- dirty: boolean;
-
- touched: boolean;
-
- untouched: boolean;
-
- valueChanges: Observable;
-
- markAsTouched(): void;
-
- markAsDirty({onlySelf}?: {onlySelf?: boolean}): void;
-
- setParent(parent: ControlGroup | ControlArray): void;
-
- updateValidity({onlySelf}?: {onlySelf?: boolean}): void;
-
- updateValueAndValidity({onlySelf, emitEvent}?: {onlySelf?: boolean, emitEvent?: boolean}): void;
-
- find(path: Array<string | number>| string): AbstractControl;
-
- getError(errorCode: string, path?: string[]): any;
-
- hasError(errorCode: string, path?: string[]): boolean;
-
- }
-
-
- /**
- * Defines a part of a form that cannot be divided into other controls. `Control`s have values and
- * validation state, which is determined by an optional validation function.
- *
- * `Control` is one of the three fundamental building blocks used to define forms in Angular, along
- * with {@link ControlGroup} and {@link ControlArray}.
- *
- * # Usage
- *
- * By default, a `Control` is created for every `<input>` or other form component.
- * With {@link NgFormControl} or {@link NgFormModel} an existing {@link Control} can be
- * bound to a DOM element instead. This `Control` can be configured with a custom
- * validation function.
- *
- * ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
- */
- class Control extends AbstractControl {
-
- constructor(value?: any, validator?: Function);
-
- /**
- * Set the value of the control to `value`.
- *
- * If `onlySelf` is `true`, this change will only affect the validation of this `Control`
- * and not its parent component. If `emitEvent` is `true`, this change will cause a
- * `valueChanges` event on the `Control` to be emitted. Both of these options default to
- * `false`.
- *
- * If `emitModelToViewChange` is `true`, the view will be notified about the new value
- * via an `onChange` event. This is the default behavior if `emitModelToViewChange` is not
- * specified.
- */
- updateValue(value: any, {onlySelf, emitEvent, emitModelToViewChange}?:
- {onlySelf?: boolean, emitEvent?: boolean, emitModelToViewChange?: boolean}): void;
-
- /**
- * Register a listener for change events.
- */
- registerOnChange(fn: Function): void;
-
- }
-
-
- /**
- * Defines a part of a form, of fixed length, that can contain other controls.
- *
- * A `ControlGroup` aggregates the values and errors of each {@link Control} 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 {@link Control} and {@link ControlArray}. {@link ControlArray} can also contain other
- * controls, but is of variable length.
- *
- * ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
- */
- class ControlGroup extends AbstractControl {
-
- constructor(controls: {[key: string]: AbstractControl}, optionals?: {[key: string]: boolean}, validator?: Function);
-
- controls: {[key: string]: AbstractControl};
-
- addControl(name: string, control: AbstractControl): void;
-
- removeControl(name: string): void;
-
- include(controlName: string): void;
-
- exclude(controlName: string): void;
-
- contains(controlName: string): boolean;
-
- }
-
-
- /**
- * Defines a part of a form, of variable length, that can contain other controls.
- *
- * A `ControlArray` aggregates the values and errors of each {@link Control} 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 {@link Control} and {@link ControlGroup}. {@link ControlGroup} can also contain
- * other controls, but is of fixed length.
- *
- * # Adding or removing controls
- *
- * To change the controls in the array, use the `push`, `insert`, or `removeAt` methods
- * in `ControlArray` itself. These methods ensure the controls are properly tracked in the
- * form's hierarchy. Do not modify the array of `AbstractControl`s used to instantiate
- * the `ControlArray` directly, as that will result in strange and unexpected behavior such
- * as broken change detection.
- *
- * ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
- */
- class ControlArray extends AbstractControl {
-
- constructor(controls: AbstractControl[], validator?: Function);
-
- controls: AbstractControl[];
-
- /**
- * Get the {@link AbstractControl} at the given `index` in the array.
- */
- at(index: number): AbstractControl;
-
- /**
- * Insert a new {@link AbstractControl} at the end of the array.
- */
- push(control: AbstractControl): void;
-
- /**
- * Insert a new {@link AbstractControl} at the given `index` in the array.
- */
- insert(index: number, control: AbstractControl): void;
-
- /**
- * Remove the control at the given `index` in the array.
- */
- removeAt(index: number): void;
-
- /**
- * Get the length of the control array.
- */
- length: number;
-
- }
-
-
- class AbstractControlDirective {
-
- control: AbstractControl;
-
- value: any;
-
- valid: boolean;
-
- errors: {[key: string]: any};
-
- pristine: boolean;
-
- dirty: boolean;
-
- touched: boolean;
-
- untouched: boolean;
-
- }
-
-
- /**
- * An interface that {@link NgFormModel} and {@link NgForm} implement.
- *
- * Only used by the forms module.
- */
- interface Form {
-
- addControl(dir: NgControl): void;
-
- removeControl(dir: NgControl): void;
-
- getControl(dir: NgControl): Control;
-
- addControlGroup(dir: NgControlGroup): void;
-
- removeControlGroup(dir: NgControlGroup): void;
-
- getControlGroup(dir: NgControlGroup): ControlGroup;
-
- updateModel(dir: NgControl, value: any): void;
-
- }
-
-
- /**
- * A directive that contains multiple {@link NgControl}.
- *
- * Only used by the forms module.
- */
- class ControlContainer extends AbstractControlDirective {
-
- name: string;
-
- formDirective: Form;
-
- path: string[];
-
- }
-
-
- /**
- * Creates and binds a control with a specified name to a DOM element.
- *
- * This directive can only be used as a child of {@link NgForm} or {@link NgFormModel}.
- *
- * # Example
- *
- * In this example, we create the login and password controls.
- * We can work with each control separately: check its validity, get its value, listen to its
- * changes.
- *
- * ```
- * @Component({selector: "login-comp"})
- * @View({
- * directives: [FORM_DIRECTIVES],
- * template: `
- * <form #f="form" (submit)='onLogIn(f.value)'>
- * Login <input type='text' ng-control='login' #l="form">
- * <div *ng-if="!l.valid">Login is invalid</div>
- *
- * Password <input type='password' ng-control='password'>
- * <button type='submit'>Log in!</button>
- * </form>
- * `})
- * class LoginComp {
- * onLogIn(value): void {
- * // value === {login: 'some login', password: 'some password'}
- * }
- * }
- * ```
- *
- * We can also use ng-model to bind a domain model to the form.
- *
- * ```
- * @Component({selector: "login-comp"})
- * @View({
- * directives: [FORM_DIRECTIVES],
- * template: `
- * <form (submit)='onLogIn()'>
- * Login <input type='text' ng-control='login' [(ng-model)]="credentials.login">
- * Password <input type='password' ng-control='password'
- * [(ng-model)]="credentials.password">
- * <button type='submit'>Log in!</button>
- * </form>
- * `})
- * class LoginComp {
- * credentials: {login:string, password:string};
- *
- * onLogIn(): void {
- * // this.credentials.login === "some login"
- * // this.credentials.password === "some password"
- * }
- * }
- * ```
- */
- class NgControlName extends NgControl implements OnChanges,
- OnDestroy {
-
- constructor(parent: ControlContainer, validators: Function[], valueAccessors: ControlValueAccessor[]);
-
- update: any;
-
- model: any;
-
- viewModel: any;
-
- validators: Function[];
-
- onChanges(changes: {[key: string]: SimpleChange}): void;
-
- onDestroy(): void;
-
- viewToModelUpdate(newValue: any): void;
-
- path: string[];
-
- formDirective: any;
-
- control: Control;
-
- validator: Function;
-
- }
-
-
- /**
- * Binds an existing {@link Control} to a DOM element.
- *
- * ### Example ([live demo](http://plnkr.co/edit/jcQlZ2tTh22BZZ2ucNAT?p=preview))
- *
- * 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.
- *
- * ```typescript
- * @Component({
- * selector: 'my-app'
- * })
- * @View({
- * template: `
- * <div>
- * <h2>NgFormControl Example</h2>
- * <form>
- * <p>Element with existing control: <input type="text"
- * [ng-form-control]="loginControl"></p>
- * <p>Value of existing control: {{loginControl.value}}</p>
- * </form>
- * </div>
- * `,
- * directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
- * })
- * export class App {
- * loginControl: Control = new Control('');
- * }
- * ```
- *
- * # ng-model
- *
- * We can also use `ng-model` to bind a domain model to the form.
- *
- * ### Example ([live demo](http://plnkr.co/edit/yHMLuHO7DNgT8XvtjTDH?p=preview))
- *
- * ```typescript
- * @Component({selector: "login-comp"})
- * @View({
- * directives: [FORM_DIRECTIVES],
- * template: "<input type='text' [ng-form-control]='loginControl' [(ng-model)]='login'>"
- * })
- * class LoginComp {
- * loginControl: Control = new Control('');
- * login:string;
- * }
- * ```
- */
- class NgFormControl extends NgControl implements OnChanges {
-
- constructor(validators: Function[], valueAccessors: ControlValueAccessor[]);
-
- form: Control;
-
- update: any;
-
- model: any;
-
- viewModel: any;
-
- validators: Function[];
-
- onChanges(changes: {[key: string]: SimpleChange}): void;
-
- path: string[];
-
- control: Control;
-
- validator: Function;
-
- viewToModelUpdate(newValue: any): void;
-
- }
-
-
- /**
- * Binds a domain model to a form control.
- *
- * # Usage
- *
- * `ng-model` binds an existing domain model to a form control. For a
- * two-way binding, use `[(ng-model)]` to ensure the model updates in
- * both directions.
- *
- * ### Example ([live demo](http://plnkr.co/edit/R3UX5qDaUqFO2VYR0UzH?p=preview))
- * ```typescript
- * @Component({selector: "search-comp"})
- * @View({
- * directives: [FORM_DIRECTIVES],
- * template: `<input type='text' [(ng-model)]="searchQuery">`
- * })
- * class SearchComp {
- * searchQuery: string;
- * }
- * ```
- */
- class NgModel extends NgControl implements OnChanges {
-
- constructor(validators: Function[], valueAccessors: ControlValueAccessor[]);
-
- update: any;
-
- model: any;
-
- viewModel: any;
-
- validators: Function[];
-
- onChanges(changes: {[key: string]: SimpleChange}): void;
-
- control: Control;
-
- path: string[];
-
- validator: Function;
-
- viewToModelUpdate(newValue: any): void;
-
- }
-
-
- /**
- * A base class that all control directive extend.
- * It binds a {@link Control} object to a DOM element.
- */
- class NgControl extends AbstractControlDirective {
-
- name: string;
-
- valueAccessor: ControlValueAccessor;
-
- validator: Function;
-
- path: string[];
-
- viewToModelUpdate(newValue: any): void;
-
- }
-
-
- /**
- * Creates and binds a control group to a DOM element.
- *
- * This directive can only be used as a child of {@link NgForm} or {@link NgFormModel}.
- *
- * # Example
- *
- * In this example, we create the credentials and personal control groups.
- * We can work with each group separately: check its validity, get its value, listen to its changes.
- *
- * ```
- * @Component({selector: "signup-comp"})
- * @View({
- * directives: [FORM_DIRECTIVES],
- * template: `
- * <form #f="form" (submit)='onSignUp(f.value)'>
- * <div ng-control-group='credentials' #credentials="form">
- * Login <input type='text' ng-control='login'>
- * Password <input type='password' ng-control='password'>
- * </div>
- * <div *ng-if="!credentials.valid">Credentials are invalid</div>
- *
- * <div ng-control-group='personal'>
- * Name <input type='text' ng-control='name'>
- * </div>
- * <button type='submit'>Sign Up!</button>
- * </form>
- * `})
- * class SignupComp {
- * onSignUp(value) {
- * // value === {
- * // personal: {name: 'some name'},
- * // credentials: {login: 'some login', password: 'some password'}}
- * }
- * }
- *
- * ```
- */
- class NgControlGroup extends ControlContainer implements OnInit,
- OnDestroy {
-
- constructor(_parent: ControlContainer);
-
- onInit(): void;
-
- onDestroy(): void;
-
- control: ControlGroup;
-
- path: string[];
-
- formDirective: Form;
-
- }
-
-
- /**
- * Binds an existing control group to a DOM element.
- *
- * ### Example ([live demo](http://plnkr.co/edit/jqrVirudY8anJxTMUjTP?p=preview))
- *
- * 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.
- *
- * ```typescript
- * @Component({
- * selector: 'my-app'
- * })
- * @View({
- * template: `
- * <div>
- * <h2>NgFormModel Example</h2>
- * <form [ng-form-model]="loginForm">
- * <p>Login: <input type="text" ng-control="login"></p>
- * <p>Password: <input type="password" ng-control="password"></p>
- * </form>
- * <p>Value:</p>
- * <pre>{{value}}</pre>
- * </div>
- * `,
- * directives: [FORM_DIRECTIVES]
- * })
- * export class App {
- * loginForm: ControlGroup;
- *
- * constructor() {
- * this.loginForm = new ControlGroup({
- * login: new Control(""),
- * password: new Control("")
- * });
- * }
- *
- * get value(): string {
- * return JSON.stringify(this.loginForm.value, null, 2);
- * }
- * }
- * ```
- *
- * We can also use ng-model to bind a domain model to the form.
- *
- * ```typescript
- * @Component({selector: "login-comp"})
- * @View({
- * directives: [FORM_DIRECTIVES],
- * template: `
- * <form [ng-form-model]='loginForm'>
- * Login <input type='text' ng-control='login' [(ng-model)]='credentials.login'>
- * Password <input type='password' ng-control='password'
- * [(ng-model)]='credentials.password'>
- * <button (click)="onLogin()">Login</button>
- * </form>`
- * })
- * class LoginComp {
- * credentials: {login: string, password: string};
- * loginForm: ControlGroup;
- *
- * constructor() {
- * this.loginForm = new ControlGroup({
- * login: new Control(""),
- * password: new Control("")
- * });
- * }
- *
- * onLogin(): void {
- * // this.credentials.login === 'some login'
- * // this.credentials.password === 'some password'
- * }
- * }
- * ```
- */
- class NgFormModel extends ControlContainer implements Form,
- OnChanges {
-
- form: ControlGroup;
-
- directives: NgControl[];
-
- ngSubmit: any;
-
- onChanges(_: any): void;
-
- formDirective: Form;
-
- control: ControlGroup;
-
- path: string[];
-
- addControl(dir: NgControl): void;
-
- getControl(dir: NgControl): Control;
-
- removeControl(dir: NgControl): void;
-
- addControlGroup(dir: NgControlGroup): void;
-
- removeControlGroup(dir: NgControlGroup): void;
-
- getControlGroup(dir: NgControlGroup): ControlGroup;
-
- updateModel(dir: NgControl, value: any): void;
-
- onSubmit(): boolean;
-
- }
-
-
- /**
- * If `NgForm` is bound in a component, `<form>` elements in that component will be
- * upgraded to use the Angular form system.
- *
- * # Typical Use
- *
- * Include `FORM_DIRECTIVES` in the `directives` section of a {@link View} annotation
- * to use `NgForm` and its associated controls.
- *
- * # Structure
- *
- * An Angular form is a collection of {@link Control}s in some hierarchy.
- * `Control`s can be at the top level or can be organized in {@link ControlGroups}
- * or {@link ControlArray}s. This hierarchy is reflected in the form's `value`, a
- * JSON object that mirrors the form structure.
- *
- * # Submission
- *
- * The `ng-submit` event signals when the user triggers a form submission.
- *
- * ### Example ([live demo](http://plnkr.co/edit/ltdgYj4P0iY64AR71EpL?p=preview))
- *
- * ```typescript
- * @Component({
- * selector: 'my-app'
- * })
- * @View({
- * template: `
- * <div>
- * <p>Submit the form to see the data object Angular builds</p>
- * <h2>NgForm demo</h2>
- * <form #f="form" (ng-submit)="onSubmit(f.value)">
- * <h3>Control group: credentials</h3>
- * <div ng-control-group="credentials">
- * <p>Login: <input type="text" ng-control="login"></p>
- * <p>Password: <input type="password" ng-control="password"></p>
- * </div>
- * <h3>Control group: person</h3>
- * <div ng-control-group="person">
- * <p>First name: <input type="text" ng-control="firstName"></p>
- * <p>Last name: <input type="text" ng-control="lastName"></p>
- * </div>
- * <button type="submit">Submit Form</button>
- * <p>Form data submitted:</p>
- * </form>
- * <pre>{{data}}</pre>
- * </div>
- * `,
- * directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
- * })
- * export class App {
- * constructor() {}
- *
- * data: string;
- *
- * onSubmit(data) {
- * this.data = JSON.stringify(data, null, 2);
- * }
- * }
- * ```
- */
- class NgForm extends ControlContainer implements Form {
-
- form: ControlGroup;
-
- ngSubmit: any;
-
- formDirective: Form;
-
- control: ControlGroup;
-
- path: string[];
-
- controls: {[key: string]: AbstractControl};
-
- addControl(dir: NgControl): void;
-
- getControl(dir: NgControl): Control;
-
- removeControl(dir: NgControl): void;
-
- addControlGroup(dir: NgControlGroup): void;
-
- removeControlGroup(dir: NgControlGroup): void;
-
- getControlGroup(dir: NgControlGroup): ControlGroup;
-
- updateModel(dir: NgControl, value: any): void;
-
- onSubmit(): boolean;
-
- }
-
-
- /**
- * A bridge between a control and a native element.
- *
- * Please see {@link DefaultValueAccessor} for more information.
- */
- interface ControlValueAccessor {
-
- writeValue(obj: any): void;
-
- registerOnChange(fn: any): void;
-
- registerOnTouched(fn: any): void;
-
- }
-
-
- /**
- * The default accessor for writing a value and listening to changes that is used by the
- * {@link NgModel}, {@link NgFormControl}, and {@link NgControlName} directives.
- *
- * # Example
- * ```
- * <input type="text" [(ng-model)]="searchQuery">
- * ```
- */
- class DefaultValueAccessor implements ControlValueAccessor {
-
- constructor(_renderer: Renderer, _elementRef: ElementRef);
-
- onChange: any;
-
- onTouched: any;
-
- writeValue(value: any): void;
-
- registerOnChange(fn: (_: any) => void): void;
-
- registerOnTouched(fn: () => void): void;
-
- }
-
-
- class NgControlStatus {
-
- constructor(cd: NgControl);
-
- ngClassUntouched: boolean;
-
- ngClassTouched: boolean;
-
- ngClassPristine: boolean;
-
- ngClassDirty: boolean;
-
- ngClassValid: boolean;
-
- ngClassInvalid: boolean;
-
- }
-
-
- /**
- * The accessor for writing a value and listening to changes on a checkbox input element.
- *
- * # Example
- * ```
- * <input type="checkbox" [ng-control]="rememberLogin">
- * ```
- */
- class CheckboxControlValueAccessor implements ControlValueAccessor {
-
- constructor(_renderer: Renderer, _elementRef: ElementRef);
-
- onChange: any;
-
- onTouched: any;
-
- writeValue(value: any): void;
-
- registerOnChange(fn: (_: any) => {}): void;
-
- registerOnTouched(fn: () => {}): void;
-
- }
-
-
- /**
- * Marks `<option>` as dynamic, so Angular can be notified when options change.
- *
- * #Example:
- *
- * ```
- * <select ng-control="city">
- * <option *ng-for="#c of cities" [value]="c"></option>
- * </select>
- * ```
- */
- class NgSelectOption {
-
- }
-
-
- /**
- * The accessor for writing a value and listening to changes on a select element.
- */
- class SelectControlValueAccessor implements ControlValueAccessor {
-
- constructor(_renderer: Renderer, _elementRef: ElementRef, query: QueryList<NgSelectOption>);
-
- value: string;
-
- onChange: any;
-
- onTouched: any;
-
- writeValue(value: any): void;
-
- registerOnChange(fn: () => any): void;
-
- registerOnTouched(fn: () => any): void;
-
- }
-
-
- /**
- * A list of all the form directives used as part of a `@View` annotation.
- *
- * This is a shorthand for importing them each individually.
- *
- * ### Example:
- *
- * ```typescript
- * @View({
- * directives: [FORM_DIRECTIVES]
- * })
- * @Component({
- * selector: 'my-app'
- * })
- * class MyApp {}
- * ```
- */
- let FORM_DIRECTIVES: Type[];
-
-
-
- let NG_VALIDATORS: OpaqueToken;
-
-
-
- /**
- * Provides a set of validators used by form controls.
- *
- * # Example
- *
- * ```
- * var loginControl = new Control("", Validators.required)
- * ```
- */
- class Validators {
-
- static required(control:Control): {[key: string]: boolean};
-
- static nullValidator(c: any): {[key: string]: boolean};
-
- static compose(validators: Function[]): Function;
-
- static group(group:ControlGroup): {[key: string]: any[]};
-
- static array(array:ControlArray): {[key: string]: any[]};
-
- }
-
-
- class DefaultValidators {
-
- }
-
-
- /**
- * Creates a form object from a user-specified configuration.
- *
- * # Example
- *
- * ```
- * import {Component, View, bootstrap} from 'angular2/angular2';
- * import {FormBuilder, Validators, FORM_DIRECTIVES, ControlGroup} from 'angular2/core';
- *
- * @Component({
- * selector: 'login-comp',
- * viewBindings: [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: [FORM_DIRECTIVES]
- * })
- * 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 {@link ControlGroup} that consists of a `login` {@link Control}, and a
- * nested {@link ControlGroup} that defines a `password` and a `passwordConfirmation`
- * {@link Control}:
- *
- * ```
- * var loginForm = builder.group({
- * login: ["", Validators.required],
- *
- * passwordRetry: builder.group({
- * password: ["", Validators.required],
- * passwordConfirmation: ["", Validators.required]
- * })
- * });
- *
- * ```
- */
- class FormBuilder {
-
- group(controlsConfig: {[key: string]: any}, extra?: {[key: string]: any}): ControlGroup;
-
- control(value: Object, validator?: Function): Control;
-
- array(controlsConfig: any[], validator?: Function): ControlArray;
-
- }
-
-
- /**
- * Shorthand set of bindings used for building Angular forms.
- *
- * ### Example:
- *
- * ```typescript
- * bootstrap(MyApp, [FORM_BINDINGS]);
- * ```
- */
- let FORM_BINDINGS: Type[];
-
-
-
- function inspectNativeElement(element: any): DebugElement;
-
-
-
- let ELEMENT_PROBE_BINDINGS: any[];
-
-
-
- /**
- * A DebugElement contains information from the Angular compiler about an
- * element and provides access to the corresponding ElementInjector and
- * underlying DOM Element, as well as a way to query for children.
- */
- interface DebugElement {
-
- componentInstance: any;
-
- nativeElement: any;
-
- elementRef: ElementRef;
-
- getDirectiveInstance(directiveIndex: number): any;
-
- /**
- * Get child DebugElements from within the Light DOM.
- *
- * @return {DebugElement[]}
- */
- children: DebugElement[];
-
- /**
- * Get the root DebugElement children of a component. Returns an empty
- * list if the current DebugElement is not a component root.
- *
- * @return {DebugElement[]}
- */
- componentViewChildren: DebugElement[];
-
- triggerEventHandler(eventName: string, eventObj: Event): void;
-
- hasDirective(type: Type): boolean;
-
- inject(type: Type): any;
-
- getLocal(name: string): any;
-
- /**
- * Return the first descendant TestElement matching the given predicate
- * and scope.
- *
- * @param {Function: boolean} predicate
- * @param {Scope} scope
- *
- * @return {DebugElement}
- */
- query(predicate: Predicate<DebugElement>, scope?: Function): DebugElement;
-
- /**
- * Return descendant TestElememts matching the given predicate
- * and scope.
- *
- * @param {Function: boolean} predicate
- * @param {Scope} scope
- *
- * @return {DebugElement[]}
- */
- queryAll(predicate: Predicate<DebugElement>, scope?: Function): DebugElement[];
-
- }
-
-
- /**
- * Returns a DebugElement for a ElementRef.
- *
- * @param {ElementRef}: elementRef
- * @return {DebugElement}
- */
- function inspectElement(elementRef: ElementRef): DebugElement;
-
-
-
- function asNativeElements(arr: DebugElement[]): any[];
-
-
-
- class Scope {
-
- static all(debugElement: DebugElement): DebugElement[];
-
- static light(debugElement: DebugElement): DebugElement[];
-
- static view(debugElement: DebugElement): DebugElement[];
-
- }
-
-
- class By {
-
- static all(): Function;
-
- static css(selector: string): Predicate<DebugElement>;
-
- static directive(type: Type): Predicate<DebugElement>;
-
- }
-
-
- enum ChangeDetectionStrategy {
-
- /**
- * `CheckedOnce` means that after calling detectChanges the mode of the change detector
- * will become `Checked`.
- */
- CheckOnce,
-
- /**
- * `Checked` means that the change detector should be skipped until its mode changes to
- * `CheckOnce`.
- */
- Checked,
-
- /**
- * `CheckAlways` means that after calling detectChanges the mode of the change detector
- * will remain `CheckAlways`.
- */
- CheckAlways,
-
- /**
- * `Detached` means that the change detector sub tree is not a part of the main tree and
- * should be skipped.
- */
- Detached,
-
- /**
- * `OnPush` means that the change detector's mode will be set to `CheckOnce` during hydration.
- */
- OnPush,
-
- /**
- * `Default` means that the change detector's mode will be set to `CheckAlways` during hydration.
- */
- Default,
-
- /**
- * This is an experimental feature. Works only in Dart.
- */
- OnPushObserve
- }
-
-
-
- /**
- * An error thrown if application changes model breaking the top-down data flow.
- *
- * This exception is only thrown in dev mode.
- *
- * <!-- TODO: Add a link once the dev mode option is configurable -->
- *
- * ### Example
- *
- * ```typescript
- * @Component({selector: 'parent'})
- * @View({
- * template: `
- * <child [prop]="parentProp"></child>
- * `,
- * directives: [forwardRef(() => Child)]
- * })
- * class Parent {
- * parentProp = "init";
- * }
- *
- * @Directive({selector: 'child', inputs: ['prop']})
- * class Child {
- * constructor(public parent: Parent) {}
- *
- * set prop(v) {
- * // this updates the parent property, which is disallowed during change detection
- * // this will result in ExpressionChangedAfterItHasBeenCheckedException
- * this.parent.parentProp = "updated";
- * }
- * }
- * ```
- */
- class ExpressionChangedAfterItHasBeenCheckedException extends BaseException {
-
- constructor(exp: string, oldValue: any, currValue: any, context: any);
-
- }
-
-
- /**
- * Thrown when an expression evaluation raises an exception.
- *
- * This error wraps the original exception to attach additional contextual information that can
- * be useful for debugging.
- *
- * ### Example ([live demo](http://plnkr.co/edit/2Kywoz?p=preview))
- *
- * ```typescript
- * @Directive({selector: 'child', inputs: ['prop']})
- * class Child {
- * prop;
- * }
- *
- * @Component({
- * selector: 'app'
- * })
- * @View({
- * template: `
- * <child [prop]="field.first"></child>
- * `,
- * directives: [Child]
- * })
- * class App {
- * field = null;
- * }
- *
- * bootstrap(App);
- * ```
- *
- * You can access the original exception and stack through the `originalException` and
- * `originalStack` properties.
- */
- class ChangeDetectionError extends WrappedException {
-
- constructor(exp: string, originalException: any, originalStack: any, context: any);
-
- /**
- * Information about the expression that triggered the exception.
- */
- location: string;
-
- }
-
-
- /**
- * Reference to a component's change detection object.
- */
- interface ChangeDetectorRef {
-
- /**
- * Marks all {@link OnPush} ancestors as to be checked.
- *
- * <!-- TODO: Add a link to a chapter on OnPush components -->
- *
- * ### Example ([live demo](http://plnkr.co/edit/GC512b?p=preview))
- *
- * ```typescript
- * @Component({selector: 'cmp', changeDetection: ChangeDetectionStrategy.OnPush})
- * @View({template: `Number of ticks: {{numberOfTicks}}`})
- * class Cmp {
- * numberOfTicks = 0;
- *
- * constructor(ref: ChangeDetectorRef) {
- * setInterval(() => {
- * this.numberOfTicks ++
- * // the following is required, otherwise the view will not be updated
- * this.ref.markForCheck();
- * }, 1000);
- * }
- * }
- *
- * @Component({
- * selector: 'app',
- * changeDetection: ChangeDetectionStrategy.OnPush
- * })
- * @View({
- * template: `
- * <cmp><cmp>
- * `,
- * directives: [Cmp]
- * })
- * class App {
- * }
- *
- * bootstrap(App);
- * ```
- */
- markForCheck(): void;
-
- /**
- * Detaches the change detector from the change detector tree.
- *
- * The detached change detector will not be checked until it is reattached.
- *
- * This can also be used in combination with {@link detectChanges} to implement local change
- * detection checks.
- *
- * <!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
- * <!-- TODO: Add a live demo once ref.detectChanges is merged into master -->
- *
- * ### Example
- *
- * The following example defines a component with a large list of readonly data.
- * Imagine the data changes constantly, many times per second. For performance reasons,
- * we want to check and update the list every five seconds. We can do that by detaching
- * the component's change detector and doing a local check every five seconds.
- *
- * ```typescript
- * class DataProvider {
- * // in a real application the returned data will be different every time
- * get data() {
- * return [1,2,3,4,5];
- * }
- * }
- *
- * @Component({selector: 'giant-list'})
- * @View({
- * template: `
- * <li *ng-for="#d of dataProvider.data">Data {{d}}</lig>
- * `,
- * directives: [NgFor]
- * })
- * class GiantList {
- * constructor(private ref: ChangeDetectorRef, private dataProvider:DataProvider) {
- * ref.detach();
- * setInterval(() => {
- * this.ref.detectChanges();
- * }, 5000);
- * }
- * }
- *
- * @Component({
- * selector: 'app', bindings: [DataProvider]
- * })
- * @View({
- * template: `
- * <giant-list><giant-list>
- * `,
- * directives: [GiantList]
- * })
- * class App {
- * }
- *
- * bootstrap(App);
- * ```
- */
- detach(): void;
-
- /**
- * Checks the change detector and its children.
- *
- * This can also be used in combination with {@link detach} to implement local change detection
- * checks.
- *
- * <!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
- * <!-- TODO: Add a live demo once ref.detectChanges is merged into master -->
- *
- * ### Example
- *
- * The following example defines a component with a large list of readonly data.
- * Imagine, the data changes constantly, many times per second. For performance reasons,
- * we want to check and update the list every five seconds.
- *
- * We can do that by detaching the component's change detector and doing a local change detection
- * check
- * every five seconds.
- *
- * See {@link detach} for more information.
- */
- detectChanges(): void;
-
- /**
- * Reattach the change detector to the change detector tree.
- *
- * This also marks OnPush ancestors as to be checked. This reattached change detector will be
- * checked during the next change detection run.
- *
- * <!-- TODO: Add a link to a chapter on detach/reattach/local digest -->
- *
- * ### Example ([live demo](http://plnkr.co/edit/aUhZha?p=preview))
- *
- * The following example creates a component displaying `live` data. The component will detach
- * its change detector from the main change detector tree when the component's live property
- * is set to false.
- *
- * ```typescript
- * class DataProvider {
- * data = 1;
- *
- * constructor() {
- * setInterval(() => {
- * this.data = this.data * 2;
- * }, 500);
- * }
- * }
- *
- * @Component({selector: 'live-data', inputs: ['live']})
- * @View({
- * template: `Data: {{dataProvider.data}}`
- * })
- * class LiveData {
- * constructor(private ref: ChangeDetectorRef, private dataProvider:DataProvider) {}
- *
- * set live(value) {
- * if (value)
- * this.ref.reattach();
- * else
- * this.ref.detach();
- * }
- * }
- *
- * @Component({
- * selector: 'app',
- * bindings: [DataProvider]
- * })
- * @View({
- * template: `
- * Live Update: <input type="checkbox" [(ng-model)]="live">
- * <live-data [live]="live"><live-data>
- * `,
- * directives: [LiveData, FORM_DIRECTIVES]
- * })
- * class App {
- * live = true;
- * }
- *
- * bootstrap(App);
- * ```
- */
- reattach(): void;
-
- }
-
-
- /**
- * Indicates that the result of a {@link PipeMetadata} 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.
- *
- * Example:
- *
- * ```
- * if (this._latestValue === this._latestReturnedValue) {
- * return this._latestReturnedValue;
- * } else {
- * this._latestReturnedValue = this._latestValue;
- * return WrappedValue.wrap(this._latestValue); // this will force update
- * }
- * ```
- */
- class WrappedValue {
-
- constructor(wrapped: any);
-
- static wrap(value: any): WrappedValue;
-
- wrapped: any;
-
- }
-
-
- class SimpleChange {
-
- constructor(previousValue: any, currentValue: any);
-
- previousValue: any;
-
- currentValue: any;
-
- isFirstChange(): boolean;
-
- }
-
-
- /**
- * To create a Pipe, you must implement this interface.
- *
- * Angular invokes the `transform` method with the value of a binding
- * as the first argument, and any parameters as the second argument in list form.
- *
- * ## Syntax
- *
- * `value | pipeName[:arg0[:arg1...]]`
- *
- * ### Example ([live demo](http://plnkr.co/edit/f5oyIked9M2cKzvZNKHV?p=preview))
- *
- * The `RepeatPipe` below repeats the value as many times as indicated by the first argument:
- *
- * ```
- * import {Pipe, PipeTransform} from 'angular2/angular2';
- *
- * @Pipe({name: 'repeat'})
- * export class RepeatPipe implements PipeTransform {
- * transform(value: any, args: any[] = []) {
- * if (args.length == 0) {
- * throw new Error('repeat pipe requires one argument');
- * }
- * let times: number = args[0];
- * return value.repeat(times);
- * }
- * }
- * ```
- *
- * Invoking `{{ 'ok' | repeat:3 }}` in a template produces `okokok`.
- */
- interface PipeTransform {
-
- transform(value: any, args: any[]): any;
-
- }
-
-
- /**
- * To create a stateful Pipe, you should implement this interface.
- *
- * A stateful pipe may produce different output, given the same input. It is
- * likely that a stateful pipe may contain state that should be cleaned up when
- * a binding is destroyed. For example, a subscription to a stream of data may need to
- * be disposed, or an interval may need to be cleared.
- *
- * ### Example ([live demo](http://plnkr.co/edit/hlaejwQAmWayxwc5YXQE?p=preview))
- *
- * In this example, a pipe is created to countdown its input value, updating it every
- * 50ms. Because it maintains an internal interval, it automatically clears
- * the interval when the binding is destroyed or the countdown completes.
- *
- * ```
- * import {Pipe, PipeTransform} from 'angular2/angular2'
- * @Pipe({name: 'countdown'})
- * class CountDown implements PipeTransform, PipeOnDestroy {
- * remainingTime:Number;
- * interval:SetInterval;
- * onDestroy() {
- * if (this.interval) {
- * clearInterval(this.interval);
- * }
- * }
- * transform(value: any, args: any[] = []) {
- * if (!parseInt(value, 10)) return null;
- * if (typeof this.remainingTime !== 'number') {
- * this.remainingTime = parseInt(value, 10);
- * }
- * if (!this.interval) {
- * this.interval = setInterval(() => {
- * this.remainingTime-=50;
- * if (this.remainingTime <= 0) {
- * this.remainingTime = 0;
- * clearInterval(this.interval);
- * delete this.interval;
- * }
- * }, 50);
- * }
- * return this.remainingTime;
- * }
- * }
- * ```
- *
- * Invoking `{{ 10000 | countdown }}` would cause the value to be decremented by 50,
- * every 50ms, until it reaches 0.
- */
- interface PipeOnDestroy {
-
- onDestroy(): void;
-
- }
-
-
- /**
- * A repository of different iterable diffing strategies used by NgFor, NgClass, and others.
- */
- class IterableDiffers {
-
- constructor(factories: IterableDifferFactory[]);
-
- static create(factories: IterableDifferFactory[], parent?: IterableDiffers): IterableDiffers;
-
- /**
- * Takes an array of {@link IterableDifferFactory} and returns a binding used to extend the
- * inherited {@link IterableDiffers} instance with the provided factories and return a new
- * {@link IterableDiffers} instance.
- *
- * The following example shows how to extend an existing list of factories,
- * which will only be applied to the injector for this component and its children.
- * This step is all that's required to make a new {@link IterableDiffer} available.
- *
- * # Example
- *
- * ```
- * @Component({
- * viewBindings: [
- * IterableDiffers.extend([new ImmutableListDiffer()])
- * ]
- * })
- * ```
- */
- static extend(factories: IterableDifferFactory[]): Binding;
-
- factories: IterableDifferFactory[];
-
- find(iterable: Object): IterableDifferFactory;
-
- }
-
-
- interface IterableDiffer {
-
- diff(object: Object): any;
-
- onDestroy(): void;
-
- }
-
-
- /**
- * Provides a factory for {@link IterableDiffer}.
- */
- interface IterableDifferFactory {
-
- supports(objects: Object): boolean;
-
- create(cdRef: ChangeDetectorRef): IterableDiffer;
-
- }
-
-
- /**
- * A repository of different Map diffing strategies used by NgClass, NgStyle, and others.
- */
- class KeyValueDiffers {
-
- constructor(factories: KeyValueDifferFactory[]);
-
- static create(factories: KeyValueDifferFactory[], parent?: KeyValueDiffers): KeyValueDiffers;
-
- /**
- * Takes an array of {@link KeyValueDifferFactory} and returns a binding used to extend the
- * inherited {@link KeyValueDiffers} instance with the provided factories and return a new
- * {@link KeyValueDiffers} instance.
- *
- * The following example shows how to extend an existing list of factories,
- * which will only be applied to the injector for this component and its children.
- * This step is all that's required to make a new {@link KeyValueDiffer} available.
- *
- * # Example
- *
- * ```
- * @Component({
- * viewBindings: [
- * KeyValueDiffers.extend([new ImmutableMapDiffer()])
- * ]
- * })
- * ```
- */
- static extend(factories: KeyValueDifferFactory[]): Binding;
-
- factories: KeyValueDifferFactory[];
-
- find(kv: Object): KeyValueDifferFactory;
-
- }
-
-
- interface KeyValueDiffer {
-
- diff(object: Object): void;
-
- onDestroy(): void;
-
- }
-
-
- /**
- * Provides a factory for {@link KeyValueDiffer}.
- */
- interface KeyValueDifferFactory {
-
- supports(objects: Object): boolean;
-
- create(cdRef: ChangeDetectorRef): KeyValueDiffer;
-
- }
-
-
- /**
- * Create trace scope.
- *
- * Scopes must be strictly nested and are analogous to stack frames, but
- * do not have to follow the stack frames. Instead it is recommended that they follow logical
- * nesting. You may want to use
- * [Event
- * Signatures](http://google.github.io/tracing-framework/instrumenting-code.html#custom-events)
- * as they are defined in WTF.
- *
- * Used to mark scope entry. The return value is used to leave the scope.
- *
- * var myScope = wtfCreateScope('MyClass#myMethod(ascii someVal)');
- *
- * someMethod() {
- * var s = myScope('Foo'); // 'Foo' gets stored in tracing UI
- * // DO SOME WORK HERE
- * return wtfLeave(s, 123); // Return value 123
- * }
- *
- * Note, adding try-finally block around the work to ensure that `wtfLeave` gets called can
- * negatively impact the performance of your application. For this reason we recommend that
- * you don't add them to ensure that `wtfLeave` gets called. In production `wtfLeave` is a noop and
- * so try-finally block has no value. When debugging perf issues, skipping `wtfLeave`, do to
- * exception, will produce incorrect trace, but presence of exception signifies logic error which
- * needs to be fixed before the app should be profiled. Add try-finally only when you expect that
- * an exception is expected during normal execution while profiling.
- */
- var wtfCreateScope: WtfScopeFn;
-
-
-
- /**
- * Used to mark end of Scope.
- *
- * - `scope` to end.
- * - `returnValue` (optional) to be passed to the WTF.
- *
- * Returns the `returnValue for easy chaining.
- */
- var wtfLeave: <T>(scope: any, returnValue?: T) => T;
-
-
-
- /**
- * Used to mark Async start. Async are similar to scope but they don't have to be strictly nested.
- * The return value is used in the call to [endAsync]. Async ranges only work if WTF has been
- * enabled.
- *
- * someMethod() {
- * var s = wtfStartTimeRange('HTTP:GET', 'some.url');
- * var future = new Future.delay(5).then((_) {
- * wtfEndTimeRange(s);
- * });
- * }
- */
- var wtfStartTimeRange: (rangeType: string, action: string) => any;
-
-
-
- /**
- * Ends a async time range operation.
- * [range] is the return value from [wtfStartTimeRange] Async ranges only work if WTF has been
- * enabled.
- */
- var wtfEndTimeRange: (range: any) => void;
-
-
-
- interface WtfScopeFn {
-
- (arg0?: any, arg1?: any): any;
-
- }
-
-
- /**
- * Bootstrapping a Webworker Application
- *
- * You instantiate the application side by calling bootstrapWebworker from your webworker index
- * script.
- * You can call bootstrapWebworker() exactly as you would call bootstrap() in a regular Angular
- * application
- * See the bootstrap() docs for more details.
- */
- function bootstrapWebWorker(appComponentType: Type, componentInjectableBindings?: Array<Type | Binding | any[]>): Promise<ComponentRef>;
-
-
-
- /**
- * Message Bus is a low level API used to communicate between the UI and the background.
- * Communication is based on a channel abstraction. Messages published in a
- * given channel to one MessageBusSink are received on the same channel
- * by the corresponding MessageBusSource.
- */
- class MessageBus implements MessageBusSource, MessageBusSink {
-
- /**
- * Sets up a new channel on the MessageBus.
- * MUST be called before calling from or to on the channel.
- * If runInZone is true then the source will emit events inside the angular zone
- * and the sink will buffer messages and send only once the zone exits.
- * if runInZone is false then the source will emit events inside the global zone
- * and the sink will send messages immediately.
- */
- initChannel(channel: string, runInZone?: boolean): void;
-
- /**
- * Assigns this bus to the given zone.
- * Any callbacks attached to channels where runInZone was set to true on initialization
- * will be executed in the given zone.
- */
- attachToZone(zone: NgZone): void;
-
- /**
- * Returns an {@link EventEmitter} that emits every time a message
- * is received on the given channel.
- */
- from(channel: string): EventEmitter;
-
- /**
- * Returns an {@link EventEmitter} for the given channel
- * To publish methods to that channel just call next (or add in dart) on the returned emitter
- */
- to(channel: string): EventEmitter;
-
- }
-
-
- interface MessageBusSource {
-
- /**
- * Sets up a new channel on the MessageBusSource.
- * MUST be called before calling from on the channel.
- * If runInZone is true then the source will emit events inside the angular zone.
- * if runInZone is false then the source will emit events inside the global zone.
- */
- initChannel(channel: string, runInZone: boolean): void;
-
- /**
- * Assigns this source to the given zone.
- * Any channels which are initialized with runInZone set to true will emit events that will be
- * executed within the given zone.
- */
- attachToZone(zone: NgZone): void;
-
- /**
- * Returns an {@link EventEmitter} that emits every time a message
- * is received on the given channel.
- */
- from(channel: string): EventEmitter;
-
- }
-
-
- interface MessageBusSink {
-
- /**
- * Sets up a new channel on the MessageBusSink.
- * MUST be called before calling to on the channel.
- * If runInZone is true the sink will buffer messages and send only once the zone exits.
- * if runInZone is false the sink will send messages immediatly.
- */
- initChannel(channel: string, runInZone: boolean): void;
-
- /**
- * Assigns this sink to the given zone.
- * Any channels which are initialized with runInZone set to true will wait for the given zone
- * to exit before sending messages.
- */
- attachToZone(zone: NgZone): void;
-
- /**
- * Returns an {@link EventEmitter} for the given channel
- * To publish methods to that channel just call next (or add in dart) on the returned emitter
- */
- to(channel: string): EventEmitter;
-
- }
-
-
- interface ClientMessageBrokerFactory {
-
- /**
- * Initializes the given channel and attaches a new {@link ClientMessageBroker} to it.
- */
- createMessageBroker(channel: string, runInZone?: boolean): ClientMessageBroker;
-
- }
-
-
- interface ClientMessageBroker {
-
- channel: any;
-
- runOnService(args: UiArguments, returnType: Type): Promise<any>;
-
- }
-
-
- class FnArg {
-
- constructor(value: any, type: Type);
-
- value: any;
-
- type: Type;
-
- }
-
-
- class UiArguments {
-
- constructor(method: string, args?: FnArg[]);
-
- method: string;
-
- args: FnArg[];
-
- }
-
-
- interface ServiceMessageBrokerFactory {
-
- /**
- * Initializes the given channel and attaches a new {@link ServiceMessageBroker} to it.
- */
- createMessageBroker(channel: string, runInZone?: boolean): ServiceMessageBroker;
-
- }
-
-
- /**
- * Helper class for UIComponents that allows components to register methods.
- * If a registered method message is received from the broker on the worker,
- * the UIMessageBroker deserializes its arguments and calls the registered method.
- * If that method returns a promise, the UIMessageBroker returns the result to the worker.
- */
- interface ServiceMessageBroker {
-
- channel: any;
-
- registerMethod(methodName: string, signature: Type[], method: Function, returnType?: Type): void;
-
- }
-
-
- class ReceivedMessage {
-
- constructor(data: {[key: string]: any});
-
- method: string;
-
- args: any[];
-
- id: string;
-
- type: string;
-
- }
-
-
- var Renderer: InjectableReference;
-
-
-
- var RenderProtoViewRef: InjectableReference;
-
-
-
- var ResolvedBinding: InjectableReference;
-
-
-
- var InstantiationError: InjectableReference;
-
-
-
- var PlatformRef: InjectableReference;
-
-
-
- var ApplicationRef: InjectableReference;
-
-
-
- var Compiler: InjectableReference;
-
-
-
- var AppViewManager: InjectableReference;
-
-
-
- var DynamicComponentLoader: InjectableReference;
-
-
-
- var ElementRef: InjectableReference;
-
-
-
- var TemplateRef: InjectableReference;
-
-
-
- var ViewRef: InjectableReference;
-
-
-
- var ProtoViewRef: InjectableReference;
-
-
-
- var ViewContainerRef: InjectableReference;
-
-
-
- var ComponentRef: InjectableReference;
-
-
-
- var LifeCycle: InjectableReference;
-
-
-
- var NgZone: InjectableReference;
-
-
-
- var DebugElement: InjectableReference;
-
-
-
- var ChangeDetectorRef: InjectableReference;
-
-
-
- var ClientMessageBrokerFactory: InjectableReference;
-
-
-
- var ClientMessageBroker: InjectableReference;
-
-
-
- var ServiceMessageBrokerFactory: InjectableReference;
-
-
-
- var ServiceMessageBroker: InjectableReference;
-
-
-
-}
-
-declare module "angular2/web_worker/worker" {
- export = ngWorker;
-}
-
-
-
-declare module ngUi {
- let PRIMITIVE: Type;
-
-
-
- /**
- *
- * Runtime representation a type that a Component or other object is instances of.
- *
- * An example of a `Type` is `MyCustomComponent` class, which in JavaScript is be represented by
- * the `MyCustomComponent` constructor function.
- */
- interface Type extends Function {
-
- new(...args: any[]): any;
-
- }
-
-
- class Observable {
-
- observer(generator: any): Object;
-
- }
-
-
- /**
- * Use by directives and components to emit custom Events.
- *
- * ## Examples
- *
- * In the following example, `Zippy` alternatively emits `open` and `close` events when its
- * title gets clicked:
- *
- * ```
- * @Component({selector: 'zippy'})
- * @View({template: `
- * <div class="zippy">
- * <div (click)="toggle()">Toggle</div>
- * <div [hidden]="!visible">
- * <ng-content></ng-content>
- * </div>
- * </div>`})
- * export class Zippy {
- * visible: boolean = true;
- * @Output() open: EventEmitter = new EventEmitter();
- * @Output() close: EventEmitter = new EventEmitter();
- *
- * toggle() {
- * this.visible = !this.visible;
- * if (this.visible) {
- * this.open.next(null);
- * } else {
- * this.close.next(null);
- * }
- * }
- * }
- * ```
- *
- * 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 {
-
- observer(generator: any): any;
-
- toRx(): any;
-
- next(value: any): void;
-
- throw(error: any): void;
-
- return(value?: any): void;
-
- }
-
-
- interface Predicate<T> {
-
- (value: T, index?: number, array?: T[]): boolean;
-
- }
-
-
- class WrappedException extends Error {
-
- constructor(_wrapperMessage: string, _originalException: any, _originalStack?: any, _context?: any);
-
- wrapperMessage: string;
-
- wrapperStack: any;
-
- originalException: any;
-
- originalStack: any;
-
- context: any;
-
- message: string;
-
- toString(): string;
-
- }
-
-
- /**
- * An injectable service for executing work inside or outside of the Angular zone.
- *
- * The most common use of this service is to optimize performance when starting a work consisting of
- * one or more asynchronous tasks that don't require UI updates or error handling to be handled by
- * Angular. Such tasks can be kicked off via {@link #runOutsideAngular} and if needed, these tasks
- * can reenter the Angular zone via {@link #run}.
- *
- * <!-- TODO: add/fix links to:
- * - docs explaining zones and the use of zones in Angular and change-detection
- * - link to runOutsideAngular/run (throughout this file!)
- * -->
- *
- * ### Example ([live demo](http://plnkr.co/edit/lY9m8HLy7z06vDoUaSN2?p=preview))
- * ```
- * import {Component, View, NgIf, NgZone} from 'angular2/angular2';
- *
- * @Component({
- * selector: 'ng-zone-demo'
- * })
- * @View({
- * template: `
- * <h2>Demo: NgZone</h2>
- *
- * <p>Progress: {{progress}}%</p>
- * <p *ng-if="progress >= 100">Done processing {{label}} of Angular zone!</p>
- *
- * <button (click)="processWithinAngularZone()">Process within Angular zone</button>
- * <button (click)="processOutsideOfAngularZone()">Process outside of Angular zone</button>
- * `,
- * directives: [NgIf]
- * })
- * export class NgZoneDemo {
- * progress: number = 0;
- * label: string;
- *
- * constructor(private _ngZone: NgZone) {}
- *
- * // Loop inside the Angular zone
- * // so the UI DOES refresh after each setTimeout cycle
- * processWithinAngularZone() {
- * this.label = 'inside';
- * this.progress = 0;
- * this._increaseProgress(() => console.log('Inside Done!'));
- * }
- *
- * // Loop outside of the Angular zone
- * // so the UI DOES NOT refresh after each setTimeout cycle
- * processOutsideOfAngularZone() {
- * this.label = 'outside';
- * this.progress = 0;
- * this._ngZone.runOutsideAngular(() => {
- * this._increaseProgress(() => {
- * // reenter the Angular zone and display done
- * this._ngZone.run(() => {console.log('Outside Done!') });
- * }}));
- * }
- *
- *
- * _increaseProgress(doneCallback: () => void) {
- * this.progress += 1;
- * console.log(`Current progress: ${this.progress}%`);
- *
- * if (this.progress < 100) {
- * window.setTimeout(() => this._increaseProgress(doneCallback)), 10)
- * } else {
- * doneCallback();
- * }
- * }
- * }
- * ```
- */
- interface NgZone {
-
- /**
- * Executes the `fn` function synchronously within the Angular zone and returns value returned by
- * the function.
- *
- * Running functions via `run` allows you to reenter Angular zone from a task that was executed
- * outside of the Angular zone (typically started via {@link #runOutsideAngular}).
- *
- * Any future tasks or microtasks scheduled from within this function will continue executing from
- * within the Angular zone.
- */
- run(fn: () => any): any;
-
- /**
- * Executes the `fn` function synchronously in Angular's parent zone and returns value returned by
- * the function.
- *
- * Running functions via `runOutsideAngular` allows you to escape Angular's zone and do work that
- * doesn't trigger Angular change-detection or is subject to Angular's error handling.
- *
- * Any future tasks or microtasks scheduled from within this function will continue executing from
- * outside of the Angular zone.
- *
- * Use {@link #run} to reenter the Angular zone and do work that updates the application model.
- */
- runOutsideAngular(fn: () => any): any;
-
- }
-
-
- class WebWorkerApplication {
-
- constructor(_clientMessageBrokerFactory: ClientMessageBrokerFactory, _serviceMessageBrokerFactory: ServiceMessageBrokerFactory);
-
- createClientMessageBroker(channel: string, runInZone?: boolean): ClientMessageBroker;
-
- createServiceMessageBroker(channel: string, runInZone?: boolean): ServiceMessageBroker;
-
- }
-
-
- /**
- * Bootstrapping a WebWorker
- *
- * You instantiate a WebWorker application by calling bootstrap with the URI of your worker's index
- * script
- * Note: The WebWorker script must call bootstrapWebworker once it is set up to complete the
- * bootstrapping process
- */
- function bootstrap(uri: string): WebWorkerInstance;
-
-
-
- function spawnWebWorker(uri: string): WebWorkerInstance;
-
-
-
- /**
- * Wrapper class that exposes the {@link WebWorkerApplication}
- * Isolate instance and underlying {@link MessageBus} for lower level message passing.
- */
- class WebWorkerInstance {
-
- constructor(app: WebWorkerApplication, worker: Worker, bus: MessageBus);
-
- app: WebWorkerApplication;
-
- worker: Worker;
-
- bus: MessageBus;
-
- }
-
-
- /**
- * Message Bus is a low level API used to communicate between the UI and the background.
- * Communication is based on a channel abstraction. Messages published in a
- * given channel to one MessageBusSink are received on the same channel
- * by the corresponding MessageBusSource.
- */
- class MessageBus implements MessageBusSource, MessageBusSink {
-
- /**
- * Sets up a new channel on the MessageBus.
- * MUST be called before calling from or to on the channel.
- * If runInZone is true then the source will emit events inside the angular zone
- * and the sink will buffer messages and send only once the zone exits.
- * if runInZone is false then the source will emit events inside the global zone
- * and the sink will send messages immediately.
- */
- initChannel(channel: string, runInZone?: boolean): void;
-
- /**
- * Assigns this bus to the given zone.
- * Any callbacks attached to channels where runInZone was set to true on initialization
- * will be executed in the given zone.
- */
- attachToZone(zone: NgZone): void;
-
- /**
- * Returns an {@link EventEmitter} that emits every time a message
- * is received on the given channel.
- */
- from(channel: string): EventEmitter;
-
- /**
- * Returns an {@link EventEmitter} for the given channel
- * To publish methods to that channel just call next (or add in dart) on the returned emitter
- */
- to(channel: string): EventEmitter;
-
- }
-
-
- interface MessageBusSource {
-
- /**
- * Sets up a new channel on the MessageBusSource.
- * MUST be called before calling from on the channel.
- * If runInZone is true then the source will emit events inside the angular zone.
- * if runInZone is false then the source will emit events inside the global zone.
- */
- initChannel(channel: string, runInZone: boolean): void;
-
- /**
- * Assigns this source to the given zone.
- * Any channels which are initialized with runInZone set to true will emit events that will be
- * executed within the given zone.
- */
- attachToZone(zone: NgZone): void;
-
- /**
- * Returns an {@link EventEmitter} that emits every time a message
- * is received on the given channel.
- */
- from(channel: string): EventEmitter;
-
- }
-
-
- interface MessageBusSink {
-
- /**
- * Sets up a new channel on the MessageBusSink.
- * MUST be called before calling to on the channel.
- * If runInZone is true the sink will buffer messages and send only once the zone exits.
- * if runInZone is false the sink will send messages immediatly.
- */
- initChannel(channel: string, runInZone: boolean): void;
-
- /**
- * Assigns this sink to the given zone.
- * Any channels which are initialized with runInZone set to true will wait for the given zone
- * to exit before sending messages.
- */
- attachToZone(zone: NgZone): void;
-
- /**
- * Returns an {@link EventEmitter} for the given channel
- * To publish methods to that channel just call next (or add in dart) on the returned emitter
- */
- to(channel: string): EventEmitter;
-
- }
-
-
- interface ClientMessageBrokerFactory {
-
- /**
- * Initializes the given channel and attaches a new {@link ClientMessageBroker} to it.
- */
- createMessageBroker(channel: string, runInZone?: boolean): ClientMessageBroker;
-
- }
-
-
- interface ClientMessageBroker {
-
- channel: any;
-
- runOnService(args: UiArguments, returnType: Type): Promise<any>;
-
- }
-
-
- class FnArg {
-
- constructor(value: any, type: Type);
-
- value: any;
-
- type: Type;
-
- }
-
-
- class UiArguments {
-
- constructor(method: string, args?: FnArg[]);
-
- method: string;
-
- args: FnArg[];
-
- }
-
-
- interface ServiceMessageBrokerFactory {
-
- /**
- * Initializes the given channel and attaches a new {@link ServiceMessageBroker} to it.
- */
- createMessageBroker(channel: string, runInZone?: boolean): ServiceMessageBroker;
-
- }
-
-
- /**
- * Helper class for UIComponents that allows components to register methods.
- * If a registered method message is received from the broker on the worker,
- * the UIMessageBroker deserializes its arguments and calls the registered method.
- * If that method returns a promise, the UIMessageBroker returns the result to the worker.
- */
- interface ServiceMessageBroker {
-
- channel: any;
-
- registerMethod(methodName: string, signature: Type[], method: Function, returnType?: Type): void;
-
- }
-
-
- class ReceivedMessage {
-
- constructor(data: {[key: string]: any});
-
- method: string;
-
- args: any[];
-
- id: string;
-
- type: string;
-
- }
-
-
- var NgZone: InjectableReference;
-
-
-
- var ClientMessageBrokerFactory: InjectableReference;
-
-
-
- var ClientMessageBroker: InjectableReference;
-
-
-
- var ServiceMessageBrokerFactory: InjectableReference;
-
-
-
- var ServiceMessageBroker: InjectableReference;
-
-
-
-}
-
-declare module "angular2/web_worker/ui" {
- export = ngUi;
-}
-
-
+// Angular 2 distributes typings in our NPM package.
+// To get the typings, simply:
+// $ npm install angular2
+// and use TypeScript 1.6.2 or later.
+//
+// Note that TypeScript must be configured with
+// --moduleResolution node
+// which is the default when --module commonjs
diff --git a/angular2/http.d.ts b/angular2/http.d.ts
deleted file mode 100644
index 573d346a53..0000000000
--- a/angular2/http.d.ts
+++ /dev/null
@@ -1,1310 +0,0 @@
-// Type definitions for Angular v2.0.0-local_sha.7d5c3eb
-// 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.
-// ***********************************************************
-
-// angular2/http depends transitively on these libraries.
-// If you don't have them installed you can install them using TSD
-// https://github.com/DefinitelyTyped/tsd
-
-///<reference path="./angular2.d.ts"/>
-
-
-
-
-/**
- * @module
- * @description
- * The http module provides services to perform http requests. To get started, see the {@link Http}
- * class.
- */
-declare module ngHttp {
- /**
- * Mock Connection to represent a {@link Connection} for tests.
- */
- class MockConnection implements Connection {
-
- constructor(req: Request);
-
- /**
- * Describes the state of the connection, based on `XMLHttpRequest.readyState`, but with
- * additional states. For example, state 5 indicates an aborted connection.
- */
- readyState: ReadyStates;
-
- /**
- * {@link Request} instance used to create the connection.
- */
- request: Request;
-
- /**
- * {@link ng.EventEmitter} of {@link Response}. Can be subscribed to in order to be notified when a
- * response is available.
- */
- response: any;
-
- /**
- * Sends a mock response to the connection. This response is the value that is emitted to the
- * {@link ng.EventEmitter} returned by {@link Http}.
- *
- * #Example
- *
- * ```
- * var connection;
- * backend.connections.toRx().subscribe(c => connection = c);
- * http.request('data.json').toRx().subscribe(res => console.log(res.text()));
- * connection.mockRespond(new Response('fake response')); //logs 'fake response'
- * ```
- */
- mockRespond(res: Response): void;
-
- /**
- * Not yet implemented!
- *
- * Sends the provided {@link Response} to the `downloadObserver` of the `Request`
- * associated with this connection.
- */
- mockDownload(res: Response): void;
-
- /**
- * Emits the provided error object as an error to the {@link Response} {@link ng.EventEmitter}
- * returned
- * from {@link Http}.
- */
- mockError(err?: Error): void;
-
- }
-
-
- /**
- * A mock backend for testing the {@link Http} service.
- *
- * This class can be injected in tests, and should be used to override bindings
- * to other backends, such as {@link XHRBackend}.
- *
- * #Example
- *
- * ```
- * import {MockBackend, DefaultOptions, Http} from 'angular2/http';
- * it('should get some data', inject([AsyncTestCompleter], (async) => {
- * var connection;
- * var injector = Injector.resolveAndCreate([
- * MockBackend,
- * bind(Http).toFactory((backend, defaultOptions) => {
- * return new Http(backend, defaultOptions)
- * }, [MockBackend, DefaultOptions])]);
- * var http = injector.get(Http);
- * var backend = injector.get(MockBackend);
- * //Assign any newly-created connection to local variable
- * backend.connections.toRx().subscribe(c => connection = c);
- * http.request('data.json').toRx().subscribe((res) => {
- * expect(res.text()).toBe('awesome');
- * async.done();
- * });
- * connection.mockRespond(new Response('awesome'));
- * }));
- * ```
- *
- * This method only exists in the mock implementation, not in real Backends.
- */
- class MockBackend implements ConnectionBackend {
-
- constructor();
-
- /**
- * {@link ng.EventEmitter}
- * of {@link MockConnection} instances that have been created by this backend. Can be subscribed
- * to in order to respond to connections.
- *
- * #Example
- *
- * ```
- * import {MockBackend, Http, BaseRequestOptions} from 'angular2/http';
- * import {Injector} from 'angular2/core';
- *
- * it('should get a response', () => {
- * var connection; //this will be set when a new connection is emitted from the backend.
- * var text; //this will be set from mock response
- * var injector = Injector.resolveAndCreate([
- * MockBackend,
- * bind(Http).toFactory(backend, options) {
- * return new Http(backend, options);
- * }, [MockBackend, BaseRequestOptions]]);
- * var backend = injector.get(MockBackend);
- * var http = injector.get(Http);
- * backend.connections.toRx().subscribe(c => connection = c);
- * http.request('something.json').toRx().subscribe(res => {
- * text = res.text();
- * });
- * connection.mockRespond(new Response({body: 'Something'}));
- * expect(text).toBe('Something');
- * });
- * ```
- *
- * This property only exists in the mock implementation, not in real Backends.
- */
- connections: any;
-
- /**
- * An array representation of `connections`. This array will be updated with each connection that
- * is created by this backend.
- *
- * This property only exists in the mock implementation, not in real Backends.
- */
- connectionsArray: MockConnection[];
-
- /**
- * {@link ng.EventEmitter} of {@link MockConnection} instances that haven't yet been resolved (i.e.
- * with a `readyState`
- * less than 4). Used internally to verify that no connections are pending via the
- * `verifyNoPendingRequests` method.
- *
- * This property only exists in the mock implementation, not in real Backends.
- */
- pendingConnections: any;
-
- /**
- * Checks all connections, and raises an exception if any connection has not received a response.
- *
- * This method only exists in the mock implementation, not in real Backends.
- */
- verifyNoPendingRequests(): void;
-
- /**
- * Can be used in conjunction with `verifyNoPendingRequests` to resolve any not-yet-resolve
- * connections, if it's expected that there are connections that have not yet received a response.
- *
- * This method only exists in the mock implementation, not in real Backends.
- */
- resolveAllConnections(): void;
-
- /**
- * Creates a new {@link MockConnection}. This is equivalent to calling `new
- * MockConnection()`, except that it also will emit the new `Connection` to the `connections`
- * emitter of this `MockBackend` instance. This method will usually only be used by tests
- * against the framework itself, not by end-users.
- */
- createConnection(req: Request): Connection;
-
- }
-
-
- /**
- * Creates `Request` instances from provided values.
- *
- * The Request's interface is inspired by the Request constructor defined in the [Fetch
- * Spec](https://fetch.spec.whatwg.org/#request-class),
- * but is considered a static value whose body can be accessed many times. There are other
- * differences in the implementation, but this is the most significant.
- *
- * `Request` instances are typically created by higher-level classes, like {@link Http} and
- * {@link Jsonp}, but it may occasionally be useful to explicitly create `Request` instances.
- * One such example is when creating services that wrap higher-level services, like {@link Http},
- * where it may be useful to generate a `Request` with arbitrary headers and search params.
- *
- * ```typescript
- * import {Injectable, Injector} from 'angular2/angular2';
- * import {HTTP_BINDINGS, Http, Request, RequestMethods} from 'angular2/http';
- *
- * @Injectable()
- * class AutoAuthenticator {
- * constructor(public http:Http) {}
- * request(url:string) {
- * return this.http.request(new Request({
- * method: RequestMethods.Get,
- * url: url,
- * search: 'password=123'
- * }));
- * }
- * }
- *
- * var injector = Injector.resolveAndCreate([HTTP_BINDINGS, AutoAuthenticator]);
- * var authenticator = injector.get(AutoAuthenticator);
- * authenticator.request('people.json').toRx().subscribe(res => {
- * //URL should have included '?password=123'
- * console.log('people', res.json());
- * });
- * ```
- */
- class Request {
-
- constructor(requestOptions: RequestOptions);
-
- /**
- * Http method with which to perform the request.
- */
- method: RequestMethods;
-
- /**
- * {@link Headers} instance
- */
- headers: Headers;
-
- /**
- * Url of the remote resource
- */
- url: string;
-
- /**
- * Returns the request's body as string, assuming that body exists. If body is undefined, return
- * empty
- * string.
- */
- text(): String;
-
- }
-
-
- /**
- * Creates `Response` instances from provided values.
- *
- * Though this object isn't
- * usually instantiated by end-users, it is the primary object interacted with when it comes time to
- * add data to a view.
- *
- * #Example
- *
- * ```
- * http.request('my-friends.txt').toRx().subscribe(response => this.friends = response.text());
- * ```
- *
- * The Response's interface is inspired by the Response constructor defined in the [Fetch
- * Spec](https://fetch.spec.whatwg.org/#response-class), but is considered a static value whose body
- * can be accessed many times. There are other differences in the implementation, but this is the
- * most significant.
- */
- class Response {
-
- constructor(responseOptions: ResponseOptions);
-
- /**
- * One of "basic", "cors", "default", "error, or "opaque".
- *
- * Defaults to "default".
- */
- type: ResponseTypes;
-
- /**
- * True if the response's status is within 200-299
- */
- ok: boolean;
-
- /**
- * URL of response.
- *
- * Defaults to empty string.
- */
- url: string;
-
- /**
- * Status code returned by server.
- *
- * Defaults to 200.
- */
- status: number;
-
- /**
- * Text representing the corresponding reason phrase to the `status`, as defined in [ietf rfc 2616
- * section 6.1.1](https://tools.ietf.org/html/rfc2616#section-6.1.1)
- *
- * Defaults to "OK"
- */
- statusText: string;
-
- /**
- * Non-standard property
- *
- * Denotes how many of the response body's bytes have been loaded, for example if the response is
- * the result of a progress event.
- */
- bytesLoaded: number;
-
- /**
- * Non-standard property
- *
- * Denotes how many bytes are expected in the final response body.
- */
- totalBytes: number;
-
- /**
- * Headers object based on the `Headers` class in the [Fetch
- * Spec](https://fetch.spec.whatwg.org/#headers-class).
- */
- headers: Headers;
-
- /**
- * Not yet implemented
- */
- blob(): any;
-
- /**
- * Attempts to return body as parsed `JSON` object, or raises an exception.
- */
- json(): Object;
-
- /**
- * Returns the body as a string, presuming `toString()` can be called on the response body.
- */
- text(): string;
-
- /**
- * Not yet implemented
- */
- arrayBuffer(): any;
-
- }
-
-
- /**
- * Interface for options to construct a Request, based on
- * [RequestInit](https://fetch.spec.whatwg.org/#requestinit) from the Fetch spec.
- */
- type RequestOptionsArgs = {
- url?: string;
- method?: string | RequestMethods;
- search?: string | URLSearchParams;
- headers?: Headers;
- // TODO: Support Blob, ArrayBuffer, JSON, URLSearchParams, FormData
- body?: string;
- }
-
-
- /**
- * Interface for options to construct a Response, based on
- * [ResponseInit](https://fetch.spec.whatwg.org/#responseinit) from the Fetch spec.
- */
- type ResponseOptionsArgs = {
- // TODO: Support Blob, ArrayBuffer, JSON
- body?: string | Object | FormData;
- status?: number;
- statusText?: string;
- headers?: Headers;
- type?: ResponseTypes;
- url?: string;
- }
-
-
- /**
- * Abstract class from which real connections are derived.
- */
- class Connection {
-
- readyState: ReadyStates;
-
- request: Request;
-
- response: any;
-
- }
-
-
- /**
- * Abstract class from which real backends are derived.
- *
- * The primary purpose of a `ConnectionBackend` is to create new connections to fulfill a given
- * {@link Request}.
- */
- class ConnectionBackend {
-
- constructor();
-
- createConnection(request: any): Connection;
-
- }
-
-
- class BrowserXhr {
-
- constructor();
-
- build(): any;
-
- }
-
-
- /**
- * Subclass of {@link RequestOptions}, with default values.
- *
- * Default values:
- * * method: {@link RequestMethods RequestMethods.Get}
- * * headers: empty {@link Headers} object
- *
- * This class could be extended and bound to the {@link RequestOptions} class
- * when configuring an {@link Injector}, in order to override the default options
- * used by {@link Http} to create and send {@link Request Requests}.
- *
- * ### Example ([live demo](http://plnkr.co/edit/LEKVSx?p=preview))
- *
- * ```typescript
- * import {bind, bootstrap} from 'angular2/angular2';
- * import {HTTP_BINDINGS, Http, BaseRequestOptions, RequestOptions} from 'angular2/http';
- * import {App} from './myapp';
- *
- * class MyOptions extends BaseRequestOptions {
- * search: string = 'coreTeam=true';
- * }
- *
- * bootstrap(App, [HTTP_BINDINGS, bind(RequestOptions).toClass(MyOptions)]);
- * ```
- *
- * The options could also be extended when manually creating a {@link Request}
- * object.
- *
- * ### Example ([live demo](http://plnkr.co/edit/oyBoEvNtDhOSfi9YxaVb?p=preview))
- *
- * ```
- * import {BaseRequestOptions, Request, RequestMethods} from 'angular2/http';
- *
- * var options = new BaseRequestOptions();
- * var req = new Request(options.merge({
- * method: RequestMethods.Post,
- * url: 'https://google.com'
- * }));
- * console.log('req.method:', RequestMethods[req.method]); // Post
- * console.log('options.url:', options.url); // null
- * console.log('req.url:', req.url); // https://google.com
- * ```
- */
- class BaseRequestOptions extends RequestOptions {
-
- constructor();
-
- }
-
-
- /**
- * Creates a request options object to be optionally provided when instantiating a
- * {@link Request}.
- *
- * This class is based on the `RequestInit` description in the [Fetch
- * Spec](https://fetch.spec.whatwg.org/#requestinit).
- *
- * All values are null by default. Typical defaults can be found in the {@link BaseRequestOptions}
- * class, which sub-classes `RequestOptions`.
- *
- * ### Example ([live demo](http://plnkr.co/edit/7Wvi3lfLq41aQPKlxB4O?p=preview))
- *
- * ```typescript
- * import {RequestOptions, Request, RequestMethods} from 'angular2/http';
- *
- * var options = new RequestOptions({
- * method: RequestMethods.Post,
- * url: 'https://google.com'
- * });
- * var req = new Request(options);
- * console.log('req.method:', RequestMethods[req.method]); // Post
- * console.log('options.url:', options.url); // https://google.com
- * ```
- */
- class RequestOptions {
-
- constructor({method, headers, body, url, search}?: RequestOptionsArgs);
-
- /**
- * Http method with which to execute a {@link Request}.
- * Acceptable methods are defined in the {@link RequestMethods} enum.
- */
- method: RequestMethods | string;
-
- /**
- * {@link Headers} to be attached to a {@link Request}.
- */
- headers: Headers;
-
- /**
- * Body to be used when creating a {@link Request}.
- */
- body: string;
-
- /**
- * Url with which to perform a {@link Request}.
- */
- url: string;
-
- /**
- * Search parameters to be included in a {@link Request}.
- */
- search: URLSearchParams;
-
- /**
- * Creates a copy of the `RequestOptions` instance, using the optional input as values to override
- * existing values. This method will not change the values of the instance on which it is being
- * called.
- *
- * Note that `headers` and `search` will override existing values completely if present in
- * the `options` object. If these values should be merged, it should be done prior to calling
- * `merge` on the `RequestOptions` instance.
- *
- * Example ([live demo](http://plnkr.co/edit/6w8XA8YTkDRcPYpdB9dk?p=preview))
- *
- * ```typescript
- * import {RequestOptions, Request, RequestMethods} from 'angular2/http';
- *
- * var options = new RequestOptions({
- * method: RequestMethods.Post
- * });
- * var req = new Request(options.merge({
- * url: 'https://google.com'
- * }));
- * console.log('req.method:', RequestMethods[req.method]); // Post
- * console.log('options.url:', options.url); // null
- * console.log('req.url:', req.url); // https://google.com
- * ```
- */
- merge(options?: RequestOptionsArgs): RequestOptions;
-
- }
-
-
- /**
- * Subclass of {@link ResponseOptions}, with default values.
- *
- * Default values:
- * * status: 200
- * * headers: empty {@link Headers} object
- *
- * This class could be extended and bound to the {@link ResponseOptions} class
- * when configuring an {@link Injector}, in order to override the default options
- * used by {@link Http} to create {@link Response Responses}.
- *
- * ### Example ([live demo](http://plnkr.co/edit/qv8DLT?p=preview))
- *
- * ```typescript
- * import {bind, bootstrap} from 'angular2/angular2';
- * import {HTTP_BINDINGS, Headers, Http, BaseResponseOptions, ResponseOptions} from 'angular2/http';
- * import {App} from './myapp';
- *
- * class MyOptions extends BaseResponseOptions {
- * headers:Headers = new Headers({network: 'github'});
- * }
- *
- * bootstrap(App, [HTTP_BINDINGS, bind(ResponseOptions).toClass(MyOptions)]);
- * ```
- *
- * The options could also be extended when manually creating a {@link Response}
- * object.
- *
- * ### Example ([live demo](http://plnkr.co/edit/VngosOWiaExEtbstDoix?p=preview))
- *
- * ```
- * import {BaseResponseOptions, Response} from 'angular2/http';
- *
- * var options = new BaseResponseOptions();
- * var res = new Response(options.merge({
- * body: 'Angular2',
- * headers: new Headers({framework: 'angular'})
- * }));
- * console.log('res.headers.get("framework"):', res.headers.get('framework')); // angular
- * console.log('res.text():', res.text()); // Angular2;
- * ```
- */
- class BaseResponseOptions extends ResponseOptions {
-
- constructor();
-
- }
-
-
- /**
- * Creates a response options object to be optionally provided when instantiating a
- * {@link Response}.
- *
- * This class is based on the `ResponseInit` description in the [Fetch
- * Spec](https://fetch.spec.whatwg.org/#responseinit).
- *
- * All values are null by default. Typical defaults can be found in the
- * {@link BaseResponseOptions} class, which sub-classes `ResponseOptions`.
- *
- * This class may be used in tests to build {@link Response Responses} for
- * mock responses (see {@link MockBackend}).
- *
- * ### Example ([live demo](http://plnkr.co/edit/P9Jkk8e8cz6NVzbcxEsD?p=preview))
- *
- * ```typescript
- * import {ResponseOptions, Response} from 'angular2/http';
- *
- * var options = new ResponseOptions({
- * body: '{"name":"Jeff"}'
- * });
- * var res = new Response(options);
- *
- * console.log('res.json():', res.json()); // Object {name: "Jeff"}
- * ```
- */
- class ResponseOptions {
-
- constructor({body, status, headers, statusText, type, url}?: ResponseOptionsArgs);
-
- /**
- * String or Object representing the body of the {@link Response}.
- */
- body: string | Object;
-
- /**
- * Http {@link http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html status code}
- * associated with the response.
- */
- status: number;
-
- /**
- * Response {@link Headers headers}
- */
- headers: Headers;
-
- url: string;
-
- /**
- * Creates a copy of the `ResponseOptions` instance, using the optional input as values to
- * override
- * existing values. This method will not change the values of the instance on which it is being
- * called.
- *
- * This may be useful when sharing a base `ResponseOptions` object inside tests,
- * where certain properties may change from test to test.
- *
- * Example ([live demo](http://plnkr.co/edit/1lXquqFfgduTFBWjNoRE?p=preview))
- *
- * ```typescript
- * import {ResponseOptions, Response} from 'angular2/http';
- *
- * var options = new ResponseOptions({
- * body: {name: 'Jeff'}
- * });
- * var res = new Response(options.merge({
- * url: 'https://google.com'
- * }));
- * console.log('options.url:', options.url); // null
- * console.log('res.json():', res.json()); // Object {name: "Jeff"}
- * console.log('res.url:', res.url); // https://google.com
- * ```
- */
- merge(options?: ResponseOptionsArgs): ResponseOptions;
-
- }
-
-
- /**
- * Creates {@link XHRConnection} instances.
- *
- * This class would typically not be used by end users, but could be
- * overridden if a different backend implementation should be used,
- * such as in a node backend.
- *
- * #Example
- *
- * ```
- * import {Http, MyNodeBackend, HTTP_BINDINGS, BaseRequestOptions} from 'angular2/http';
- * @Component({
- * viewBindings: [
- * HTTP_BINDINGS,
- * bind(Http).toFactory((backend, options) => {
- * return new Http(backend, options);
- * }, [MyNodeBackend, BaseRequestOptions])]
- * })
- * class MyComponent {
- * constructor(http:Http) {
- * http('people.json').toRx().subscribe(res => this.people = res.json());
- * }
- * }
- * ```
- */
- class XHRBackend implements ConnectionBackend {
-
- constructor(_browserXHR: BrowserXhr, _baseResponseOptions: ResponseOptions);
-
- createConnection(request: Request): XHRConnection;
-
- }
-
-
- /**
- * Creates connections using `XMLHttpRequest`. Given a fully-qualified
- * request, an `XHRConnection` will immediately create an `XMLHttpRequest` object and send the
- * request.
- *
- * This class would typically not be created or interacted with directly inside applications, though
- * the {@link MockConnection} may be interacted with in tests.
- */
- class XHRConnection implements Connection {
-
- constructor(req: Request, browserXHR: BrowserXhr, baseResponseOptions?: ResponseOptions);
-
- request: Request;
-
- /**
- * Response {@link ng.EventEmitter} which emits a single {@link Response} value on load event of
- * `XMLHttpRequest`.
- */
- response: any;
-
- readyState: ReadyStates;
-
- }
-
-
- interface JSONPBackend extends ConnectionBackend {
-
- createConnection(request: Request): JSONPConnection;
-
- }
-
-
- interface JSONPConnection extends Connection {
-
- readyState: ReadyStates;
-
- request: Request;
-
- response: any;
-
- baseResponseOptions: ResponseOptions;
-
- finished(data?: any): void;
-
- }
-
-
- /**
- * Performs http requests using `XMLHttpRequest` as the default backend.
- *
- * `Http` is available as an injectable class, with methods to perform http requests. Calling
- * `request` returns an {@link ng.Observable} which will emit a single {@link Response} when a
- * response is received.
- *
- * #Example
- *
- * ```typescript
- * import {Http, HTTP_BINDINGS} from 'angular2/http';
- * @Component({selector: 'http-app', viewBindings: [HTTP_BINDINGS]})
- * @View({templateUrl: 'people.html'})
- * class PeopleComponent {
- * constructor(http: Http) {
- * http.get('people.json')
- * // Call map on the response observable to get the parsed people object
- * .map(res => res.json())
- * // Subscribe to the observable to get the parsed people object and attach it to the
- * // component
- * .subscribe(people => this.people = people);
- * }
- * }
- * ```
- *
- *
- * #Example
- *
- * ```
- * http.get('people.json').observer({next: (value) => this.people = people});
- * ```
- *
- * The default construct used to perform requests, `XMLHttpRequest`, is abstracted as a "Backend" (
- * {@link XHRBackend} in this case), which could be mocked with dependency injection by replacing
- * the {@link XHRBackend} binding, as in the following example:
- *
- * #Example
- *
- * ```typescript
- * import {MockBackend, BaseRequestOptions, Http} from 'angular2/http';
- * var injector = Injector.resolveAndCreate([
- * BaseRequestOptions,
- * MockBackend,
- * bind(Http).toFactory(
- * function(backend, defaultOptions) {
- * return new Http(backend, defaultOptions);
- * },
- * [MockBackend, BaseRequestOptions])
- * ]);
- * var http = injector.get(Http);
- * http.get('request-from-mock-backend.json').subscribe((res:Response) => doSomething(res));
- * ```
- */
- class Http {
-
- constructor(_backend: ConnectionBackend, _defaultOptions: RequestOptions);
-
- /**
- * Performs any type of http request. First argument is required, and can either be a url or
- * a {@link Request} instance. If the first argument is a url, an optional {@link RequestOptions}
- * object can be provided as the 2nd argument. The options object will be merged with the values
- * of {@link BaseRequestOptions} before performing the request.
- */
- request(url: string | Request, options?: RequestOptionsArgs): any;
-
- /**
- * Performs a request with `get` http method.
- */
- get(url: string, options?: RequestOptionsArgs): any;
-
- /**
- * Performs a request with `post` http method.
- */
- post(url: string, body: string, options?: RequestOptionsArgs): any;
-
- /**
- * Performs a request with `put` http method.
- */
- put(url: string, body: string, options?: RequestOptionsArgs): any;
-
- /**
- * Performs a request with `delete` http method.
- */
- delete(url: string, options?: RequestOptionsArgs): any;
-
- /**
- * Performs a request with `patch` http method.
- */
- patch(url: string, body: string, options?: RequestOptionsArgs): any;
-
- /**
- * Performs a request with `head` http method.
- */
- head(url: string, options?: RequestOptionsArgs): any;
-
- }
-
-
- class Jsonp extends Http {
-
- constructor(backend: ConnectionBackend, defaultOptions: RequestOptions);
-
- /**
- * Performs any type of http request. First argument is required, and can either be a url or
- * a {@link Request} instance. If the first argument is a url, an optional {@link RequestOptions}
- * object can be provided as the 2nd argument. The options object will be merged with the values
- * of {@link BaseRequestOptions} before performing the request.
- */
- request(url: string | Request, options?: RequestOptionsArgs): any;
-
- }
-
-
- /**
- * Polyfill for [Headers](https://developer.mozilla.org/en-US/docs/Web/API/Headers/Headers), as
- * specified in the [Fetch Spec](https://fetch.spec.whatwg.org/#headers-class).
- *
- * The only known difference between this `Headers` implementation and the spec is the
- * lack of an `entries` method.
- *
- * ### Example ([live demo](http://plnkr.co/edit/MTdwT6?p=preview))
- *
- * ```
- * import {Headers} from 'angular2/http';
- *
- * var firstHeaders = new Headers();
- * firstHeaders.append('Content-ng.Type', 'image/jpeg');
- * console.log(firstHeaders.get('Content-ng.Type')) //'image/jpeg'
- *
- * // Create headers from Plain Old JavaScript Object
- * var secondHeaders = new Headers({
- * 'X-My-Custom-Header': 'Angular'
- * });
- * console.log(secondHeaders.get('X-My-Custom-Header')); //'Angular'
- *
- * var thirdHeaders = new Headers(secondHeaders);
- * console.log(thirdHeaders.get('X-My-Custom-Header')); //'Angular'
- * ```
- */
- class Headers {
-
- constructor(headers?: Headers | {[key: string]: any});
-
- /**
- * Appends a header to existing list of header values for a given header name.
- */
- append(name: string, value: string): void;
-
- /**
- * Deletes all header values for the given name.
- */
- delete(name: string): void;
-
- forEach(fn: (value: string, name: string, headers: Headers) => any): void;
-
- /**
- * Returns first header that matches given name.
- */
- get(header: string): string;
-
- /**
- * Check for existence of header by given name.
- */
- has(header: string): boolean;
-
- /**
- * Provides names of set headers
- */
- keys(): string[];
-
- /**
- * Sets or overrides header value for given name.
- */
- set(header: string, value: string | string[]): void;
-
- /**
- * Returns values of all headers.
- */
- values(): string[][];
-
- /**
- * Returns list of header values for a given name.
- */
- getAll(header: string): string[];
-
- /**
- * This method is not implemented.
- */
- entries(): void;
-
- }
-
-
- /**
- * Acceptable response types to be associated with a {@link Response}, based on
- * [ResponseType](https://fetch.spec.whatwg.org/#responsetype) from the Fetch spec.
- */
- enum ResponseTypes {
-
- Basic,
-
- Cors,
-
- Default,
-
- Error,
-
- Opaque
- }
-
-
-
- /**
- * All possible states in which a connection can be, based on
- * [States](http://www.w3.org/TR/XMLHttpRequest/#states) from the `XMLHttpRequest` spec, but with an
- * additional "CANCELLED" state.
- */
- enum ReadyStates {
-
- Unsent,
-
- Open,
-
- HeadersReceived,
-
- Loading,
-
- Done,
-
- Cancelled
- }
-
-
-
- /**
- * Supported http methods.
- */
- enum RequestMethods {
-
- Get,
-
- Post,
-
- Put,
-
- Delete,
-
- Options,
-
- Head,
-
- Patch
- }
-
-
-
- /**
- * Map-like representation of url search parameters, based on
- * [URLSearchParams](https://url.spec.whatwg.org/#urlsearchparams) in the url living standard,
- * with several extensions for merging URLSearchParams objects:
- * - setAll()
- * - appendAll()
- * - replaceAll()
- */
- class URLSearchParams {
-
- constructor(rawParams?: string);
-
- paramsMap: Map<string, string[]>;
-
- rawParams: string;
-
- clone(): URLSearchParams;
-
- has(param: string): boolean;
-
- get(param: string): string;
-
- getAll(param: string): string[];
-
- set(param: string, val: string): void;
-
- setAll(searchParams: URLSearchParams): void;
-
- append(param: string, val: string): void;
-
- appendAll(searchParams: URLSearchParams): void;
-
- replaceAll(searchParams: URLSearchParams): void;
-
- toString(): string;
-
- delete(param: string): void;
-
- }
-
-
- /**
- * Provides a basic set of injectables to use the {@link Http} service in any application.
- *
- * The `HTTP_BINDINGS` should be included either in a component's injector,
- * or in the root injector when bootstrapping an application.
- *
- * ### Example ([live demo](http://plnkr.co/edit/snj7Nv?p=preview))
- *
- * ```
- * import {bootstrap, Component, NgFor, View} from 'angular2/angular2';
- * import {HTTP_BINDINGS, Http} from 'angular2/http';
- *
- * @Component({
- * selector: 'app',
- * bindings: [HTTP_BINDINGS]
- * })
- * @View({
- * template: `
- * <div>
- * <h1>People</h1>
- * <ul>
- * <li *ng-for="#person of people">
- * {{person.name}}
- * </li>
- * </ul>
- * </div>
- * `,
- * directives: [NgFor]
- * })
- * export class App {
- * people: Object[];
- * constructor(http:Http) {
- * http.get('people.json').toRx().subscribe(res => {
- * this.people = res.json();
- * });
- * }
- * active:boolean = false;
- * toggleActiveState() {
- * this.active = !this.active;
- * }
- * }
- *
- * bootstrap(App)
- * .catch(err => console.error(err));
- * ```
- *
- * The primary public API included in `HTTP_BINDINGS` is the {@link Http} class.
- * However, other bindings required by `Http` are included,
- * which may be beneficial to override in certain cases.
- *
- * The bindings included in `HTTP_BINDINGS` include:
- * * {@link Http}
- * * {@link XHRBackend}
- * * `BrowserXHR` - Private factory to create `XMLHttpRequest` instances
- * * {@link RequestOptions} - Bound to {@link BaseRequestOptions} class
- * * {@link ResponseOptions} - Bound to {@link BaseResponseOptions} class
- *
- * There may be cases where it makes sense to extend the base request options,
- * such as to add a search string to be appended to all URLs.
- * To accomplish this, a new binding for {@link RequestOptions} should
- * be added in the same injector as `HTTP_BINDINGS`.
- *
- * ### Example ([live demo](http://plnkr.co/edit/aCMEXi?p=preview))
- *
- * ```
- * import {bind, bootstrap} from 'angular2/angular2';
- * import {HTTP_BINDINGS, BaseRequestOptions, RequestOptions} from 'angular2/http';
- *
- * class MyOptions extends BaseRequestOptions {
- * search: string = 'coreTeam=true';
- * }
- *
- * bootstrap(App, [HTTP_BINDINGS, bind(RequestOptions).toClass(MyOptions)])
- * .catch(err => console.error(err));
- * ```
- *
- * Likewise, to use a mock backend for unit tests, the {@link XHRBackend}
- * binding should be bound to {@link MockBackend}.
- *
- * ### Example ([live demo](http://plnkr.co/edit/7LWALD?p=preview))
- *
- * ```
- * import {bind, Injector} from 'angular2/angular2';
- * import {HTTP_BINDINGS, Http, Response, XHRBackend, MockBackend} from 'angular2/http';
- *
- * var people = [{name: 'Jeff'}, {name: 'Tobias'}];
- *
- * var injector = Injector.resolveAndCreate([
- * HTTP_BINDINGS,
- * MockBackend,
- * bind(XHRBackend).toAlias(MockBackend)
- * ]);
- * var http = injector.get(Http);
- * var backend = injector.get(MockBackend);
- *
- * // Listen for any new requests
- * backend.connections.observer({
- * next: connection => {
- * var response = new Response({body: people});
- * setTimeout(() => {
- * // Send a response to the request
- * connection.mockRespond(response);
- * });
- * });
- *
- * http.get('people.json').observer({
- * next: res => {
- * // Response came from mock backend
- * console.log('first person', res.json()[0].name);
- * }
- * });
- * ```
- */
- let HTTP_BINDINGS: any[];
-
-
-
- /**
- * Provides a basic set of bindings to use the {@link Jsonp} service in any application.
- *
- * The `JSONP_BINDINGS` should be included either in a component's injector,
- * or in the root injector when bootstrapping an application.
- *
- * ### Example ([live demo](http://plnkr.co/edit/vmeN4F?p=preview))
- *
- * ```
- * import {Component, NgFor, View} from 'angular2/angular2';
- * import {JSONP_BINDINGS, Jsonp} from 'angular2/http';
- *
- * @Component({
- * selector: 'app',
- * bindings: [JSONP_BINDINGS]
- * })
- * @View({
- * template: `
- * <div>
- * <h1>People</h1>
- * <ul>
- * <li *ng-for="#person of people">
- * {{person.name}}
- * </li>
- * </ul>
- * </div>
- * `,
- * directives: [NgFor]
- * })
- * export class App {
- * people: Array<Object>;
- * constructor(jsonp:Jsonp) {
- * jsonp.request('people.json').toRx().subscribe(res => {
- * this.people = res.json();
- * })
- * }
- * }
- * ```
- *
- * The primary public API included in `JSONP_BINDINGS` is the {@link Jsonp} class.
- * However, other bindings required by `Jsonp` are included,
- * which may be beneficial to override in certain cases.
- *
- * The bindings included in `JSONP_BINDINGS` include:
- * * {@link Jsonp}
- * * {@link JSONPBackend}
- * * `BrowserJsonp` - Private factory
- * * {@link RequestOptions} - Bound to {@link BaseRequestOptions} class
- * * {@link ResponseOptions} - Bound to {@link BaseResponseOptions} class
- *
- * There may be cases where it makes sense to extend the base request options,
- * such as to add a search string to be appended to all URLs.
- * To accomplish this, a new binding for {@link RequestOptions} should
- * be added in the same injector as `JSONP_BINDINGS`.
- *
- * ### Example ([live demo](http://plnkr.co/edit/TFug7x?p=preview))
- *
- * ```
- * import {bind, bootstrap} from 'angular2/angular2';
- * import {JSONP_BINDINGS, BaseRequestOptions, RequestOptions} from 'angular2/http';
- *
- * class MyOptions extends BaseRequestOptions {
- * search: string = 'coreTeam=true';
- * }
- *
- * bootstrap(App, [JSONP_BINDINGS, bind(RequestOptions).toClass(MyOptions)])
- * .catch(err => console.error(err));
- * ```
- *
- * Likewise, to use a mock backend for unit tests, the {@link JSONPBackend}
- * binding should be bound to {@link MockBackend}.
- *
- * ### Example ([live demo](http://plnkr.co/edit/HDqZWL?p=preview))
- *
- * ```
- * import {bind, Injector} from 'angular2/angular2';
- * import {JSONP_BINDINGS, Jsonp, Response, JSONPBackend, MockBackend} from 'angular2/http';
- *
- * var people = [{name: 'Jeff'}, {name: 'Tobias'}];
- * var injector = Injector.resolveAndCreate([
- * JSONP_BINDINGS,
- * MockBackend,
- * bind(JSONPBackend).toAlias(MockBackend)
- * ]);
- * var jsonp = injector.get(Jsonp);
- * var backend = injector.get(MockBackend);
- *
- * // Listen for any new requests
- * backend.connections.observer({
- * next: connection => {
- * var response = new Response({body: people});
- * setTimeout(() => {
- * // Send a response to the request
- * connection.mockRespond(response);
- * });
- * });
- *
- * jsonp.get('people.json').observer({
- * next: res => {
- * // Response came from mock backend
- * console.log('first person', res.json()[0].name);
- * }
- * });
- * ```
- */
- let JSONP_BINDINGS: any[];
-
-
-
- var JSONPBackend: ng.InjectableReference;
-
-
-
- var JSONPConnection: ng.InjectableReference;
-
-
-
-}
-
-declare module "angular2/http" {
- export = ngHttp;
-}
-
-
diff --git a/angular2/router.d.ts b/angular2/router.d.ts
deleted file mode 100644
index be33ebf937..0000000000
--- a/angular2/router.d.ts
+++ /dev/null
@@ -1,1330 +0,0 @@
-// Type definitions for Angular v2.0.0-39
-// 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.
-// ***********************************************************
-
-// angular2/router depends transitively on these libraries.
-// If you don't have them installed you can install them using TSD
-// https://github.com/DefinitelyTyped/tsd
-
-///<reference path="./angular2.d.ts"/>
-
-
-
-
-/**
- * @module
- * @description
- * Maps application URLs into application states, to support deep-linking and navigation.
- */
-declare module ngRouter {
- /**
- * The `Router` is responsible for mapping URLs to components.
- *
- * You can see the state of the router by inspecting the read-only field `router.navigating`.
- * This may be useful for showing a spinner, for instance.
- *
- * ## Concepts
- *
- * Routers and component instances have a 1:1 correspondence.
- *
- * The router holds reference to a number of {@link RouterOutlet}.
- * An outlet is a placeholder that the router dynamically fills in depending on the current URL.
- *
- * When the router navigates from a URL, it must first recognize it and serialize it into an
- * `Instruction`.
- * The router uses the `RouteRegistry` to get an `Instruction`.
- */
- class Router {
-
- constructor(registry: RouteRegistry, parent: Router, hostComponent: any);
-
- navigating: boolean;
-
- lastNavigationAttempt: string;
-
- registry: RouteRegistry;
-
- parent: Router;
-
- hostComponent: any;
-
- /**
- * Constructs a child router. You probably don't need to use this unless you're writing a reusable
- * component.
- */
- childRouter(hostComponent: any): Router;
-
- /**
- * Constructs a child router. You probably don't need to use this unless you're writing a reusable
- * component.
- */
- auxRouter(hostComponent: any): Router;
-
- /**
- * Register an outlet to notified of primary route changes.
- *
- * You probably don't need to use this unless you're writing a reusable component.
- */
- registerPrimaryOutlet(outlet: RouterOutlet): Promise<boolean>;
-
- /**
- * Register an outlet to notified of auxiliary route changes.
- *
- * You probably don't need to use this unless you're writing a reusable component.
- */
- registerAuxOutlet(outlet: RouterOutlet): Promise<boolean>;
-
- /**
- * Given an instruction, returns `true` if the instruction is currently active,
- * otherwise `false`.
- */
- isRouteActive(instruction: Instruction): boolean;
-
- /**
- * Dynamically update the routing configuration and trigger a navigation.
- *
- * # Usage
- *
- * ```
- * router.config([
- * { 'path': '/', 'component': IndexComp },
- * { 'path': '/user/:id', 'component': UserComp },
- * ]);
- * ```
- */
- config(definitions: RouteDefinition[]): Promise<any>;
-
- /**
- * Navigate based on the provided Route Link DSL. It's preferred to navigate with this method
- * over `navigateByUrl`.
- *
- * # Usage
- *
- * This method takes an array representing the Route Link DSL:
- * ```
- * ['./MyCmp', {param: 3}]
- * ```
- * See the {@link RouterLink} directive for more.
- */
- navigate(linkParams: any[]): Promise<any>;
-
- /**
- * Navigate to a URL. Returns a promise that resolves when navigation is complete.
- * It's preferred to navigate with `navigate` instead of this method, since URLs are more brittle.
- *
- * If the given URL begins with a `/`, router will navigate absolutely.
- * If the given URL does not begin with `/`, the router will navigate relative to this component.
- */
- navigateByUrl(url: string, _skipLocationChange?: boolean): Promise<any>;
-
- /**
- * Navigate via the provided instruction. Returns a promise that resolves when navigation is
- * complete.
- */
- navigateByInstruction(instruction: Instruction, _skipLocationChange?: boolean): Promise<any>;
-
- /**
- * Updates this router and all descendant routers according to the given instruction
- */
- commit(instruction: Instruction, _skipLocationChange?: boolean): Promise<any>;
-
- /**
- * Subscribe to URL updates from the router
- */
- subscribe(onNext: (value: any) => void): Object;
-
- /**
- * Removes the contents of this router's outlet and all descendant outlets
- */
- deactivate(instruction: Instruction): Promise<any>;
-
- /**
- * Given a URL, returns an instruction representing the component graph
- */
- recognize(url: string): Promise<Instruction>;
-
- /**
- * Navigates to either the last URL successfully navigated to, or the last URL requested if the
- * router has yet to successfully navigate.
- */
- renavigate(): Promise<any>;
-
- /**
- * Generate a URL from a component name and optional map of parameters. The URL is relative to the
- * app's base href.
- */
- generate(linkParams: any[]): Instruction;
-
- }
-
-
- /**
- * A router outlet is a placeholder that Angular dynamically fills based on the application's route.
- *
- * ## Use
- *
- * ```
- * <router-outlet></router-outlet>
- * ```
- */
- interface RouterOutlet {
-
- name: string;
-
- /**
- * Called by the Router to instantiate a new component during the commit phase of a navigation.
- * This method in turn is responsible for calling the `onActivate` hook of its child.
- */
- activate(nextInstruction: ComponentInstruction): Promise<any>;
-
- /**
- * Called by the {@link Router} during the commit phase of a navigation when an outlet
- * reuses a component between different routes.
- * This method in turn is responsible for calling the `onReuse` hook of its child.
- */
- reuse(nextInstruction: ComponentInstruction): Promise<any>;
-
- /**
- * Called by the {@link Router} when an outlet reuses a component across navigations.
- * This method in turn is responsible for calling the `onReuse` hook of its child.
- */
- deactivate(nextInstruction: ComponentInstruction): Promise<any>;
-
- /**
- * Called by the {@link Router} during recognition phase of a navigation.
- *
- * If this resolves to `false`, the given navigation is cancelled.
- *
- * This method delegates to the child component's `canDeactivate` hook if it exists,
- * and otherwise resolves to true.
- */
- canDeactivate(nextInstruction: ComponentInstruction): Promise<boolean>;
-
- /**
- * Called by the {@link Router} during recognition phase of a navigation.
- *
- * If the new child component has a different ng.Type than the existing child component,
- * this will resolve to `false`. You can't reuse an old component when the new component
- * is of a different ng.Type.
- *
- * Otherwise, this method delegates to the child component's `canReuse` hook if it exists,
- * or resolves to true if the hook is not present.
- */
- canReuse(nextInstruction: ComponentInstruction): Promise<boolean>;
-
- }
-
-
- /**
- * The RouterLink directive lets you link to specific parts of your app.
- *
- * Consider the following route configuration:
- *
- * ```
- * @RouteConfig([
- * { path: '/user', component: UserCmp, as: 'user' }
- * ]);
- * class MyComp {}
- * ```
- *
- * When linking to this `user` route, you can write:
- *
- * ```
- * <a [router-link]="['./user']">link to user component</a>
- * ```
- *
- * RouterLink expects the value to be an array of route names, followed by the params
- * for that level of routing. For instance `['/team', {teamId: 1}, 'user', {userId: 2}]`
- * means that we want to generate a link for the `team` route with params `{teamId: 1}`,
- * and with a child route `user` with params `{userId: 2}`.
- *
- * The first route name should be prepended with `/`, `./`, or `../`.
- * If the route begins with `/`, the router will look up the route from the root of the app.
- * If the route begins with `./`, the router will instead look in the current component's
- * children for the route. And if the route begins with `../`, the router will look at the
- * current component's parent.
- */
- class RouterLink {
-
- constructor(_router: Router, _location: Location);
-
- visibleHref: string;
-
- isRouteActive: boolean;
-
- routeParams: any;
-
- onClick(): boolean;
-
- }
-
-
- /**
- * `RouteParams` is an immutable map of parameters for the given route
- * based on the url matcher and optional parameters for that route.
- *
- * You can inject `RouteParams` into the constructor of a component to use it.
- *
- * ## Example
- *
- * ```
- * import {bootstrap, Component, View} from 'angular2/angular2';
- * import {Router, ROUTER_DIRECTIVES, routerBindings, RouteConfig} from 'angular2/router';
- *
- * @Component({...})
- * @View({directives: [ROUTER_DIRECTIVES]})
- * @RouteConfig([
- * {path: '/user/:id', component: UserCmp, as: 'UserCmp'},
- * ])
- * class AppCmp {}
- *
- * @Component({...})
- * @View({ template: 'user: {{id}}' })
- * class UserCmp {
- * string: id;
- * constructor(params: RouteParams) {
- * this.id = params.get('id');
- * }
- * }
- *
- * bootstrap(AppCmp, routerBindings(AppCmp));
- * ```
- */
- class RouteParams {
-
- constructor(params: {[key: string]: string});
-
- params: {[key: string]: string};
-
- get(param: string): string;
-
- }
-
-
- /**
- * The RouteRegistry holds route configurations for each component in an Angular app.
- * It is responsible for creating Instructions from URLs, and generating URLs based on route and
- * parameters.
- */
- class RouteRegistry {
-
- /**
- * Given a component and a configuration object, add the route to this registry
- */
- config(parentComponent: any, config: RouteDefinition): void;
-
- /**
- * Reads the annotations of a component and configures the registry based on them
- */
- configFromComponent(component: any): void;
-
- /**
- * Given a URL and a parent component, return the most specific instruction for navigating
- * the application into the state specified by the url
- */
- recognize(url: string, parentComponent: any): Promise<Instruction>;
-
- /**
- * Given a normalized list with component names and params like: `['user', {id: 3 }]`
- * generates a url with a leading slash relative to the provided `parentComponent`.
- */
- generate(linkParams: any[], parentComponent: any): Instruction;
-
- }
-
-
- /**
- * `LocationStrategy` is responsible for representing and reading route state
- * from the the browser's URL. Angular provides two strategies:
- * {@link HashLocationStrategy} (default) and {@link PathLocationStrategy}.
- *
- * This is used under the hood of the {@link Location} service.
- *
- * Applications should use the {@link Router} or {@link Location} services to
- * interact with application route state.
- *
- * For instance, {@link HashLocationStrategy} produces URLs like
- * `http://example.com#/foo`, and {@link PathLocationStrategy} produces
- * `http://example.com/foo` as an equivalent URL.
- *
- * See these two classes for more.
- */
- class LocationStrategy {
-
- path(): string;
-
- pushState(ctx: any, title: string, url: string): void;
-
- forward(): void;
-
- back(): void;
-
- onPopState(fn: (_: any) => any): void;
-
- getBaseHref(): string;
-
- }
-
-
- /**
- * `HashLocationStrategy` is a {@link LocationStrategy} used to configure the
- * {@link Location} service to represent its state in the
- * [hash fragment](https://en.wikipedia.org/wiki/Uniform_Resource_Locator#Syntax)
- * of the browser's URL.
- *
- * `HashLocationStrategy` is the default binding for {@link LocationStrategy}
- * provided in {@link routerBindings} and {@link ROUTER_BINDINGS}.
- *
- * For instance, if you call `location.go('/foo')`, the browser's URL will become
- * `example.com#/foo`.
- *
- * ## Example
- *
- * ```
- * import {Component, View} from 'angular2/angular2';
- * import {
- * ROUTER_DIRECTIVES,
- * routerBindings,
- * RouteConfig,
- * Location
- * } from 'angular2/router';
- *
- * @Component({...})
- * @View({directives: [ROUTER_DIRECTIVES]})
- * @RouteConfig([
- * {...},
- * ])
- * class AppCmp {
- * constructor(location: Location) {
- * location.go('/foo');
- * }
- * }
- *
- * bootstrap(AppCmp, [
- * routerBindings(AppCmp) // includes binding to HashLocationStrategy
- * ]);
- * ```
- */
- class HashLocationStrategy extends LocationStrategy {
-
- constructor();
-
- onPopState(fn: EventListener): void;
-
- getBaseHref(): string;
-
- path(): string;
-
- pushState(state: any, title: string, url: string): void;
-
- forward(): void;
-
- back(): void;
-
- }
-
-
- /**
- * `PathLocationStrategy` is a {@link LocationStrategy} used to configure the
- * {@link Location} service to represent its state in the
- * [path](https://en.wikipedia.org/wiki/Uniform_Resource_Locator#Syntax) of the
- * browser's URL.
- *
- * If you're using `PathLocationStrategy`, you must provide a binding for
- * {@link APP_BASE_HREF} to a string representing the URL prefix that should
- * be preserved when generating and recognizing URLs.
- *
- * For instance, if you provide an `APP_BASE_HREF` of `'/my/app'` and call
- * `location.go('/foo')`, the browser's URL will become
- * `example.com/my/app/foo`.
- *
- * ## Example
- *
- * ```
- * import {Component, View, bind} from 'angular2/angular2';
- * import {
- * APP_BASE_HREF
- * ROUTER_DIRECTIVES,
- * routerBindings,
- * RouteConfig,
- * Location,
- * LocationStrategy,
- * PathLocationStrategy
- * } from 'angular2/router';
- *
- * @Component({...})
- * @View({directives: [ROUTER_DIRECTIVES]})
- * @RouteConfig([
- * {...},
- * ])
- * class AppCmp {
- * constructor(location: Location) {
- * location.go('/foo');
- * }
- * }
- *
- * bootstrap(AppCmp, [
- * routerBindings(AppCmp),
- * bind(LocationStrategy).toClass(PathLocationStrategy),
- * bind(APP_BASE_HREF).toValue('/my/app')
- * ]);
- * ```
- */
- class PathLocationStrategy extends LocationStrategy {
-
- constructor();
-
- onPopState(fn: EventListener): void;
-
- getBaseHref(): string;
-
- path(): string;
-
- pushState(state: any, title: string, url: string): void;
-
- forward(): void;
-
- back(): void;
-
- }
-
-
- /**
- * `Location` is a service that applications can use to interact with a browser's URL.
- * Depending on which {@link LocationStrategy} is used, `Location` will either persist
- * to the URL's path or the URL's hash segment.
- *
- * Note: it's better to use {@link Router#navigate} service to trigger route changes. Use
- * `Location` only if you need to interact with or create normalized URLs outside of
- * routing.
- *
- * `Location` is responsible for normalizing the URL against the application's base href.
- * A normalized URL is absolute from the URL host, includes the application's base href, and has no
- * trailing slash:
- * - `/my/app/user/123` is normalized
- * - `my/app/user/123` **is not** normalized
- * - `/my/app/user/123/` **is not** normalized
- *
- * ## Example
- *
- * ```
- * import {Component, View} from 'angular2/angular2';
- * import {
- * ROUTER_DIRECTIVES,
- * routerBindings,
- * RouteConfig,
- * Location
- * } from 'angular2/router';
- *
- * @Component({...})
- * @View({directives: [ROUTER_DIRECTIVES]})
- * @RouteConfig([
- * {...},
- * ])
- * class AppCmp {
- * constructor(location: Location) {
- * location.go('/foo');
- * }
- * }
- *
- * bootstrap(AppCmp, [routerBindings(AppCmp)]);
- * ```
- */
- class Location {
-
- constructor(platformStrategy: LocationStrategy, href?: string);
-
- platformStrategy: LocationStrategy;
-
- /**
- * Returns the normalized URL path.
- */
- path(): string;
-
- /**
- * Given a string representing a URL, returns the normalized URL path.
- */
- normalize(url: string): string;
-
- /**
- * Given a string representing a URL, returns the normalized URL path.
- * If the given URL doesn't begin with a leading slash (`'/'`), this method adds one
- * before normalizing.
- */
- normalizeAbsolutely(url: string): string;
-
- /**
- * Changes the browsers URL to the normalized version of the given URL, and pushes a
- * new item onto the platform's history.
- */
- go(url: string): void;
-
- /**
- * Navigates forward in the platform's history.
- */
- forward(): void;
-
- /**
- * Navigates back in the platform's history.
- */
- back(): void;
-
- /**
- * Subscribe to the platform's `popState` events.
- */
- subscribe(onNext: (value: any) => void, onThrow?: (exception: any) => void, onReturn?: () => void): void;
-
- }
-
-
- /**
- * The `APP_BASE_HREF` token represents the base href to be used with the
- * {@link PathLocationStrategy}.
- *
- * If you're using {@link PathLocationStrategy}, you must provide a binding to a string
- * representing the URL prefix that should be preserved when generating and recognizing
- * URLs.
- *
- * ## Example
- *
- * ```
- * import {Component, View} from 'angular2/angular2';
- * import {ROUTER_DIRECTIVES, routerBindings, RouteConfig} from 'angular2/router';
- *
- * @Component({...})
- * @View({directives: [ROUTER_DIRECTIVES]})
- * @RouteConfig([
- * {...},
- * ])
- * class AppCmp {
- * // ...
- * }
- *
- * bootstrap(AppCmp, [
- * routerBindings(AppCmp),
- * PathLocationStrategy,
- * bind(APP_BASE_HREF).toValue('/my/app')
- * ]);
- * ```
- */
- let APP_BASE_HREF: OpaqueToken;
-
-
-
- /**
- * Defines route lifecycle method `onActivate`, which is called by the router at the end of a
- * successful route navigation.
- *
- * For a single component's navigation, only one of either {@link OnActivate} or {@link OnReuse}
- * will be called depending on the result of {@link CanReuse}.
- *
- * The `onActivate` hook is called with two {@link ComponentInstruction}s as parameters, the first
- * representing the current route being navigated to, and the second parameter representing the
- * previous route or `null`.
- *
- * If `onActivate` returns a promise, the route change will wait until the promise settles to
- * instantiate and activate child components.
- *
- * ## Example
- * ```
- * import {Component, View} from 'angular2/angular2';
- * import {OnActivate, ComponentInstruction} from 'angular2/router';
- *
- * @Component({
- * selector: 'my-cmp'
- * })
- * @View({
- * template: '<div>hello!</div>'
- * })
- * class MyCmp implements OnActivate {
- * onActivate(next: ComponentInstruction, prev: ComponentInstruction) {
- * this.log = 'Finished navigating from ' + prev.urlPath + ' to ' + next.urlPath;
- * }
- * }
- * ```
- */
- interface OnActivate {
-
- onActivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
-
- }
-
-
- /**
- * Defines route lifecycle method `onDeactivate`, which is called by the router before destroying
- * a component as part of a route change.
- *
- * The `onDeactivate` hook is called with two {@link ComponentInstruction}s as parameters, the first
- * representing the current route being navigated to, and the second parameter representing the
- * previous route.
- *
- * If `onDeactivate` returns a promise, the route change will wait until the promise settles.
- *
- * ## Example
- * ```
- * import {Component, View} from 'angular2/angular2';
- * import {OnDeactivate, ComponentInstruction} from 'angular2/router';
- *
- * @Component({
- * selector: 'my-cmp'
- * })
- * @View({
- * template: '<div>hello!</div>'
- * })
- * class MyCmp implements OnDeactivate {
- * onDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
- * return this.doFadeAwayAnimation();
- * }
- * }
- * ```
- */
- interface OnDeactivate {
-
- onDeactivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
-
- }
-
-
- /**
- * Defines route lifecycle method `onReuse`, which is called by the router at the end of a
- * successful route navigation when {@link CanReuse} is implemented and returns or resolves to true.
- *
- * For a single component's navigation, only one of either {@link OnActivate} or {@link OnReuse}
- * will be called, depending on the result of {@link CanReuse}.
- *
- * The `onReuse` hook is called with two {@link ComponentInstruction}s as parameters, the first
- * representing the current route being navigated to, and the second parameter representing the
- * previous route or `null`.
- *
- * ## Example
- * ```
- * import {Component, View} from 'angular2/angular2';
- * import {CanReuse, OnReuse, ComponentInstruction} from 'angular2/router';
- *
- * @Component({
- * selector: 'my-cmp'
- * })
- * @View({
- * template: '<div>hello!</div>'
- * })
- * class MyCmp implements CanReuse, OnReuse {
- * canReuse(next: ComponentInstruction, prev: ComponentInstruction) {
- * return true;
- * }
- *
- * onReuse(next: ComponentInstruction, prev: ComponentInstruction) {
- * this.params = next.params;
- * }
- * }
- * ```
- */
- interface OnReuse {
-
- onReuse(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
-
- }
-
-
- /**
- * Defines route lifecycle method `canDeactivate`, which is called by the router to determine
- * if a component can be removed as part of a navigation.
- *
- * The `canDeactivate` hook is called with two {@link ComponentInstruction}s as parameters, the
- * first representing the current route being navigated to, and the second parameter
- * representing the previous route.
- *
- * If `canDeactivate` returns or resolves to `false`, the navigation is cancelled. If it returns or
- * resolves to `true`, then the navigation continues, and the component will be deactivated
- * (the {@link OnDeactivate} hook will be run) and removed.
- *
- * If `canDeactivate` throws or rejects, the navigation is also cancelled.
- *
- * ## Example
- * ```
- * import {Component, View} from 'angular2/angular2';
- * import {CanDeactivate, ComponentInstruction} from 'angular2/router';
- *
- * @Component({
- * selector: 'my-cmp'
- * })
- * @View({
- * template: '<div>hello!</div>'
- * })
- * class MyCmp implements CanDeactivate {
- * canDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
- * return askUserIfTheyAreSureTheyWantToQuit();
- * }
- * }
- * ```
- */
- interface CanDeactivate {
-
- canDeactivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
-
- }
-
-
- /**
- * Defines route lifecycle method `canReuse`, which is called by the router to determine whether a
- * component should be reused across routes, or whether to destroy and instantiate a new component.
- *
- * The `canReuse` hook is called with two {@link ComponentInstruction}s as parameters, the first
- * representing the current route being navigated to, and the second parameter representing the
- * previous route.
- *
- * If `canReuse` returns or resolves to `true`, the component instance will be reused and the
- * {@link OnDeactivate} hook will be run. If `canReuse` returns or resolves to `false`, a new
- * component will be instantiated, and the existing component will be deactivated and removed as
- * part of the navigation.
- *
- * If `canReuse` throws or rejects, the navigation will be cancelled.
- *
- * ## Example
- * ```
- * import {Component, View} from 'angular2/angular2';
- * import {CanReuse, OnReuse, ComponentInstruction} from 'angular2/router';
- *
- * @Component({
- * selector: 'my-cmp'
- * })
- * @View({
- * template: '<div>hello!</div>'
- * })
- * class MyCmp implements CanReuse, OnReuse {
- * canReuse(next: ComponentInstruction, prev: ComponentInstruction) {
- * return next.params.id == prev.params.id;
- * }
- *
- * onReuse(next: ComponentInstruction, prev: ComponentInstruction) {
- * this.id = next.params.id;
- * }
- * }
- * ```
- */
- interface CanReuse {
-
- canReuse(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
-
- }
-
-
- /**
- * Defines route lifecycle hook `CanActivate`, which is called by the router to determine
- * if a component can be instantiated as part of a navigation.
- *
- * The `CanActivate` hook is called with two {@link ComponentInstruction}s as parameters, the first
- * representing
- * the current route being navigated to, and the second parameter representing the previous route or
- * `null`.
- *
- * Note that unlike other lifecycle hooks, this one uses an annotation rather than an interface.
- * This is because the `CanActivate` function is called before the component is instantiated.
- *
- * If `CanActivate` returns or resolves to `false`, the navigation is cancelled.
- * If `CanActivate` throws or rejects, the navigation is also cancelled.
- * If `CanActivate` returns or resolves to `true`, navigation continues, the component is
- * instantiated, and the {@link OnActivate} hook of that component is called if implemented.
- *
- * ## Example
- * ```
- * import {Component} from 'angular2/angular2';
- * import {CanActivate} from 'angular2/router';
- *
- * @Component({
- * selector: 'control-panel-cmp'
- * })
- * @View({
- * template: '<div>Control Panel: ...</div>'
- * })
- * @CanActivate(() => checkIfUserIsLoggedIn())
- * class ControlPanelCmp {
- * // ...
- * }
- * ```
- */
- var CanActivate: (hook: (next: ComponentInstruction, prev: ComponentInstruction) => Promise<boolean>| boolean) =>
- ClassDecorator;
-
-
-
- /**
- * `Instruction` is a tree of {@link ComponentInstruction}s with all the information needed
- * to transition each component in the app to a given route, including all auxiliary routes.
- *
- * `Instruction`s can be created using {@link Router#generate}, and can be used to
- * perform route changes with {@link Router#navigateByInstruction}.
- *
- * ## Example
- *
- * ```
- * import {bootstrap, Component, View} from 'angular2/angular2';
- * import {Router, ROUTER_DIRECTIVES, routerBindings, RouteConfig} from 'angular2/router';
- *
- * @Component({...})
- * @View({directives: [ROUTER_DIRECTIVES]})
- * @RouteConfig([
- * {...},
- * ])
- * class AppCmp {
- * constructor(router: Router) {
- * var instruction = router.generate(['/MyRoute']);
- * router.navigateByInstruction(instruction);
- * }
- * }
- *
- * bootstrap(AppCmp, routerBindings(AppCmp));
- * ```
- */
- class Instruction {
-
- constructor(component: ComponentInstruction, child: Instruction, auxInstruction: {[key: string]: Instruction});
-
- component: ComponentInstruction;
-
- child: Instruction;
-
- auxInstruction: {[key: string]: Instruction};
-
- /**
- * Returns a new instruction that shares the state of the existing instruction, but with
- * the given child {@link Instruction} replacing the existing child.
- */
- replaceChild(child: Instruction): Instruction;
-
- }
-
-
- /**
- * A `ComponentInstruction` represents the route state for a single component. An `Instruction` is
- * composed of a tree of these `ComponentInstruction`s.
- *
- * `ComponentInstructions` is a public API. Instances of `ComponentInstruction` are passed
- * to route lifecycle hooks, like {@link CanActivate}.
- *
- * `ComponentInstruction`s are [https://en.wikipedia.org/wiki/Hash_consing](hash consed). You should
- * never construct one yourself with "new." Instead, rely on {@link Router/PathRecognizer} to
- * construct `ComponentInstruction`s.
- *
- * You should not modify this object. It should be treated as immutable.
- */
- interface ComponentInstruction {
-
- reuse: boolean;
-
- urlPath: string;
-
- urlParams: string[];
-
- params: {[key: string]: any};
-
- /**
- * Returns the component type of the represented route, or `null` if this instruction
- * hasn't been resolved.
- */
- componentType: any;
-
- /**
- * Returns a promise that will resolve to component type of the represented route.
- * If this instruction references an {@link AsyncRoute}, the `loader` function of that route
- * will run.
- */
- resolveComponentType(): Promise<ng.Type>;
-
- /**
- * Returns the specificity of the route associated with this `Instruction`.
- */
- specificity: any;
-
- /**
- * Returns `true` if the component type of this instruction has no child {@link RouteConfig},
- * or `false` if it does.
- */
- terminal: any;
-
- /**
- * Returns the route data of the given route that was specified in the {@link RouteDefinition},
- * or `null` if no route data was specified.
- */
- routeData(): Object;
-
- }
-
-
- /**
- * Creates a token that can be used in a DI Binding.
- *
- * ### Example ([live demo](http://plnkr.co/edit/Ys9ezXpj2Mnoy3Uc8KBp?p=preview))
- *
- * ```typescript
- * var t = new OpaqueToken("binding");
- *
- * var injector = Injector.resolveAndCreate([
- * bind(t).toValue("bindingValue")
- * ]);
- *
- * expect(injector.get(t)).toEqual("bindingValue");
- * ```
- *
- * Using an `OpaqueToken` is preferable to using strings as tokens because of possible collisions
- * caused by multiple bindings using the same string as two different tokens.
- *
- * Using an `OpaqueToken` is preferable to using an `Object` as tokens because it provides better
- * error messages.
- */
- class OpaqueToken {
-
- constructor(_desc: string);
-
- toString(): string;
-
- }
-
-
- let ROUTE_DATA: OpaqueToken;
-
-
-
- /**
- * Token used to bind the component with the top-level {@link RouteConfig}s for the
- * application.
- *
- * You can use the {@link routerBindings} function in your {@link bootstrap} bindings to
- * simplify setting up these bindings.
- *
- * ## Example ([live demo](http://plnkr.co/edit/iRUP8B5OUbxCWQ3AcIDm))
- *
- * ```
- * import {Component, View} from 'angular2/angular2';
- * import {
- * ROUTER_DIRECTIVES,
- * ROUTER_BINDINGS,
- * ROUTER_PRIMARY_COMPONENT,
- * RouteConfig
- * } from 'angular2/router';
- *
- * @Component({...})
- * @View({directives: [ROUTER_DIRECTIVES]})
- * @RouteConfig([
- * {...},
- * ])
- * class AppCmp {
- * // ...
- * }
- *
- * bootstrap(AppCmp, [
- * ROUTER_BINDINGS,
- * bind(ROUTER_PRIMARY_COMPONENT).toValue(AppCmp)
- * ]);
- * ```
- */
- let ROUTER_PRIMARY_COMPONENT: OpaqueToken;
-
-
-
- /**
- * A list of directives. To use the router directives like {@link RouterOutlet} and
- * {@link RouterLink}, add this to your `directives` array in the {@link View} decorator of your
- * component.
- *
- * ## Example ([live demo](http://plnkr.co/edit/iRUP8B5OUbxCWQ3AcIDm))
- *
- * ```
- * import {Component, View} from 'angular2/angular2';
- * import {ROUTER_DIRECTIVES, routerBindings, RouteConfig} from 'angular2/router';
- *
- * @Component({...})
- * @View({directives: [ROUTER_DIRECTIVES]})
- * @RouteConfig([
- * {...},
- * ])
- * class AppCmp {
- * // ...
- * }
- *
- * bootstrap(AppCmp, [routerBindings(AppCmp)]);
- * ```
- */
- let ROUTER_DIRECTIVES: any[];
-
-
-
- /**
- * A list of {@link Binding}s. To use the router, you must add this to your application.
- *
- * Note that you also need to bind to {@link ROUTER_PRIMARY_COMPONENT}.
- *
- * You can use the {@link routerBindings} function in your {@link bootstrap} bindings to
- * simplify setting up these bindings.
- *
- * ## Example ([live demo](http://plnkr.co/edit/iRUP8B5OUbxCWQ3AcIDm))
- *
- * ```
- * import {Component, View} from 'angular2/angular2';
- * import {
- * ROUTER_DIRECTIVES,
- * ROUTER_BINDINGS,
- * ROUTER_PRIMARY_COMPONENT,
- * RouteConfig
- * } from 'angular2/router';
- *
- * @Component({...})
- * @View({directives: [ROUTER_DIRECTIVES]})
- * @RouteConfig([
- * {...},
- * ])
- * class AppCmp {
- * // ...
- * }
- *
- * bootstrap(AppCmp, [
- * ROUTER_BINDINGS,
- * bind(ROUTER_PRIMARY_COMPONENT).toValue(AppCmp)
- * ]);
- * ```
- */
- let ROUTER_BINDINGS: any[];
-
-
-
- /**
- * A list of {@link Binding}s. To use the router, you must add these bindings to
- * your application.
- *
- * ## Example ([live demo](http://plnkr.co/edit/iRUP8B5OUbxCWQ3AcIDm))
- *
- * ```
- * import {Component, View} from 'angular2/angular2';
- * import {ROUTER_DIRECTIVES, routerBindings, RouteConfig} from 'angular2/router';
- *
- * @Component({...})
- * @View({directives: [ROUTER_DIRECTIVES]})
- * @RouteConfig([
- * {...},
- * ])
- * class AppCmp {
- * // ...
- * }
- *
- * bootstrap(AppCmp, [routerBindings(AppCmp)]);
- * ```
- */
- function routerBindings(primaryComponent: ng.Type): Array<any>;
-
-
-
- /**
- * `Route` is a type of {@link RouteDefinition} used to route a path to a component.
- *
- * It has the following properties:
- * - `path` is a string that uses the route matcher DSL.
- * - `component` a component type.
- * - `as` is an optional `CamelCase` string representing the name of the route.
- * - `data` is an optional property of any type representing arbitrary route metadata for the given
- * route. It is injectable via the {@link ROUTE_DATA} token.
- *
- * ## Example
- * ```
- * import {RouteConfig} from 'angular2/router';
- *
- * @RouteConfig([
- * {path: '/home', component: HomeCmp, as: 'HomeCmp' }
- * ])
- * class MyApp {}
- * ```
- */
- class Route implements RouteDefinition {
-
- constructor({path, component, as, data}:
- {path: string, component: ng.Type, as?: string, data?: any});
-
- data: any;
-
- path: string;
-
- component: ng.Type;
-
- as: string;
-
- loader: Function;
-
- redirectTo: string;
-
- }
-
-
- /**
- * `Redirect` is a type of {@link RouteDefinition} used to route a path to an asynchronously loaded
- * component.
- *
- * It has the following properties:
- * - `path` is a string that uses the route matcher DSL.
- * - `redirectTo` is a string representing the new URL to be matched against.
- *
- * ## Example
- * ```
- * import {RouteConfig} from 'angular2/router';
- *
- * @RouteConfig([
- * {path: '/', redirectTo: '/home'},
- * {path: '/home', component: HomeCmp}
- * ])
- * class MyApp {}
- * ```
- */
- class Redirect implements RouteDefinition {
-
- constructor({path, redirectTo}: {path: string, redirectTo: string});
-
- path: string;
-
- redirectTo: string;
-
- as: string;
-
- loader: Function;
-
- data: any;
-
- }
-
-
- /**
- * `AuxRoute` is a type of {@link RouteDefinition} used to define an auxiliary route.
- *
- * It takes an object with the following properties:
- * - `path` is a string that uses the route matcher DSL.
- * - `component` a component type.
- * - `as` is an optional `CamelCase` string representing the name of the route.
- * - `data` is an optional property of any type representing arbitrary route metadata for the given
- * route. It is injectable via the {@link ROUTE_DATA} token.
- *
- * ## Example
- * ```
- * import {RouteConfig, AuxRoute} from 'angular2/router';
- *
- * @RouteConfig([
- * new AuxRoute({path: '/home', component: HomeCmp})
- * ])
- * class MyApp {}
- * ```
- */
- class AuxRoute implements RouteDefinition {
-
- constructor({path, component, as}: {path: string, component: ng.Type, as?: string});
-
- data: any;
-
- path: string;
-
- component: ng.Type;
-
- as: string;
-
- loader: Function;
-
- redirectTo: string;
-
- }
-
-
- /**
- * `AsyncRoute` is a type of {@link RouteDefinition} used to route a path to an asynchronously
- * loaded component.
- *
- * It has the following properties:
- * - `path` is a string that uses the route matcher DSL.
- * - `loader` is a function that returns a promise that resolves to a component.
- * - `as` is an optional `CamelCase` string representing the name of the route.
- * - `data` is an optional property of any type representing arbitrary route metadata for the given
- * route. It is injectable via the {@link ROUTE_DATA} token.
- *
- * ## Example
- * ```
- * import {RouteConfig} from 'angular2/router';
- *
- * @RouteConfig([
- * {path: '/home', loader: () => Promise.resolve(MyLoadedCmp), as: 'MyLoadedCmp'}
- * ])
- * class MyApp {}
- * ```
- */
- class AsyncRoute implements RouteDefinition {
-
- constructor({path, loader, as, data}: {path: string, loader: Function, as?: string, data?: any});
-
- data: any;
-
- path: string;
-
- loader: Function;
-
- as: string;
-
- }
-
-
- /**
- * `RouteDefinition` defines a route within a {@link RouteConfig} decorator.
- *
- * Supported keys:
- * - `path` (required)
- * - `component`, `loader`, `redirectTo` (requires exactly one of these)
- * - `as` (optional)
- * - `data` (optional)
- *
- * See also {@link Route}, {@link AsyncRoute}, {@link AuxRoute}, and {@link Redirect}.
- */
- interface RouteDefinition {
-
- path: string;
-
- component?: ng.Type | ComponentDefinition;
-
- loader?: Function;
-
- redirectTo?: string;
-
- as?: string;
-
- data?: any;
-
- }
-
-
- var RouteConfig: (configs: RouteDefinition[]) => ClassDecorator;
-
-
-
- interface ComponentDefinition {
-
- type: string;
-
- loader?: Function;
-
- component?: ng.Type;
-
- }
-
-
- var RouterOutlet: ng.InjectableReference;
-
-
-
- var ComponentInstruction: ng.InjectableReference;
-
-
-
-}
-
-declare module "angular2/router" {
- export = ngRouter;
-}
-
-
diff --git a/angular2/test_lib.d.ts b/angular2/test_lib.d.ts
deleted file mode 100644
index ccd64b21ba..0000000000
--- a/angular2/test_lib.d.ts
+++ /dev/null
@@ -1,408 +0,0 @@
-// Type definitions for Angular v2.0.0-local_sha.7d5c3eb
-// 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.
-// ***********************************************************
-
-// angular2/test_lib depends transitively on these libraries.
-// If you don't have them installed you can install them using TSD
-// https://github.com/DefinitelyTyped/tsd
-
-///<reference path="./angular2.d.ts"/>
-///<reference path="../jasmine/jasmine.d.ts"/>
-
-
-
-declare module ngTestLib {
- /**
- * Allows injecting dependencies in `beforeEach()` and `it()`.
- *
- * Example:
- *
- * ```
- * beforeEach(inject([Dependency, AClass], (dep, object) => {
- * // some code that uses `dep` and `object`
- * // ...
- * }));
- *
- * it('...', inject([AClass, AsyncTestCompleter], (object, async) => {
- * object.doSomething().then(() => {
- * expect(...);
- * async.done();
- * });
- * })
- * ```
- *
- * Notes:
- * - injecting an `AsyncTestCompleter` allow completing async tests - this is the equivalent of
- * adding a `done` parameter in Jasmine,
- * - inject is currently a function because of some Traceur limitation the syntax should eventually
- * becomes `it('...', @Inject (object: AClass, async: AsyncTestCompleter) => { ... });`
- *
- * @param {Array} tokens
- * @param {Function} fn
- * @return {FunctionWithParamTokens}
- */
- function inject(tokens: any[], fn: Function): FunctionWithParamTokens;
-
-
-
- var proxy: ClassDecorator;
-
-
-
- var afterEach: Function;
-
-
-
- type SyncTestFn = () => void
-
-
- interface NgMatchers extends jasmine.Matchers {
-
- toBe(expected: any): boolean;
-
- toEqual(expected: any): boolean;
-
- toBePromise(): boolean;
-
- toBeAnInstanceOf(expected: any): boolean;
-
- toHaveText(expected: any): boolean;
-
- toHaveCssClass(expected: any): boolean;
-
- toImplement(expected: any): boolean;
-
- toContainError(expected: any): boolean;
-
- toThrowErrorWith(expectedMessage: any): boolean;
-
- not: NgMatchers;
-
- }
-
-
- var expect: (actual: any) => NgMatchers;
-
-
-
- class AsyncTestCompleter {
-
- constructor(_done: Function);
-
- done(): void;
-
- }
-
-
- function describe(...args: any[]): void;
-
-
-
- function ddescribe(...args: any[]): void;
-
-
-
- function xdescribe(...args: any[]): void;
-
-
-
- function beforeEach(fn: FunctionWithParamTokens | SyncTestFn): void;
-
-
-
- /**
- * Allows overriding default bindings defined in test_injector.js.
- *
- * The given function must return a list of DI bindings.
- *
- * Example:
- *
- * beforeEachBindings(() => [
- * bind(Compiler).toClass(MockCompiler),
- * bind(SomeToken).toValue(myValue),
- * ]);
- */
- function beforeEachBindings(fn: any): void;
-
-
-
- function it(name: any, fn: any, timeOut?: any): void;
-
-
-
- function xit(name: any, fn: any, timeOut?: any): void;
-
-
-
- function iit(name: any, fn: any, timeOut?: any): void;
-
-
-
- interface GuinessCompatibleSpy extends jasmine.Spy {
-
- /**
- * By chaining the spy with and.returnValue, all calls to the function will return a specific
- * value.
- */
- andReturn(val: any): void;
-
- /**
- * By chaining the spy with and.callFake, all calls to the spy will delegate to the supplied
- * function.
- */
- andCallFake(fn: Function): GuinessCompatibleSpy;
-
- /**
- * removes all recorded calls
- */
- reset(): void;
-
- }
-
-
- class SpyObject {
-
- constructor(type?: any);
-
- static stub(object?: any, config?: any, overrides?: any): void;
-
- noSuchMethod(args: any): void;
-
- spy(name: any): void;
-
- prop(name: any, value: any): void;
-
- }
-
-
- function isInInnerZone(): boolean;
-
-
-
- interface RootTestComponent {
-
- debugElement: ng.DebugElement;
-
- detectChanges(): void;
-
- destroy(): void;
-
- }
-
-
- /**
- * Builds a RootTestComponent for use in component level tests.
- */
- class TestComponentBuilder {
-
- constructor(_injector: ng.Injector);
-
- /**
- * Overrides only the html of a {@link ComponentMetadata}.
- * All the other properties of the component's {@link ng.ViewMetadata} are preserved.
- *
- * @param {ng.Type} component
- * @param {string} html
- *
- * @return {TestComponentBuilder}
- */
- overrideTemplate(componentType: ng.Type, template: string): TestComponentBuilder;
-
- /**
- * Overrides a component's {@link ng.ViewMetadata}.
- *
- * @param {ng.Type} component
- * @param {view} View
- *
- * @return {TestComponentBuilder}
- */
- overrideView(componentType: ng.Type, view: ng.ViewMetadata): TestComponentBuilder;
-
- /**
- * Overrides the directives from the component {@link ng.ViewMetadata}.
- *
- * @param {ng.Type} component
- * @param {ng.Type} from
- * @param {ng.Type} to
- *
- * @return {TestComponentBuilder}
- */
- overrideDirective(componentType: ng.Type, from: ng.Type, to: ng.Type): TestComponentBuilder;
-
- /**
- * Overrides one or more injectables configured via `bindings` metadata property of a directive or
- * component.
- * Very useful when certain bindings need to be mocked out.
- *
- * The bindings specified via this method are appended to the existing `bindings` causing the
- * duplicated bindings to
- * be overridden.
- *
- * @param {ng.Type} component
- * @param {any[]} bindings
- *
- * @return {TestComponentBuilder}
- */
- overrideBindings(type: ng.Type, bindings: any[]): TestComponentBuilder;
-
- /**
- * Overrides one or more injectables configured via `bindings` metadata property of a directive or
- * component.
- * Very useful when certain bindings need to be mocked out.
- *
- * The bindings specified via this method are appended to the existing `bindings` causing the
- * duplicated bindings to
- * be overridden.
- *
- * @param {ng.Type} component
- * @param {any[]} bindings
- *
- * @return {TestComponentBuilder}
- */
- overrideViewBindings(type: ng.Type, bindings: any[]): TestComponentBuilder;
-
- /**
- * Builds and returns a RootTestComponent.
- *
- * @return {Promise<RootTestComponent>}
- */
- createAsync(rootComponentType: ng.Type): Promise<RootTestComponent>;
-
- }
-
-
- function createTestInjector(bindings: Array<ng.Type | ng.Binding | any[]>): ng.Injector;
-
-
-
- class FunctionWithParamTokens {
-
- constructor(_tokens: any[], _fn: Function);
-
- /**
- * Returns the value of the executed function.
- */
- execute(injector: ng.Injector): any;
-
- hasToken(token: any): boolean;
-
- }
-
-
- /**
- * Wraps a function to be executed in the fakeAsync zone:
- * - microtasks are manually executed by calling `flushMicrotasks()`,
- * - timers are synchronous, `tick()` simulates the asynchronous passage of time.
- *
- * If there are any pending timers at the end of the function, an exception will be thrown.
- *
- * @param fn
- * @returns {Function} The function wrapped to be executed in the fakeAsync zone
- */
- function fakeAsync(fn: Function): Function;
-
-
-
- function clearPendingTimers(): void;
-
-
-
- /**
- * Simulates the asynchronous passage of time for the timers in the fakeAsync zone.
- *
- * The microtasks queue is drained at the very start of this function and after any timer callback
- * has been executed.
- *
- * @param {number} millis Number of millisecond, defaults to 0
- */
- function tick(millis?: number): void;
-
-
-
- /**
- * Flush any pending microtasks.
- */
- function flushMicrotasks(): void;
-
-
-
- class Log {
-
- constructor();
-
- add(value: any): void;
-
- fn(value: any): void;
-
- clear(): void;
-
- result(): string;
-
- }
-
-
- class BrowserDetection {
-
- constructor(ua: string);
-
- isFirefox: boolean;
-
- isAndroid: boolean;
-
- isEdge: boolean;
-
- isIE: boolean;
-
- isWebkit: boolean;
-
- isIOS7: boolean;
-
- isSlow: boolean;
-
- supportsIntlApi: boolean;
-
- }
-
-
- var browserDetection: BrowserDetection;
-
-
-
- function dispatchEvent(element: any, eventType: any): void;
-
-
-
- function el(html: string): HTMLElement;
-
-
-
- function containsRegexp(input: string): RegExp;
-
-
-
- function normalizeCSS(css: string): string;
-
-
-
- function stringifyElement(el: any): string;
-
-
-
- var RootTestComponent: ng.InjectableReference;
-
-
-
-}
-
-declare module "angular2/test_lib" {
- export = ngTestLib;
-}
-
-