`
+ * - Next parent has the `Dependency` directive and so the dependency is satisfied.
+ *
+ * Angular injects `dependency=2`.
+ *
+ * @exportedAs angular2/annotations
+ */
+ class AncestorAnnotation extends Visibility {
+ }
+
+
+ /**
+ * Specifies that an injector should retrieve a dependency from the direct parent.
+ *
+ * ## Example
+ *
+ * Here is a simple directive that retrieves a dependency from its parent element.
+ *
+ * ```
+ * @Directive({
+ * selector: '[dependency]',
+ * properties: [
+ * 'id: dependency'
+ * ]
+ * })
+ * class Dependency {
+ * id:string;
+ * }
+ *
+ *
+ * @Directive({
+ * selector: '[my-directive]'
+ * })
+ * class Dependency {
+ * constructor(@Parent() dependency:Dependency) {
+ * expect(dependency.id).toEqual(1);
+ * };
+ * }
+ * ```
+ *
+ * We use this with the following HTML template:
+ *
+ * ```
+ *
+ * ```
+ * The `@Parent()` annotation in our constructor forces the injector to retrieve the dependency from
+ * the
+ * parent element (even thought the current element could resolve it): Angular injects
+ * `dependency=1`.
+ *
+ * @exportedAs angular2/annotations
+ */
+ class ParentAnnotation extends Visibility {
+ }
+
+
+ /**
+ * Specifies that an injector should retrieve a dependency from any ancestor element.
+ *
+ * An ancestor is any element between the parent element and shadow root.
+ *
+ *
+ * ## Example
+ *
+ * Here is a simple directive that retrieves a dependency from an ancestor element.
+ *
+ * ```
+ * @Directive({
+ * selector: '[dependency]',
+ * properties: [
+ * 'id: dependency'
+ * ]
+ * })
+ * class Dependency {
+ * id:string;
+ * }
+ *
+ *
+ * @Directive({
+ * selector: '[my-directive]'
+ * })
+ * class Dependency {
+ * constructor(@Unbounded() dependency:Dependency) {
+ * expect(dependency.id).toEqual(2);
+ * };
+ * }
+ * ```
+ *
+ * @exportedAs angular2/annotations
+ */
+ class UnboundedAnnotation extends Visibility {
+ }
+
+ /**
+ * Declares the available HTML templates for an application.
+ *
+ * Each angular component requires a single `@Component` and at least one `@View` annotation. The
+ * `@View` annotation specifies the HTML template to use, and lists the directives that are active
+ * within the template.
+ *
+ * When a component is instantiated, the template is loaded into the component's shadow root, and
+ * the expressions and statements in the template are evaluated against the component.
+ *
+ * For details on the `@Component` annotation, see {@link Component}.
+ *
+ * ## Example
+ *
+ * ```
+ * @Component({
+ * selector: 'greet'
+ * })
+ * @View({
+ * template: 'Hello {{name}}!',
+ * directives: [GreetUser, Bold]
+ * })
+ * class Greet {
+ * name: string;
+ *
+ * constructor() {
+ * this.name = 'World';
+ * }
+ * }
+ * ```
+ */
+ function View(arg: _ViewArg): (target: any) => any;
+ interface _ViewArg {
+ /**
+ * Specifies a template URL for an angular component.
+ *
+ * NOTE: either `templateUrl` or `template` should be used, but not both.
+ */
+ templateUrl?: string;
+
+ /**
+ * Specifies an inline template for an angular component.
+ *
+ * NOTE: either `templateUrl` or `template` should be used, but not both.
+ */
+ template?: 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: [For]
+ * template: '
+ *
'
+ * })
+ * class MyComponent {
+ * }
+ * ```
+ */
+ // TODO(tbosch): use Type | Binding | List
when Dart supports union types,
+ // as otherwise we would need to import Binding type and Dart would warn
+ // for an unused import.
+ directives?: List>;
+
+ /**
+ * Specify a custom renderer for this View.
+ * If this is set, neither `template`, `templateURL` nor `directives` are used.
+ */
+ renderer?: string;
+ }
+
+ class ViewAnnotation {
+ }
+
+
+ /**
+ * Bootstrapping for Angular applications.
+ *
+ * You instantiate an Angular application by explicitly specifying a component to use as the root
+ * component for your
+ * application via the `bootstrap()` method.
+ *
+ * ## Simple Example
+ *
+ * Assuming this `index.html`:
+ *
+ * ```html
+ *
+ *
+ *
+ * loading...
+ *
+ *
+ * ```
+ *
+ * An application is bootstrapped inside an existing browser DOM, typically `index.html`. Unlike
+ * Angular 1, Angular 2
+ * does not compile/process bindings in `index.html`. This is mainly for security reasons, as well
+ * as architectural
+ * changes in Angular 2. This means that `index.html` can safely be processed using server-side
+ * technologies such as
+ * bindings. Bindings can thus use double-curly `{{ syntax }}` without collision from Angular 2
+ * component double-curly
+ * `{{ syntax }}`.
+ *
+ * We can use this script code:
+ *
+ * ```
+ * @Component({
+ * selector: 'my-app'
+ * })
+ * @View({
+ * template: 'Hello {{ name }}!'
+ * })
+ * class MyApp {
+ * name:string;
+ *
+ * constructor() {
+ * this.name = 'World';
+ * }
+ * }
+ *
+ * main() {
+ * return bootstrap(MyApp);
+ * }
+ * ```
+ *
+ * When the app developer invokes `bootstrap()` with the root component `MyApp` as its argument,
+ * Angular performs the
+ * following tasks:
+ *
+ * 1. It uses the component's `selector` property to locate the DOM element which needs to be
+ * upgraded into
+ * the angular component.
+ * 2. It creates a new child injector (from the platform injector) and configures the injector with
+ * the component's
+ * `appInjector`. Optionally, you can also override the injector configuration for an app by
+ * invoking
+ * `bootstrap` with the `componentInjectableBindings` argument.
+ * 3. It creates a new `Zone` and connects it to the angular application's change detection domain
+ * instance.
+ * 4. It creates a shadow DOM on the selected component's host element and loads the template into
+ * it.
+ * 5. It instantiates the specified component.
+ * 6. Finally, Angular performs change detection to apply the initial data bindings for the
+ * application.
+ *
+ *
+ * ## Instantiating Multiple Applications on a Single Page
+ *
+ * There are two ways to do this.
+ *
+ *
+ * ### Isolated Applications
+ *
+ * Angular creates a new application each time that the `bootstrap()` method is invoked. When
+ * multiple applications
+ * are created for a page, Angular treats each application as independent within an isolated change
+ * detection and
+ * `Zone` domain. If you need to share data between applications, use the strategy described in the
+ * next
+ * section, "Applications That Share Change Detection."
+ *
+ *
+ * ### Applications That Share Change Detection
+ *
+ * If you need to bootstrap multiple applications that share common data, the applications must
+ * share a common
+ * change detection and zone. To do that, create a meta-component that lists the application
+ * components in its template.
+ * By only invoking the `bootstrap()` method once, with the meta-component as its argument, you
+ * ensure that only a
+ * single change detection zone is created and therefore data can be shared across the applications.
+ *
+ *
+ * ## Platform Injector
+ *
+ * When working within a browser window, there are many singleton resources: cookies, title,
+ * location, and others.
+ * Angular services that represent these resources must likewise be shared across all Angular
+ * applications that
+ * occupy the same browser window. For this reason, Angular creates exactly one global platform
+ * injector which stores
+ * all shared services, and each angular application injector has the platform injector as its
+ * parent.
+ *
+ * Each application has its own private injector as well. When there are multiple applications on a
+ * page, Angular treats
+ * each application injector's services as private to that application.
+ *
+ *
+ * # API
+ * - `appComponentType`: The root component which should act as the application. This is a reference
+ * to a `Type`
+ * which is annotated with `@Component(...)`.
+ * - `componentInjectableBindings`: An additional set of bindings that can be added to `appInjector`
+ * for the
+ * Component to override default injection behavior.
+ * - `errorReporter`: `function(exception:any, stackTrace:string)` a default error reporter for
+ * unhandled exceptions.
+ *
+ * Returns a `Promise` with the application`s private Injector.
+ *
+ * @exportedAs angular2/core
+ */
+ function bootstrap(appComponentType: Type, componentInjectableBindings?: List>, errorReporter?: Function) : Promise ;
+
+ class ApplicationRef {
+ dispose(): any;
+ hostComponent: any;
+ hostComponentType: any;
+ injector: any;
+ }
+
+ var appComponentRefToken : OpaqueToken ;
+
+ var appComponentTypeToken : OpaqueToken ;
+
+
+ /**
+ * Specifies that a QueryList should be injected.
+ *
+ * See QueryList for usage and example.
+ *
+ * @exportedAs angular2/annotations
+ */
+ class QueryAnnotation extends DependencyAnnotation {
+ directive: any;
+ }
+
+
+ /**
+ * Specifies that a constant attribute value should be injected.
+ *
+ * The directive can inject constant string literals of host element attributes.
+ *
+ * ## Example
+ *
+ * Suppose we have an `` element and want to know its `type`.
+ *
+ * ```html
+ *
+ * ```
+ *
+ * A decorator can inject string literal `text` like so:
+ *
+ * ```javascript
+ * @Directive({
+ * selector: `input'
+ * })
+ * class InputDirective {
+ * constructor(@Attribute('type') type) {
+ * // type would be `text` in this example
+ * }
+ * }
+ * ```
+ *
+ * @exportedAs angular2/annotations
+ */
+ class AttributeAnnotation extends DependencyAnnotation {
+ attributeName: string;
+ token: any;
+ }
+
+
+ /**
+ * Cache that stores the AppProtoView of the template of a component.
+ * Used to prevent duplicate work and resolve cyclic dependencies.
+ */
+ class CompilerCache {
+ clear(): void;
+ get(component: Type): AppProtoView;
+ set(component: Type, protoView: AppProtoView): void;
+ }
+
+
+ /**
+ * @exportedAs angular2/view
+ */
+ class Compiler {
+ compile(component: Type): Promise;
+ compileInHost(componentTypeOrBinding: Type | Binding): Promise;
+ }
+
+
+ /**
+ * Defines lifecycle method [onChange] called after all of component's bound
+ * properties are updated.
+ */
+ interface OnChange {
+ onChange(changes: StringMap): void;
+ }
+
+
+ /**
+ * Defines lifecycle method [onDestroy] called when a directive is being destroyed.
+ */
+ interface OnDestroy {
+ onDestroy(): void;
+ }
+
+
+ /**
+ * Defines lifecycle method [onCheck] called when a directive is being checked.
+ */
+ interface OnCheck {
+ onCheck(): void;
+ }
+
+
+ /**
+ * Defines lifecycle method [onInit] called when a directive is being checked the first time.
+ */
+ interface OnInit {
+ onInit(): void;
+ }
+
+
+ /**
+ * Defines lifecycle method [onAllChangesDone ] called when the bindings of all its children have
+ * been changed.
+ */
+ interface OnAllChangesDone {
+ onAllChangesDone(): void;
+ }
+
+
+ /**
+ * An iterable live list of components in the Light DOM.
+ *
+ * Injectable Objects that contains a live list of child directives in the light DOM of a directive.
+ * The directives are kept in depth-first pre-order traversal of the DOM.
+ *
+ * The `QueryList` is iterable, therefore it can be used in both javascript code with `for..of` loop
+ * as well as in
+ * template with `*ng-for="of"` directive.
+ *
+ * NOTE: In the future this class will implement an `Observable` interface. For now it uses a plain
+ * list of observable
+ * callbacks.
+ *
+ * # Example:
+ *
+ * Assume that `` component would like to get a list its children which are ``
+ * components as shown in this
+ * example:
+ *
+ * ```html
+ *
+ * ...
+ * {{o.text}}
+ *
+ * ```
+ *
+ * In the above example the list of `` elements needs to get a list of `` elements so
+ * that it could render
+ * tabs with the correct titles and in the correct order.
+ *
+ * A possible solution would be for a `` to inject `` component and then register itself
+ * with ``
+ * component's on `hydrate` and deregister on `dehydrate` event. While a reasonable approach, this
+ * would only work
+ * partialy since `*ng-for` could rearange the list of `` components which would not be
+ * reported to ``
+ * component and thus the list of `` componets would be out of sync with respect to the list
+ * of `` elements.
+ *
+ * A preferred solution is to inject a `QueryList` which is a live list of directives in the
+ * component`s light DOM.
+ *
+ * ```javascript
+ * @Component({
+ * selector: 'tabs'
+ * })
+ * @View({
+ * template: `
+ *
+ *
+ * `
+ * })
+ * class Tabs {
+ * panes: QueryList
+ *
+ * constructor(@Query(Pane) panes:QueryList) {
+ * this.panes = panes;
+ * }
+ * }
+ *
+ * @Component({
+ * selector: 'pane',
+ * properties: ['title']
+ * })
+ * @View(...)
+ * class Pane {
+ * title:string;
+ * }
+ * ```
+ *
+ * @exportedAs angular2/view
+ */
+ class QueryList extends BaseQueryList {
+ onChange(callback: any): any;
+ removeCallback(callback: any): any;
+ }
+
+ class DirectiveResolver {
+ resolve(type: Type): DirectiveAnnotation;
+ }
+
+
+ /**
+ * @exportedAs angular2/view
+ */
+ class ComponentRef {
+ dispose: Function;
+ hostView: ViewRef;
+ instance: any;
+ location: ElementRef;
+ }
+
+
+ /**
+ * Service for dynamically loading a Component into an arbitrary position in the internal Angular
+ * application tree.
+ *
+ * @exportedAs angular2/view
+ */
+ class DynamicComponentLoader {
+
+ /**
+ * Loads a root component that is placed at the first element that matches the
+ * component's selector.
+ * The loaded component receives injection normally as a hosted view.
+ */
+ loadAsRoot(typeOrBinding: any, overrideSelector?: any, injector?: Injector): Promise;
+
+ /**
+ * Loads a component into the location given by the provided ElementRef. The loaded component
+ * receives injection as if it in the place of the provided ElementRef.
+ */
+ loadIntoExistingLocation(typeOrBinding: any, location: ElementRef, injector?: Injector): Promise;
+
+ /**
+ * Loads a component into a free host view that is not yet attached to
+ * a parent on the render side, although it is attached to a parent in the injector hierarchy.
+ * The loaded component receives injection normally as a hosted view.
+ */
+ loadIntoNewLocation(typeOrBinding: any, parentComponentLocation: ElementRef, injector?: Injector): Promise;
+
+ /**
+ * Loads a component next to the provided ElementRef. The loaded component receives
+ * injection normally as a hosted view.
+ */
+ loadNextToExistingLocation(typeOrBinding: any, location: ElementRef, injector?: Injector): Promise;
+ }
+
+ /**
+ * Declare reusable UI building blocks for an application.
+ *
+ * Each Angular component requires a single `@Component` and at least one `@View` annotation. The
+ * `@Component`
+ * annotation specifies when a component is instantiated, and which properties and hostListeners it
+ * binds to.
+ *
+ * When a component is instantiated, Angular
+ * - creates a shadow DOM for the component.
+ * - loads the selected template into the shadow DOM.
+ * - creates a child {@link Injector} which is configured with the `appInjector` for the
+ * {@link Component}.
+ *
+ * All template expressions and statements are then evaluated against the component instance.
+ *
+ * For details on the `@View` annotation, see {@link View}.
+ *
+ * ## Example
+ *
+ * ```
+ * @Component({
+ * selector: 'greet'
+ * })
+ * @View({
+ * template: 'Hello {{name}}!'
+ * })
+ * class Greet {
+ * name: string;
+ *
+ * constructor() {
+ * this.name = 'World';
+ * }
+ * }
+ * ```
+ *
+ *
+ * Dynamically loading a component at runtime:
+ *
+ * Regular Angular components are statically resolved. Dynamic components allows to resolve a
+ * component at runtime
+ * instead by providing a placeholder into which a regular Angular component can be dynamically
+ * loaded. Once loaded,
+ * the dynamically-loaded component becomes permanent and cannot be changed.
+ * Dynamic components are declared just like components, but without a `@View` annotation.
+ *
+ *
+ * ## Example
+ *
+ * Here we have `DynamicComp` which acts as the placeholder for `HelloCmp`. At runtime, the dynamic
+ * component
+ * `DynamicComp` requests loading of the `HelloCmp` component.
+ *
+ * There is nothing special about `HelloCmp`, which is a regular Angular component. It can also be
+ * used in other static
+ * locations.
+ *
+ * ```
+ * @Component({
+ * selector: 'dynamic-comp'
+ * })
+ * class DynamicComp {
+ * helloCmp:HelloCmp;
+ * constructor(loader:DynamicComponentLoader, location:ElementRef) {
+ * loader.load(HelloCmp, location).then((helloCmp) => {
+ * this.helloCmp = helloCmp;
+ * });
+ * }
+ * }
+ *
+ * @Component({
+ * selector: 'hello-cmp'
+ * })
+ * @View({
+ * template: "{{greeting}}"
+ * })
+ * class HelloCmp {
+ * greeting:string;
+ * constructor() {
+ * this.greeting = "hello";
+ * }
+ * }
+ * ```
+ */
+ function Component(arg: _ComponentArg): (target: any) => any;
+ interface _ComponentArg {
+ /**
+ * Defines the used change detection strategy.
+ *
+ * When a component is instantiated, Angular creates a change detector, which is responsible for
+ * propagating
+ * the component's bindings.
+ *
+ * The `changeDetection` property defines, whether the change detection will be checked every time
+ * or only when the component
+ * tells it to do so.
+ */
+ changeDetection?: string;
+
+ /**
+ * Defines the set of injectable objects that are visible to a Component and its children.
+ *
+ * The `appInjector` defined in the Component annotation allow you to configure a set of bindings
+ * for the component's
+ * injector.
+ *
+ * When a component is instantiated, Angular creates a new child Injector, which is configured
+ * with the bindings in
+ * the Component `appInjector` annotation. The injectable objects then become available for
+ * injection to the component
+ * itself and any of the directives in the component's template, i.e. they are not available to
+ * the directives which
+ * are children in the component's light DOM.
+ *
+ *
+ * The syntax for configuring the `appInjector` injectable is identical to {@link Injector}
+ * injectable configuration.
+ * See {@link Injector} for additional detail.
+ *
+ *
+ * ## Simple Example
+ *
+ * Here is an example of a class that can be injected:
+ *
+ * ```
+ * class Greeter {
+ * greet(name:string) {
+ * return 'Hello ' + name + '!';
+ * }
+ * }
+ *
+ * @Component({
+ * selector: 'greet',
+ * appInjector: [
+ * Greeter
+ * ]
+ * })
+ * @View({
+ * template: `{{greeter.greet('world')}}!`,
+ * directives: [Child]
+ * })
+ * class HelloWorld {
+ * greeter:Greeter;
+ *
+ * constructor(greeter:Greeter) {
+ * this.greeter = greeter;
+ * }
+ * }
+ * ```
+ */
+ appInjector?: List;
+
+ /**
+ * Defines the set of injectable objects that are visible to its view dom children.
+ *
+ * ## Simple Example
+ *
+ * Here is an example of a class that can be injected:
+ *
+ * ```
+ * class Greeter {
+ * greet(name:string) {
+ * return 'Hello ' + name + '!';
+ * }
+ * }
+ *
+ * @Directive({
+ * selector: 'needs-greeter'
+ * })
+ * class NeedsGreeter {
+ * greeter:Greeter;
+ *
+ * constructor(greeter:Greeter) {
+ * this.greeter = greeter;
+ * }
+ * }
+ *
+ * @Component({
+ * selector: 'greet',
+ * viewInjector: [
+ * Greeter
+ * ]
+ * })
+ * @View({
+ * template: ``,
+ * directives: [NeedsGreeter]
+ * })
+ * class HelloWorld {
+ * }
+ *
+ * ```
+ */
+ viewInjector?: List;
+
+ selector?: string;
+ properties?: List;
+ events?: List;
+ hostListeners?: StringMap;
+ hostProperties?: StringMap;
+ hostAttributes?: StringMap;
+ hostActions?: StringMap;
+ exportAs?: string;
+ lifecycle?: List;
+ hostInjector?: List;
+ compileChildren?: boolean;
+ }
+
+ class ComponentAnnotation extends DirectiveAnnotation {
+ }
+
+ /**
+ * Directives allow you to attach behavior to elements in the DOM.
+ *
+ * Directives with an embedded view are called Components.
+ *
+ * A directive consists of a single directive annotation and a controller class. When the
+ * directive's `selector` matches
+ * elements in the DOM, the following steps occur:
+ *
+ * 1. For each directive, the `ElementInjector` attempts to resolve the directive's constructor
+ * arguments.
+ * 2. Angular instantiates directives for each matched element using `ElementInjector` in a
+ * depth-first order,
+ * as declared in the HTML.
+ *
+ * ## Understanding How Injection Works
+ *
+ * There are three stages of injection resolution.
+ * - *Pre-existing Injectors*:
+ * - The terminal Injector cannot resolve dependencies. It either throws an error or, if
+ * the dependency was
+ * specified as `@Optional`, returns `null`.
+ * - The platform injector resolves browser singleton resources, such as: cookies, title,
+ * location, and others.
+ * - *Component Injectors*: Each component instance has its own Injector, and they follow
+ * the same parent-child hierarchy
+ * as the component instances in the DOM.
+ * - *Element Injectors*: Each component instance has a Shadow DOM. Within the Shadow DOM each
+ * element has an `ElementInjector`
+ * which follow the same parent-child hierarchy as the DOM elements themselves.
+ *
+ * When a template is instantiated, it also must instantiate the corresponding directives in a
+ * depth-first order. The
+ * current `ElementInjector` resolves the constructor dependencies for each directive.
+ *
+ * Angular then resolves dependencies as follows, according to the order in which they appear in the
+ * View:
+ *
+ * 1. Dependencies on the current element
+ * 2. Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary
+ * 3. Dependencies on component injectors and their parents until it encounters the root component
+ * 4. Dependencies on pre-existing injectors
+ *
+ *
+ * The `ElementInjector` can inject other directives, element-specific special objects, or it can
+ * delegate to the parent
+ * injector.
+ *
+ * To inject other directives, declare the constructor parameter as:
+ * - `directive:DirectiveType`: a directive on the current element only
+ * - `@Ancestor() directive:DirectiveType`: any directive that matches the type between the current
+ * element and the
+ * Shadow DOM root. Current element is not included in the resolution, therefore even if it could
+ * resolve it, it will
+ * be ignored.
+ * - `@Parent() directive:DirectiveType`: any directive that matches the type on a direct parent
+ * element only.
+ * - `@Query(DirectiveType) query:QueryList`: A live collection of direct child
+ * directives.
+ * - `@QueryDescendants(DirectiveType) query:QueryList`: A live collection of any
+ * child directives.
+ *
+ * To inject element-specific special objects, declare the constructor parameter as:
+ * - `element: ElementRef` to obtain a reference to logical element in the view.
+ * - `viewContainer: ViewContainerRef` to control child template instantiation, for
+ * Directive directives only
+ * - `bindingPropagation: BindingPropagation` to control change detection in a more granular way.
+ *
+ * ## Example
+ *
+ * The following example demonstrates how dependency injection resolves constructor arguments in
+ * practice.
+ *
+ *
+ * Assume this HTML template:
+ *
+ * ```
+ *
+ * ```
+ *
+ * With the following `dependency` decorator and `SomeService` injectable class.
+ *
+ * ```
+ * @Injectable()
+ * class SomeService {
+ * }
+ *
+ * @Directive({
+ * selector: '[dependency]',
+ * properties: [
+ * 'id: dependency'
+ * ]
+ * })
+ * class Dependency {
+ * id:string;
+ * }
+ * ```
+ *
+ * Let's step through the different ways in which `MyDirective` could be declared...
+ *
+ *
+ * ### No injection
+ *
+ * Here the constructor is declared with no arguments, therefore nothing is injected into
+ * `MyDirective`.
+ *
+ * ```
+ * @Directive({ selector: '[my-directive]' })
+ * class MyDirective {
+ * constructor() {
+ * }
+ * }
+ * ```
+ *
+ * This directive would be instantiated with no dependencies.
+ *
+ *
+ * ### Component-level injection
+ *
+ * Directives can inject any injectable instance from the closest component injector or any of its
+ * parents.
+ *
+ * Here, the constructor declares a parameter, `someService`, and injects the `SomeService` type
+ * from the parent
+ * component's injector.
+ * ```
+ * @Directive({ selector: '[my-directive]' })
+ * class MyDirective {
+ * constructor(someService: SomeService) {
+ * }
+ * }
+ * ```
+ *
+ * This directive would be instantiated with a dependency on `SomeService`.
+ *
+ *
+ * ### Injecting a directive from the current element
+ *
+ * Directives can inject other directives declared on the current element.
+ *
+ * ```
+ * @Directive({ selector: '[my-directive]' })
+ * class MyDirective {
+ * constructor(dependency: Dependency) {
+ * expect(dependency.id).toEqual(3);
+ * }
+ * }
+ * ```
+ * This directive would be instantiated with `Dependency` declared at the same element, in this case
+ * `dependency="3"`.
+ *
+ *
+ * ### Injecting a directive from a direct parent element
+ *
+ * Directives can inject other directives declared on a direct parent element. By definition, a
+ * directive with a
+ * `@Parent` annotation does not attempt to resolve dependencies for the current element, even if
+ * this would satisfy
+ * the dependency.
+ *
+ * ```
+ * @Directive({ selector: '[my-directive]' })
+ * class MyDirective {
+ * constructor(@Parent() dependency: Dependency) {
+ * expect(dependency.id).toEqual(2);
+ * }
+ * }
+ * ```
+ * This directive would be instantiated with `Dependency` declared at the parent element, in this
+ * case `dependency="2"`.
+ *
+ *
+ * ### Injecting a directive from any ancestor elements
+ *
+ * Directives can inject other directives declared on any ancestor element (in the current Shadow
+ * DOM), i.e. on the
+ * parent element and its parents. By definition, a directive with an `@Ancestor` annotation does
+ * not attempt to
+ * resolve dependencies for the current element, even if this would satisfy the dependency.
+ *
+ * ```
+ * @Directive({ selector: '[my-directive]' })
+ * class MyDirective {
+ * constructor(@Ancestor() dependency: Dependency) {
+ * expect(dependency.id).toEqual(2);
+ * }
+ * }
+ * ```
+ *
+ * Unlike the `@Parent` which only checks the parent, `@Ancestor` checks the parent, as well as its
+ * parents recursively. If `dependency="2"` didn't exist on the direct parent, this injection would
+ * have returned
+ * `dependency="1"`.
+ *
+ *
+ * ### Injecting a live collection of direct child directives
+ *
+ *
+ * A directive can also query for other child directives. Since parent directives are instantiated
+ * before child directives, a directive can't simply inject the list of child directives. Instead,
+ * the directive injects a QueryList, which updates its contents as children are added,
+ * removed, or moved by a directive that uses a ViewContainerRef such as a `ng-for`, an
+ * `ng-if`, or an `ng-switch`.
+ *
+ * ```
+ * @Directive({ selector: '[my-directive]' })
+ * class MyDirective {
+ * constructor(@Query(Dependency) dependencies:QueryList) {
+ * }
+ * }
+ * ```
+ *
+ * This directive would be instantiated with a QueryList which contains `Dependency` 4 and
+ * 6. Here, `Dependency` 5 would not be included, because it is not a direct child.
+ *
+ * ### Injecting a live collection of descendant directives
+ *
+ * Note: This is will be implemented in later release. ()
+ *
+ * Similar to `@Query` above, but also includes the children of the child elements.
+ *
+ * ```
+ * @Directive({ selector: '[my-directive]' })
+ * class MyDirective {
+ * constructor(@QueryDescendents(Dependency) dependencies:QueryList) {
+ * }
+ * }
+ * ```
+ *
+ * This directive would be instantiated with a Query which would contain `Dependency` 4, 5 and 6.
+ *
+ * ### Optional injection
+ *
+ * The normal behavior of directives is to return an error when a specified dependency cannot be
+ * resolved. If you
+ * would like to inject `null` on unresolved dependency instead, you can annotate that dependency
+ * with `@Optional()`.
+ * This explicitly permits the author of a template to treat some of the surrounding directives as
+ * optional.
+ *
+ * ```
+ * @Directive({ selector: '[my-directive]' })
+ * class MyDirective {
+ * constructor(@Optional() dependency:Dependency) {
+ * }
+ * }
+ * ```
+ *
+ * This directive would be instantiated with a `Dependency` directive found on the current element.
+ * If none can be
+ * found, the injector supplies `null` instead of throwing an error.
+ *
+ * ## Example
+ *
+ * Here we use a decorator directive to simply define basic tool-tip behavior.
+ *
+ * ```
+ * @Directive({
+ * selector: '[tooltip]',
+ * properties: [
+ * 'text: tooltip'
+ * ],
+ * hostListeners: {
+ * 'onmouseenter': 'onMouseEnter()',
+ * 'onmouseleave': 'onMouseLeave()'
+ * }
+ * })
+ * class Tooltip{
+ * text:string;
+ * overlay:Overlay; // NOT YET IMPLEMENTED
+ * overlayManager:OverlayManager; // NOT YET IMPLEMENTED
+ *
+ * constructor(overlayManager:OverlayManager) {
+ * this.overlay = overlay;
+ * }
+ *
+ * onMouseEnter() {
+ * // exact signature to be determined
+ * this.overlay = this.overlayManager.open(text, ...);
+ * }
+ *
+ * onMouseLeave() {
+ * this.overlay.close();
+ * this.overlay = null;
+ * }
+ * }
+ * ```
+ * In our HTML template, we can then add this behavior to a `` or any other element with the
+ * `tooltip` selector,
+ * like so:
+ *
+ * ```
+ *
+ * ```
+ *
+ * Directives can also control the instantiation, destruction, and positioning of inline template
+ * elements:
+ *
+ * A directive uses a
ViewContainerRef to instantiate, insert, move, and destroy views at
+ * runtime.
+ * The
ViewContainerRef is created as a result of `
` element, and represents a
+ * location in the current view
+ * where these actions are performed.
+ *
+ * Views are always created as children of the current View, and as siblings of the
+ * `` 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
+ * `` element syntax is wordy, Angular
+ * also supports a shorthand notation: `` and `` are
+ * equivalent.
+ *
+ * Thus,
+ *
+ * ```
+ *
+ * ```
+ *
+ * Expands in use to:
+ *
+ * ```
+ *
+ * ```
+ *
+ * Notice that although the shorthand places `*foo="bar"` within the `` element, the binding for
+ * the directive
+ * controller is correctly instantiated on the `` element rather than the `` element.
+ *
+ *
+ * ## Example
+ *
+ * Let's suppose we want to implement the `unless` behavior, to conditionally include a template.
+ *
+ * Here is a simple directive that triggers on an `unless` selector:
+ *
+ * ```
+ * @Directive({
+ * selector: '[unless]',
+ * properties: ['unless']
+ * })
+ * export class Unless {
+ * viewContainer: ViewContainerRef;
+ * protoViewRef: ProtoViewRef;
+ * prevCondition: boolean;
+ *
+ * constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef) {
+ * this.viewContainer = viewContainer;
+ * this.protoViewRef = protoViewRef;
+ * this.prevCondition = null;
+ * }
+ *
+ * set unless(newCondition) {
+ * if (newCondition && (isBlank(this.prevCondition) || !this.prevCondition)) {
+ * this.prevCondition = true;
+ * this.viewContainer.clear();
+ * } else if (!newCondition && (isBlank(this.prevCondition) || this.prevCondition)) {
+ * this.prevCondition = false;
+ * this.viewContainer.create(this.protoViewRef);
+ * }
+ * }
+ * }
+ * ```
+ *
+ * We can then use this `unless` selector in a template:
+ * ```
+ *
+ * ```
+ *
+ * Once the directive instantiates the child view, the shorthand notation for the template expands
+ * and the result is:
+ *
+ * ```
+ *
+ * ```
+ *
+ * Note also that although the `` template still exists inside the ``,
+ * the instantiated
+ * view occurs on the second `` which is a sibling to the `` element.
+ *
+ * @exportedAs angular2/annotations
+ */
+ function Directive(arg: _DirectiveArg): (target: any) => any;
+ interface _DirectiveArg {
+
+ /**
+ * If set to true the compiler does not compile the children of this directive.
+ */
+ compileChildren?: boolean;
+
+ /**
+ * Enumerates the set of emitted events.
+ *
+ * ## Syntax
+ *
+ * ```
+ * @Component({
+ * events: ['statusChange']
+ * })
+ * class TaskComponent {
+ * statusChange:EventEmitter;
+ *
+ * constructor() {
+ * this.statusChange = new EventEmitter();
+ * }
+ *
+ * onComplete() {
+ * this.statusChange.next('completed');
+ * }
+ * }
+ * ```
+ */
+ events?: List;
+
+ /**
+ * Specifies which DOM methods a directive can invoke.
+ *
+ * ## Syntax
+ *
+ * ```
+ * @Directive({
+ * selector: 'input',
+ * hostActions: {
+ * 'emitFocus': 'focus()'
+ * }
+ * })
+ * class InputDirective {
+ * constructor() {
+ * this.emitFocus = new EventEmitter();
+ * }
+ *
+ * focus() {
+ * this.emitFocus.next();
+ * }
+ * }
+ *
+ * In this example calling focus on InputDirective will result in calling focus on the DOM
+ * element.
+ * ```
+ */
+ hostActions?: StringMap;
+
+ /**
+ * Specifies static attributes that should be propagated to a host element. Attributes specified
+ * in `hostAttributes`
+ * are propagated only if a given attribute is not present on a host element.
+ *
+ * ## Syntax
+ *
+ * ```
+ * @Directive({
+ * selector: '[my-button]',
+ * hostAttributes: {
+ * 'role': 'button'
+ * }
+ * })
+ * class MyButton {
+ * }
+ *
+ * In this example using `my-button` directive (ex.: ``) on a host element
+ * (here: `` )
+ * will ensure that this element will get the "button" role.
+ * ```
+ */
+ hostAttributes?: StringMap
;
+
+ /**
+ * Defines the set of injectable objects that are visible to a Directive and its light dom
+ * children.
+ *
+ * ## Simple Example
+ *
+ * Here is an example of a class that can be injected:
+ *
+ * ```
+ * class Greeter {
+ * greet(name:string) {
+ * return 'Hello ' + name + '!';
+ * }
+ * }
+ *
+ * @Directive({
+ * selector: 'greet',
+ * hostInjector: [
+ * Greeter
+ * ]
+ * })
+ * class HelloWorld {
+ * greeter:Greeter;
+ *
+ * constructor(greeter:Greeter) {
+ * this.greeter = greeter;
+ * }
+ * }
+ * ```
+ */
+ hostInjector?: List;
+
+ /**
+ * Specifies which DOM hostListeners a directive listens to.
+ *
+ * The `hostListeners` property defines a set of `event` to `method` key-value pairs:
+ *
+ * - `event1`: the DOM event that the directive listens to.
+ * - `statement`: the statement to execute when the event occurs.
+ * If the evalutation of the statement returns `false`, then `preventDefault`is applied on the DOM
+ * event.
+ *
+ * To listen to global events, a target must be added to the event name.
+ * The target can be `window`, `document` or `body`.
+ *
+ * When writing a directive event binding, you can also refer to the following local variables:
+ * - `$event`: Current event object which triggered the event.
+ * - `$target`: The source of the event. This will be either a DOM element or an Angular
+ * directive.
+ * (will be implemented in later release)
+ *
+ *
+ * ## Syntax
+ *
+ * ```
+ * @Directive({
+ * hostListeners: {
+ * 'event1': 'onMethod1(arguments)',
+ * 'target:event2': 'onMethod2(arguments)',
+ * ...
+ * }
+ * }
+ * ```
+ *
+ * ## Basic Event Binding:
+ *
+ * Suppose you want to write a directive that triggers on `change` events in the DOM and on
+ * `resize` events in window.
+ * You would define the event binding as follows:
+ *
+ * ```
+ * @Directive({
+ * selector: 'input',
+ * hostListeners: {
+ * 'change': 'onChange($event)',
+ * 'window:resize': 'onResize($event)'
+ * }
+ * })
+ * class InputDirective {
+ * onChange(event:Event) {
+ * }
+ * onResize(event:Event) {
+ * }
+ * }
+ * ```
+ *
+ * Here the `onChange` method of `InputDirective` is invoked whenever the DOM element fires the
+ * 'change' event.
+ */
+ hostListeners?: StringMap;
+
+ /**
+ * Specifies which DOM properties a directives updates.
+ *
+ * ## Syntax
+ *
+ * ```
+ * @Directive({
+ * selector: 'input',
+ * hostProperties: {
+ * 'value': 'value'
+ * }
+ * })
+ * class InputDirective {
+ * value:string;
+ * }
+ *
+ * In this example every time the value property of the decorator changes, Angular will update the
+ * value property of
+ * the host element.
+ * ```
+ */
+ hostProperties?: StringMap;
+
+ /**
+ * Specifies a set of lifecycle hostListeners in which the directive participates.
+ *
+ * See onChange, onDestroy,
+ * onAllChangesDone for details.
+ */
+ lifecycle?: List;
+
+ /**
+ * Enumerates the set of properties that accept data binding for a directive.
+ *
+ * The `properties` property defines a set of `directiveProperty` to `bindingProperty`
+ * configuration:
+ *
+ * - `directiveProperty` specifies the component property where the value is written.
+ * - `bindingProperty` specifies the DOM property where the value is read from.
+ *
+ * You can include a Pipe when specifying a `bindingProperty` to allow for data
+ * transformation and structural change detection of the value. These pipes will be evaluated in
+ * the context of this component.
+ *
+ * ## Syntax
+ *
+ * There is no need to specify both `directiveProperty` and `bindingProperty` when they both have
+ * the same value.
+ *
+ * ```
+ * @Directive({
+ * properties: [
+ * 'propertyName', // shorthand notation for 'propertyName: propertyName'
+ * 'directiveProperty1: bindingProperty1',
+ * 'directiveProperty2: bindingProperty2 | pipe1 | ...',
+ * ...
+ * ]
+ * }
+ * ```
+ *
+ *
+ * ## Basic Property Binding
+ *
+ * We can easily build a simple `Tooltip` directive that exposes a `tooltip` property, which can
+ * be used in templates with standard Angular syntax. For example:
+ *
+ * ```
+ * @Directive({
+ * selector: '[tooltip]',
+ * properties: [
+ * 'text: tooltip'
+ * ]
+ * })
+ * class Tooltip {
+ * set text(value: string) {
+ * // This will get called every time with the new value when the 'tooltip' property changes
+ * }
+ * }
+ * ```
+ *
+ * We can then bind to the `tooltip' property as either an expression (`someExpression`) or as a
+ * string literal, as shown in the HTML template below:
+ *
+ * ```html
+ * ...
+ * ...
+ * ```
+ *
+ * Whenever the `someExpression` expression changes, the `properties` declaration instructs
+ * Angular to update the `Tooltip`'s `text` property.
+ *
+ * ## Bindings With Pipes
+ *
+ * You can also use pipes when writing binding definitions for a directive.
+ *
+ * For example, we could write a binding that updates the directive on structural changes, rather
+ * than on reference changes, as normally occurs in change detection.
+ *
+ * See Pipe and keyValDiff documentation for more details.
+ *
+ * ```
+ * @Directive({
+ * selector: '[class-set]',
+ * properties: [
+ * 'classChanges: classSet | keyValDiff'
+ * ]
+ * })
+ * class ClassSet {
+ * set classChanges(changes: KeyValueChanges) {
+ * // This will get called every time the `class-set` expressions changes its structure.
+ * }
+ * }
+ * ```
+ *
+ * The template that this directive is used in may also contain its own pipes. For example:
+ *
+ * ```html
+ *
+ * ```
+ *
+ * In this case, the two pipes compose as if they were inlined: `someExpression | somePipe |
+ * keyValDiff`.
+ */
+ properties?: List
;
+
+ /**
+ * 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
+ *