` ) 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;
+}
+
+
diff --git a/angular2/angular2.d.ts b/angular2/angular2.d.ts
index 518698deb0..616157aaf6 100644
--- a/angular2/angular2.d.ts
+++ b/angular2/angular2.d.ts
@@ -1,4 +1,4 @@
-// Type definitions for Angular v2.0.0-local_sha.f77234e
+// 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
@@ -27,7 +27,6 @@
interface Map<K,V> {}
-interface StringMap<K,V> extends Map<K,V> {}
declare module ng {
@@ -463,12 +462,12 @@ declare module ng {
outputs?: string[],
properties?: string[],
events?: string[],
- host?: StringMap<string, string>,
+ host?: {[key: string]: string},
bindings?: any[],
exportAs?: string,
moduleId?: string,
viewBindings?: any[],
- queries?: StringMap<string, any>,
+ queries?: {[key: string]: any},
changeDetection?: ChangeDetectionStrategy,
});
@@ -915,11 +914,11 @@ declare module ng {
outputs?: string[],
properties?: string[],
events?: string[],
- host?: StringMap<string, string>,
+ host?: {[key: string]: string},
bindings?: any[],
exportAs?: string,
moduleId?: string,
- queries?: StringMap<string, any>
+ queries?: {[key: string]: any}
});
/**
@@ -1169,7 +1168,7 @@ declare module ng {
* }
* ```
*/
- host: StringMap<string, string>;
+ host: {[key: string]: string};
/**
* Defines the set of injectable objects that are visible to a Directive and its light DOM
@@ -1284,7 +1283,7 @@ declare module ng {
* }
* ```
*/
- queries: StringMap<string, any>;
+ queries: {[key: string]: any};
}
@@ -1751,11 +1750,11 @@ declare module ng {
outputs?: string[],
properties?: string[],
events?: string[],
- host?: StringMap<string, string>,
+ host?: {[key: string]: string},
bindings?: any[],
exportAs?: string,
moduleId?: string,
- queries?: StringMap<string, any>
+ queries?: {[key: string]: any}
}): DirectiveMetadata;
(obj: {
@@ -1764,11 +1763,11 @@ declare module ng {
outputs?: string[],
properties?: string[],
events?: string[],
- host?: StringMap<string, string>,
+ host?: {[key: string]: string},
bindings?: any[],
exportAs?: string,
moduleId?: string,
- queries?: StringMap<string, any>
+ queries?: {[key: string]: any}
}): DirectiveDecorator;
}
@@ -1825,11 +1824,11 @@ declare module ng {
outputs?: string[],
properties?: string[],
events?: string[],
- host?: StringMap<string, string>,
+ host?: {[key: string]: string},
bindings?: any[],
exportAs?: string,
moduleId?: string,
- queries?: StringMap<string, any>,
+ queries?: {[key: string]: any},
viewBindings?: any[],
changeDetection?: ChangeDetectionStrategy,
}): ComponentMetadata;
@@ -1840,11 +1839,11 @@ declare module ng {
outputs?: string[],
properties?: string[],
events?: string[],
- host?: StringMap<string, string>,
+ host?: {[key: string]: string},
bindings?: any[],
exportAs?: string,
moduleId?: string,
- queries?: StringMap<string, any>,
+ queries?: {[key: string]: any},
viewBindings?: any[],
changeDetection?: ChangeDetectionStrategy,
}): ComponentDecorator;
@@ -2358,7 +2357,7 @@ declare module ng {
*
* See {@link Class} for example of usage.
*/
- constructor: (Function | any[]);
+ constructor: Function | any[];
}
@@ -4797,7 +4796,7 @@ declare module ng {
*/
interface OnChanges {
- onChanges(changes: StringMap<string, SimpleChange>): void;
+ onChanges(changes: {[key: string]: SimpleChange}): void;
}
@@ -5880,7 +5879,7 @@ declare module ng {
* 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[]): void;
+ registerComponentTemplate(templateId: number, commands: RenderTemplateCmd[], styles: string[], nativeShadow: boolean): void;
/**
* Creates a {@link RenderProtoViewRef} from an array of {@link RenderTemplateCmd}`s.
@@ -6489,7 +6488,7 @@ declare module ng {
valid: boolean;
- errors: StringMap<string, any>;
+ errors: {[key: string]: any};
pristine: boolean;
@@ -6578,9 +6577,9 @@ declare module ng {
*/
class ControlGroup extends AbstractControl {
- constructor(controls: StringMap<string, AbstractControl>, optionals?: StringMap<string, boolean>, validator?: Function);
+ constructor(controls: {[key: string]: AbstractControl}, optionals?: {[key: string]: boolean}, validator?: Function);
- controls: StringMap<string, AbstractControl>;
+ controls: {[key: string]: AbstractControl};
addControl(name: string, control: AbstractControl): void;
@@ -6658,7 +6657,7 @@ declare module ng {
valid: boolean;
- errors: StringMap<string, any>;
+ errors: {[key: string]: any};
pristine: boolean;
@@ -6779,7 +6778,7 @@ declare module ng {
validators: Function[];
- onChanges(changes: StringMap<string, SimpleChange>): void;
+ onChanges(changes: {[key: string]: SimpleChange}): void;
onDestroy(): void;
@@ -6859,7 +6858,7 @@ declare module ng {
validators: Function[];
- onChanges(changes: StringMap<string, SimpleChange>): void;
+ onChanges(changes: {[key: string]: SimpleChange}): void;
path: string[];
@@ -6905,7 +6904,7 @@ declare module ng {
validators: Function[];
- onChanges(changes: StringMap<string, SimpleChange>): void;
+ onChanges(changes: {[key: string]: SimpleChange}): void;
control: Control;
@@ -7176,7 +7175,7 @@ declare module ng {
path: string[];
- controls: StringMap<string, AbstractControl>;
+ controls: {[key: string]: AbstractControl};
addControl(dir: NgControl): void;
@@ -7357,15 +7356,15 @@ declare module ng {
*/
class Validators {
- static required(control:Control): StringMap<string, boolean>;
+ static required(control:Control): {[key: string]: boolean};
- static nullValidator(c: any): StringMap<string, boolean>;
+ static nullValidator(c: any): {[key: string]: boolean};
static compose(validators: Function[]): Function;
- static group(group:ControlGroup): StringMap<string, boolean>;
+ static group(group:ControlGroup): {[key: string]: any[]};
- static array(array:ControlArray): StringMap<string, boolean>;
+ static array(array:ControlArray): {[key: string]: any[]};
}
@@ -7437,7 +7436,7 @@ declare module ng {
*/
class FormBuilder {
- group(controlsConfig: StringMap<string, any>, extra?: StringMap<string, any>): ControlGroup;
+ group(controlsConfig: {[key: string]: any}, extra?: {[key: string]: any}): ControlGroup;
control(value: Object, validator?: Function): Control;
@@ -8342,7 +8341,7 @@ declare module ngWorker {
* 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[]): void;
+ registerComponentTemplate(templateId: number, commands: RenderTemplateCmd[], styles: string[], nativeShadow: boolean): void;
/**
* Creates a {@link RenderProtoViewRef} from an array of {@link RenderTemplateCmd}`s.
@@ -8933,7 +8932,7 @@ declare module ngWorker {
*/
interface OnChanges {
- onChanges(changes: StringMap<string, SimpleChange>): void;
+ onChanges(changes: {[key: string]: SimpleChange}): void;
}
@@ -9499,12 +9498,12 @@ declare module ngWorker {
outputs?: string[],
properties?: string[],
events?: string[],
- host?: StringMap<string, string>,
+ host?: {[key: string]: string},
bindings?: any[],
exportAs?: string,
moduleId?: string,
viewBindings?: any[],
- queries?: StringMap<string, any>,
+ queries?: {[key: string]: any},
changeDetection?: ChangeDetectionStrategy,
});
@@ -9951,11 +9950,11 @@ declare module ngWorker {
outputs?: string[],
properties?: string[],
events?: string[],
- host?: StringMap<string, string>,
+ host?: {[key: string]: string},
bindings?: any[],
exportAs?: string,
moduleId?: string,
- queries?: StringMap<string, any>
+ queries?: {[key: string]: any}
});
/**
@@ -10205,7 +10204,7 @@ declare module ngWorker {
* }
* ```
*/
- host: StringMap<string, string>;
+ host: {[key: string]: string};
/**
* Defines the set of injectable objects that are visible to a Directive and its light DOM
@@ -10320,7 +10319,7 @@ declare module ngWorker {
* }
* ```
*/
- queries: StringMap<string, any>;
+ queries: {[key: string]: any};
}
@@ -10787,11 +10786,11 @@ declare module ngWorker {
outputs?: string[],
properties?: string[],
events?: string[],
- host?: StringMap<string, string>,
+ host?: {[key: string]: string},
bindings?: any[],
exportAs?: string,
moduleId?: string,
- queries?: StringMap<string, any>
+ queries?: {[key: string]: any}
}): DirectiveMetadata;
(obj: {
@@ -10800,11 +10799,11 @@ declare module ngWorker {
outputs?: string[],
properties?: string[],
events?: string[],
- host?: StringMap<string, string>,
+ host?: {[key: string]: string},
bindings?: any[],
exportAs?: string,
moduleId?: string,
- queries?: StringMap<string, any>
+ queries?: {[key: string]: any}
}): DirectiveDecorator;
}
@@ -10861,11 +10860,11 @@ declare module ngWorker {
outputs?: string[],
properties?: string[],
events?: string[],
- host?: StringMap<string, string>,
+ host?: {[key: string]: string},
bindings?: any[],
exportAs?: string,
moduleId?: string,
- queries?: StringMap<string, any>,
+ queries?: {[key: string]: any},
viewBindings?: any[],
changeDetection?: ChangeDetectionStrategy,
}): ComponentMetadata;
@@ -10876,11 +10875,11 @@ declare module ngWorker {
outputs?: string[],
properties?: string[],
events?: string[],
- host?: StringMap<string, string>,
+ host?: {[key: string]: string},
bindings?: any[],
exportAs?: string,
moduleId?: string,
- queries?: StringMap<string, any>,
+ queries?: {[key: string]: any},
viewBindings?: any[],
changeDetection?: ChangeDetectionStrategy,
}): ComponentDecorator;
@@ -11394,7 +11393,7 @@ declare module ngWorker {
*
* See {@link Class} for example of usage.
*/
- constructor: (Function | any[]);
+ constructor: Function | any[];
}
@@ -14641,7 +14640,7 @@ declare module ngWorker {
valid: boolean;
- errors: StringMap<string, any>;
+ errors: {[key: string]: any};
pristine: boolean;
@@ -14730,9 +14729,9 @@ declare module ngWorker {
*/
class ControlGroup extends AbstractControl {
- constructor(controls: StringMap<string, AbstractControl>, optionals?: StringMap<string, boolean>, validator?: Function);
+ constructor(controls: {[key: string]: AbstractControl}, optionals?: {[key: string]: boolean}, validator?: Function);
- controls: StringMap<string, AbstractControl>;
+ controls: {[key: string]: AbstractControl};
addControl(name: string, control: AbstractControl): void;
@@ -14810,7 +14809,7 @@ declare module ngWorker {
valid: boolean;
- errors: StringMap<string, any>;
+ errors: {[key: string]: any};
pristine: boolean;
@@ -14931,7 +14930,7 @@ declare module ngWorker {
validators: Function[];
- onChanges(changes: StringMap<string, SimpleChange>): void;
+ onChanges(changes: {[key: string]: SimpleChange}): void;
onDestroy(): void;
@@ -15011,7 +15010,7 @@ declare module ngWorker {
validators: Function[];
- onChanges(changes: StringMap<string, SimpleChange>): void;
+ onChanges(changes: {[key: string]: SimpleChange}): void;
path: string[];
@@ -15057,7 +15056,7 @@ declare module ngWorker {
validators: Function[];
- onChanges(changes: StringMap<string, SimpleChange>): void;
+ onChanges(changes: {[key: string]: SimpleChange}): void;
control: Control;
@@ -15328,7 +15327,7 @@ declare module ngWorker {
path: string[];
- controls: StringMap<string, AbstractControl>;
+ controls: {[key: string]: AbstractControl};
addControl(dir: NgControl): void;
@@ -15509,15 +15508,15 @@ declare module ngWorker {
*/
class Validators {
- static required(control:Control): StringMap<string, boolean>;
+ static required(control:Control): {[key: string]: boolean};
- static nullValidator(c: any): StringMap<string, boolean>;
+ static nullValidator(c: any): {[key: string]: boolean};
static compose(validators: Function[]): Function;
- static group(group:ControlGroup): StringMap<string, boolean>;
+ static group(group:ControlGroup): {[key: string]: any[]};
- static array(array:ControlArray): StringMap<string, boolean>;
+ static array(array:ControlArray): {[key: string]: any[]};
}
@@ -15589,7 +15588,7 @@ declare module ngWorker {
*/
class FormBuilder {
- group(controlsConfig: StringMap<string, any>, extra?: StringMap<string, any>): ControlGroup;
+ group(controlsConfig: {[key: string]: any}, extra?: {[key: string]: any}): ControlGroup;
control(value: Object, validator?: Function): Control;
@@ -16537,7 +16536,7 @@ declare module ngWorker {
class ReceivedMessage {
- constructor(data: StringMap<string, any>);
+ constructor(data: {[key: string]: any});
method: string;
@@ -17064,7 +17063,7 @@ declare module ngUi {
class ReceivedMessage {
- constructor(data: StringMap<string, any>);
+ constructor(data: {[key: string]: any});
method: string;
diff --git a/angular2/http-2.0.0-alpha.39.d.ts b/angular2/http-2.0.0-alpha.39.d.ts
new file mode 100644
index 0000000000..573d346a53
--- /dev/null
+++ b/angular2/http-2.0.0-alpha.39.d.ts
@@ -0,0 +1,1310 @@
+// 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/http.d.ts b/angular2/http.d.ts
index 415aec767b..573d346a53 100644
--- a/angular2/http.d.ts
+++ b/angular2/http.d.ts
@@ -1,4 +1,4 @@
-// Type definitions for Angular v2.0.0-local_sha.f77234e
+// 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
@@ -911,7 +911,7 @@ declare module ngHttp {
*/
class Headers {
- constructor(headers?: Headers | StringMap<string, any>);
+ constructor(headers?: Headers | {[key: string]: any});
/**
* Appends a header to existing list of header values for a given header name.
diff --git a/angular2/router-2.0.0-alpha.39.d.ts b/angular2/router-2.0.0-alpha.39.d.ts
new file mode 100644
index 0000000000..be33ebf937
--- /dev/null
+++ b/angular2/router-2.0.0-alpha.39.d.ts
@@ -0,0 +1,1330 @@
+// 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/router.d.ts b/angular2/router.d.ts
index 43574e3d5a..be33ebf937 100644
--- a/angular2/router.d.ts
+++ b/angular2/router.d.ts
@@ -1,4 +1,4 @@
-// Type definitions for Angular v2.0.0-local_sha.f77234e
+// 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
@@ -299,9 +299,9 @@ declare module ngRouter {
*/
class RouteParams {
- constructor(params: StringMap<string, string>);
+ constructor(params: {[key: string]: string});
- params: StringMap<string, string>;
+ params: {[key: string]: string};
get(param: string): string;
@@ -884,13 +884,13 @@ declare module ngRouter {
*/
class Instruction {
- constructor(component: ComponentInstruction, child: Instruction, auxInstruction: StringMap<string, Instruction>);
+ constructor(component: ComponentInstruction, child: Instruction, auxInstruction: {[key: string]: Instruction});
component: ComponentInstruction;
child: Instruction;
- auxInstruction: StringMap<string, Instruction>;
+ auxInstruction: {[key: string]: Instruction};
/**
* Returns a new instruction that shares the state of the existing instruction, but with
@@ -922,7 +922,7 @@ declare module ngRouter {
urlParams: string[];
- params: StringMap<string, any>;
+ params: {[key: string]: any};
/**
* Returns the component type of the represented route, or `null` if this instruction
diff --git a/angular2/test_lib-2.0.0-alpha.39.d.ts b/angular2/test_lib-2.0.0-alpha.39.d.ts
new file mode 100644
index 0000000000..ccd64b21ba
--- /dev/null
+++ b/angular2/test_lib-2.0.0-alpha.39.d.ts
@@ -0,0 +1,408 @@
+// 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;
+}
+
+
diff --git a/angular2/test_lib.d.ts b/angular2/test_lib.d.ts
index f298b8e3cb..ccd64b21ba 100644
--- a/angular2/test_lib.d.ts
+++ b/angular2/test_lib.d.ts
@@ -1,4 +1,4 @@
-// Type definitions for Angular v2.0.0-local_sha.f77234e
+// 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