From e61d82b9be973a2f8f0afcdce9399aa2557323a9 Mon Sep 17 00:00:00 2001
From: Tobias Bosch <tbosch1009@gmail.com>
Date: Wed, 20 May 2015 09:48:15 -0700
Subject: [PATCH] =?UTF-8?q?refactor(core):=20ts=E2=80=99ify=20core?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 modules/angular2/core.js                      |   1 -
 modules/angular2/globals.d.ts                 |   1 +
 .../src/change_detection/change_detection.ts  |   8 +-
 .../{annotations.es6 => annotations.ts}       |   4 +-
 .../{decorators.es6 => decorators.ts}         |   5 +-
 .../src/core/annotations/{di.es6 => di.ts}    |   0
 .../angular2/src/core/annotations/view.es6    |   3 -
 modules/angular2/src/core/annotations/view.ts |   3 +
 .../{visibility.es6 => visibility.ts}         |   2 +-
 .../{annotations.js => annotations.ts}        | 310 +++---
 .../core/annotations_impl/{di.js => di.ts}    |  25 +-
 .../annotations_impl/{view.js => view.ts}     |  29 +-
 .../{visibility.js => visibility.ts}          |  51 +-
 modules/angular2/src/core/application.js      | 307 ------
 modules/angular2/src/core/application.ts      | 348 +++++++
 .../angular2/src/core/application_tokens.js   |   4 -
 .../angular2/src/core/application_tokens.ts   |   4 +
 ...base_query_list.es6 => base_query_list.ts} |  12 +-
 .../angular2/src/core/compiler/compiler.js    | 258 -----
 .../angular2/src/core/compiler/compiler.ts    | 258 +++++
 ..._url_mapper.js => component_url_mapper.ts} |   8 +-
 ...tive_resolver.js => directive_resolver.ts} |   8 +-
 .../core/compiler/dynamic_component_loader.js | 132 ---
 .../core/compiler/dynamic_component_loader.ts | 118 +++
 .../{element_binder.js => element_binder.ts}  |  20 +-
 ...lement_injector.js => element_injector.ts} | 955 ++++++++++--------
 .../{element_ref.js => element_ref.ts}        |   8 +-
 .../angular2/src/core/compiler/interfaces.js  |   8 -
 ..._view_factory.js => proto_view_factory.ts} | 241 ++---
 .../compiler/{query_list.js => query_list.ts} |  41 +-
 ...plate_resolver.js => template_resolver.ts} |   8 +-
 .../src/core/compiler/{view.js => view.ts}    |  98 +-
 .../src/core/compiler/view_container_ref.js   |  71 --
 .../src/core/compiler/view_container_ref.ts   |  61 ++
 .../{view_manager.js => view_manager.ts}      |  95 +-
 ...manager_utils.js => view_manager_utils.ts} |  80 +-
 .../compiler/{view_pool.js => view_pool.ts}   |  11 +-
 .../compiler/{view_ref.js => view_ref.ts}     |  24 +-
 ...eption_handler.js => exception_handler.ts} |   8 +-
 .../src/core/life_cycle/life_cycle.js         |  76 --
 .../src/core/life_cycle/life_cycle.ts         |  81 ++
 ...get_testability.es6 => get_testability.ts} |  10 +-
 .../{testability.js => testability.ts}        |  16 +-
 modules/angular2/src/core/zone/ng_zone.ts     |   6 +-
 modules/angular2/src/di/injector.ts           |  16 +-
 modules/angular2/src/dom/dom_adapter.ts       |   2 +-
 modules/angular2/src/facade/collection.ts     |  44 +-
 modules/angular2/src/facade/lang.ts           |   2 +-
 .../render/dom/compiler/directive_parser.ts   |  16 +-
 .../src/render/dom/compiler/selector.ts       |  58 +-
 .../src/render/dom/events/key_events.ts       |   2 +-
 .../emulated_scoped_shadow_dom_strategy.ts    |  13 +-
 .../render/dom/shadow_dom/style_inliner.ts    |  26 +-
 .../src/services/{ruler.js => ruler.ts}       |  14 +-
 .../dom/shadow_dom/style_inliner_spec.js      |  38 +-
 modules/angular2/traceur-runtime.d.ts         |   2 +
 56 files changed, 2128 insertions(+), 1922 deletions(-)
 rename modules/angular2/src/core/annotations/{annotations.es6 => annotations.ts} (86%)
 rename modules/angular2/src/core/annotations/{decorators.es6 => decorators.ts} (90%)
 rename modules/angular2/src/core/annotations/{di.es6 => di.ts} (100%)
 delete mode 100644 modules/angular2/src/core/annotations/view.es6
 create mode 100644 modules/angular2/src/core/annotations/view.ts
 rename modules/angular2/src/core/annotations/{visibility.es6 => visibility.ts} (62%)
 rename modules/angular2/src/core/annotations_impl/{annotations.js => annotations.ts} (81%)
 rename modules/angular2/src/core/annotations_impl/{di.js => di.ts} (62%)
 rename modules/angular2/src/core/annotations_impl/{view.js => view.ts} (84%)
 rename modules/angular2/src/core/annotations_impl/{visibility.js => visibility.ts} (84%)
 delete mode 100644 modules/angular2/src/core/application.js
 create mode 100644 modules/angular2/src/core/application.ts
 delete mode 100644 modules/angular2/src/core/application_tokens.js
 create mode 100644 modules/angular2/src/core/application_tokens.ts
 rename modules/angular2/src/core/compiler/{base_query_list.es6 => base_query_list.ts} (81%)
 delete mode 100644 modules/angular2/src/core/compiler/compiler.js
 create mode 100644 modules/angular2/src/core/compiler/compiler.ts
 rename modules/angular2/src/core/compiler/{component_url_mapper.js => component_url_mapper.ts} (84%)
 rename modules/angular2/src/core/compiler/{directive_resolver.js => directive_resolver.ts} (75%)
 delete mode 100644 modules/angular2/src/core/compiler/dynamic_component_loader.js
 create mode 100644 modules/angular2/src/core/compiler/dynamic_component_loader.ts
 rename modules/angular2/src/core/compiler/{element_binder.js => element_binder.ts} (63%)
 rename modules/angular2/src/core/compiler/{element_injector.js => element_injector.ts} (54%)
 rename modules/angular2/src/core/compiler/{element_ref.js => element_ref.ts} (88%)
 delete mode 100644 modules/angular2/src/core/compiler/interfaces.js
 rename modules/angular2/src/core/compiler/{proto_view_factory.js => proto_view_factory.ts} (57%)
 rename modules/angular2/src/core/compiler/{query_list.js => query_list.ts} (73%)
 rename modules/angular2/src/core/compiler/{template_resolver.js => template_resolver.ts} (86%)
 rename modules/angular2/src/core/compiler/{view.js => view.ts} (73%)
 delete mode 100644 modules/angular2/src/core/compiler/view_container_ref.js
 create mode 100644 modules/angular2/src/core/compiler/view_container_ref.ts
 rename modules/angular2/src/core/compiler/{view_manager.js => view_manager.ts} (75%)
 rename modules/angular2/src/core/compiler/{view_manager_utils.js => view_manager_utils.ts} (74%)
 rename modules/angular2/src/core/compiler/{view_pool.js => view_pool.ts} (80%)
 rename modules/angular2/src/core/compiler/{view_ref.js => view_ref.ts} (50%)
 rename modules/angular2/src/core/{exception_handler.js => exception_handler.ts} (82%)
 delete mode 100644 modules/angular2/src/core/life_cycle/life_cycle.js
 create mode 100644 modules/angular2/src/core/life_cycle/life_cycle.ts
 rename modules/angular2/src/core/testability/{get_testability.es6 => get_testability.ts} (78%)
 rename modules/angular2/src/core/testability/{testability.js => testability.ts} (86%)
 rename modules/angular2/src/services/{ruler.js => ruler.ts} (55%)

diff --git a/modules/angular2/core.js b/modules/angular2/core.js
index 6e164a4d13..518edd0518 100644
--- a/modules/angular2/core.js
+++ b/modules/angular2/core.js
@@ -5,7 +5,6 @@
  * Define angular core API here.
  */
 export * from './src/core/annotations/visibility';
-export * from './src/core/compiler/interfaces';
 export * from './src/core/annotations/view';
 export * from './src/core/application';
 export * from './src/core/application_tokens';
diff --git a/modules/angular2/globals.d.ts b/modules/angular2/globals.d.ts
index 56e1ed6751..f544935e04 100644
--- a/modules/angular2/globals.d.ts
+++ b/modules/angular2/globals.d.ts
@@ -27,4 +27,5 @@ interface Window {
   Reflect: any;
   zone: Zone;
   Hammer: HammerStatic;
+  getAngularTestability: Function;
 }
diff --git a/modules/angular2/src/change_detection/change_detection.ts b/modules/angular2/src/change_detection/change_detection.ts
index fa5662617d..3cc06083a9 100644
--- a/modules/angular2/src/change_detection/change_detection.ts
+++ b/modules/angular2/src/change_detection/change_detection.ts
@@ -77,19 +77,19 @@ export var preGeneratedProtoDetectors = {};
  */
 export class PreGeneratedChangeDetection extends ChangeDetection {
   _dynamicChangeDetection: ChangeDetection;
-  _protoChangeDetectors: any;
+  _protoChangeDetectorFactories: StringMap<string, Function>;
 
   constructor(private registry: PipeRegistry, protoChangeDetectors?) {
     super();
     this._dynamicChangeDetection = new DynamicChangeDetection(registry);
-    this._protoChangeDetectors =
+    this._protoChangeDetectorFactories =
         isPresent(protoChangeDetectors) ? protoChangeDetectors : preGeneratedProtoDetectors;
   }
 
   createProtoChangeDetector(definition: ChangeDetectorDefinition): ProtoChangeDetector {
     var id = definition.id;
-    if (StringMapWrapper.contains(this._protoChangeDetectors, id)) {
-      return StringMapWrapper.get(this._protoChangeDetectors, id)(this.registry);
+    if (StringMapWrapper.contains(this._protoChangeDetectorFactories, id)) {
+      return StringMapWrapper.get(this._protoChangeDetectorFactories, id)(this.registry);
     }
     return this._dynamicChangeDetection.createProtoChangeDetector(definition);
   }
diff --git a/modules/angular2/src/core/annotations/annotations.es6 b/modules/angular2/src/core/annotations/annotations.ts
similarity index 86%
rename from modules/angular2/src/core/annotations/annotations.es6
rename to modules/angular2/src/core/annotations/annotations.ts
index 1cef71cfb3..e9dde7d412 100644
--- a/modules/angular2/src/core/annotations/annotations.es6
+++ b/modules/angular2/src/core/annotations/annotations.ts
@@ -6,5 +6,7 @@
 export {
   Component as ComponentAnnotation,
   Directive as DirectiveAnnotation,
-  onDestroy, onChange, onAllChangesDone
+  onDestroy,
+  onChange,
+  onAllChangesDone
 } from '../annotations_impl/annotations';
diff --git a/modules/angular2/src/core/annotations/decorators.es6 b/modules/angular2/src/core/annotations/decorators.ts
similarity index 90%
rename from modules/angular2/src/core/annotations/decorators.es6
rename to modules/angular2/src/core/annotations/decorators.ts
index 48fed20015..f5e80b89e5 100644
--- a/modules/angular2/src/core/annotations/decorators.es6
+++ b/modules/angular2/src/core/annotations/decorators.ts
@@ -1,7 +1,4 @@
-import {
-  ComponentAnnotation,
-  DirectiveAnnotation
-} from './annotations';
+import {ComponentAnnotation, DirectiveAnnotation} from './annotations';
 import {ViewAnnotation} from './view';
 import {AncestorAnnotation, ParentAnnotation} from './visibility';
 import {AttributeAnnotation, QueryAnnotation} from './di';
diff --git a/modules/angular2/src/core/annotations/di.es6 b/modules/angular2/src/core/annotations/di.ts
similarity index 100%
rename from modules/angular2/src/core/annotations/di.es6
rename to modules/angular2/src/core/annotations/di.ts
diff --git a/modules/angular2/src/core/annotations/view.es6 b/modules/angular2/src/core/annotations/view.es6
deleted file mode 100644
index 504e1866b4..0000000000
--- a/modules/angular2/src/core/annotations/view.es6
+++ /dev/null
@@ -1,3 +0,0 @@
-export {
-  View as ViewAnnotation,
-  } from '../annotations_impl/view';
diff --git a/modules/angular2/src/core/annotations/view.ts b/modules/angular2/src/core/annotations/view.ts
new file mode 100644
index 0000000000..8aee85b989
--- /dev/null
+++ b/modules/angular2/src/core/annotations/view.ts
@@ -0,0 +1,3 @@
+export {
+  View as ViewAnnotation,
+} from '../annotations_impl/view';
diff --git a/modules/angular2/src/core/annotations/visibility.es6 b/modules/angular2/src/core/annotations/visibility.ts
similarity index 62%
rename from modules/angular2/src/core/annotations/visibility.es6
rename to modules/angular2/src/core/annotations/visibility.ts
index 6b768671d0..53acffc1fb 100644
--- a/modules/angular2/src/core/annotations/visibility.es6
+++ b/modules/angular2/src/core/annotations/visibility.ts
@@ -1,4 +1,4 @@
 export {
   Ancestor as AncestorAnnotation,
   Parent as ParentAnnotation,
-  } from '../annotations_impl/visibility';
+} from '../annotations_impl/visibility';
diff --git a/modules/angular2/src/core/annotations_impl/annotations.js b/modules/angular2/src/core/annotations_impl/annotations.ts
similarity index 81%
rename from modules/angular2/src/core/annotations_impl/annotations.js
rename to modules/angular2/src/core/annotations_impl/annotations.ts
index 3890bf64dc..32b9b4768a 100644
--- a/modules/angular2/src/core/annotations_impl/annotations.js
+++ b/modules/angular2/src/core/annotations_impl/annotations.ts
@@ -1,4 +1,4 @@
-import {CONST, normalizeBlank, isPresent} from 'angular2/src/facade/lang';
+import {CONST, normalizeBlank, isPresent, CONST_EXPR} from 'angular2/src/facade/lang';
 import {ListWrapper, List} from 'angular2/src/facade/collection';
 import {Injectable} from 'angular2/src/di/annotations_impl';
 import {DEFAULT} from 'angular2/change_detection';
@@ -10,29 +10,38 @@ import {DEFAULT} from 'angular2/change_detection';
  *
  * {@link Directive}s with an embedded view are called {@link Component}s.
  *
- * A directive consists of a single directive annotation and a controller class. When the directive's `selector` matches
+ * 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,
+ * 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
+ *   - 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
+ *   - 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`
+ * - *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
+ * 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 View}:
+ * Angular then resolves dependencies as follows, according to the order in which they appear in the
+ * {@link View}:
  *
  * 1. Dependencies on the current element
  * 2. Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary
@@ -40,26 +49,34 @@ import {DEFAULT} from 'angular2/change_detection';
  * 4. Dependencies on pre-existing injectors
  *
  *
- * The `ElementInjector` can inject other directives, element-specific special objects, or it can delegate to the parent
+ * 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
+ * - `@Ancestor() directive:DirectiveType`: any directive that matches the type between the current
+ * element and the
+ *    Shadow DOM root. Current element is not included in the resolution, therefore even if it could
+ * resolve it, it will
  *    be ignored.
- * - `@Parent() directive:DirectiveType`: any directive that matches the type on a direct parent element only.
- * - `@Query(DirectiveType) query:QueryList<DirectiveType>`: A live collection of direct child directives.
- * - `@QueryDescendants(DirectiveType) query:QueryList<DirectiveType>`: A live collection of any child directives.
+ * - `@Parent() directive:DirectiveType`: any directive that matches the type on a direct parent
+ * element only.
+ * - `@Query(DirectiveType) query:QueryList<DirectiveType>`: A live collection of direct child
+ * directives.
+ * - `@QueryDescendants(DirectiveType) query:QueryList<DirectiveType>`: A live collection of any
+ * child directives.
  *
  * To inject element-specific special objects, declare the constructor parameter as:
  * - `element: ElementRef` to obtain a reference to logical element in the view.
- * - `viewContainer: ViewContainerRef` to control child template instantiation, for {@link Directive} directives only
+ * - `viewContainer: ViewContainerRef` to control child template instantiation, for {@link
+ * 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.
+ * The following example demonstrates how dependency injection resolves constructor arguments in
+ * practice.
  *
  *
  * Assume this HTML template:
@@ -100,7 +117,8 @@ import {DEFAULT} from 'angular2/change_detection';
  *
  * ### No injection
  *
- * Here the constructor is declared with no arguments, therefore nothing is injected into `MyDirective`.
+ * Here the constructor is declared with no arguments, therefore nothing is injected into
+ * `MyDirective`.
  *
  * ```
  * @Directive({ selector: '[my-directive]' })
@@ -115,9 +133,11 @@ import {DEFAULT} from 'angular2/change_detection';
  *
  * ### Component-level injection
  *
- * Directives can inject any injectable instance from the closest component injector or any of its parents.
+ * 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
+ * Here, the constructor declares a parameter, `someService`, and injects the `SomeService` type
+ * from the parent
  * component's injector.
  * ```
  * @Directive({ selector: '[my-directive]' })
@@ -142,13 +162,16 @@ import {DEFAULT} from 'angular2/change_detection';
  *   }
  * }
  * ```
- * This directive would be instantiated with `Dependency` declared at the same element, in this case `dependency="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
+ * 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.
  *
  * ```
@@ -159,13 +182,16 @@ import {DEFAULT} from 'angular2/change_detection';
  *   }
  * }
  * ```
- * This directive would be instantiated with `Dependency` declared at the parent element, in this case `dependency="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
+ * 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.
  *
  * ```
@@ -178,16 +204,19 @@ import {DEFAULT} from 'angular2/change_detection';
  * ```
  *
  * 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
+ * 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
+ * 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
+ * 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 `for`, an `if`, or a `switch`.
  *
  * ```
@@ -198,7 +227,8 @@ import {DEFAULT} from 'angular2/change_detection';
  * }
  * ```
  *
- * This directive would be instantiated with a {@link QueryList} which contains `Dependency` 4 and 6. Here, `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
@@ -219,9 +249,12 @@ import {DEFAULT} from 'angular2/change_detection';
  *
  * ### 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.
+ * 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]' })
@@ -231,7 +264,8 @@ import {DEFAULT} from 'angular2/change_detection';
  * }
  * ```
  *
- * This directive would be instantiated with a `Dependency` directive found on the current element. If none can be
+ * 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
@@ -269,24 +303,31 @@ import {DEFAULT} from 'angular2/change_detection';
  *   }
  * }
  * ```
- * In our HTML template, we can then add this behavior to a `<div>` or any other element with the `tooltip` selector,
+ * 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:
+ * 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
+ * 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 View}, and as siblings of the `<template>` element. Thus a
+ * Views are always created as children of the current {@link View}, 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.
+ * 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,
  *
@@ -306,7 +347,8 @@ import {DEFAULT} from 'angular2/change_detection';
  * </ul>
  * ```
  *
- * Notice that although the shorthand places `*foo="bar"` within the `<li>` element, the binding for the directive
+ * 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.
  *
  *
@@ -353,7 +395,8 @@ import {DEFAULT} from 'angular2/change_detection';
  * </ul>
  * ```
  *
- * Once the directive instantiates the child view, the shorthand notation for the template expands and the result is:
+ * Once the directive instantiates the child view, the shorthand notation for the template expands
+ * and the result is:
  *
  * ```
  * <ul>
@@ -364,16 +407,19 @@ import {DEFAULT} from 'angular2/change_detection';
  * </ul>
  * ```
  *
- * Note also that although the `<li></li>` template still exists inside the `<template></template>`, the instantiated
+ * Note also that although the `<li></li>` template still exists inside the `<template></template>`,
+ * the instantiated
  * view occurs on the second `<li></li>` which is a sibling to the `<template>` element.
  *
  * @exportedAs angular2/annotations
  */
+@CONST()
 export class Directive extends Injectable {
   /**
    * 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.
+   * Angular only allows directives to trigger on CSS selectors that do not cross element
+   * boundaries.
    *
    * `selector` may be declared as one of the following:
    *
@@ -401,7 +447,7 @@ export class Directive extends Injectable {
    * The directive would only be instantiated on the `<input type="text">` element.
    *
    */
-  selector:string;
+  selector: string;
 
   /**
    * Enumerates the set of properties that accept data binding for a directive.
@@ -412,7 +458,8 @@ export class Directive extends Injectable {
    * - `directiveProperty` specifies the component property where the value is written.
    * - `bindingProperty` specifies the DOM property where the value is read from.
    *
-   * You can include a {@link Pipe} when specifying a `bindingProperty` to allow for data transformation and structural
+   * You can include a {@link Pipe} when specifying a `bindingProperty` to allow for data
+   * transformation and structural
    * change detection of the value. These pipes will be evaluated in the context of this component.
    *
    *
@@ -431,7 +478,8 @@ export class Directive extends Injectable {
    *
    * ## Basic Property Binding
    *
-   * We can easily build a simple `Tooltip` directive that exposes a `tooltip` property, which can be used in templates
+   * 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:
    *
    * ```
@@ -448,7 +496,8 @@ export class Directive extends Injectable {
    * }
    * ```
    *
-   * We can then bind to the `tooltip' property as either an expression (`someExpression`) or as a string literal, as
+   * 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
@@ -465,7 +514,8 @@ export class Directive extends Injectable {
    *
    * 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
+   * For example, we could write a binding that updates the directive on structural changes, rather
+   * than on reference
    * changes, as normally occurs in change detection.
    *
    * See {@link Pipe} and {@link keyValDiff} documentation for more details.
@@ -490,10 +540,11 @@ export class Directive extends Injectable {
    * <div [class-set]="someExpression | somePipe">
    * ```
    *
-   * In this case, the two pipes compose as if they were inlined: `someExpression | somePipe | keyValDiff`.
+   * In this case, the two pipes compose as if they were inlined: `someExpression | somePipe |
+   * keyValDiff`.
    *
    */
-  properties:any; //  StringMap
+  properties: StringMap<string, string>;
 
   /**
    * Enumerates the set of emitted events.
@@ -517,7 +568,7 @@ export class Directive extends Injectable {
    * }
    * ```
    */
-  events:List<string>;
+  events: List<string>;
 
   /**
    * Specifies which DOM hostListeners a directive listens to.
@@ -526,14 +577,16 @@ export class Directive extends Injectable {
    *
    * - `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.
+   * 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.
+   * - `$target`: The source of the event. This will be either a DOM element or an Angular
+   * directive.
    *   (will be implemented in later release)
    *
    *
@@ -551,7 +604,8 @@ export class Directive extends Injectable {
    *
    * ## Basic Event Binding:
    *
-   * Suppose you want to write a directive that triggers on `change` events in the DOM and on `resize` events in window.
+   * 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:
    *
    * ```
@@ -570,10 +624,11 @@ export class Directive extends Injectable {
    * }
    * ```
    *
-   * Here the `onChange` method of `InputDirective` is invoked whenever the DOM element fires the 'change' event.
+   * Here the `onChange` method of `InputDirective` is invoked whenever the DOM element fires the
+   * 'change' event.
    *
    */
-  hostListeners:any; //  StringMap
+  hostListeners: StringMap<string, string>;
 
 
   /**
@@ -592,14 +647,16 @@ export class Directive extends Injectable {
    *   value:string;
    * }
    *
-   * In this example every time the value property of the decorator changes, Angular will update the value property of
+   * In this example every time the value property of the decorator changes, Angular will update the
+   * value property of
    * the host element.
    * ```
    */
-  hostProperties:any; // String map
+  hostProperties: StringMap<string, string>;
 
   /**
-   * Specifies static attributes that should be propagated to a host element. Attributes specified in `hostAttributes`
+   * 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
@@ -614,11 +671,12 @@ export class Directive extends Injectable {
    * class MyButton {
    * }
    *
-   * In this example using `my-button` directive (ex.: `<div my-button></div>`) on a host element (here: `<div>` )
+   * In this example using `my-button` directive (ex.: `<div my-button></div>`) on a host element
+   * (here: `<div>` )
    * will ensure that this element will get the "button" role.
    * ```
    */
-  hostAttributes:any; // String map
+  hostAttributes: StringMap<string, string>;
 
   /**
    * Specifies which DOM methods a directive can invoke.
@@ -642,26 +700,28 @@ export class Directive extends Injectable {
    *   }
    * }
    *
-   * In this example calling focus on InputDirective will result in calling focus on the DOM element.
+   * In this example calling focus on InputDirective will result in calling focus on the DOM
+   * element.
    * ```
    */
-  hostActions:any; // String map
+  hostActions: StringMap<string, string>;
 
   /**
    * Specifies a set of lifecycle hostListeners in which the directive participates.
    *
    * See {@link onChange}, {@link onDestroy}, {@link onAllChangesDone} for details.
    */
-  lifecycle:List; //List<LifecycleEvent>
+  lifecycle: List<LifecycleEvent>;
 
   /**
    * If set to true the compiler does not compile the children of this directive.
    */
-  //TODO(vsavkin): This would better fall under the Macro directive concept.
+  // TODO(vsavkin): This would better fall under the Macro directive concept.
   compileChildren: boolean;
 
   /**
-   * Defines the set of injectable objects that are visible to a Directive and its light dom children.
+   * Defines the set of injectable objects that are visible to a Directive and its light dom
+   * children.
    *
    * ## Simple Example
    *
@@ -689,9 +749,8 @@ export class Directive extends Injectable {
    * }
    * ```
    */
-  hostInjector:List;
+  hostInjector: List<any>;
 
-  @CONST()
   constructor({
       selector,
       properties,
@@ -704,16 +763,16 @@ export class Directive extends Injectable {
       hostInjector,
       compileChildren = true,
     }:{
-      selector:string,
-      properties:any,
-      events:List,
-      hostListeners: any,
-      hostProperties: any,
-      hostAttributes: any,
-      hostActions: any,
-      lifecycle:List,
-      hostInjector:List,
-      compileChildren:boolean
+      selector?:string,
+      properties?:any,
+      events?:List<string>,
+      hostListeners?: StringMap<string, string>,
+      hostProperties?: StringMap<string, string>,
+      hostAttributes?: StringMap<string, string>,
+      hostActions?: StringMap<string, string>,
+      lifecycle?:List<LifecycleEvent>,
+      hostInjector?:List<any>,
+      compileChildren?:boolean
     }={})
   {
     super();
@@ -734,7 +793,7 @@ export class Directive extends Injectable {
    *
    * See {@link onChange}, {@link onDestroy}, {@link onAllChangesDone} for details.
    */
-  hasLifecycleHook(hook:string):boolean {
+  hasLifecycleHook(hook: LifecycleEvent): boolean {
     return isPresent(this.lifecycle) ? ListWrapper.contains(this.lifecycle, hook) : false;
   }
 }
@@ -742,13 +801,16 @@ export class Directive extends Injectable {
 /**
  * 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.
+ * 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}.
+ * - 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.
  *
@@ -775,18 +837,22 @@ export class Directive extends Injectable {
  *
  * 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,
+ * 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
+ * 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
+ * There is nothing special about `HelloCmp`, which is a regular Angular component. It can also be
+ * used in other static
  * locations.
  *
  * ```
@@ -819,31 +885,39 @@ export class Directive extends Injectable {
  *
  * @exportedAs angular2/annotations
  */
+@CONST()
 export class Component extends Directive {
   /**
    * Defines the used change detection strategy.
    *
-   * When a component is instantiated, Angular creates a change detector, which is responsible for propagating
+   * 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
+   * 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;
+  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
+   * 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
+   * 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.
+   * The syntax for configuring the `appInjector` injectable is identical to {@link Injector}
+   * injectable configuration.
    * See {@link Injector} for additional detail.
    *
    *
@@ -877,7 +951,7 @@ export class Component extends Directive {
    * }
    * ```
    */
-  appInjector:List;
+  appInjector: List<any>;
 
   /**
    * Defines the set of injectable objects that are visible to its view dom children.
@@ -919,9 +993,8 @@ export class Component extends Directive {
    *
    * ```
    */
-  viewInjector:List;
+  viewInjector: List<any>;
 
-  @CONST()
   constructor({
       selector,
       properties,
@@ -937,19 +1010,19 @@ export class Component extends Directive {
       changeDetection = DEFAULT,
       compileChildren = true
     }:{
-      selector:string,
-      properties:Object,
-      events:List,
-      hostListeners:any,
-      hostProperties:any,
-      hostAttributes:any,
-      hostActions:any,
-      appInjector:List,
-      lifecycle:List,
-      hostInjector:List,
-      viewInjector:List,
-      changeDetection:string,
-      compileChildren:boolean
+      selector?:string,
+      properties?:Object,
+      events?:List<string>,
+      hostListeners?:Map<string,string>,
+      hostProperties?:any,
+      hostAttributes?:any,
+      hostActions?:any,
+      appInjector?:List<any>,
+      lifecycle?:List<LifecycleEvent>,
+      hostInjector?:List<any>,
+      viewInjector?:List<any>,
+      changeDetection?:string,
+      compileChildren?:boolean
     }={})
   {
     super({
@@ -972,7 +1045,10 @@ export class Component extends Directive {
 }
 
 
-//TODO(misko): turn into LifecycleEvent class once we switch to TypeScript;
+@CONST()
+export class LifecycleEvent {
+  constructor(public name: string) {}
+}
 
 /**
  * Notify a directive whenever a {@link View} that contains it is destroyed.
@@ -992,7 +1068,7 @@ export class Component extends Directive {
  * ```
  * @exportedAs angular2/annotations
  */
-export const onDestroy = "onDestroy";
+export const onDestroy = CONST_EXPR(new LifecycleEvent("onDestroy"));
 
 
 /**
@@ -1030,7 +1106,7 @@ export const onDestroy = "onDestroy";
  *  ```
  * @exportedAs angular2/annotations
  */
-export const onChange = "onChange";
+export const onChange = CONST_EXPR(new LifecycleEvent("onChange"));
 
 /**
  * Notify a directive when the bindings of all its children have been changed.
@@ -1051,4 +1127,4 @@ export const onChange = "onChange";
  *  ```
  * @exportedAs angular2/annotations
  */
-export const onAllChangesDone = "onAllChangesDone";
+export const onAllChangesDone = CONST_EXPR(new LifecycleEvent("onAllChangesDone"));
diff --git a/modules/angular2/src/core/annotations_impl/di.js b/modules/angular2/src/core/annotations_impl/di.ts
similarity index 62%
rename from modules/angular2/src/core/annotations_impl/di.js
rename to modules/angular2/src/core/annotations_impl/di.ts
index 14925b9c02..9ed4933d4d 100644
--- a/modules/angular2/src/core/annotations_impl/di.js
+++ b/modules/angular2/src/core/annotations_impl/di.ts
@@ -29,19 +29,16 @@ import {DependencyAnnotation} from 'angular2/src/di/annotations_impl';
  *
  * @exportedAs angular2/annotations
  */
+@CONST()
 export class Attribute extends DependencyAnnotation {
-  attributeName: string;
-  @CONST()
-  constructor(attributeName) {
-    super();
-    this.attributeName = attributeName;
-  }
+  constructor(public attributeName: string) { super(); }
 
   get token() {
-    //Normally one would default a token to a type of an injected value but here
-    //the type of a variable is "string" and we can't use primitive type as a return value
-    //so we use instance of Attribute instead. This doesn't matter much in practice as arguments
-    //with @Attribute annotation are injected by ElementInjector that doesn't take tokens into account.
+    // Normally one would default a token to a type of an injected value but here
+    // the type of a variable is "string" and we can't use primitive type as a return value
+    // so we use instance of Attribute instead. This doesn't matter much in practice as arguments
+    // with @Attribute annotation are injected by ElementInjector that doesn't take tokens into
+    // account.
     return this;
   }
 }
@@ -53,11 +50,7 @@ export class Attribute extends DependencyAnnotation {
  *
  * @exportedAs angular2/annotations
  */
+@CONST()
 export class Query extends DependencyAnnotation {
-  directive;
-  @CONST()
-  constructor(directive) {
-    super();
-    this.directive = directive;
-  }
+  constructor(public directive: any) { super(); }
 }
diff --git a/modules/angular2/src/core/annotations_impl/view.js b/modules/angular2/src/core/annotations_impl/view.ts
similarity index 84%
rename from modules/angular2/src/core/annotations_impl/view.js
rename to modules/angular2/src/core/annotations_impl/view.ts
index a89e2043d8..3bc6d4c2f1 100644
--- a/modules/angular2/src/core/annotations_impl/view.js
+++ b/modules/angular2/src/core/annotations_impl/view.ts
@@ -3,10 +3,13 @@ import {ABSTRACT, CONST, Type} from 'angular2/src/facade/lang';
 /**
  * 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.
+ * 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
+ * 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}.
@@ -32,20 +35,21 @@ import {ABSTRACT, CONST, Type} from 'angular2/src/facade/lang';
  *
  * @exportedAs angular2/annotations
  */
+@CONST()
 export class View {
   /**
    * Specifies a template URL for an angular component.
    *
    * NOTE: either `templateUrl` or `template` should be used, but not both.
    */
-  templateUrl:string;
+  templateUrl: string;
 
   /**
    * Specifies an inline template for an angular component.
    *
    * NOTE: either `templateUrl` or `template` should be used, but not both.
    */
-  template:string;
+  template: string;
 
   /**
    * Specifies a list of directives that can be used within a template.
@@ -69,26 +73,25 @@ export class View {
    * }
    * ```
    */
-  directives:List<Type>;
+  directives: List<Type>;
 
   /**
    * Specify a custom renderer for this View.
    * If this is set, neither `template`, `templateURL` nor `directives` are used.
    */
-  renderer:any; // string;
+  renderer: string;
 
-  @CONST()
   constructor({
       templateUrl,
       template,
       directives,
       renderer
     }: {
-      templateUrl: string,
-      template: string,
-      directives: List<Type>,
-      renderer: string
-    })
+      templateUrl?: string,
+      template?: string,
+      directives?: List<Type>,
+      renderer?: string
+    } = {})
   {
     this.templateUrl = templateUrl;
     this.template = template;
diff --git a/modules/angular2/src/core/annotations_impl/visibility.js b/modules/angular2/src/core/annotations_impl/visibility.ts
similarity index 84%
rename from modules/angular2/src/core/annotations_impl/visibility.js
rename to modules/angular2/src/core/annotations_impl/visibility.ts
index bab65daa92..d570fb3149 100644
--- a/modules/angular2/src/core/annotations_impl/visibility.js
+++ b/modules/angular2/src/core/annotations_impl/visibility.ts
@@ -1,20 +1,11 @@
 import {CONST, CONST_EXPR} from 'angular2/src/facade/lang';
 import {DependencyAnnotation} from 'angular2/src/di/annotations_impl';
 
+@CONST()
 export class Visibility extends DependencyAnnotation {
-  depth: number;
-  crossComponentBoundaries: boolean;
+  constructor(public depth: number, public crossComponentBoundaries: boolean) { super(); }
 
-  @CONST()
-  constructor(depth:number, crossComponentBoundaries:boolean) {
-    super();
-    this.depth = depth;
-    this.crossComponentBoundaries = crossComponentBoundaries;
-  }
-
-  shouldIncludeSelf():boolean {
-    return this.depth === 0;
-  }
+  shouldIncludeSelf(): boolean { return this.depth === 0; }
 }
 
 /**
@@ -54,11 +45,9 @@ export class Visibility extends DependencyAnnotation {
  *
  * @exportedAs angular2/annotations
  */
+@CONST()
 export class Self extends Visibility {
-  @CONST()
-  constructor() {
-    super(0, false);
-  }
+  constructor() { super(0, false); }
 }
 
 // make constants after switching to ts2dart
@@ -100,20 +89,21 @@ export var self = new Self();
  *   <div dependency="2" my-directive></div>
  * </div>
  * ```
- * The `@Parent()` annotation in our constructor forces the injector to retrieve the dependency from the
- * parent element (even thought the current element could resolve it): Angular injects `dependency=1`.
+ * 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
  */
+@CONST()
 export class Parent extends Visibility {
-  @CONST()
-  constructor() {
-    super(1, false);
-  }
+  constructor() { super(1, false); }
 }
 
 /**
- * Specifies that an injector should retrieve a dependency from any ancestor element within the same shadow boundary.
+ * Specifies that an injector should retrieve a dependency from any ancestor element within the same
+ * shadow boundary.
  *
  * An ancestor is any element between the parent element and shadow root.
  *
@@ -156,7 +146,8 @@ export class Parent extends Visibility {
  * </div>
  * ```
  *
- * The `@Ancestor()` annotation in our constructor forces the injector to retrieve the dependency from the
+ * The `@Ancestor()` annotation in our constructor forces the injector to retrieve the dependency
+ * from the
  * nearest ancestor element:
  * - The current element `dependency="3"` is skipped because it is not an ancestor.
  * - Next parent has no directives `<div>`
@@ -166,11 +157,9 @@ export class Parent extends Visibility {
  *
  * @exportedAs angular2/annotations
  */
+@CONST()
 export class Ancestor extends Visibility {
-  @CONST()
-  constructor() {
-    super(999999, false);
-  }
+  constructor() { super(999999, false); }
 }
 
 /**
@@ -207,9 +196,7 @@ export class Ancestor extends Visibility {
  *
  * @exportedAs angular2/annotations
  */
+@CONST()
 export class Unbounded extends Visibility {
-  @CONST()
-  constructor() {
-    super(999999, true);
-  }
+  constructor() { super(999999, true); }
 }
diff --git a/modules/angular2/src/core/application.js b/modules/angular2/src/core/application.js
deleted file mode 100644
index 091361745f..0000000000
--- a/modules/angular2/src/core/application.js
+++ /dev/null
@@ -1,307 +0,0 @@
-import {Injector, bind, OpaqueToken} from 'angular2/di';
-import {NumberWrapper, Type, isBlank, isPresent, BaseException,
-    assertionsEnabled, print, stringify} from 'angular2/src/facade/lang';
-import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {Compiler, CompilerCache} from './compiler/compiler';
-import {Reflector, reflector} from 'angular2/src/reflection/reflection';
-import {Parser, Lexer, ChangeDetection, DynamicChangeDetection, PipeRegistry, defaultPipeRegistry} from 'angular2/change_detection';
-import {ExceptionHandler} from './exception_handler';
-import {TemplateLoader} from 'angular2/src/render/dom/compiler/template_loader';
-import {TemplateResolver} from './compiler/template_resolver';
-import {DirectiveResolver} from './compiler/directive_resolver';
-import {List, ListWrapper} from 'angular2/src/facade/collection';
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-import {NgZone} from 'angular2/src/core/zone/ng_zone';
-import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
-import {ShadowDomStrategy} from 'angular2/src/render/dom/shadow_dom/shadow_dom_strategy';
-import {EmulatedUnscopedShadowDomStrategy} from 'angular2/src/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy';
-import {XHR} from 'angular2/src/services/xhr';
-import {XHRImpl} from 'angular2/src/services/xhr_impl';
-import {EventManager, DomEventsPlugin} from 'angular2/src/render/dom/events/event_manager';
-import {KeyEventsPlugin} from 'angular2/src/render/dom/events/key_events';
-import {HammerGesturesPlugin} from 'angular2/src/render/dom/events/hammer_gestures';
-import {Binding} from 'angular2/src/di/binding';
-import {ComponentUrlMapper} from 'angular2/src/core/compiler/component_url_mapper';
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {StyleUrlResolver} from 'angular2/src/render/dom/shadow_dom/style_url_resolver';
-import {StyleInliner} from 'angular2/src/render/dom/shadow_dom/style_inliner';
-import {ComponentRef, DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
-import {TestabilityRegistry, Testability} from 'angular2/src/core/testability/testability';
-import {AppViewPool, APP_VIEW_POOL_CAPACITY} from 'angular2/src/core/compiler/view_pool';
-import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
-import {AppViewManagerUtils} from 'angular2/src/core/compiler/view_manager_utils';
-import {ProtoViewFactory} from 'angular2/src/core/compiler/proto_view_factory';
-import {Renderer, RenderCompiler} from 'angular2/src/render/api';
-import {DomRenderer, DOCUMENT_TOKEN} from 'angular2/src/render/dom/dom_renderer';
-import {resolveInternalDomView} from 'angular2/src/render/dom/view/view';
-import {DefaultDomCompiler} from 'angular2/src/render/dom/compiler/compiler';
-import {internalView} from 'angular2/src/core/compiler/view_ref';
-
-import {
-  appComponentRefToken,
-  appComponentTypeToken
-} from './application_tokens';
-
-var _rootInjector: Injector;
-
-// Contains everything that is safe to share between applications.
-var _rootBindings = [
-  bind(Reflector).toValue(reflector),
-  TestabilityRegistry
-];
-
-function _injectorBindings(appComponentType): List<Binding> {
-  return [
-      bind(DOCUMENT_TOKEN).toValue(DOM.defaultDoc()),
-      bind(appComponentTypeToken).toValue(appComponentType),
-      bind(appComponentRefToken).toAsyncFactory((dynamicComponentLoader, injector,
-        testability, registry) => {
-
-        // TODO(rado): investigate whether to support bindings on root component.
-        return dynamicComponentLoader.loadAsRoot(appComponentType, null, injector).then( (componentRef) => {
-          var domView = resolveInternalDomView(componentRef.hostView.render);
-          // We need to do this here to ensure that we create Testability and
-          // it's ready on the window for users.
-          registry.registerApplication(domView.boundElements[0], testability);
-
-          return componentRef;
-        });
-      }, [DynamicComponentLoader, Injector,
-        Testability, TestabilityRegistry]),
-
-      bind(appComponentType).toFactory((ref) => ref.instance,
-          [appComponentRefToken]),
-      bind(LifeCycle).toFactory((exceptionHandler) => new LifeCycle(exceptionHandler, null, assertionsEnabled()),[ExceptionHandler]),
-      bind(EventManager).toFactory((ngZone) => {
-        var plugins = [new HammerGesturesPlugin(), new KeyEventsPlugin(), new DomEventsPlugin()];
-        return new EventManager(plugins, ngZone);
-      }, [NgZone]),
-      bind(ShadowDomStrategy).toFactory(
-          (styleUrlResolver, doc) => new EmulatedUnscopedShadowDomStrategy(styleUrlResolver, doc.head),
-          [StyleUrlResolver, DOCUMENT_TOKEN]),
-      // TODO(tbosch): We need an explicit factory here, as
-      // we are getting errors in dart2js with mirrors...
-      bind(DomRenderer).toFactory(
-          (eventManager, shadowDomStrategy, doc) => new DomRenderer(eventManager, shadowDomStrategy, doc),
-          [EventManager, ShadowDomStrategy, DOCUMENT_TOKEN]
-      ),
-      DefaultDomCompiler,
-      bind(Renderer).toAlias(DomRenderer),
-      bind(RenderCompiler).toAlias(DefaultDomCompiler),
-      ProtoViewFactory,
-      // TODO(tbosch): We need an explicit factory here, as
-      // we are getting errors in dart2js with mirrors...
-      bind(AppViewPool).toFactory(
-        (capacity) => new AppViewPool(capacity),
-        [APP_VIEW_POOL_CAPACITY]
-      ),
-      bind(APP_VIEW_POOL_CAPACITY).toValue(10000),
-      AppViewManager,
-      AppViewManagerUtils,
-      Compiler,
-      CompilerCache,
-      TemplateResolver,
-      bind(PipeRegistry).toValue(defaultPipeRegistry),
-      bind(ChangeDetection).toClass(DynamicChangeDetection),
-      TemplateLoader,
-      DirectiveResolver,
-      Parser,
-      Lexer,
-      ExceptionHandler,
-      bind(XHR).toValue(new XHRImpl()),
-      ComponentUrlMapper,
-      UrlResolver,
-      StyleUrlResolver,
-      StyleInliner,
-      DynamicComponentLoader,
-      Testability
-  ];
-}
-
-function _createNgZone(givenReporter:Function): NgZone {
-  var defaultErrorReporter = (exception, stackTrace) => {
-    var longStackTrace = ListWrapper.join(stackTrace, "\n\n-----async gap-----\n");
-    DOM.logError(`${exception}\n\n${longStackTrace}`);
-    throw exception;
-  };
-
-  var reporter = isPresent(givenReporter) ? givenReporter : defaultErrorReporter;
-
-  var zone = new NgZone({enableLongStackTrace: assertionsEnabled()});
-  zone.initCallbacks({onErrorHandler: reporter});
-  return zone;
-}
-
-/**
- * Bootstrapping for Angular applications.
- *
- * You instantiate an Angular application by explicitly specifying a component to use as the root component for your
- * application via the `bootstrap()` method.
- *
- * ## Simple Example
- *
- * Assuming this `index.html`:
- *
- * ```html
- * <html>
- *   <!-- load Angular script tags here. -->
- *   <body>
- *     <my-app>loading...</my-app>
- *   </body>
- * </html>
- * ```
- *
- * An application is bootstrapped inside an existing browser DOM, typically `index.html`. Unlike Angular 1, Angular 2
- * does not compile/process bindings in `index.html`. This is mainly for security reasons, as well as architectural
- * changes in Angular 2. This means that `index.html` can safely be processed using server-side technologies such as
- * bindings. Bindings can thus use double-curly `{{ syntax }}` without collision from Angular 2 component double-curly
- * `{{ syntax }}`.
- *
- * We can use this script code:
- *
- * ```
- * @Component({
- *    selector: 'my-app'
- * })
- * @View({
- *    template: 'Hello {{ name }}!'
- * })
- * class MyApp {
- *   name:string;
- *
- *   constructor() {
- *     this.name = 'World';
- *   }
- * }
- *
- * main() {
- *   return bootstrap(MyApp);
- * }
- * ```
- *
- * When the app developer invokes `bootstrap()` with the root component `MyApp` as its argument, Angular performs the
- * following tasks:
- *
- *  1. It uses the component's `selector` property to locate the DOM element which needs to be upgraded into
- *     the angular component.
- *  2. It creates a new child injector (from the platform injector) and configures the injector with the component's
- *     `appInjector`. Optionally, you can also override the injector configuration for an app by invoking
- *     `bootstrap` with the `componentInjectableBindings` argument.
- *  3. It creates a new `Zone` and connects it to the angular application's change detection domain instance.
- *  4. It creates a shadow DOM on the selected component's host element and loads the template into it.
- *  5. It instantiates the specified component.
- *  6. Finally, Angular performs change detection to apply the initial data bindings for the application.
- *
- *
- * ## Instantiating Multiple Applications on a Single Page
- *
- * There are two ways to do this.
- *
- *
- * ### Isolated Applications
- *
- * Angular creates a new application each time that the `bootstrap()` method is invoked. When multiple applications
- * are created for a page, Angular treats each application as independent within an isolated change detection and
- * `Zone` domain. If you need to share data between applications, use the strategy described in the next
- * section, "Applications That Share Change Detection."
- *
- *
- * ### Applications That Share Change Detection
- *
- * If you need to bootstrap multiple applications that share common data, the applications must share a common
- * change detection and zone. To do that, create a meta-component that lists the application components in its template.
- * By only invoking the `bootstrap()` method once, with the meta-component as its argument, you ensure that only a
- * single change detection zone is created and therefore data can be shared across the applications.
- *
- *
- * ## Platform Injector
- *
- * When working within a browser window, there are many singleton resources: cookies, title, location, and others.
- * Angular services that represent these resources must likewise be shared across all Angular applications that
- * occupy the same browser window.  For this reason, Angular creates exactly one global platform injector which stores
- * all shared services, and each angular application injector has the platform injector as its parent.
- *
- * Each application has its own private injector as well. When there are multiple applications on a page, Angular treats
- * each application injector's services as private to that application.
- *
- *
- * # API
- * - `appComponentType`: The root component which should act as the application. This is a reference to a `Type`
- *   which is annotated with `@Component(...)`.
- * - `componentInjectableBindings`: An additional set of bindings that can be added to `appInjector` for the
- * {@link 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 {@link Injector}.
- *
- * @exportedAs angular2/core
- */
-export function bootstrap(appComponentType: Type,
-                          componentInjectableBindings: List<Binding> = null,
-                          errorReporter: Function = null): Promise<ApplicationRef> {
-  BrowserDomAdapter.makeCurrent();
-  var bootstrapProcess = PromiseWrapper.completer();
-
-  var zone = _createNgZone(errorReporter);
-  zone.run(() => {
-    // TODO(rado): prepopulate template cache, so applications with only
-    // index.html and main.js are possible.
-
-    var appInjector = _createAppInjector(appComponentType, componentInjectableBindings, zone);
-
-    PromiseWrapper.then(appInjector.asyncGet(appComponentRefToken),
-      (componentRef) => {
-        var appChangeDetector = internalView(componentRef.hostView).changeDetector;
-        // retrieve life cycle: may have already been created if injected in root component
-        var lc = appInjector.get(LifeCycle);
-        lc.registerWith(zone, appChangeDetector);
-        lc.tick(); //the first tick that will bootstrap the app
-
-        bootstrapProcess.resolve(new ApplicationRef(componentRef, appComponentType, appInjector));
-      },
-
-      (err, stackTrace) => {
-        bootstrapProcess.reject(err, stackTrace)
-      });
-  });
-
-  return bootstrapProcess.promise;
-}
-
-export class ApplicationRef {
-  _hostComponent:ComponentRef;
-  _injector:Injector;
-  _hostComponentType:Type;
-  constructor(hostComponent:ComponentRef, hostComponentType:Type, injector:Injector) {
-    this._hostComponent = hostComponent;
-    this._injector = injector;
-    this._hostComponentType = hostComponentType;
-  }
-
-  get hostComponentType() {
-    return this._hostComponentType;
-  }
-
-  get hostComponent() {
-    return this._hostComponent.instance;
-  }
-
-  dispose() {
-    // TODO: We also need to clean up the Zone, ... here!
-    return this._hostComponent.dispose();
-  }
-
-  get injector() {
-    return this._injector;
-  }
-}
-
-function _createAppInjector(appComponentType: Type, bindings: List<Binding>, zone: NgZone): Injector {
-  if (isBlank(_rootInjector)) _rootInjector = Injector.resolveAndCreate(_rootBindings);
-  var mergedBindings = isPresent(bindings) ?
-      ListWrapper.concat(_injectorBindings(appComponentType), bindings) :
-      _injectorBindings(appComponentType);
-  ListWrapper.push(mergedBindings, bind(NgZone).toValue(zone));
-  return _rootInjector.resolveAndCreateChild(mergedBindings);
-}
diff --git a/modules/angular2/src/core/application.ts b/modules/angular2/src/core/application.ts
new file mode 100644
index 0000000000..822beeb0fe
--- /dev/null
+++ b/modules/angular2/src/core/application.ts
@@ -0,0 +1,348 @@
+import {Injector, bind, OpaqueToken, Binding} from 'angular2/di';
+import {
+  NumberWrapper,
+  Type,
+  isBlank,
+  isPresent,
+  BaseException,
+  assertionsEnabled,
+  print,
+  stringify
+} from 'angular2/src/facade/lang';
+import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
+import {DOM} from 'angular2/src/dom/dom_adapter';
+import {Compiler, CompilerCache} from './compiler/compiler';
+import {Reflector, reflector} from 'angular2/src/reflection/reflection';
+import {
+  Parser,
+  Lexer,
+  ChangeDetection,
+  DynamicChangeDetection,
+  PipeRegistry,
+  defaultPipeRegistry
+} from 'angular2/change_detection';
+import {ExceptionHandler} from './exception_handler';
+import {TemplateLoader} from 'angular2/src/render/dom/compiler/template_loader';
+import {TemplateResolver} from './compiler/template_resolver';
+import {DirectiveResolver} from './compiler/directive_resolver';
+import {List, ListWrapper} from 'angular2/src/facade/collection';
+import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
+import {NgZone} from 'angular2/src/core/zone/ng_zone';
+import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
+import {ShadowDomStrategy} from 'angular2/src/render/dom/shadow_dom/shadow_dom_strategy';
+import {
+  EmulatedUnscopedShadowDomStrategy
+} from 'angular2/src/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy';
+import {XHR} from 'angular2/src/services/xhr';
+import {XHRImpl} from 'angular2/src/services/xhr_impl';
+import {EventManager, DomEventsPlugin} from 'angular2/src/render/dom/events/event_manager';
+import {KeyEventsPlugin} from 'angular2/src/render/dom/events/key_events';
+import {HammerGesturesPlugin} from 'angular2/src/render/dom/events/hammer_gestures';
+import {ComponentUrlMapper} from 'angular2/src/core/compiler/component_url_mapper';
+import {UrlResolver} from 'angular2/src/services/url_resolver';
+import {StyleUrlResolver} from 'angular2/src/render/dom/shadow_dom/style_url_resolver';
+import {StyleInliner} from 'angular2/src/render/dom/shadow_dom/style_inliner';
+import {
+  ComponentRef,
+  DynamicComponentLoader
+} from 'angular2/src/core/compiler/dynamic_component_loader';
+import {TestabilityRegistry, Testability} from 'angular2/src/core/testability/testability';
+import {AppViewPool, APP_VIEW_POOL_CAPACITY} from 'angular2/src/core/compiler/view_pool';
+import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
+import {AppViewManagerUtils} from 'angular2/src/core/compiler/view_manager_utils';
+import {ProtoViewFactory} from 'angular2/src/core/compiler/proto_view_factory';
+import {Renderer, RenderCompiler} from 'angular2/src/render/api';
+import {DomRenderer, DOCUMENT_TOKEN} from 'angular2/src/render/dom/dom_renderer';
+import {resolveInternalDomView} from 'angular2/src/render/dom/view/view';
+import {DefaultDomCompiler} from 'angular2/src/render/dom/compiler/compiler';
+import {internalView} from 'angular2/src/core/compiler/view_ref';
+
+import {appComponentRefToken, appComponentTypeToken} from './application_tokens';
+
+var _rootInjector: Injector;
+
+// Contains everything that is safe to share between applications.
+var _rootBindings = [bind(Reflector).toValue(reflector), TestabilityRegistry];
+
+function _injectorBindings(appComponentType): List<Type | Binding | List<any>> {
+  return [
+    bind(DOCUMENT_TOKEN)
+        .toValue(DOM.defaultDoc()),
+    bind(appComponentTypeToken).toValue(appComponentType),
+    bind(appComponentRefToken)
+        .toAsyncFactory((dynamicComponentLoader, injector, testability, registry) =>
+                        {
+
+                          // TODO(rado): investigate whether to support bindings on root component.
+                          return dynamicComponentLoader.loadAsRoot(appComponentType, null, injector)
+                              .then((componentRef) => {
+                                var domView = resolveInternalDomView(componentRef.hostView.render);
+                                // We need to do this here to ensure that we create Testability and
+                                // it's ready on the window for users.
+                                registry.registerApplication(domView.boundElements[0], testability);
+
+                                return componentRef;
+                              });
+                        },
+                        [DynamicComponentLoader, Injector, Testability, TestabilityRegistry]),
+
+    bind(appComponentType).toFactory((ref) => ref.instance, [appComponentRefToken]),
+    bind(LifeCycle)
+        .toFactory((exceptionHandler) => new LifeCycle(exceptionHandler, null, assertionsEnabled()),
+                       [ExceptionHandler]),
+    bind(EventManager)
+        .toFactory(
+            (ngZone) =>
+            {
+              var plugins =
+                  [new HammerGesturesPlugin(), new KeyEventsPlugin(), new DomEventsPlugin()];
+              return new EventManager(plugins, ngZone);
+            },
+            [NgZone]),
+    bind(ShadowDomStrategy)
+        .toFactory((styleUrlResolver, doc) =>
+                       new EmulatedUnscopedShadowDomStrategy(styleUrlResolver, doc.head),
+                   [StyleUrlResolver, DOCUMENT_TOKEN]),
+    // TODO(tbosch): We need an explicit factory here, as
+    // we are getting errors in dart2js with mirrors...
+    bind(DomRenderer)
+        .toFactory((eventManager, shadowDomStrategy, doc) =>
+                       new DomRenderer(eventManager, shadowDomStrategy, doc),
+                   [EventManager, ShadowDomStrategy, DOCUMENT_TOKEN]),
+    DefaultDomCompiler,
+    bind(Renderer).toAlias(DomRenderer),
+    bind(RenderCompiler).toAlias(DefaultDomCompiler),
+    ProtoViewFactory,
+    // TODO(tbosch): We need an explicit factory here, as
+    // we are getting errors in dart2js with mirrors...
+    bind(AppViewPool).toFactory((capacity) => new AppViewPool(capacity), [APP_VIEW_POOL_CAPACITY]),
+    bind(APP_VIEW_POOL_CAPACITY).toValue(10000),
+    AppViewManager,
+    AppViewManagerUtils,
+    Compiler,
+    CompilerCache,
+    TemplateResolver,
+    bind(PipeRegistry).toValue(defaultPipeRegistry),
+    bind(ChangeDetection).toClass(DynamicChangeDetection),
+    TemplateLoader,
+    DirectiveResolver,
+    Parser,
+    Lexer,
+    ExceptionHandler,
+    bind(XHR).toValue(new XHRImpl()),
+    ComponentUrlMapper,
+    UrlResolver,
+    StyleUrlResolver,
+    StyleInliner,
+    DynamicComponentLoader,
+    Testability
+  ];
+}
+
+function _createNgZone(givenReporter: Function): NgZone {
+  var defaultErrorReporter = (exception, stackTrace) => {
+    var longStackTrace = ListWrapper.join(stackTrace, "\n\n-----async gap-----\n");
+  DOM.logError(`${exception}\n\n${longStackTrace}`);
+  throw exception;
+};
+
+var reporter = isPresent(givenReporter) ? givenReporter : defaultErrorReporter;
+
+var zone = new NgZone({enableLongStackTrace: assertionsEnabled()});
+zone.initCallbacks({onErrorHandler: reporter});
+return zone;
+}
+
+/**
+ * Bootstrapping for Angular applications.
+ *
+ * You instantiate an Angular application by explicitly specifying a component to use as the root
+ * component for your
+ * application via the `bootstrap()` method.
+ *
+ * ## Simple Example
+ *
+ * Assuming this `index.html`:
+ *
+ * ```html
+ * <html>
+ *   <!-- load Angular script tags here. -->
+ *   <body>
+ *     <my-app>loading...</my-app>
+ *   </body>
+ * </html>
+ * ```
+ *
+ * An application is bootstrapped inside an existing browser DOM, typically `index.html`. Unlike
+ * Angular 1, Angular 2
+ * does not compile/process bindings in `index.html`. This is mainly for security reasons, as well
+ * as architectural
+ * changes in Angular 2. This means that `index.html` can safely be processed using server-side
+ * technologies such as
+ * bindings. Bindings can thus use double-curly `{{ syntax }}` without collision from Angular 2
+ * component double-curly
+ * `{{ syntax }}`.
+ *
+ * We can use this script code:
+ *
+ * ```
+ * @Component({
+ *    selector: 'my-app'
+ * })
+ * @View({
+ *    template: 'Hello {{ name }}!'
+ * })
+ * class MyApp {
+ *   name:string;
+ *
+ *   constructor() {
+ *     this.name = 'World';
+ *   }
+ * }
+ *
+ * main() {
+ *   return bootstrap(MyApp);
+ * }
+ * ```
+ *
+ * When the app developer invokes `bootstrap()` with the root component `MyApp` as its argument,
+ * Angular performs the
+ * following tasks:
+ *
+ *  1. It uses the component's `selector` property to locate the DOM element which needs to be
+ * upgraded into
+ *     the angular component.
+ *  2. It creates a new child injector (from the platform injector) and configures the injector with
+ * the component's
+ *     `appInjector`. Optionally, you can also override the injector configuration for an app by
+ * invoking
+ *     `bootstrap` with the `componentInjectableBindings` argument.
+ *  3. It creates a new `Zone` and connects it to the angular application's change detection domain
+ * instance.
+ *  4. It creates a shadow DOM on the selected component's host element and loads the template into
+ * it.
+ *  5. It instantiates the specified component.
+ *  6. Finally, Angular performs change detection to apply the initial data bindings for the
+ * application.
+ *
+ *
+ * ## Instantiating Multiple Applications on a Single Page
+ *
+ * There are two ways to do this.
+ *
+ *
+ * ### Isolated Applications
+ *
+ * Angular creates a new application each time that the `bootstrap()` method is invoked. When
+ * multiple applications
+ * are created for a page, Angular treats each application as independent within an isolated change
+ * detection and
+ * `Zone` domain. If you need to share data between applications, use the strategy described in the
+ * next
+ * section, "Applications That Share Change Detection."
+ *
+ *
+ * ### Applications That Share Change Detection
+ *
+ * If you need to bootstrap multiple applications that share common data, the applications must
+ * share a common
+ * change detection and zone. To do that, create a meta-component that lists the application
+ * components in its template.
+ * By only invoking the `bootstrap()` method once, with the meta-component as its argument, you
+ * ensure that only a
+ * single change detection zone is created and therefore data can be shared across the applications.
+ *
+ *
+ * ## Platform Injector
+ *
+ * When working within a browser window, there are many singleton resources: cookies, title,
+ * location, and others.
+ * Angular services that represent these resources must likewise be shared across all Angular
+ * applications that
+ * occupy the same browser window.  For this reason, Angular creates exactly one global platform
+ * injector which stores
+ * all shared services, and each angular application injector has the platform injector as its
+ * parent.
+ *
+ * Each application has its own private injector as well. When there are multiple applications on a
+ * page, Angular treats
+ * each application injector's services as private to that application.
+ *
+ *
+ * # API
+ * - `appComponentType`: The root component which should act as the application. This is a reference
+ * to a `Type`
+ *   which is annotated with `@Component(...)`.
+ * - `componentInjectableBindings`: An additional set of bindings that can be added to `appInjector`
+ * for the
+ * {@link 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 {@link Injector}.
+ *
+ * @exportedAs angular2/core
+ */
+export function bootstrap(appComponentType: Type,
+                          componentInjectableBindings: List<Type | Binding | List<any>> = null,
+                          errorReporter: Function = null): Promise<ApplicationRef> {
+  BrowserDomAdapter.makeCurrent();
+  var bootstrapProcess = PromiseWrapper.completer();
+
+  var zone = _createNgZone(errorReporter);
+  zone.run(() => {
+    // TODO(rado): prepopulate template cache, so applications with only
+    // index.html and main.js are possible.
+
+    var appInjector = _createAppInjector(appComponentType, componentInjectableBindings, zone);
+
+    PromiseWrapper.then(
+        appInjector.asyncGet(appComponentRefToken),
+        (componentRef) =>
+        {
+          var appChangeDetector = internalView(componentRef.hostView).changeDetector;
+          // retrieve life cycle: may have already been created if injected in root component
+          var lc = appInjector.get(LifeCycle);
+          lc.registerWith(zone, appChangeDetector);
+          lc.tick();  // the first tick that will bootstrap the app
+
+          bootstrapProcess.resolve(new ApplicationRef(componentRef, appComponentType, appInjector));
+        },
+
+        (err, stackTrace) => {bootstrapProcess.reject(err, stackTrace)});
+  });
+
+  return bootstrapProcess.promise;
+}
+
+export class ApplicationRef {
+  _hostComponent: ComponentRef;
+  _injector: Injector;
+  _hostComponentType: Type;
+  constructor(hostComponent: ComponentRef, hostComponentType: Type, injector: Injector) {
+    this._hostComponent = hostComponent;
+    this._injector = injector;
+    this._hostComponentType = hostComponentType;
+  }
+
+  get hostComponentType() { return this._hostComponentType; }
+
+  get hostComponent() { return this._hostComponent.instance; }
+
+  dispose() {
+    // TODO: We also need to clean up the Zone, ... here!
+    return this._hostComponent.dispose();
+  }
+
+  get injector() { return this._injector; }
+}
+
+function _createAppInjector(appComponentType: Type, bindings: List<Type | Binding | List<any>>,
+                            zone: NgZone): Injector {
+  if (isBlank(_rootInjector)) _rootInjector = Injector.resolveAndCreate(_rootBindings);
+  var mergedBindings = isPresent(bindings) ?
+                           ListWrapper.concat(_injectorBindings(appComponentType), bindings) :
+                           _injectorBindings(appComponentType);
+  ListWrapper.push(mergedBindings, bind(NgZone).toValue(zone));
+  return _rootInjector.resolveAndCreateChild(mergedBindings);
+}
diff --git a/modules/angular2/src/core/application_tokens.js b/modules/angular2/src/core/application_tokens.js
deleted file mode 100644
index be03fa38ff..0000000000
--- a/modules/angular2/src/core/application_tokens.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import {OpaqueToken} from 'angular2/di';
-
-export var appComponentRefToken:OpaqueToken = new OpaqueToken('ComponentRef');
-export var appComponentTypeToken:OpaqueToken = new OpaqueToken('RootComponent');
diff --git a/modules/angular2/src/core/application_tokens.ts b/modules/angular2/src/core/application_tokens.ts
new file mode 100644
index 0000000000..d86cebaa56
--- /dev/null
+++ b/modules/angular2/src/core/application_tokens.ts
@@ -0,0 +1,4 @@
+import {OpaqueToken} from 'angular2/di';
+
+export var appComponentRefToken: OpaqueToken = new OpaqueToken('ComponentRef');
+export var appComponentTypeToken: OpaqueToken = new OpaqueToken('RootComponent');
diff --git a/modules/angular2/src/core/compiler/base_query_list.es6 b/modules/angular2/src/core/compiler/base_query_list.ts
similarity index 81%
rename from modules/angular2/src/core/compiler/base_query_list.es6
rename to modules/angular2/src/core/compiler/base_query_list.ts
index c0c057224e..0277f0fab8 100644
--- a/modules/angular2/src/core/compiler/base_query_list.es6
+++ b/modules/angular2/src/core/compiler/base_query_list.ts
@@ -21,9 +21,7 @@ export class BaseQueryList {
     this._dirty = false;
   }
 
-  [Symbol.iterator]() {
-    return this._results[Symbol.iterator]();
-  }
+  [Symbol.iterator]() { return this._results[Symbol.iterator](); }
 
   reset(newList) {
     this._results = newList;
@@ -43,11 +41,7 @@ export class BaseQueryList {
     }
   }
 
-  onChange(callback) {
-    ListWrapper.push(this._callbacks, callback);
-  }
+  onChange(callback) { ListWrapper.push(this._callbacks, callback); }
 
-  removeCallback(callback) {
-    ListWrapper.remove(this._callbacks, callback);
-  }
+  removeCallback(callback) { ListWrapper.remove(this._callbacks, callback); }
 }
diff --git a/modules/angular2/src/core/compiler/compiler.js b/modules/angular2/src/core/compiler/compiler.js
deleted file mode 100644
index 617ba5585a..0000000000
--- a/modules/angular2/src/core/compiler/compiler.js
+++ /dev/null
@@ -1,258 +0,0 @@
-import {Binding, resolveForwardRef} from 'angular2/di';
-import {Injectable} from 'angular2/src/di/annotations_impl';
-import {Type, isBlank, isPresent, BaseException, normalizeBlank, stringify} from 'angular2/src/facade/lang';
-import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
-import {List, ListWrapper, Map, MapWrapper} from 'angular2/src/facade/collection';
-
-import {DirectiveResolver} from './directive_resolver';
-
-import {AppProtoView} from './view';
-import {ElementBinder} from './element_binder';
-import {ProtoViewRef} from './view_ref';
-import {DirectiveBinding} from './element_injector';
-import {TemplateResolver} from './template_resolver';
-import {View} from '../annotations_impl/view';
-import {ComponentUrlMapper} from './component_url_mapper';
-import {ProtoViewFactory} from './proto_view_factory';
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-
-import * as renderApi from 'angular2/src/render/api';
-
-/**
- * Cache that stores the AppProtoView of the template of a component.
- * Used to prevent duplicate work and resolve cyclic dependencies.
- */
-@Injectable()
-export class CompilerCache {
-  _cache:Map;
-  constructor() {
-    this._cache = MapWrapper.create();
-  }
-
-  set(component:Type, protoView:AppProtoView):void {
-    MapWrapper.set(this._cache, component, protoView);
-  }
-
-  get(component:Type):AppProtoView {
-    var result = MapWrapper.get(this._cache, component);
-    return normalizeBlank(result);
-  }
-
-  clear():void {
-    MapWrapper.clear(this._cache);
-  }
-}
-
-/**
- * @exportedAs angular2/view
- */
-@Injectable()
-export class Compiler {
-  _reader: DirectiveResolver;
-  _compilerCache:CompilerCache;
-  _compiling:Map<Type, Promise>;
-  _templateResolver: TemplateResolver;
-  _componentUrlMapper: ComponentUrlMapper;
-  _urlResolver: UrlResolver;
-  _appUrl: string;
-  _render: renderApi.RenderCompiler;
-  _protoViewFactory:ProtoViewFactory;
-
-  constructor(reader: DirectiveResolver,
-              cache:CompilerCache,
-              templateResolver: TemplateResolver,
-              componentUrlMapper: ComponentUrlMapper,
-              urlResolver: UrlResolver,
-              render: renderApi.RenderCompiler,
-              protoViewFactory: ProtoViewFactory) {
-    this._reader = reader;
-    this._compilerCache = cache;
-    this._compiling = MapWrapper.create();
-    this._templateResolver = templateResolver;
-    this._componentUrlMapper = componentUrlMapper;
-    this._urlResolver = urlResolver;
-    this._appUrl = urlResolver.resolve(null, './');
-    this._render = render;
-    this._protoViewFactory = protoViewFactory;
-  }
-
-  _bindDirective(directiveTypeOrBinding):DirectiveBinding {
-    if (directiveTypeOrBinding instanceof DirectiveBinding) {
-      return directiveTypeOrBinding;
-    } else if (directiveTypeOrBinding instanceof Binding) {
-      let annotation = this._reader.resolve(directiveTypeOrBinding.token);
-      return DirectiveBinding.createFromBinding(directiveTypeOrBinding, annotation);
-    } else {
-      let annotation = this._reader.resolve(directiveTypeOrBinding);
-      return DirectiveBinding.createFromType(directiveTypeOrBinding, annotation);
-    }
-  }
-
-  // Create a hostView as if the compiler encountered <hostcmp></hostcmp>.
-  // Used for bootstrapping.
-  compileInHost(componentTypeOrBinding:any):Promise<ProtoViewRef> {
-    var componentBinding = this._bindDirective(componentTypeOrBinding);
-    Compiler._assertTypeIsComponent(componentBinding);
-
-    var directiveMetadata = componentBinding.metadata;
-    return this._render.compileHost(directiveMetadata).then( (hostRenderPv) => {
-      return this._compileNestedProtoViews(componentBinding, hostRenderPv, [componentBinding]);
-    }).then( (appProtoView) => {
-      return new ProtoViewRef(appProtoView);
-    });
-  }
-
-  compile(component: Type):Promise<ProtoViewRef> {
-    var componentBinding = this._bindDirective(component);
-    Compiler._assertTypeIsComponent(componentBinding);
-    var protoView = this._compile(componentBinding);
-    var pvPromise = PromiseWrapper.isPromise(protoView) ? protoView : PromiseWrapper.resolve(protoView);
-    return pvPromise.then( (appProtoView) => {
-      return new ProtoViewRef(appProtoView);
-    });
-  }
-
-  // TODO(vicb): union type return AppProtoView or Promise<AppProtoView>
-  _compile(componentBinding: DirectiveBinding) {
-    var component = componentBinding.key.token;
-    var protoView = this._compilerCache.get(component);
-    if (isPresent(protoView)) {
-      // The component has already been compiled into an AppProtoView,
-      // returns a plain AppProtoView, not wrapped inside of a Promise.
-      // Needed for recursive components.
-      return protoView;
-    }
-
-    var pvPromise = MapWrapper.get(this._compiling, component);
-    if (isPresent(pvPromise)) {
-      // The component is already being compiled, attach to the existing Promise
-      // instead of re-compiling the component.
-      // It happens when a template references a component multiple times.
-      return pvPromise;
-    }
-    var template = this._templateResolver.resolve(component);
-    if (isBlank(template)) {
-      return null;
-    }
-
-    var directives = this._flattenDirectives(template);
-
-    for (var i = 0; i < directives.length; i++) {
-      if (!Compiler._isValidDirective(directives[i])) {
-        throw new BaseException(
-            `Unexpected directive value '${stringify(directives[i])}' on the View of component '${stringify(component)}'`);
-      }
-    }
-
-    var boundDirectives = ListWrapper.map(directives,  (directive) => this._bindDirective(directive));
-
-    var renderTemplate = this._buildRenderTemplate(component, template, boundDirectives);
-    pvPromise = this._render.compile(renderTemplate).then( (renderPv) => {
-      return this._compileNestedProtoViews(componentBinding, renderPv, boundDirectives);
-    });
-
-    MapWrapper.set(this._compiling, component, pvPromise);
-    return pvPromise;
-  }
-
-  // TODO(tbosch): union type return AppProtoView or Promise<AppProtoView>
-  _compileNestedProtoViews(componentBinding, renderPv, directives) {
-    var protoViews = this._protoViewFactory.createAppProtoViews(componentBinding, renderPv, directives);
-    var protoView = protoViews[0];
-    // TODO(tbosch): we should be caching host protoViews as well!
-    // -> need a separate cache for this...
-    if (renderPv.type === renderApi.ProtoViewDto.COMPONENT_VIEW_TYPE && isPresent(componentBinding)) {
-      // Populate the cache before compiling the nested components,
-      // so that components can reference themselves in their template.
-      var component = componentBinding.key.token;
-      this._compilerCache.set(component, protoView);
-      MapWrapper.delete(this._compiling, component);
-    }
-
-    var nestedPVPromises = [];
-    ListWrapper.forEach(this._collectComponentElementBinders(protoViews), (elementBinder) => {
-      var nestedComponent = elementBinder.componentDirective;
-      var elementBinderDone = (nestedPv) => {
-        elementBinder.nestedProtoView = nestedPv;
-      };
-      var nestedCall = this._compile(nestedComponent);
-      if (PromiseWrapper.isPromise(nestedCall)) {
-        ListWrapper.push(nestedPVPromises, nestedCall.then(elementBinderDone));
-      } else if (isPresent(nestedCall)) {
-        elementBinderDone(nestedCall);
-      }
-    });
-
-    var protoViewDone = (_) => {
-      return protoView;
-    };
-    if (nestedPVPromises.length > 0) {
-      return PromiseWrapper.all(nestedPVPromises).then(protoViewDone);
-    } else {
-      return protoViewDone(null);
-    }
-  }
-
-  _collectComponentElementBinders(protoViews:List<AppProtoView>):List<ElementBinder> {
-    var componentElementBinders = [];
-    ListWrapper.forEach(protoViews, (protoView) => {
-      ListWrapper.forEach(protoView.elementBinders, (elementBinder) => {
-        if (isPresent(elementBinder.componentDirective)) {
-          ListWrapper.push(componentElementBinders, elementBinder);
-        }
-      });
-    });
-    return componentElementBinders;
-  }
-
-  _buildRenderTemplate(component, view, directives): renderApi.ViewDefinition {
-    var componentUrl = this._urlResolver.resolve(
-        this._appUrl, this._componentUrlMapper.getUrl(component)
-    );
-    var templateAbsUrl = null;
-    if (isPresent(view.templateUrl)) {
-      templateAbsUrl = this._urlResolver.resolve(componentUrl, view.templateUrl);
-    } else if (isPresent(view.template)) {
-      // Note: If we have an inline template, we also need to send
-      // the url for the component to the render so that it
-      // is able to resolve urls in stylesheets.
-      templateAbsUrl = componentUrl;
-    }
-    return new renderApi.ViewDefinition({
-      componentId: stringify(component),
-      absUrl: templateAbsUrl,
-      template: view.template,
-      directives: ListWrapper.map(directives, directiveBinding => directiveBinding.metadata )
-    });
-  }
-
-  _flattenDirectives(template: View):List<Type> {
-    if (isBlank(template.directives)) return [];
-
-    var directives = [];
-    this._flattenList(template.directives, directives);
-
-    return directives;
-  }
-
-  _flattenList(tree:List<any>, out:List<any> /*<Type|Binding>*/):void {
-    for (var i = 0; i < tree.length; i++) {
-      var item = resolveForwardRef(tree[i]);
-      if (ListWrapper.isList(item)) {
-        this._flattenList(item, out);
-      } else {
-        ListWrapper.push(out, item);
-      }
-    }
-  }
-
-  static _isValidDirective(value: any): boolean {
-    return isPresent(value) && (value instanceof Type || value instanceof Binding);
-  }
-
-  static _assertTypeIsComponent(directiveBinding:DirectiveBinding):void {
-    if (directiveBinding.metadata.type !== renderApi.DirectiveMetadata.COMPONENT_TYPE) {
-      throw new BaseException(`Could not load '${stringify(directiveBinding.key.token)}' because it is not a component.`);
-    }
-  }
-}
diff --git a/modules/angular2/src/core/compiler/compiler.ts b/modules/angular2/src/core/compiler/compiler.ts
new file mode 100644
index 0000000000..e671d5d67d
--- /dev/null
+++ b/modules/angular2/src/core/compiler/compiler.ts
@@ -0,0 +1,258 @@
+import {Binding, resolveForwardRef, Injectable} from 'angular2/di';
+import {
+  Type,
+  isBlank,
+  isPresent,
+  BaseException,
+  normalizeBlank,
+  stringify
+} from 'angular2/src/facade/lang';
+import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
+import {List, ListWrapper, Map, MapWrapper} from 'angular2/src/facade/collection';
+
+import {DirectiveResolver} from './directive_resolver';
+
+import {AppProtoView} from './view';
+import {ElementBinder} from './element_binder';
+import {ProtoViewRef} from './view_ref';
+import {DirectiveBinding} from './element_injector';
+import {TemplateResolver} from './template_resolver';
+import {View} from '../annotations_impl/view';
+import {ComponentUrlMapper} from './component_url_mapper';
+import {ProtoViewFactory} from './proto_view_factory';
+import {UrlResolver} from 'angular2/src/services/url_resolver';
+
+import * as renderApi from 'angular2/src/render/api';
+
+/**
+ * Cache that stores the AppProtoView of the template of a component.
+ * Used to prevent duplicate work and resolve cyclic dependencies.
+ */
+@Injectable()
+export class CompilerCache {
+  _cache: Map<Type, AppProtoView>;
+  constructor() { this._cache = MapWrapper.create(); }
+
+  set(component: Type, protoView: AppProtoView): void {
+    MapWrapper.set(this._cache, component, protoView);
+  }
+
+  get(component: Type): AppProtoView {
+    var result = MapWrapper.get(this._cache, component);
+    return normalizeBlank(result);
+  }
+
+  clear(): void { MapWrapper.clear(this._cache); }
+}
+
+/**
+ * @exportedAs angular2/view
+ */
+@Injectable()
+export class Compiler {
+  private _reader: DirectiveResolver;
+  private _compilerCache: CompilerCache;
+  private _compiling: Map<Type, Promise<AppProtoView>>;
+  private _templateResolver: TemplateResolver;
+  private _componentUrlMapper: ComponentUrlMapper;
+  private _urlResolver: UrlResolver;
+  private _appUrl: string;
+  private _render: renderApi.RenderCompiler;
+  private _protoViewFactory: ProtoViewFactory;
+
+  constructor(reader: DirectiveResolver, cache: CompilerCache, templateResolver: TemplateResolver,
+              componentUrlMapper: ComponentUrlMapper, urlResolver: UrlResolver,
+              render: renderApi.RenderCompiler, protoViewFactory: ProtoViewFactory) {
+    this._reader = reader;
+    this._compilerCache = cache;
+    this._compiling = MapWrapper.create();
+    this._templateResolver = templateResolver;
+    this._componentUrlMapper = componentUrlMapper;
+    this._urlResolver = urlResolver;
+    this._appUrl = urlResolver.resolve(null, './');
+    this._render = render;
+    this._protoViewFactory = protoViewFactory;
+  }
+
+  private _bindDirective(directiveTypeOrBinding): DirectiveBinding {
+    if (directiveTypeOrBinding instanceof DirectiveBinding) {
+      return directiveTypeOrBinding;
+    } else if (directiveTypeOrBinding instanceof Binding) {
+      let annotation = this._reader.resolve(directiveTypeOrBinding.token);
+      return DirectiveBinding.createFromBinding(directiveTypeOrBinding, annotation);
+    } else {
+      let annotation = this._reader.resolve(directiveTypeOrBinding);
+      return DirectiveBinding.createFromType(directiveTypeOrBinding, annotation);
+    }
+  }
+
+  // Create a hostView as if the compiler encountered <hostcmp></hostcmp>.
+  // Used for bootstrapping.
+  compileInHost(componentTypeOrBinding: Type | Binding): Promise<ProtoViewRef> {
+    var componentBinding = this._bindDirective(componentTypeOrBinding);
+    Compiler._assertTypeIsComponent(componentBinding);
+
+    var directiveMetadata = componentBinding.metadata;
+    return this._render.compileHost(directiveMetadata)
+        .then((hostRenderPv) =>
+              {
+                return this._compileNestedProtoViews(componentBinding, hostRenderPv,
+                                                     [componentBinding]);
+              })
+        .then((appProtoView) => { return new ProtoViewRef(appProtoView); });
+  }
+
+  compile(component: Type): Promise<ProtoViewRef> {
+    var componentBinding = this._bindDirective(component);
+    Compiler._assertTypeIsComponent(componentBinding);
+    var pvOrPromise = this._compile(componentBinding);
+    var pvPromise = PromiseWrapper.isPromise(pvOrPromise) ? <Promise<AppProtoView>>pvOrPromise :
+                                                            PromiseWrapper.resolve(pvOrPromise);
+    return pvPromise.then((appProtoView) => { return new ProtoViewRef(appProtoView); });
+  }
+
+  private _compile(componentBinding: DirectiveBinding): Promise<AppProtoView>| AppProtoView {
+    var component = <Type>componentBinding.key.token;
+    var protoView = this._compilerCache.get(component);
+    if (isPresent(protoView)) {
+      // The component has already been compiled into an AppProtoView,
+      // returns a plain AppProtoView, not wrapped inside of a Promise.
+      // Needed for recursive components.
+      return protoView;
+    }
+
+    var pvPromise = MapWrapper.get(this._compiling, component);
+    if (isPresent(pvPromise)) {
+      // The component is already being compiled, attach to the existing Promise
+      // instead of re-compiling the component.
+      // It happens when a template references a component multiple times.
+      return pvPromise;
+    }
+    var template = this._templateResolver.resolve(component);
+    if (isBlank(template)) {
+      return null;
+    }
+
+    var directives = this._flattenDirectives(template);
+
+    for (var i = 0; i < directives.length; i++) {
+      if (!Compiler._isValidDirective(directives[i])) {
+        throw new BaseException(
+            `Unexpected directive value '${stringify(directives[i])}' on the View of component '${stringify(component)}'`);
+      }
+    }
+
+    var boundDirectives =
+        ListWrapper.map(directives, (directive) => this._bindDirective(directive));
+
+    var renderTemplate = this._buildRenderTemplate(component, template, boundDirectives);
+    pvPromise =
+        this._render.compile(renderTemplate)
+            .then((renderPv) => {
+              return this._compileNestedProtoViews(componentBinding, renderPv, boundDirectives);
+            });
+
+    MapWrapper.set(this._compiling, component, pvPromise);
+    return pvPromise;
+  }
+
+  private _compileNestedProtoViews(componentBinding, renderPv, directives): Promise<AppProtoView>|
+      AppProtoView {
+    var protoViews =
+        this._protoViewFactory.createAppProtoViews(componentBinding, renderPv, directives);
+    var protoView = protoViews[0];
+    // TODO(tbosch): we should be caching host protoViews as well!
+    // -> need a separate cache for this...
+    if (renderPv.type === renderApi.ProtoViewDto.COMPONENT_VIEW_TYPE &&
+        isPresent(componentBinding)) {
+      // Populate the cache before compiling the nested components,
+      // so that components can reference themselves in their template.
+      var component = componentBinding.key.token;
+      this._compilerCache.set(component, protoView);
+      MapWrapper.delete(this._compiling, component);
+    }
+
+    var nestedPVPromises = [];
+    ListWrapper.forEach(this._collectComponentElementBinders(protoViews), (elementBinder) => {
+      var nestedComponent = elementBinder.componentDirective;
+      var elementBinderDone = (nestedPv: AppProtoView) => {
+        elementBinder.nestedProtoView = nestedPv;
+      };
+      var nestedCall = this._compile(nestedComponent);
+      if (PromiseWrapper.isPromise(nestedCall)) {
+      ListWrapper.push(nestedPVPromises,
+                       (<Promise<AppProtoView>>nestedCall).then(elementBinderDone));
+      } else if (isPresent(nestedCall)) {
+      elementBinderDone(<AppProtoView>nestedCall);
+      }
+  });
+
+  if (nestedPVPromises.length > 0) {
+    return PromiseWrapper.all(nestedPVPromises).then((_) => protoView);
+  } else {
+    return protoView;
+  }
+}
+
+private _collectComponentElementBinders(protoViews: List<AppProtoView>): List<ElementBinder> {
+  var componentElementBinders = [];
+  ListWrapper.forEach(protoViews, (protoView) => {
+    ListWrapper.forEach(protoView.elementBinders, (elementBinder) => {
+      if (isPresent(elementBinder.componentDirective)) {
+        ListWrapper.push(componentElementBinders, elementBinder);
+      }
+    });
+  });
+  return componentElementBinders;
+}
+
+private _buildRenderTemplate(component, view, directives): renderApi.ViewDefinition {
+  var componentUrl =
+      this._urlResolver.resolve(this._appUrl, this._componentUrlMapper.getUrl(component));
+  var templateAbsUrl = null;
+  if (isPresent(view.templateUrl)) {
+    templateAbsUrl = this._urlResolver.resolve(componentUrl, view.templateUrl);
+  } else if (isPresent(view.template)) {
+    // Note: If we have an inline template, we also need to send
+    // the url for the component to the render so that it
+    // is able to resolve urls in stylesheets.
+    templateAbsUrl = componentUrl;
+  }
+  return new renderApi.ViewDefinition({
+    componentId: stringify(component),
+    absUrl: templateAbsUrl, template: view.template,
+    directives: ListWrapper.map(directives, directiveBinding => directiveBinding.metadata)
+  });
+}
+
+private _flattenDirectives(template: View): List<Type> {
+  if (isBlank(template.directives)) return [];
+
+  var directives = [];
+  this._flattenList(template.directives, directives);
+
+  return directives;
+}
+
+private _flattenList(tree: List<any>, out: List<Type | Binding | List<any>>): void {
+  for (var i = 0; i < tree.length; i++) {
+    var item = resolveForwardRef(tree[i]);
+    if (ListWrapper.isList(item)) {
+      this._flattenList(item, out);
+    } else {
+      ListWrapper.push(out, item);
+    }
+  }
+}
+
+private static _isValidDirective(value: Type | Binding): boolean {
+  return isPresent(value) && (value instanceof Type || value instanceof Binding);
+}
+
+private static _assertTypeIsComponent(directiveBinding: DirectiveBinding): void {
+  if (directiveBinding.metadata.type !== renderApi.DirectiveMetadata.COMPONENT_TYPE) {
+    throw new BaseException(
+        `Could not load '${stringify(directiveBinding.key.token)}' because it is not a component.`);
+  }
+}
+}
diff --git a/modules/angular2/src/core/compiler/component_url_mapper.js b/modules/angular2/src/core/compiler/component_url_mapper.ts
similarity index 84%
rename from modules/angular2/src/core/compiler/component_url_mapper.js
rename to modules/angular2/src/core/compiler/component_url_mapper.ts
index b0b282a3ea..8326a1b699 100644
--- a/modules/angular2/src/core/compiler/component_url_mapper.js
+++ b/modules/angular2/src/core/compiler/component_url_mapper.ts
@@ -1,4 +1,4 @@
-import {Injectable} from 'angular2/src/di/annotations_impl';
+import {Injectable} from 'angular2/di';
 import {Type, isPresent} from 'angular2/src/facade/lang';
 import {Map, MapWrapper} from 'angular2/src/facade/collection';
 
@@ -8,13 +8,11 @@ export class ComponentUrlMapper {
   // The returned URL could be:
   // - an absolute URL,
   // - a path relative to the application
-  getUrl(component: Type): string {
-    return './';
-  }
+  getUrl(component: Type): string { return './'; }
 }
 
 export class RuntimeComponentUrlMapper extends ComponentUrlMapper {
-  _componentUrls: Map;
+  _componentUrls: Map<Type, string>;
 
   constructor() {
     super();
diff --git a/modules/angular2/src/core/compiler/directive_resolver.js b/modules/angular2/src/core/compiler/directive_resolver.ts
similarity index 75%
rename from modules/angular2/src/core/compiler/directive_resolver.js
rename to modules/angular2/src/core/compiler/directive_resolver.ts
index 4795e7745d..0879db0738 100644
--- a/modules/angular2/src/core/compiler/directive_resolver.js
+++ b/modules/angular2/src/core/compiler/directive_resolver.ts
@@ -1,15 +1,14 @@
-import {Injectable} from 'angular2/src/di/annotations_impl';
-import {resolveForwardRef} from 'angular2/di';
+import {resolveForwardRef, Injectable} from 'angular2/di';
 import {Type, isPresent, BaseException, stringify} from 'angular2/src/facade/lang';
 import {Directive} from '../annotations_impl/annotations';
 import {reflector} from 'angular2/src/reflection/reflection';
 
 @Injectable()
 export class DirectiveResolver {
-  resolve(type:Type):Directive {
+  resolve(type: Type): Directive {
     var annotations = reflector.annotations(resolveForwardRef(type));
     if (isPresent(annotations)) {
-      for (var i=0; i<annotations.length; i++) {
+      for (var i = 0; i < annotations.length; i++) {
         var annotation = annotations[i];
 
         if (annotation instanceof Directive) {
@@ -19,5 +18,4 @@ export class DirectiveResolver {
     }
     throw new BaseException(`No Directive annotation found on ${stringify(type)}`);
   }
-
 }
diff --git a/modules/angular2/src/core/compiler/dynamic_component_loader.js b/modules/angular2/src/core/compiler/dynamic_component_loader.js
deleted file mode 100644
index 56c32360bd..0000000000
--- a/modules/angular2/src/core/compiler/dynamic_component_loader.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import {Key, Injector, ResolvedBinding, Binding, bind} from 'angular2/di'
-import {Injectable} from 'angular2/src/di/annotations_impl';
-import {Compiler} from './compiler';
-import {Type, BaseException, stringify, isPresent} from 'angular2/src/facade/lang';
-import {Promise} from 'angular2/src/facade/async';
-import {AppViewManager, ComponentCreateResult} from 'angular2/src/core/compiler/view_manager';
-import {ElementRef} from './element_ref';
-
-/**
- * @exportedAs angular2/view
- */
-export class ComponentRef {
-  location:ElementRef;
-  instance:any;
-  _dispose:Function;
-
-  constructor(location:ElementRef, instance:any, dispose:Function) {
-    this.location = location;
-    this.instance = instance;
-    this._dispose = dispose;
-  }
-
-  get hostView() {
-    return this.location.parentView;
-  }
-
-  dispose() {
-    this._dispose();
-  }
-}
-
-/**
- * Service for dynamically loading a Component into an arbitrary position in the internal Angular
- * application tree.
- *
- * @exportedAs angular2/view
- */
-@Injectable()
-export class DynamicComponentLoader {
-  _compiler:Compiler;
-  _viewManager:AppViewManager;
-
-  constructor(compiler:Compiler,
-              viewManager: AppViewManager) {
-    this._compiler = compiler;
-    this._viewManager = viewManager;
-  }
-
-  /**
-   * Loads a component into the location given by the provided ElementRef. The loaded component
-   * receives injection as if it in the place of the provided ElementRef.
-   */
-  loadIntoExistingLocation(typeOrBinding, location:ElementRef, injector:Injector = null):Promise<ComponentRef> {
-    var binding = this._getBinding(typeOrBinding);
-    return this._compiler.compile(binding.token).then(componentProtoViewRef => {
-      this._viewManager.createDynamicComponentView(
-        location, componentProtoViewRef, binding, injector);
-      var component = this._viewManager.getComponent(location);
-      var dispose = () => {throw new BaseException("Not implemented");};
-      return new ComponentRef(location, component, dispose);
-    });
-  }
-
-  /**
-   * Loads a root component that is placed at the first element that matches the
-   * component's selector.
-   * The loaded component receives injection normally as a hosted view.
-   */
-  loadAsRoot(typeOrBinding, overrideSelector = null, injector:Injector = null):Promise<ComponentRef> {
-    return  this._compiler.compileInHost(this._getBinding(typeOrBinding)).then(hostProtoViewRef => {
-      var hostViewRef = this._viewManager.createRootHostView(hostProtoViewRef, overrideSelector, injector);
-      var newLocation = new ElementRef(hostViewRef, 0);
-      var component = this._viewManager.getComponent(newLocation);
-
-      var dispose = () => {
-        this._viewManager.destroyRootHostView(hostViewRef);
-      };
-      return new ComponentRef(newLocation, component, dispose);
-    });
-  }
-
-  /**
-   * Loads a component into a free host view that is not yet attached to
-   * a parent on the render side, although it is attached to a parent in the injector hierarchy.
-   * The loaded component receives injection normally as a hosted view.
-   */
-  loadIntoNewLocation(typeOrBinding, parentComponentLocation:ElementRef,
-                      injector:Injector = null):Promise<ComponentRef> {
-    return  this._compiler.compileInHost(this._getBinding(typeOrBinding)).then(hostProtoViewRef => {
-      var hostViewRef = this._viewManager.createFreeHostView(
-        parentComponentLocation, hostProtoViewRef, injector);
-      var newLocation = new ElementRef(hostViewRef, 0);
-      var component = this._viewManager.getComponent(newLocation);
-
-      var dispose = () => {
-        this._viewManager.destroyFreeHostView(parentComponentLocation, hostViewRef);
-      };
-      return new ComponentRef(newLocation, component, dispose);
-    });
-  }
-
-  /**
-   * Loads a component next to the provided ElementRef. The loaded component receives
-   * injection normally as a hosted view.
-   */
-  loadNextToExistingLocation(typeOrBinding, location:ElementRef, injector:Injector = null):Promise<ComponentRef> {
-    var binding = this._getBinding(typeOrBinding);
-    return this._compiler.compileInHost(binding).then(hostProtoViewRef => {
-      var viewContainer = this._viewManager.getViewContainer(location);
-      var hostViewRef = viewContainer.create(hostProtoViewRef, viewContainer.length, null, injector);
-      var newLocation = new ElementRef(hostViewRef, 0);
-      var component = this._viewManager.getComponent(newLocation);
-
-      var dispose = () => {
-        var index = viewContainer.indexOf(hostViewRef);
-        viewContainer.remove(index);
-      };
-      return new ComponentRef(newLocation, component, dispose);
-    });
-  }
-
-  _getBinding(typeOrBinding) {
-    var binding;
-    if (typeOrBinding instanceof Binding) {
-      binding = typeOrBinding;
-    } else {
-      binding = bind(typeOrBinding).toClass(typeOrBinding);
-    }
-    return binding;
-  }
-
-}
diff --git a/modules/angular2/src/core/compiler/dynamic_component_loader.ts b/modules/angular2/src/core/compiler/dynamic_component_loader.ts
new file mode 100644
index 0000000000..d87e334c28
--- /dev/null
+++ b/modules/angular2/src/core/compiler/dynamic_component_loader.ts
@@ -0,0 +1,118 @@
+import {Key, Injector, ResolvedBinding, Binding, bind, Injectable} from 'angular2/di';
+import {Compiler} from './compiler';
+import {Type, BaseException, stringify, isPresent} from 'angular2/src/facade/lang';
+import {Promise} from 'angular2/src/facade/async';
+import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
+import {ElementRef} from './element_ref';
+import {ViewRef} from './view_ref';
+
+/**
+ * @exportedAs angular2/view
+ */
+export class ComponentRef {
+  constructor(public location: ElementRef, public instance: any, public dispose: Function) {}
+
+  get hostView(): ViewRef { return this.location.parentView; }
+}
+
+/**
+ * Service for dynamically loading a Component into an arbitrary position in the internal Angular
+ * application tree.
+ *
+ * @exportedAs angular2/view
+ */
+@Injectable()
+export class DynamicComponentLoader {
+  private _compiler: Compiler;
+  private _viewManager: AppViewManager;
+
+  constructor(compiler: Compiler, viewManager: AppViewManager) {
+    this._compiler = compiler;
+    this._viewManager = viewManager;
+  }
+
+  /**
+   * Loads a component into the location given by the provided ElementRef. The loaded component
+   * receives injection as if it in the place of the provided ElementRef.
+   */
+  loadIntoExistingLocation(typeOrBinding, location: ElementRef,
+                           injector: Injector = null): Promise<ComponentRef> {
+    var binding = this._getBinding(typeOrBinding);
+    return this._compiler.compile(binding.token).then(componentProtoViewRef => {
+      this._viewManager.createDynamicComponentView(location, componentProtoViewRef, binding,
+                                                   injector);
+      var component = this._viewManager.getComponent(location);
+      var dispose = () => { throw new BaseException("Not implemented");};
+      return new ComponentRef(location, component, dispose);
+  });
+}
+
+/**
+ * Loads a root component that is placed at the first element that matches the
+ * component's selector.
+ * The loaded component receives injection normally as a hosted view.
+ */
+loadAsRoot(typeOrBinding, overrideSelector = null,
+           injector: Injector = null): Promise<ComponentRef> {
+    return  this._compiler.compileInHost(this._getBinding(typeOrBinding)).then(hostProtoViewRef => {
+    var hostViewRef =
+        this._viewManager.createRootHostView(hostProtoViewRef, overrideSelector, injector);
+    var newLocation = new ElementRef(hostViewRef, 0);
+    var component = this._viewManager.getComponent(newLocation);
+
+    var dispose = () => { this._viewManager.destroyRootHostView(hostViewRef);
+      };
+      return new ComponentRef(newLocation, component, dispose);
+});
+}
+
+/**
+ * Loads a component into a free host view that is not yet attached to
+ * a parent on the render side, although it is attached to a parent in the injector hierarchy.
+ * The loaded component receives injection normally as a hosted view.
+ */
+loadIntoNewLocation(typeOrBinding, parentComponentLocation: ElementRef,
+                    injector: Injector = null): Promise<ComponentRef> {
+    return  this._compiler.compileInHost(this._getBinding(typeOrBinding)).then(hostProtoViewRef => {
+    var hostViewRef =
+        this._viewManager.createFreeHostView(parentComponentLocation, hostProtoViewRef, injector);
+    var newLocation = new ElementRef(hostViewRef, 0);
+    var component = this._viewManager.getComponent(newLocation);
+
+    var dispose = () => {
+      this._viewManager.destroyFreeHostView(parentComponentLocation, hostViewRef);
+      };
+      return new ComponentRef(newLocation, component, dispose);
+});
+}
+
+/**
+ * Loads a component next to the provided ElementRef. The loaded component receives
+ * injection normally as a hosted view.
+ */
+loadNextToExistingLocation(typeOrBinding, location: ElementRef,
+                           injector: Injector = null): Promise<ComponentRef> {
+  var binding = this._getBinding(typeOrBinding);
+    return this._compiler.compileInHost(binding).then(hostProtoViewRef => {
+    var viewContainer = this._viewManager.getViewContainer(location);
+    var hostViewRef = viewContainer.create(hostProtoViewRef, viewContainer.length, null, injector);
+    var newLocation = new ElementRef(hostViewRef, 0);
+    var component = this._viewManager.getComponent(newLocation);
+
+    var dispose = () => { var index = viewContainer.indexOf(hostViewRef);
+    viewContainer.remove(index);
+      };
+      return new ComponentRef(newLocation, component, dispose);
+});
+}
+
+private _getBinding(typeOrBinding): Binding {
+  var binding;
+  if (typeOrBinding instanceof Binding) {
+    binding = typeOrBinding;
+  } else {
+    binding = bind(typeOrBinding).toClass(typeOrBinding);
+  }
+  return binding;
+}
+}
diff --git a/modules/angular2/src/core/compiler/element_binder.js b/modules/angular2/src/core/compiler/element_binder.ts
similarity index 63%
rename from modules/angular2/src/core/compiler/element_binder.js
rename to modules/angular2/src/core/compiler/element_binder.ts
index b9839f4b6f..6d73f557db 100644
--- a/modules/angular2/src/core/compiler/element_binder.js
+++ b/modules/angular2/src/core/compiler/element_binder.ts
@@ -1,3 +1,4 @@
+import {AST} from 'angular2/change_detection';
 import {int, isBlank, isPresent, BaseException} from 'angular2/src/facade/lang';
 import * as eiModule from './element_injector';
 import {DirectiveBinding} from './element_injector';
@@ -5,25 +6,14 @@ import {List, StringMap} from 'angular2/src/facade/collection';
 import * as viewModule from './view';
 
 export class ElementBinder {
-  protoElementInjector:eiModule.ProtoElementInjector;
-  componentDirective:DirectiveBinding;
   nestedProtoView: viewModule.AppProtoView;
-  hostListeners:StringMap;
-  parent:ElementBinder;
-  index:int;
-  distanceToParent:int;
-  constructor(
-    index:int, parent:ElementBinder, distanceToParent: int,
-    protoElementInjector: eiModule.ProtoElementInjector, componentDirective:DirectiveBinding) {
+  hostListeners: StringMap<string, Map<number, AST>>;
+  constructor(public index: int, public parent: ElementBinder, public distanceToParent: int,
+              public protoElementInjector: eiModule.ProtoElementInjector,
+              public componentDirective: DirectiveBinding) {
     if (isBlank(index)) {
       throw new BaseException('null index not allowed.');
     }
-
-    this.protoElementInjector = protoElementInjector;
-    this.componentDirective = componentDirective;
-    this.parent = parent;
-    this.index = index;
-    this.distanceToParent = distanceToParent;
     // updated later when events are bound
     this.hostListeners = null;
     // updated later, so we are able to resolve cycles
diff --git a/modules/angular2/src/core/compiler/element_injector.js b/modules/angular2/src/core/compiler/element_injector.ts
similarity index 54%
rename from modules/angular2/src/core/compiler/element_injector.js
rename to modules/angular2/src/core/compiler/element_injector.ts
index 507d92b4d8..0e04f8a16a 100644
--- a/modules/angular2/src/core/compiler/element_injector.js
+++ b/modules/angular2/src/core/compiler/element_injector.ts
@@ -1,8 +1,19 @@
 import {isPresent, isBlank, Type, int, BaseException, stringify} from 'angular2/src/facade/lang';
 import {EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
 import {List, ListWrapper, MapWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
-import {Injector, Key, Dependency, bind, Binding, ResolvedBinding, NoBindingError,
-  AbstractBindingError, CyclicDependencyError, resolveForwardRef, resolveBindings} from 'angular2/di';
+import {
+  Injector,
+  Key,
+  Dependency,
+  bind,
+  Binding,
+  ResolvedBinding,
+  NoBindingError,
+  AbstractBindingError,
+  CyclicDependencyError,
+  resolveForwardRef,
+  resolveBindings
+} from 'angular2/di';
 import {Visibility, self} from 'angular2/src/core/annotations_impl/visibility';
 import {Attribute, Query} from 'angular2/src/core/annotations_impl/di';
 import * as viewModule from './view';
@@ -10,7 +21,13 @@ import * as avmModule from './view_manager';
 import {ViewContainerRef} from './view_container_ref';
 import {ElementRef} from './element_ref';
 import {ProtoViewRef, ViewRef} from './view_ref';
-import {Directive, Component, onChange, onDestroy, onAllChangesDone} from 'angular2/src/core/annotations_impl/annotations';
+import {
+  Directive,
+  Component,
+  onChange,
+  onDestroy,
+  onAllChangesDone
+} from 'angular2/src/core/annotations_impl/annotations';
 import {ChangeDetector, ChangeDetectorRef} from 'angular2/change_detection';
 import {QueryList} from './query_list';
 import {reflector} from 'angular2/src/reflection/reflection';
@@ -24,14 +41,14 @@ var _undefined = new Object();
 var _staticKeys;
 
 class StaticKeys {
-  viewManagerId:number;
-  protoViewId:number;
-  viewContainerId:number;
-  changeDetectorRefId:number;
-  elementRefId:number;
+  viewManagerId: number;
+  protoViewId: number;
+  viewContainerId: number;
+  changeDetectorRefId: number;
+  elementRefId: number;
 
   constructor() {
-    //TODO: vsavkin Key.annotate(Key.get(AppView), 'static')
+    // TODO: vsavkin Key.annotate(Key.get(AppView), 'static')
     this.viewManagerId = Key.get(avmModule.AppViewManager).id;
     this.protoViewId = Key.get(ProtoViewRef).id;
     this.viewContainerId = Key.get(ViewContainerRef).id;
@@ -39,35 +56,36 @@ class StaticKeys {
     this.elementRefId = Key.get(ElementRef).id;
   }
 
-  static instance():StaticKeys {
+  static instance(): StaticKeys {
     if (isBlank(_staticKeys)) _staticKeys = new StaticKeys();
     return _staticKeys;
   }
 }
 
-export class TreeNode {
-  _parent:TreeNode;
-  _head:TreeNode;
-  _tail:TreeNode;
-  _next:TreeNode;
-  constructor(parent:TreeNode) {
+export class TreeNode<T extends TreeNode<any>> {
+  _parent: T;
+  _head: T;
+  _tail: T;
+  _next: T;
+  constructor(parent: T) {
     this._head = null;
     this._tail = null;
     this._next = null;
     if (isPresent(parent)) parent.addChild(this);
   }
 
-  _assertConsistency():void {
+  _assertConsistency(): void {
     this._assertHeadBeforeTail();
     this._assertTailReachable();
     this._assertPresentInParentList();
   }
 
-  _assertHeadBeforeTail():void {
-    if (isBlank(this._tail) && isPresent(this._head)) throw new BaseException('null tail but non-null head');
+  _assertHeadBeforeTail(): void {
+    if (isBlank(this._tail) && isPresent(this._head))
+      throw new BaseException('null tail but non-null head');
   }
 
-  _assertTailReachable():void {
+  _assertTailReachable(): void {
     if (isBlank(this._tail)) return;
     if (isPresent(this._tail._next)) throw new BaseException('node after tail');
     var p = this._head;
@@ -75,7 +93,7 @@ export class TreeNode {
     if (isBlank(p) && isPresent(this._tail)) throw new BaseException('tail not reachable.')
   }
 
-  _assertPresentInParentList():void {
+  _assertPresentInParentList(): void {
     var p = this._parent;
     if (isBlank(p)) {
       return;
@@ -88,7 +106,7 @@ export class TreeNode {
   /**
    * Adds a child to the parent node. The child MUST NOT be a part of a tree.
    */
-  addChild(child:TreeNode):void {
+  addChild(child: T): void {
     if (isPresent(this._tail)) {
       this._tail._next = child;
       this._tail = child;
@@ -104,7 +122,7 @@ export class TreeNode {
    * Adds a child to the parent node after a given sibling.
    * The child MUST NOT be a part of a tree and the sibling must be present.
    */
-  addChildAfter(child:TreeNode, prevSibling:TreeNode):void {
+  addChildAfter(child: T, prevSibling: T): void {
     this._assertConsistency();
     if (isBlank(prevSibling)) {
       var prevHead = this._head;
@@ -112,9 +130,9 @@ export class TreeNode {
       child._next = prevHead;
       if (isBlank(this._tail)) this._tail = child;
     } else if (isBlank(prevSibling._next)) {
-       this.addChild(child);
-       return;
-     } else {
+      this.addChild(child);
+      return;
+    } else {
       prevSibling._assertPresentInParentList();
       child._next = prevSibling._next;
       prevSibling._next = child;
@@ -126,7 +144,7 @@ export class TreeNode {
   /**
    * Detaches a node from the parent's tree.
    */
-  remove():void {
+  remove(): void {
     this._assertConsistency();
     if (isBlank(this.parent)) return;
     var nextSibling = this._next;
@@ -157,9 +175,7 @@ export class TreeNode {
     return node;
   }
 
-  get parent() {
-    return this._parent;
-  }
+  get parent() { return this._parent; }
 
   // TODO(rado): replace with a function call, does too much work for a getter.
   get children() {
@@ -174,42 +190,35 @@ export class TreeNode {
 }
 
 export class DirectiveDependency extends Dependency {
-  visibility:Visibility;
-  attributeName:string;
-  queryDirective;
-
-  constructor(key:Key, asPromise:boolean, lazy:boolean, optional:boolean, properties:List,
-              visibility:Visibility, attributeName:string, queryDirective) {
+  constructor(key: Key, asPromise: boolean, lazy: boolean, optional: boolean, properties: List<any>,
+              public visibility: Visibility, public attributeName: string, public queryDirective) {
     super(key, asPromise, lazy, optional, properties);
-    this.visibility = visibility;;
-    this.attributeName = attributeName;
-    this.queryDirective = queryDirective;
     this._verify();
   }
 
-  _verify():void {
+  _verify(): void {
     var count = 0;
     if (isPresent(this.queryDirective)) count++;
     if (isPresent(this.attributeName)) count++;
-    if (count > 1) throw new BaseException(
-      'A directive injectable can contain only one of the following @Attribute or @Query.');
+    if (count > 1)
+      throw new BaseException(
+          'A directive injectable can contain only one of the following @Attribute or @Query.');
   }
 
-  static createFrom(d:Dependency):Dependency {
+  static createFrom(d: Dependency): Dependency {
     return new DirectiveDependency(d.key, d.asPromise, d.lazy, d.optional, d.properties,
-        DirectiveDependency._visibility(d.properties),
-      DirectiveDependency._attributeName(d.properties),
-      DirectiveDependency._query(d.properties)
-    );
+                                   DirectiveDependency._visibility(d.properties),
+                                   DirectiveDependency._attributeName(d.properties),
+                                   DirectiveDependency._query(d.properties));
   }
 
-  static _visibility(properties):Visibility {
+  static _visibility(properties): Visibility {
     if (properties.length == 0) return self;
     var p = ListWrapper.find(properties, p => p instanceof Visibility);
     return isPresent(p) ? p : self;
   }
 
-  static _attributeName(properties):string {
+  static _attributeName(properties): string {
     var p = ListWrapper.find(properties, (p) => p instanceof Attribute);
     return isPresent(p) ? p.attributeName : null;
   }
@@ -221,79 +230,76 @@ export class DirectiveDependency extends Dependency {
 }
 
 export class DirectiveBinding extends ResolvedBinding {
-  resolvedAppInjectables:List<ResolvedBinding>;
-  resolvedHostInjectables:List<ResolvedBinding>;
-  resolvedViewInjectables:List<ResolvedBinding>;
-  metadata: DirectiveMetadata;
-
-  constructor(key:Key, factory:Function, dependencies:List, providedAsPromise:boolean,
-              resolvedAppInjectables:List<ResolvedBinding>, resolvedHostInjectables:List<ResolvedBinding>,
-              resolvedViewInjectables:List<ResolvedBinding>, metadata:DirectiveMetadata) {
+  constructor(key: Key, factory: Function, dependencies: List<Dependency>,
+              providedAsPromise: boolean, public resolvedAppInjectables: List<ResolvedBinding>,
+              public resolvedHostInjectables: List<ResolvedBinding>,
+              public resolvedViewInjectables: List<ResolvedBinding>,
+              public metadata: DirectiveMetadata) {
     super(key, factory, dependencies, providedAsPromise);
-    this.resolvedAppInjectables = resolvedAppInjectables;
-    this.resolvedHostInjectables = resolvedHostInjectables;
-    this.resolvedViewInjectables = resolvedViewInjectables;
-    this.metadata = metadata;
   }
 
-  get callOnDestroy() {
-    return this.metadata.callOnDestroy;
-  }
+  get callOnDestroy() { return this.metadata.callOnDestroy; }
 
-  get callOnChange() {
-    return this.metadata.callOnChange;
-  }
+  get callOnChange() { return this.metadata.callOnChange; }
 
-  get callOnAllChangesDone() {
-    return this.metadata.callOnAllChangesDone;
-  }
+  get callOnAllChangesDone() { return this.metadata.callOnAllChangesDone; }
 
-  get displayName() {
-    return this.key.displayName;
-  }
+  get displayName() { return this.key.displayName; }
 
-  get eventEmitters():List<string> {
+  get eventEmitters(): List<string> {
     return isPresent(this.metadata) && isPresent(this.metadata.events) ? this.metadata.events : [];
   }
 
-  get hostActions():Map<string,string> {
-    return isPresent(this.metadata) && isPresent(this.metadata.hostActions) ? this.metadata.hostActions : MapWrapper.create();
+  get hostActions(): Map<string, string> {
+    return isPresent(this.metadata) && isPresent(this.metadata.hostActions) ?
+               this.metadata.hostActions :
+               MapWrapper.create();
   }
 
-  get changeDetection() {
-    return this.metadata.changeDetection;
-  }
+  get changeDetection() { return this.metadata.changeDetection; }
 
-  static createFromBinding(binding:Binding, ann:Directive):DirectiveBinding {
+  static createFromBinding(binding: Binding, ann: Directive): DirectiveBinding {
     if (isBlank(ann)) {
       ann = new Directive();
     }
 
     var rb = binding.resolve();
     var deps = ListWrapper.map(rb.dependencies, DirectiveDependency.createFrom);
-    var resolvedAppInjectables = ann instanceof Component && isPresent(ann.appInjector) ? Injector.resolve(ann.appInjector) : [];
-    var resolvedHostInjectables = isPresent(ann.hostInjector) ? resolveBindings(ann.hostInjector) : [];
-    var resolvedViewInjectables = ann instanceof Component && isPresent(ann.viewInjector) ? resolveBindings(ann.viewInjector) : [];
+    var resolvedAppInjectables = ann instanceof Component && isPresent(ann.appInjector) ?
+                                                    Injector.resolve(ann.appInjector) :
+                                                    [];
+    var resolvedHostInjectables =
+        isPresent(ann.hostInjector) ? resolveBindings(ann.hostInjector) : [];
+    var resolvedViewInjectables = ann instanceof Component && isPresent(ann.viewInjector) ?
+                                                     resolveBindings(ann.viewInjector) :
+                                                     [];
 
     var metadata = new DirectiveMetadata({
       id: stringify(rb.key.token),
-      type: ann instanceof Component ? DirectiveMetadata.COMPONENT_TYPE : DirectiveMetadata.DIRECTIVE_TYPE,
+      type: ann instanceof
+          Component ? DirectiveMetadata.COMPONENT_TYPE : DirectiveMetadata.DIRECTIVE_TYPE,
       selector: ann.selector,
       compileChildren: ann.compileChildren,
       events: ann.events,
-      hostListeners: isPresent(ann.hostListeners) ? MapWrapper.createFromStringMap(ann.hostListeners) : null,
-      hostProperties: isPresent(ann.hostProperties) ? MapWrapper.createFromStringMap(ann.hostProperties) : null,
-      hostAttributes: isPresent(ann.hostAttributes) ? MapWrapper.createFromStringMap(ann.hostAttributes) : null,
-      hostActions: isPresent(ann.hostActions) ? MapWrapper.createFromStringMap(ann.hostActions) : null,
+      hostListeners:
+          isPresent(ann.hostListeners) ? MapWrapper.createFromStringMap(ann.hostListeners) : null,
+      hostProperties:
+          isPresent(ann.hostProperties) ? MapWrapper.createFromStringMap(ann.hostProperties) : null,
+      hostAttributes:
+          isPresent(ann.hostAttributes) ? MapWrapper.createFromStringMap(ann.hostAttributes) : null,
+      hostActions: isPresent(ann.hostActions) ? MapWrapper.createFromStringMap(ann.hostActions) :
+                                                null,
       properties: isPresent(ann.properties) ? MapWrapper.createFromStringMap(ann.properties) : null,
       readAttributes: DirectiveBinding._readAttributes(deps),
       callOnDestroy: ann.hasLifecycleHook(onDestroy),
       callOnChange: ann.hasLifecycleHook(onChange),
       callOnAllChangesDone: ann.hasLifecycleHook(onAllChangesDone),
-      changeDetection: ann instanceof Component ? ann.changeDetection : null
+      changeDetection: ann instanceof
+          Component ? ann.changeDetection : null
     });
-    return new DirectiveBinding(rb.key, rb.factory, deps, rb.providedAsPromise, resolvedAppInjectables,
-        resolvedHostInjectables, resolvedViewInjectables, metadata);
+    return new DirectiveBinding(rb.key, rb.factory, deps, rb.providedAsPromise,
+                                resolvedAppInjectables, resolvedHostInjectables,
+                                resolvedViewInjectables, metadata);
   }
 
   static _readAttributes(deps) {
@@ -306,53 +312,36 @@ export class DirectiveBinding extends ResolvedBinding {
     return readAttributes;
   }
 
-  static  createFromType(type:Type, annotation:Directive):DirectiveBinding {
+  static createFromType(type: Type, annotation: Directive): DirectiveBinding {
     var binding = new Binding(type, {toClass: type});
     return DirectiveBinding.createFromBinding(binding, annotation);
   }
-
 }
 
 // TODO(rado): benchmark and consider rolling in as ElementInjector fields.
 export class PreBuiltObjects {
-  viewManager:avmModule.AppViewManager;
-  protoView:viewModule.AppProtoView;
-  view:viewModule.AppView;
-  constructor(viewManager:avmModule.AppViewManager, view:viewModule.AppView, protoView:viewModule.AppProtoView) {
-    this.viewManager = viewManager;
-    this.view = view;
-    this.protoView = protoView;
-  }
+  constructor(public viewManager: avmModule.AppViewManager, public view: viewModule.AppView,
+              public protoView: viewModule.AppProtoView) {}
 }
 
-class EventEmitterAccessor {
-  eventName:string;
-  getter:Function;
+export class EventEmitterAccessor {
+  constructor(public eventName: string, public getter: Function) {}
 
-  constructor(eventName:string, getter:Function) {
-    this.eventName = eventName;
-    this.getter = getter;
-  }
-
-  subscribe(view:viewModule.AppView, boundElementIndex:number, directive:Object) {
+  subscribe(view: viewModule.AppView, boundElementIndex: number, directive: Object) {
     var eventEmitter = this.getter(directive);
-    return ObservableWrapper.subscribe(eventEmitter,
+    return ObservableWrapper.subscribe(
+        eventEmitter,
         eventObj => view.triggerEventHandlers(this.eventName, eventObj, boundElementIndex));
   }
 }
 
-class HostActionAccessor {
-  actionExpression:string;
-  getter:Function;
+export class HostActionAccessor {
+  constructor(public actionExpression: string, public getter: Function) {}
 
-  constructor(actionExpression:string, getter:Function) {
-    this.actionExpression = actionExpression;
-    this.getter = getter;
-  }
-
-  subscribe(view:viewModule.AppView, boundElementIndex:number, directive:Object) {
+  subscribe(view: viewModule.AppView, boundElementIndex: number, directive: Object) {
     var eventEmitter = this.getter(directive);
-    return ObservableWrapper.subscribe(eventEmitter,
+    return ObservableWrapper.subscribe(
+        eventEmitter,
         actionObj => view.callAction(boundElementIndex, this.actionExpression, actionObj));
   }
 }
@@ -361,34 +350,26 @@ const LIGHT_DOM = 1;
 const SHADOW_DOM = 2;
 const LIGHT_DOM_AND_SHADOW_DOM = 3;
 
-class BindingData {
-  binding:ResolvedBinding;
-  visibility:number;
+export class BindingData {
+  constructor(public binding: ResolvedBinding, public visibility: number) {}
 
-  constructor(binding:ResolvedBinding, visibility:number) {
-    this.binding = binding;
-    this.visibility = visibility;
-  }
-
-  getKeyId() {
-    return this.binding.key.id;
-  }
+  getKeyId() { return this.binding.key.id; }
 
   createEventEmitterAccessors() {
     if (!(this.binding instanceof DirectiveBinding)) return [];
-    var db:DirectiveBinding = this.binding;
-    return ListWrapper.map(db.eventEmitters, eventName =>
-      new EventEmitterAccessor(eventName, reflector.getter(eventName))
-    );
+    var db = <DirectiveBinding>this.binding;
+    return ListWrapper.map(db.eventEmitters, eventName => new EventEmitterAccessor(
+                                                 eventName, reflector.getter(eventName)));
   }
 
   createHostActionAccessors() {
     if (!(this.binding instanceof DirectiveBinding)) return [];
     var res = [];
-    var db:DirectiveBinding = this.binding;
-    MapWrapper.forEach(db.hostActions, (actionExpression, actionName) => {
-      ListWrapper.push(res, new HostActionAccessor(actionExpression, reflector.getter(actionName)))
-    });
+    var db = <DirectiveBinding>this.binding;
+    MapWrapper.forEach(
+        db.hostActions,
+        (actionExpression, actionName) => {ListWrapper.push(
+            res, new HostActionAccessor(actionExpression, reflector.getter(actionName)))});
     return res;
   }
 }
@@ -410,63 +391,65 @@ ElementInjector:
   - Query mechanism for children
   - 1:1 to DOM structure.
 
- PERF BENCHMARK: http://www.williambrownstreet.net/blog/2014/04/faster-angularjs-rendering-angularjs-and-reactjs/
+ PERF BENCHMARK:
+http://www.williambrownstreet.net/blog/2014/04/faster-angularjs-rendering-angularjs-and-reactjs/
  */
-export class ProtoElementInjector  {
+export class ProtoElementInjector {
   // only _binding0 can contain a component
-  _binding0:ResolvedBinding;
-  _binding1:ResolvedBinding;
-  _binding2:ResolvedBinding;
-  _binding3:ResolvedBinding;
-  _binding4:ResolvedBinding;
-  _binding5:ResolvedBinding;
-  _binding6:ResolvedBinding;
-  _binding7:ResolvedBinding;
-  _binding8:ResolvedBinding;
-  _binding9:ResolvedBinding;
+  _binding0: ResolvedBinding;
+  _binding1: ResolvedBinding;
+  _binding2: ResolvedBinding;
+  _binding3: ResolvedBinding;
+  _binding4: ResolvedBinding;
+  _binding5: ResolvedBinding;
+  _binding6: ResolvedBinding;
+  _binding7: ResolvedBinding;
+  _binding8: ResolvedBinding;
+  _binding9: ResolvedBinding;
 
-  _keyId0:int;
-  _keyId1:int;
-  _keyId2:int;
-  _keyId3:int;
-  _keyId4:int;
-  _keyId5:int;
-  _keyId6:int;
-  _keyId7:int;
-  _keyId8:int;
-  _keyId9:int;
+  _keyId0: int;
+  _keyId1: int;
+  _keyId2: int;
+  _keyId3: int;
+  _keyId4: int;
+  _keyId5: int;
+  _keyId6: int;
+  _keyId7: int;
+  _keyId8: int;
+  _keyId9: int;
 
-  _visibility0:number;
-  _visibility1:number;
-  _visibility2:number;
-  _visibility3:number;
-  _visibility4:number;
-  _visibility5:number;
-  _visibility6:number;
-  _visibility7:number;
-  _visibility8:number;
-  _visibility9:number;
+  _visibility0: number;
+  _visibility1: number;
+  _visibility2: number;
+  _visibility3: number;
+  _visibility4: number;
+  _visibility5: number;
+  _visibility6: number;
+  _visibility7: number;
+  _visibility8: number;
+  _visibility9: number;
 
-  parent:ProtoElementInjector;
-  index:int;
-  view:viewModule.AppView;
-  distanceToParent:number;
-  attributes:Map;
-  eventEmitterAccessors:List<List<EventEmitterAccessor>>;
-  hostActionAccessors:List<List<HostActionAccessor>>;
+  parent: ProtoElementInjector;
+  index: int;
+  view: viewModule.AppView;
+  distanceToParent: number;
+  attributes: Map<string, string>;
+  eventEmitterAccessors: List<List<EventEmitterAccessor>>;
+  hostActionAccessors: List<List<HostActionAccessor>>;
 
   /** Whether the element is exported as $implicit. */
-  exportElement:boolean;
+  exportElement: boolean;
 
   /** Whether the component instance is exported as $implicit. */
-  exportComponent:boolean;
+  exportComponent: boolean;
 
   /** The variable name that will be set to $implicit for the element. */
-  exportImplicitName:string;
+  exportImplicitName: string;
 
-  _firstBindingIsComponent:boolean;
+  _firstBindingIsComponent: boolean;
 
-  static create(parent:ProtoElementInjector, index:int, bindings:List, firstBindingIsComponent:boolean, distanceToParent:number) {
+  static create(parent: ProtoElementInjector, index: int, bindings: List<ResolvedBinding>,
+                firstBindingIsComponent: boolean, distanceToParent: number) {
     var bd = [];
 
     ProtoElementInjector._createDirectiveBindingData(bindings, bd, firstBindingIsComponent);
@@ -477,52 +460,74 @@ export class ProtoElementInjector  {
 
     return new ProtoElementInjector(parent, index, bd, distanceToParent, firstBindingIsComponent);
   }
-  
-  static _createDirectiveBindingData(bindings:List, bd:List, firstBindingIsComponent:boolean) {
+
+  private static _createDirectiveBindingData(bindings: List<ResolvedBinding>, bd: List<BindingData>,
+                                             firstBindingIsComponent: boolean) {
     if (firstBindingIsComponent) {
       ListWrapper.push(bd, new BindingData(bindings[0], LIGHT_DOM_AND_SHADOW_DOM));
       for (var i = 1; i < bindings.length; ++i) {
         ListWrapper.push(bd, new BindingData(bindings[i], LIGHT_DOM));
       }
     } else {
-      ListWrapper.forEach(bindings, b => {
-        ListWrapper.push(bd, new BindingData(b, LIGHT_DOM))
-      });
+      ListWrapper.forEach(bindings, b => {ListWrapper.push(bd, new BindingData(b, LIGHT_DOM))});
     }
   }
-  
-  static _createHostInjectorBindingData(bindings:List, bd:List) {
+
+  private static _createHostInjectorBindingData(bindings: List<ResolvedBinding>,
+                                                bd: List<BindingData>) {
     ListWrapper.forEach(bindings, b => {
-      ListWrapper.forEach(b.resolvedHostInjectables, b => {
-        ListWrapper.push(bd, new BindingData(b, LIGHT_DOM));
-      });
+      ListWrapper.forEach(b.resolvedHostInjectables,
+                          b => { ListWrapper.push(bd, new BindingData(b, LIGHT_DOM)); });
     });
   }
-    
-  static _createViewInjectorBindingData(bindings:List, bd:List) {
-      ListWrapper.forEach(bindings[0].resolvedViewInjectables,
-              b => ListWrapper.push(bd, new BindingData(b, SHADOW_DOM)));
+
+  private static _createViewInjectorBindingData(bindings: List<ResolvedBinding>,
+                                                bd: List<BindingData>) {
+    var db = <DirectiveBinding>bindings[0];
+    ListWrapper.forEach(db.resolvedViewInjectables,
+                        b => ListWrapper.push(bd, new BindingData(b, SHADOW_DOM)));
   }
 
-  constructor(parent:ProtoElementInjector, index:int, bd:List<BindingData>, distanceToParent:number, firstBindingIsComponent:boolean) {
+  constructor(parent: ProtoElementInjector, index: int, bd: List<BindingData>,
+              distanceToParent: number, firstBindingIsComponent: boolean) {
     this.parent = parent;
     this.index = index;
     this.distanceToParent = distanceToParent;
     this.exportComponent = false;
     this.exportElement = false;
     this._firstBindingIsComponent = firstBindingIsComponent;
-    
-    this._binding0 = null; this._keyId0 = null; this._visibility0 = null;
-    this._binding1 = null; this._keyId1 = null; this._visibility1 = null;
-    this._binding2 = null; this._keyId2 = null; this._visibility2 = null;
-    this._binding3 = null; this._keyId3 = null; this._visibility3 = null;
-    this._binding4 = null; this._keyId4 = null; this._visibility4 = null;
-    this._binding5 = null; this._keyId5 = null; this._visibility5 = null;
-    this._binding6 = null; this._keyId6 = null; this._visibility6 = null;
-    this._binding7 = null; this._keyId7 = null; this._visibility7 = null;
-    this._binding8 = null; this._keyId8 = null; this._visibility8 = null;
-    this._binding9 = null; this._keyId9 = null; this._visibility9 = null;
-    
+
+    this._binding0 = null;
+    this._keyId0 = null;
+    this._visibility0 = null;
+    this._binding1 = null;
+    this._keyId1 = null;
+    this._visibility1 = null;
+    this._binding2 = null;
+    this._keyId2 = null;
+    this._visibility2 = null;
+    this._binding3 = null;
+    this._keyId3 = null;
+    this._visibility3 = null;
+    this._binding4 = null;
+    this._keyId4 = null;
+    this._visibility4 = null;
+    this._binding5 = null;
+    this._keyId5 = null;
+    this._visibility5 = null;
+    this._binding6 = null;
+    this._keyId6 = null;
+    this._visibility6 = null;
+    this._binding7 = null;
+    this._keyId7 = null;
+    this._visibility7 = null;
+    this._binding8 = null;
+    this._keyId8 = null;
+    this._visibility8 = null;
+    this._binding9 = null;
+    this._keyId9 = null;
+    this._visibility9 = null;
+
     var length = bd.length;
     this.eventEmitterAccessors = ListWrapper.createFixedSize(length);
     this.hostActionAccessors = ListWrapper.createFixedSize(length);
@@ -602,19 +607,15 @@ export class ProtoElementInjector  {
     }
   }
 
-  instantiate(parent:ElementInjector):ElementInjector {
+  instantiate(parent: ElementInjector): ElementInjector {
     return new ElementInjector(this, parent);
   }
 
-  directParent(): ProtoElementInjector {
-    return this.distanceToParent < 2 ? this.parent : null;
-  }
+  directParent(): ProtoElementInjector { return this.distanceToParent < 2 ? this.parent : null; }
 
-  get hasBindings():boolean {
-    return isPresent(this._binding0);
-  }
+  get hasBindings(): boolean { return isPresent(this._binding0); }
 
-  getBindingAtIndex(index:int) {
+  getBindingAtIndex(index: int) {
     if (index == 0) return this._binding0;
     if (index == 1) return this._binding1;
     if (index == 2) return this._binding2;
@@ -629,40 +630,40 @@ export class ProtoElementInjector  {
   }
 }
 
-export class ElementInjector extends TreeNode {
-  _proto:ProtoElementInjector;
-  _lightDomAppInjector:Injector;
-  _shadowDomAppInjector:Injector;
-  _host:ElementInjector;
+export class ElementInjector extends TreeNode<ElementInjector> {
+  private _proto: ProtoElementInjector;
+  private _lightDomAppInjector: Injector;
+  private _shadowDomAppInjector: Injector;
+  private _host: ElementInjector;
 
   // If this element injector has a component, the component instance will be stored in _obj0
-  _obj0:any;
-  _obj1:any;
-  _obj2:any;
-  _obj3:any;
-  _obj4:any;
-  _obj5:any;
-  _obj6:any;
-  _obj7:any;
-  _obj8:any;
-  _obj9:any;
-  _preBuiltObjects;
-  _constructionCounter;
+  private _obj0: any;
+  private _obj1: any;
+  private _obj2: any;
+  private _obj3: any;
+  private _obj4: any;
+  private _obj5: any;
+  private _obj6: any;
+  private _obj7: any;
+  private _obj8: any;
+  private _obj9: any;
+  private _preBuiltObjects;
+  private _constructionCounter;
 
-  _dynamicallyCreatedComponent:any;
-  _dynamicallyCreatedComponentBinding:DirectiveBinding;
+  private _dynamicallyCreatedComponent: any;
+  private _dynamicallyCreatedComponentBinding: DirectiveBinding;
 
   // Queries are added during construction or linking with a new parent.
   // They are never removed.
-  _query0: QueryRef;
-  _query1: QueryRef;
-  _query2: QueryRef;
+  private _query0: QueryRef;
+  private _query1: QueryRef;
+  private _query2: QueryRef;
 
-  constructor(proto:ProtoElementInjector, parent:ElementInjector) {
+  constructor(proto: ProtoElementInjector, parent: ElementInjector) {
     super(parent);
     this._proto = proto;
 
-    //we cannot call dehydrate because fields won't be detected
+    // we cannot call dehydrate because fields won't be detected
     this._preBuiltObjects = null;
     this._lightDomAppInjector = null;
     this._shadowDomAppInjector = null;
@@ -690,17 +691,38 @@ export class ElementInjector extends TreeNode {
 
     var p = this._proto;
 
-    if (p._binding0 instanceof DirectiveBinding && p._binding0.callOnDestroy) {this._obj0.onDestroy();}
-    if (p._binding1 instanceof DirectiveBinding && p._binding1.callOnDestroy) {this._obj1.onDestroy();}
-    if (p._binding2 instanceof DirectiveBinding && p._binding2.callOnDestroy) {this._obj2.onDestroy();}
-    if (p._binding3 instanceof DirectiveBinding && p._binding3.callOnDestroy) {this._obj3.onDestroy();}
-    if (p._binding4 instanceof DirectiveBinding && p._binding4.callOnDestroy) {this._obj4.onDestroy();}
-    if (p._binding5 instanceof DirectiveBinding && p._binding5.callOnDestroy) {this._obj5.onDestroy();}
-    if (p._binding6 instanceof DirectiveBinding && p._binding6.callOnDestroy) {this._obj6.onDestroy();}
-    if (p._binding7 instanceof DirectiveBinding && p._binding7.callOnDestroy) {this._obj7.onDestroy();}
-    if (p._binding8 instanceof DirectiveBinding && p._binding8.callOnDestroy) {this._obj8.onDestroy();}
-    if (p._binding9 instanceof DirectiveBinding && p._binding9.callOnDestroy) {this._obj9.onDestroy();}
-    if (isPresent(this._dynamicallyCreatedComponentBinding) && this._dynamicallyCreatedComponentBinding.callOnDestroy) {
+    if (p._binding0 instanceof DirectiveBinding && (<DirectiveBinding>p._binding0).callOnDestroy) {
+      this._obj0.onDestroy();
+    }
+    if (p._binding1 instanceof DirectiveBinding && (<DirectiveBinding>p._binding1).callOnDestroy) {
+      this._obj1.onDestroy();
+    }
+    if (p._binding2 instanceof DirectiveBinding && (<DirectiveBinding>p._binding2).callOnDestroy) {
+      this._obj2.onDestroy();
+    }
+    if (p._binding3 instanceof DirectiveBinding && (<DirectiveBinding>p._binding3).callOnDestroy) {
+      this._obj3.onDestroy();
+    }
+    if (p._binding4 instanceof DirectiveBinding && (<DirectiveBinding>p._binding4).callOnDestroy) {
+      this._obj4.onDestroy();
+    }
+    if (p._binding5 instanceof DirectiveBinding && (<DirectiveBinding>p._binding5).callOnDestroy) {
+      this._obj5.onDestroy();
+    }
+    if (p._binding6 instanceof DirectiveBinding && (<DirectiveBinding>p._binding6).callOnDestroy) {
+      this._obj6.onDestroy();
+    }
+    if (p._binding7 instanceof DirectiveBinding && (<DirectiveBinding>p._binding7).callOnDestroy) {
+      this._obj7.onDestroy();
+    }
+    if (p._binding8 instanceof DirectiveBinding && (<DirectiveBinding>p._binding8).callOnDestroy) {
+      this._obj8.onDestroy();
+    }
+    if (p._binding9 instanceof DirectiveBinding && (<DirectiveBinding>p._binding9).callOnDestroy) {
+      this._obj9.onDestroy();
+    }
+    if (isPresent(this._dynamicallyCreatedComponentBinding) &&
+        this._dynamicallyCreatedComponentBinding.callOnDestroy) {
       this._dynamicallyCreatedComponent.onDestroy();
     }
 
@@ -721,17 +743,18 @@ export class ElementInjector extends TreeNode {
   }
 
 
-  hydrate(injector:Injector, host:ElementInjector, preBuiltObjects:PreBuiltObjects) {
+  hydrate(injector: Injector, host: ElementInjector, preBuiltObjects: PreBuiltObjects) {
     var p = this._proto;
 
     this._host = host;
     this._lightDomAppInjector = injector;
     this._preBuiltObjects = preBuiltObjects;
-    
+
     if (p._firstBindingIsComponent) {
-      this._shadowDomAppInjector = this._createShadowDomAppInjector(p._binding0, injector); 
+      this._shadowDomAppInjector =
+          this._createShadowDomAppInjector(<DirectiveBinding>p._binding0, injector);
     }
-    
+
     this._checkShadowDomAppInjector(this._shadowDomAppInjector);
 
     if (isPresent(p._keyId0)) this._getObjByKeyId(p._keyId0, LIGHT_DOM_AND_SHADOW_DOM);
@@ -746,26 +769,29 @@ export class ElementInjector extends TreeNode {
     if (isPresent(p._keyId9)) this._getObjByKeyId(p._keyId9, LIGHT_DOM_AND_SHADOW_DOM);
   }
 
-  _createShadowDomAppInjector(componentDirective:DirectiveBinding, appInjector:Injector) {
-    if (! ListWrapper.isEmpty(componentDirective.resolvedAppInjectables)) {
+  private _createShadowDomAppInjector(componentDirective: DirectiveBinding, appInjector: Injector) {
+    if (!ListWrapper.isEmpty(componentDirective.resolvedAppInjectables)) {
       return appInjector.createChildFromResolved(componentDirective.resolvedAppInjectables);
     } else {
       return appInjector;
     }
   }
 
-  dynamicallyCreateComponent(componentDirective:DirectiveBinding, parentInjector:Injector) {
-    this._shadowDomAppInjector = this._createShadowDomAppInjector(componentDirective, parentInjector);
+  dynamicallyCreateComponent(componentDirective: DirectiveBinding, parentInjector: Injector) {
+    this._shadowDomAppInjector =
+        this._createShadowDomAppInjector(componentDirective, parentInjector);
     this._dynamicallyCreatedComponentBinding = componentDirective;
     this._dynamicallyCreatedComponent = this._new(this._dynamicallyCreatedComponentBinding);
     return this._dynamicallyCreatedComponent;
   }
 
-  _checkShadowDomAppInjector(shadowDomAppInjector:Injector) {
+  private _checkShadowDomAppInjector(shadowDomAppInjector: Injector) {
     if (this._proto._firstBindingIsComponent && isBlank(shadowDomAppInjector)) {
-      throw new BaseException('A shadowDomAppInjector is required as this ElementInjector contains a component');
+      throw new BaseException(
+          'A shadowDomAppInjector is required as this ElementInjector contains a component');
     } else if (!this._proto._firstBindingIsComponent && isPresent(shadowDomAppInjector)) {
-      throw new BaseException('No shadowDomAppInjector allowed as there is not component stored in this ElementInjector');
+      throw new BaseException(
+          'No shadowDomAppInjector allowed as there is not component stored in this ElementInjector');
     }
   }
 
@@ -777,26 +803,20 @@ export class ElementInjector extends TreeNode {
     return this._getByKey(Key.get(token), self, false, null);
   }
 
-  _isDynamicallyLoadedComponent(token) {
+  private _isDynamicallyLoadedComponent(token) {
     return isPresent(this._dynamicallyCreatedComponentBinding) &&
-      Key.get(token) === this._dynamicallyCreatedComponentBinding.key;
+           Key.get(token) === this._dynamicallyCreatedComponentBinding.key;
   }
 
-  hasDirective(type:Type):boolean {
+  hasDirective(type: Type): boolean {
     return this._getObjByKeyId(Key.get(type).id, LIGHT_DOM_AND_SHADOW_DOM) !== _undefined;
   }
 
-  getEventEmitterAccessors() {
-    return this._proto.eventEmitterAccessors;
-  }
+  getEventEmitterAccessors() { return this._proto.eventEmitterAccessors; }
 
-  getHostActionAccessors() {
-    return this._proto.hostActionAccessors;
-  }
+  getHostActionAccessors() { return this._proto.hostActionAccessors; }
 
-  getComponent() {
-    return this._obj0;
-  }
+  getComponent() { return this._obj0; }
 
   getElementRef() {
     return new ElementRef(new ViewRef(this._preBuiltObjects.view), this._proto.index);
@@ -806,33 +826,29 @@ export class ElementInjector extends TreeNode {
     return new ViewContainerRef(this._preBuiltObjects.viewManager, this.getElementRef());
   }
 
-  getDynamicallyLoadedComponent() {
-    return this._dynamicallyCreatedComponent;
-  }
+  getDynamicallyLoadedComponent() { return this._dynamicallyCreatedComponent; }
 
-  directParent(): ElementInjector {
-    return this._proto.distanceToParent < 2 ? this.parent : null;
-  }
+  directParent(): ElementInjector { return this._proto.distanceToParent < 2 ? this.parent : null; }
 
-  _isComponentKey(key:Key) {
+  private _isComponentKey(key: Key) {
     return this._proto._firstBindingIsComponent && key.id === this._proto._keyId0;
   }
 
-  _isDynamicallyLoadedComponentKey(key:Key) {
-    return isPresent(this._dynamicallyCreatedComponentBinding) && key.id ===
-      this._dynamicallyCreatedComponentBinding.key.id;
+  private _isDynamicallyLoadedComponentKey(key: Key) {
+    return isPresent(this._dynamicallyCreatedComponentBinding) &&
+           key.id === this._dynamicallyCreatedComponentBinding.key.id;
   }
 
-  _new(binding:ResolvedBinding) {
+  private _new(binding: ResolvedBinding) {
     if (this._constructionCounter++ > _MAX_DIRECTIVE_CONSTRUCTION_COUNTER) {
       throw new CyclicDependencyError(binding.key);
     }
 
     var factory = binding.factory;
-    var deps = binding.dependencies;
+    var deps = <List<DirectiveDependency>>binding.dependencies;
     var length = deps.length;
 
-    var d0,d1,d2,d3,d4,d5,d6,d7,d8,d9;
+    var d0, d1, d2, d3, d4, d5, d6, d7, d8, d9;
     try {
       d0 = length > 0 ? this._getByDependency(deps[0], binding.key) : null;
       d1 = length > 1 ? this._getByDependency(deps[1], binding.key) : null;
@@ -844,25 +860,48 @@ export class ElementInjector extends TreeNode {
       d7 = length > 7 ? this._getByDependency(deps[7], binding.key) : null;
       d8 = length > 8 ? this._getByDependency(deps[8], binding.key) : null;
       d9 = length > 9 ? this._getByDependency(deps[9], binding.key) : null;
-    } catch(e) {
+    } catch (e) {
       if (e instanceof AbstractBindingError) e.addKey(binding.key);
       throw e;
     }
 
     var obj;
-    switch(length) {
-      case 0: obj = factory(); break;
-      case 1: obj = factory(d0); break;
-      case 2: obj = factory(d0, d1); break;
-      case 3: obj = factory(d0, d1, d2); break;
-      case 4: obj = factory(d0, d1, d2, d3); break;
-      case 5: obj = factory(d0, d1, d2, d3, d4); break;
-      case 6: obj = factory(d0, d1, d2, d3, d4, d5); break;
-      case 7: obj = factory(d0, d1, d2, d3, d4, d5, d6); break;
-      case 8: obj = factory(d0, d1, d2, d3, d4, d5, d6, d7); break;
-      case 9: obj = factory(d0, d1, d2, d3, d4, d5, d6, d7, d8); break;
-      case 10: obj = factory(d0, d1, d2, d3, d4, d5, d6, d7, d8, d9); break;
-      default: throw `Directive ${binding.key.token} can only have up to 10 dependencies.`;
+    switch (length) {
+      case 0:
+        obj = factory();
+        break;
+      case 1:
+        obj = factory(d0);
+        break;
+      case 2:
+        obj = factory(d0, d1);
+        break;
+      case 3:
+        obj = factory(d0, d1, d2);
+        break;
+      case 4:
+        obj = factory(d0, d1, d2, d3);
+        break;
+      case 5:
+        obj = factory(d0, d1, d2, d3, d4);
+        break;
+      case 6:
+        obj = factory(d0, d1, d2, d3, d4, d5);
+        break;
+      case 7:
+        obj = factory(d0, d1, d2, d3, d4, d5, d6);
+        break;
+      case 8:
+        obj = factory(d0, d1, d2, d3, d4, d5, d6, d7);
+        break;
+      case 9:
+        obj = factory(d0, d1, d2, d3, d4, d5, d6, d7, d8);
+        break;
+      case 10:
+        obj = factory(d0, d1, d2, d3, d4, d5, d6, d7, d8, d9);
+        break;
+      default:
+        throw `Directive ${binding.key.token} can only have up to 10 dependencies.`;
     }
 
     this._addToQueries(obj, binding.key.token);
@@ -870,12 +909,12 @@ export class ElementInjector extends TreeNode {
     return obj;
   }
 
-  _getByDependency(dep:Dependency, requestor:Key) {
-    if (! (dep instanceof DirectiveDependency)) {
+  private _getByDependency(dep: Dependency, requestor: Key) {
+    if (!(dep instanceof DirectiveDependency)) {
       return this._getByKey(dep.key, self, dep.optional, requestor);
     }
 
-    var dirDep:DirectiveDependency = dep;
+    var dirDep = <DirectiveDependency>dep;
 
     if (isPresent(dirDep.attributeName)) return this._buildAttribute(dirDep);
     if (isPresent(dirDep.queryDirective)) return this._findQuery(dirDep.queryDirective).list;
@@ -902,7 +941,7 @@ export class ElementInjector extends TreeNode {
     return this._getByKey(dirDep.key, dirDep.visibility, dirDep.optional, requestor);
   }
 
-  _buildAttribute(dep): string {
+  private _buildAttribute(dep): string {
     var attributes = this._proto.attributes;
     if (isPresent(attributes) && MapWrapper.contains(attributes, dep.attributeName)) {
       return MapWrapper.get(attributes, dep.attributeName);
@@ -911,7 +950,7 @@ export class ElementInjector extends TreeNode {
     }
   }
 
-  _buildQueriesForDeps(deps: List<DirectiveDependency>) {
+  private _buildQueriesForDeps(deps: List<DirectiveDependency>) {
     for (var i = 0; i < deps.length; i++) {
       var dep = deps[i];
       if (isPresent(dep.queryDirective)) {
@@ -920,47 +959,89 @@ export class ElementInjector extends TreeNode {
     }
   }
 
-  _createQueryRef(directive) {
+  private _createQueryRef(directive) {
     var queryList = new QueryList();
-    if (isBlank(this._query0)) {this._query0 = new QueryRef(directive, queryList, this);}
-    else if (isBlank(this._query1)) {this._query1 = new QueryRef(directive, queryList, this);}
-    else if (isBlank(this._query2)) {this._query2 = new QueryRef(directive, queryList, this);}
-    else throw new QueryError();
+    if (isBlank(this._query0)) {
+      this._query0 = new QueryRef(directive, queryList, this);
+    } else if (isBlank(this._query1)) {
+      this._query1 = new QueryRef(directive, queryList, this);
+    } else if (isBlank(this._query2)) {
+      this._query2 = new QueryRef(directive, queryList, this);
+    } else
+      throw new QueryError();
   }
 
-  _addToQueries(obj, token) {
-    if (isPresent(this._query0) && (this._query0.directive === token)) {this._query0.list.add(obj);}
-    if (isPresent(this._query1) && (this._query1.directive === token)) {this._query1.list.add(obj);}
-    if (isPresent(this._query2) && (this._query2.directive === token)) {this._query2.list.add(obj);}
+  private _addToQueries(obj, token) {
+    if (isPresent(this._query0) && (this._query0.directive === token)) {
+      this._query0.list.add(obj);
+    }
+    if (isPresent(this._query1) && (this._query1.directive === token)) {
+      this._query1.list.add(obj);
+    }
+    if (isPresent(this._query2) && (this._query2.directive === token)) {
+      this._query2.list.add(obj);
+    }
   }
 
   // TODO(rado): unify with _addParentQueries.
-  _inheritQueries(parent: ElementInjector) {
+  private _inheritQueries(parent: ElementInjector) {
     if (isBlank(parent)) return;
-    if (isPresent(parent._query0)) {this._query0 = parent._query0;}
-    if (isPresent(parent._query1)) {this._query1 = parent._query1;}
-    if (isPresent(parent._query2)) {this._query2 = parent._query2;}
+    if (isPresent(parent._query0)) {
+      this._query0 = parent._query0;
+    }
+    if (isPresent(parent._query1)) {
+      this._query1 = parent._query1;
+    }
+    if (isPresent(parent._query2)) {
+      this._query2 = parent._query2;
+    }
   }
 
-  _buildQueries() {
+  private _buildQueries() {
     if (isBlank(this._proto)) return;
     var p = this._proto;
-    if (p._binding0 instanceof DirectiveBinding) {this._buildQueriesForDeps(p._binding0.dependencies);}
-    if (p._binding1 instanceof DirectiveBinding) {this._buildQueriesForDeps(p._binding1.dependencies);}
-    if (p._binding2 instanceof DirectiveBinding) {this._buildQueriesForDeps(p._binding2.dependencies);}
-    if (p._binding3 instanceof DirectiveBinding) {this._buildQueriesForDeps(p._binding3.dependencies);}
-    if (p._binding4 instanceof DirectiveBinding) {this._buildQueriesForDeps(p._binding4.dependencies);}
-    if (p._binding5 instanceof DirectiveBinding) {this._buildQueriesForDeps(p._binding5.dependencies);}
-    if (p._binding6 instanceof DirectiveBinding) {this._buildQueriesForDeps(p._binding6.dependencies);}
-    if (p._binding7 instanceof DirectiveBinding) {this._buildQueriesForDeps(p._binding7.dependencies);}
-    if (p._binding8 instanceof DirectiveBinding) {this._buildQueriesForDeps(p._binding8.dependencies);}
-    if (p._binding9 instanceof DirectiveBinding) {this._buildQueriesForDeps(p._binding9.dependencies);}
+    if (p._binding0 instanceof DirectiveBinding) {
+      this._buildQueriesForDeps(<List<DirectiveDependency>>p._binding0.dependencies);
+    }
+    if (p._binding1 instanceof DirectiveBinding) {
+      this._buildQueriesForDeps(<List<DirectiveDependency>>p._binding1.dependencies);
+    }
+    if (p._binding2 instanceof DirectiveBinding) {
+      this._buildQueriesForDeps(<List<DirectiveDependency>>p._binding2.dependencies);
+    }
+    if (p._binding3 instanceof DirectiveBinding) {
+      this._buildQueriesForDeps(<List<DirectiveDependency>>p._binding3.dependencies);
+    }
+    if (p._binding4 instanceof DirectiveBinding) {
+      this._buildQueriesForDeps(<List<DirectiveDependency>>p._binding4.dependencies);
+    }
+    if (p._binding5 instanceof DirectiveBinding) {
+      this._buildQueriesForDeps(<List<DirectiveDependency>>p._binding5.dependencies);
+    }
+    if (p._binding6 instanceof DirectiveBinding) {
+      this._buildQueriesForDeps(<List<DirectiveDependency>>p._binding6.dependencies);
+    }
+    if (p._binding7 instanceof DirectiveBinding) {
+      this._buildQueriesForDeps(<List<DirectiveDependency>>p._binding7.dependencies);
+    }
+    if (p._binding8 instanceof DirectiveBinding) {
+      this._buildQueriesForDeps(<List<DirectiveDependency>>p._binding8.dependencies);
+    }
+    if (p._binding9 instanceof DirectiveBinding) {
+      this._buildQueriesForDeps(<List<DirectiveDependency>>p._binding9.dependencies);
+    }
   }
 
-  _findQuery(token) {
-    if (isPresent(this._query0) && this._query0.directive === token) {return this._query0;}
-    if (isPresent(this._query1) && this._query1.directive === token) {return this._query1;}
-    if (isPresent(this._query2) && this._query2.directive === token) {return this._query2;}
+  private _findQuery(token) {
+    if (isPresent(this._query0) && this._query0.directive === token) {
+      return this._query0;
+    }
+    if (isPresent(this._query1) && this._query1.directive === token) {
+      return this._query1;
+    }
+    if (isPresent(this._query2) && this._query2.directive === token) {
+      return this._query2;
+    }
     throw new BaseException(`Cannot find query for directive ${token}.`);
   }
 
@@ -974,17 +1055,35 @@ export class ElementInjector extends TreeNode {
     this._addParentQueries();
   }
 
-  _addParentQueries() {
-    if (isPresent(this.parent._query0)) {this._addQueryToTree(this.parent._query0); this.parent._query0.update();}
-    if (isPresent(this.parent._query1)) {this._addQueryToTree(this.parent._query1); this.parent._query1.update();}
-    if (isPresent(this.parent._query2)) {this._addQueryToTree(this.parent._query2); this.parent._query2.update();}
+  private _addParentQueries() {
+    if (isPresent(this.parent._query0)) {
+      this._addQueryToTree(this.parent._query0);
+      this.parent._query0.update();
+    }
+    if (isPresent(this.parent._query1)) {
+      this._addQueryToTree(this.parent._query1);
+      this.parent._query1.update();
+    }
+    if (isPresent(this.parent._query2)) {
+      this._addQueryToTree(this.parent._query2);
+      this.parent._query2.update();
+    }
   }
 
   unlink() {
     var queriesToUpDate = [];
-    if (isPresent(this.parent._query0)) {this._pruneQueryFromTree(this.parent._query0); ListWrapper.push(queriesToUpDate, this.parent._query0);}
-    if (isPresent(this.parent._query1)) {this._pruneQueryFromTree(this.parent._query1); ListWrapper.push(queriesToUpDate, this.parent._query1);}
-    if (isPresent(this.parent._query2)) {this._pruneQueryFromTree(this.parent._query2); ListWrapper.push(queriesToUpDate, this.parent._query2);}
+    if (isPresent(this.parent._query0)) {
+      this._pruneQueryFromTree(this.parent._query0);
+      ListWrapper.push(queriesToUpDate, this.parent._query0);
+    }
+    if (isPresent(this.parent._query1)) {
+      this._pruneQueryFromTree(this.parent._query1);
+      ListWrapper.push(queriesToUpDate, this.parent._query1);
+    }
+    if (isPresent(this.parent._query2)) {
+      this._pruneQueryFromTree(this.parent._query2);
+      ListWrapper.push(queriesToUpDate, this.parent._query2);
+    }
 
     this.remove();
 
@@ -992,7 +1091,7 @@ export class ElementInjector extends TreeNode {
   }
 
 
-  _pruneQueryFromTree(query: QueryRef) {
+  private _pruneQueryFromTree(query: QueryRef) {
     this._removeQueryRef(query);
 
     var child = this._head;
@@ -1002,7 +1101,7 @@ export class ElementInjector extends TreeNode {
     }
   }
 
-  _addQueryToTree(query: QueryRef) {
+  private _addQueryToTree(query: QueryRef) {
     this._assignQueryRef(query);
 
     var child = this._head;
@@ -1012,38 +1111,45 @@ export class ElementInjector extends TreeNode {
     }
   }
 
-  _assignQueryRef(query: QueryRef) {
-    if (isBlank(this._query0)) {this._query0 = query; return;}
-    else if (isBlank(this._query1)) {this._query1 = query; return;}
-    else if (isBlank(this._query2)) {this._query2 = query; return;}
+  private _assignQueryRef(query: QueryRef) {
+    if (isBlank(this._query0)) {
+      this._query0 = query;
+      return;
+    } else if (isBlank(this._query1)) {
+      this._query1 = query;
+      return;
+    } else if (isBlank(this._query2)) {
+      this._query2 = query;
+      return;
+    }
     throw new QueryError();
   }
 
-  _removeQueryRef(query: QueryRef) {
+  private _removeQueryRef(query: QueryRef) {
     if (this._query0 == query) this._query0 = null;
     if (this._query1 == query) this._query1 = null;
     if (this._query2 == query) this._query2 = null;
   }
 
-  _getByKey(key:Key, visibility:Visibility, optional:boolean, requestor:Key) {
+  private _getByKey(key: Key, visibility: Visibility, optional: boolean, requestor: Key) {
     var ei = this;
 
     var currentVisibility = LIGHT_DOM;
     var depth = visibility.depth;
 
-    if (! visibility.shouldIncludeSelf()) {
+    if (!visibility.shouldIncludeSelf()) {
       depth -= ei._proto.distanceToParent;
-      
+
       if (isPresent(ei._parent)) {
         ei = ei._parent;
       } else {
         ei = ei._host;
         if (!visibility.crossComponentBoundaries) {
-          currentVisibility = SHADOW_DOM; 
+          currentVisibility = SHADOW_DOM;
         }
       }
     }
-    
+
     while (ei != null && depth >= 0) {
       var preBuiltObj = ei._getPreBuiltObjectByKeyId(key.id);
       if (preBuiltObj !== _undefined) return preBuiltObj;
@@ -1052,15 +1158,15 @@ export class ElementInjector extends TreeNode {
       if (dir !== _undefined) return dir;
 
       depth -= ei._proto.distanceToParent;
-      
+
       if (currentVisibility === SHADOW_DOM) break;
-      
+
       if (isPresent(ei._parent)) {
         ei = ei._parent;
       } else {
         ei = ei._host;
         if (!visibility.crossComponentBoundaries) {
-          currentVisibility = SHADOW_DOM; 
+          currentVisibility = SHADOW_DOM;
         }
       }
     }
@@ -1075,41 +1181,92 @@ export class ElementInjector extends TreeNode {
       return this._appInjector(requestor).get(key);
     }
   }
-  
-  _appInjector(requestor:Key) {
-    if (isPresent(requestor) && (this._isComponentKey(requestor) || this._isDynamicallyLoadedComponentKey(requestor))) {
+
+  private _appInjector(requestor: Key) {
+    if (isPresent(requestor) &&
+        (this._isComponentKey(requestor) || this._isDynamicallyLoadedComponentKey(requestor))) {
       return this._shadowDomAppInjector;
     } else {
       return this._lightDomAppInjector;
     }
   }
 
-  _getPreBuiltObjectByKeyId(keyId:int) {
+  private _getPreBuiltObjectByKeyId(keyId: int) {
     var staticKeys = StaticKeys.instance();
     if (keyId === staticKeys.viewManagerId) return this._preBuiltObjects.viewManager;
 
-    //TODO add other objects as needed
+    // TODO add other objects as needed
     return _undefined;
   }
 
-  _getObjByKeyId(keyId:int, visibility:number) {
+  private _getObjByKeyId(keyId: int, visibility: number) {
     var p = this._proto;
 
-    if (p._keyId0 === keyId && (p._visibility0 & visibility) > 0) {if (isBlank(this._obj0)){this._obj0 = this._new(p._binding0);} return this._obj0;}
-    if (p._keyId1 === keyId && (p._visibility1 & visibility) > 0) {if (isBlank(this._obj1)){this._obj1 = this._new(p._binding1);} return this._obj1;}
-    if (p._keyId2 === keyId && (p._visibility2 & visibility) > 0) {if (isBlank(this._obj2)){this._obj2 = this._new(p._binding2);} return this._obj2;}
-    if (p._keyId3 === keyId && (p._visibility3 & visibility) > 0) {if (isBlank(this._obj3)){this._obj3 = this._new(p._binding3);} return this._obj3;}
-    if (p._keyId4 === keyId && (p._visibility4 & visibility) > 0) {if (isBlank(this._obj4)){this._obj4 = this._new(p._binding4);} return this._obj4;}
-    if (p._keyId5 === keyId && (p._visibility5 & visibility) > 0) {if (isBlank(this._obj5)){this._obj5 = this._new(p._binding5);} return this._obj5;}
-    if (p._keyId6 === keyId && (p._visibility6 & visibility) > 0) {if (isBlank(this._obj6)){this._obj6 = this._new(p._binding6);} return this._obj6;}
-    if (p._keyId7 === keyId && (p._visibility7 & visibility) > 0) {if (isBlank(this._obj7)){this._obj7 = this._new(p._binding7);} return this._obj7;}
-    if (p._keyId8 === keyId && (p._visibility8 & visibility) > 0) {if (isBlank(this._obj8)){this._obj8 = this._new(p._binding8);} return this._obj8;}
-    if (p._keyId9 === keyId && (p._visibility9 & visibility) > 0) {if (isBlank(this._obj9)){this._obj9 = this._new(p._binding9);} return this._obj9;}
-    
+    if (p._keyId0 === keyId && (p._visibility0 & visibility) > 0) {
+      if (isBlank(this._obj0)) {
+        this._obj0 = this._new(p._binding0);
+      }
+      return this._obj0;
+    }
+    if (p._keyId1 === keyId && (p._visibility1 & visibility) > 0) {
+      if (isBlank(this._obj1)) {
+        this._obj1 = this._new(p._binding1);
+      }
+      return this._obj1;
+    }
+    if (p._keyId2 === keyId && (p._visibility2 & visibility) > 0) {
+      if (isBlank(this._obj2)) {
+        this._obj2 = this._new(p._binding2);
+      }
+      return this._obj2;
+    }
+    if (p._keyId3 === keyId && (p._visibility3 & visibility) > 0) {
+      if (isBlank(this._obj3)) {
+        this._obj3 = this._new(p._binding3);
+      }
+      return this._obj3;
+    }
+    if (p._keyId4 === keyId && (p._visibility4 & visibility) > 0) {
+      if (isBlank(this._obj4)) {
+        this._obj4 = this._new(p._binding4);
+      }
+      return this._obj4;
+    }
+    if (p._keyId5 === keyId && (p._visibility5 & visibility) > 0) {
+      if (isBlank(this._obj5)) {
+        this._obj5 = this._new(p._binding5);
+      }
+      return this._obj5;
+    }
+    if (p._keyId6 === keyId && (p._visibility6 & visibility) > 0) {
+      if (isBlank(this._obj6)) {
+        this._obj6 = this._new(p._binding6);
+      }
+      return this._obj6;
+    }
+    if (p._keyId7 === keyId && (p._visibility7 & visibility) > 0) {
+      if (isBlank(this._obj7)) {
+        this._obj7 = this._new(p._binding7);
+      }
+      return this._obj7;
+    }
+    if (p._keyId8 === keyId && (p._visibility8 & visibility) > 0) {
+      if (isBlank(this._obj8)) {
+        this._obj8 = this._new(p._binding8);
+      }
+      return this._obj8;
+    }
+    if (p._keyId9 === keyId && (p._visibility9 & visibility) > 0) {
+      if (isBlank(this._obj9)) {
+        this._obj9 = this._new(p._binding9);
+      }
+      return this._obj9;
+    }
+
     return _undefined;
   }
 
-  getDirectiveAtIndex(index:int) {
+  getDirectiveAtIndex(index: int) {
     if (index == 0) return this._obj0;
     if (index == 1) return this._obj1;
     if (index == 2) return this._obj2;
@@ -1123,65 +1280,45 @@ export class ElementInjector extends TreeNode {
     throw new OutOfBoundsAccess(index);
   }
 
-  hasInstances() {
-    return this._constructionCounter > 0;
-  }
+  hasInstances() { return this._constructionCounter > 0; }
 
   /** Gets whether this element is exporting a component instance as $implicit. */
-  isExportingComponent() {
-    return this._proto.exportComponent;
-  }
+  isExportingComponent() { return this._proto.exportComponent; }
 
   /** Gets whether this element is exporting its element as $implicit. */
-  isExportingElement() {
-    return this._proto.exportElement;
-  }
+  isExportingElement() { return this._proto.exportElement; }
 
   /** Get the name to which this element's $implicit is to be assigned. */
-  getExportImplicitName() {
-    return this._proto.exportImplicitName;
-  }
+  getExportImplicitName() { return this._proto.exportImplicitName; }
 
-  getLightDomAppInjector() {
-    return this._lightDomAppInjector;
-  }
+  getLightDomAppInjector() { return this._lightDomAppInjector; }
 
-  getShadowDomAppInjector() {
-    return this._shadowDomAppInjector;
-  }
+  getShadowDomAppInjector() { return this._shadowDomAppInjector; }
 
-  getHost() {
-    return this._host;
-  }
+  getHost() { return this._host; }
 
-  getBoundElementIndex() {
-    return this._proto.index;
-  }
+  getBoundElementIndex() { return this._proto.index; }
 }
 
 class OutOfBoundsAccess extends BaseException {
-  message:string;
+  message: string;
   constructor(index) {
     super();
     this.message = `Index ${index} is out-of-bounds.`;
   }
 
-  toString() {
-    return this.message;
-  }
+  toString() { return this.message; }
 }
 
 class QueryError extends BaseException {
-  message:string;
+  message: string;
   // TODO(rado): pass the names of the active directives.
   constructor() {
     super();
     this.message = 'Only 3 queries can be concurrently active in a template.';
   }
 
-  toString() {
-    return this.message;
-  }
+  toString() { return this.message; }
 }
 
 class QueryRef {
diff --git a/modules/angular2/src/core/compiler/element_ref.js b/modules/angular2/src/core/compiler/element_ref.ts
similarity index 88%
rename from modules/angular2/src/core/compiler/element_ref.js
rename to modules/angular2/src/core/compiler/element_ref.ts
index 96141a92d4..6a3a456d7f 100644
--- a/modules/angular2/src/core/compiler/element_ref.js
+++ b/modules/angular2/src/core/compiler/element_ref.ts
@@ -7,10 +7,10 @@ import {resolveInternalDomView} from 'angular2/src/render/dom/view/view';
  * @exportedAs angular2/view
  */
 export class ElementRef {
-  parentView:ViewRef;
-  boundElementIndex:number;
+  parentView: ViewRef;
+  boundElementIndex: number;
 
-  constructor(parentView:ViewRef, boundElementIndex:number) {
+  constructor(parentView: ViewRef, boundElementIndex: number) {
     this.parentView = parentView;
     this.boundElementIndex = boundElementIndex;
   }
@@ -33,7 +33,7 @@ export class ElementRef {
   // TODO(tbosch): Here we expose the real DOM element.
   // We need a more general way to read/write to the DOM element
   // via a proper abstraction in the render layer
-  getAttribute(name:string):string {
+  getAttribute(name: string): string {
     return normalizeBlank(DOM.getAttribute(this.domElement, name));
   }
 }
diff --git a/modules/angular2/src/core/compiler/interfaces.js b/modules/angular2/src/core/compiler/interfaces.js
deleted file mode 100644
index d7deb19cec..0000000000
--- a/modules/angular2/src/core/compiler/interfaces.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * @exportedAs angular2/angular2
- */
-export class OnChange {
-  onChange(changes) {
-    throw "OnChange.onChange is not implemented";
-  }
-}
diff --git a/modules/angular2/src/core/compiler/proto_view_factory.js b/modules/angular2/src/core/compiler/proto_view_factory.ts
similarity index 57%
rename from modules/angular2/src/core/compiler/proto_view_factory.js
rename to modules/angular2/src/core/compiler/proto_view_factory.ts
index 373410c60e..bd13a408e4 100644
--- a/modules/angular2/src/core/compiler/proto_view_factory.js
+++ b/modules/angular2/src/core/compiler/proto_view_factory.ts
@@ -1,54 +1,61 @@
-import {Injectable} from 'angular2/src/di/annotations_impl';
+import {Injectable} from 'angular2/di';
 
 import {List, ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
 import {isPresent, isBlank} from 'angular2/src/facade/lang';
 import {reflector} from 'angular2/src/reflection/reflection';
 
 import {
-    ChangeDetection, DirectiveIndex, BindingRecord, DirectiveRecord,
-    ProtoChangeDetector, DEFAULT, ChangeDetectorDefinition
+  ChangeDetection,
+  DirectiveIndex,
+  BindingRecord,
+  DirectiveRecord,
+  ProtoChangeDetector,
+  DEFAULT,
+  ChangeDetectorDefinition
 } from 'angular2/change_detection';
 
 import * as renderApi from 'angular2/src/render/api';
 import {AppProtoView} from './view';
+import {ElementBinder} from './element_binder';
 import {ProtoElementInjector, DirectiveBinding} from './element_injector';
 
 class BindingRecordsCreator {
-  _directiveRecordsMap;
-  _textNodeIndex:number;
+  _directiveRecordsMap: Map<number, DirectiveRecord>;
+  _textNodeIndex: number;
 
   constructor() {
     this._directiveRecordsMap = MapWrapper.create();
     this._textNodeIndex = 0;
   }
 
-  getBindingRecords(elementBinders:List<renderApi.ElementBinder>,
-      allDirectiveMetadatas:List<renderApi.DirectiveMetadata>
-      ):List<BindingRecord> {
+  getBindingRecords(elementBinders: List<renderApi.ElementBinder>,
+                    allDirectiveMetadatas: List<renderApi.DirectiveMetadata>): List<BindingRecord> {
     var bindings = [];
 
-    for (var boundElementIndex = 0; boundElementIndex < elementBinders.length; boundElementIndex++) {
+    for (var boundElementIndex = 0; boundElementIndex < elementBinders.length;
+         boundElementIndex++) {
       var renderElementBinder = elementBinders[boundElementIndex];
       this._createTextNodeRecords(bindings, renderElementBinder);
       this._createElementPropertyRecords(bindings, boundElementIndex, renderElementBinder);
-      this._createDirectiveRecords(bindings, boundElementIndex,
-          renderElementBinder.directives, allDirectiveMetadatas);
+      this._createDirectiveRecords(bindings, boundElementIndex, renderElementBinder.directives,
+                                   allDirectiveMetadatas);
     }
 
     return bindings;
   }
 
   getDirectiveRecords(
-      elementBinders:List<renderApi.ElementBinder>,
-      allDirectiveMetadatas:List<renderApi.DirectiveMetadata>): List<DirectiveRecord> {
+      elementBinders: List<renderApi.ElementBinder>,
+      allDirectiveMetadatas: List<renderApi.DirectiveMetadata>): List<DirectiveRecord> {
     var directiveRecords = [];
 
     for (var elementIndex = 0; elementIndex < elementBinders.length; ++elementIndex) {
       var dirs = elementBinders[elementIndex].directives;
       for (var dirIndex = 0; dirIndex < dirs.length; ++dirIndex) {
-        ListWrapper.push(directiveRecords,
-            this._getDirectiveRecord(
-                elementIndex, dirIndex, allDirectiveMetadatas[dirs[dirIndex].directiveIndex]));
+        ListWrapper.push(
+            directiveRecords,
+            this._getDirectiveRecord(elementIndex, dirIndex,
+                                     allDirectiveMetadatas[dirs[dirIndex].directiveIndex]));
       }
     }
 
@@ -56,7 +63,7 @@ class BindingRecordsCreator {
   }
 
   _createTextNodeRecords(bindings: List<BindingRecord>,
-      renderElementBinder: renderApi.ElementBinder) {
+                         renderElementBinder: renderApi.ElementBinder) {
     if (isBlank(renderElementBinder.textBindings)) return;
 
     ListWrapper.forEach(renderElementBinder.textBindings, (b) => {
@@ -64,17 +71,17 @@ class BindingRecordsCreator {
     });
   }
 
-  _createElementPropertyRecords(bindings: List<BindingRecord>,
-      boundElementIndex:number, renderElementBinder:renderApi.ElementBinder) {
+  _createElementPropertyRecords(bindings: List<BindingRecord>, boundElementIndex: number,
+                                renderElementBinder: renderApi.ElementBinder) {
     MapWrapper.forEach(renderElementBinder.propertyBindings, (astWithSource, propertyName) => {
-      ListWrapper.push(bindings,
-          BindingRecord.createForElement(astWithSource, boundElementIndex, propertyName));
+      ListWrapper.push(
+          bindings, BindingRecord.createForElement(astWithSource, boundElementIndex, propertyName));
     });
   }
 
-  _createDirectiveRecords(bindings: List<BindingRecord>,
-      boundElementIndex:number, directiveBinders:List<renderApi.DirectiveBinder>,
-      allDirectiveMetadatas:List<renderApi.DirectiveMetadata>) {
+  _createDirectiveRecords(bindings: List<BindingRecord>, boundElementIndex: number,
+                          directiveBinders: List<renderApi.DirectiveBinder>,
+                          allDirectiveMetadatas: List<renderApi.DirectiveMetadata>) {
     for (var i = 0; i < directiveBinders.length; i++) {
       var directiveBinder = directiveBinders[i];
       var directiveMetadata = allDirectiveMetadatas[directiveBinder.directiveIndex];
@@ -85,28 +92,30 @@ class BindingRecordsCreator {
         // it monomorphic!
         var setter = reflector.setter(propertyName);
         var directiveRecord = this._getDirectiveRecord(boundElementIndex, i, directiveMetadata);
-        ListWrapper.push(bindings,
-            BindingRecord.createForDirective(astWithSource, propertyName, setter, directiveRecord));
+        ListWrapper.push(bindings, BindingRecord.createForDirective(astWithSource, propertyName,
+                                                                    setter, directiveRecord));
       });
 
       // host properties
       MapWrapper.forEach(directiveBinder.hostPropertyBindings, (astWithSource, propertyName) => {
         var dirIndex = new DirectiveIndex(boundElementIndex, i);
-        ListWrapper.push(bindings,
-            BindingRecord.createForHostProperty(dirIndex, astWithSource, propertyName));
+        ListWrapper.push(
+            bindings, BindingRecord.createForHostProperty(dirIndex, astWithSource, propertyName));
       });
     }
   }
 
-  _getDirectiveRecord(boundElementIndex:number, directiveIndex:number, directiveMetadata:renderApi.DirectiveMetadata): DirectiveRecord {
+  _getDirectiveRecord(boundElementIndex: number, directiveIndex: number,
+                      directiveMetadata: renderApi.DirectiveMetadata): DirectiveRecord {
     var id = boundElementIndex * 100 + directiveIndex;
 
     if (!MapWrapper.contains(this._directiveRecordsMap, id)) {
       var changeDetection = directiveMetadata.changeDetection;
 
       MapWrapper.set(this._directiveRecordsMap, id,
-        new DirectiveRecord(new DirectiveIndex(boundElementIndex, directiveIndex),
-          directiveMetadata.callOnAllChangesDone, directiveMetadata.callOnChange, changeDetection));
+                     new DirectiveRecord(new DirectiveIndex(boundElementIndex, directiveIndex),
+                                         directiveMetadata.callOnAllChangesDone,
+                                         directiveMetadata.callOnChange, changeDetection));
     }
 
     return MapWrapper.get(this._directiveRecordsMap, id);
@@ -117,30 +126,28 @@ class BindingRecordsCreator {
 export class ProtoViewFactory {
   _changeDetection: ChangeDetection;
 
-  constructor(changeDetection: ChangeDetection) {
-    this._changeDetection = changeDetection;
-  }
+  constructor(changeDetection: ChangeDetection) { this._changeDetection = changeDetection; }
 
-  createAppProtoViews(hostComponentBinding:DirectiveBinding,
-                  rootRenderProtoView: renderApi.ProtoViewDto, allDirectives:List<DirectiveBinding>):List<AppProtoView> {
-    var allRenderDirectiveMetadata = ListWrapper.map(allDirectives, directiveBinding => directiveBinding.metadata);
+  createAppProtoViews(hostComponentBinding: DirectiveBinding,
+                      rootRenderProtoView: renderApi.ProtoViewDto,
+                      allDirectives: List<DirectiveBinding>): List<AppProtoView> {
+    var allRenderDirectiveMetadata =
+        ListWrapper.map(allDirectives, directiveBinding => directiveBinding.metadata);
     var nestedPvsWithIndex = _collectNestedProtoViews(rootRenderProtoView);
     var nestedPvVariableBindings = _collectNestedProtoViewsVariableBindings(nestedPvsWithIndex);
-    var nestedPvVariableNames = _collectNestedProtoViewsVariableNames(nestedPvsWithIndex, nestedPvVariableBindings);
-    var changeDetectorDefs = _getChangeDetectorDefinitions(
-        hostComponentBinding.metadata, nestedPvsWithIndex, nestedPvVariableNames, allRenderDirectiveMetadata
-    );
+    var nestedPvVariableNames =
+        _collectNestedProtoViewsVariableNames(nestedPvsWithIndex, nestedPvVariableBindings);
+    var changeDetectorDefs =
+        _getChangeDetectorDefinitions(hostComponentBinding.metadata, nestedPvsWithIndex,
+                                      nestedPvVariableNames, allRenderDirectiveMetadata);
     var protoChangeDetectors = ListWrapper.map(
-        changeDetectorDefs, changeDetectorDef => this._changeDetection.createProtoChangeDetector(changeDetectorDef)
-    );
+        changeDetectorDefs,
+        changeDetectorDef => this._changeDetection.createProtoChangeDetector(changeDetectorDef));
     var appProtoViews = ListWrapper.createFixedSize(nestedPvsWithIndex.length);
     ListWrapper.forEach(nestedPvsWithIndex, (pvWithIndex) => {
-      var appProtoView = _createAppProtoView(
-        pvWithIndex.renderProtoView,
-        protoChangeDetectors[pvWithIndex.index],
-        nestedPvVariableBindings[pvWithIndex.index],
-        allDirectives
-      );
+      var appProtoView =
+          _createAppProtoView(pvWithIndex.renderProtoView, protoChangeDetectors[pvWithIndex.index],
+                              nestedPvVariableBindings[pvWithIndex.index], allDirectives);
       if (isPresent(pvWithIndex.parentIndex)) {
         var parentView = appProtoViews[pvWithIndex.parentIndex];
         parentView.elementBinders[pvWithIndex.boundElementIndex].nestedProtoView = appProtoView;
@@ -156,34 +163,31 @@ export class ProtoViewFactory {
  * for the given ProtoView and all nested ProtoViews.
  */
 export function getChangeDetectorDefinitions(
-    hostComponentMetadata:renderApi.DirectiveMetadata,
-    rootRenderProtoView: renderApi.ProtoViewDto,
-    allRenderDirectiveMetadata:List<renderApi.DirectiveMetadata>): List<ChangeDetectorDefinition> {
+    hostComponentMetadata: renderApi.DirectiveMetadata, rootRenderProtoView: renderApi.ProtoViewDto,
+    allRenderDirectiveMetadata: List<renderApi.DirectiveMetadata>): List<ChangeDetectorDefinition> {
   var nestedPvsWithIndex = _collectNestedProtoViews(rootRenderProtoView);
   var nestedPvVariableBindings = _collectNestedProtoViewsVariableBindings(nestedPvsWithIndex);
-  var nestedPvVariableNames = _collectNestedProtoViewsVariableNames(nestedPvsWithIndex, nestedPvVariableBindings);
+  var nestedPvVariableNames =
+      _collectNestedProtoViewsVariableNames(nestedPvsWithIndex, nestedPvVariableBindings);
 
-  return _getChangeDetectorDefinitions(
-    hostComponentMetadata,
-    nestedPvsWithIndex,
-    nestedPvVariableNames,
-    allRenderDirectiveMetadata
-  );
+  return _getChangeDetectorDefinitions(hostComponentMetadata, nestedPvsWithIndex,
+                                       nestedPvVariableNames, allRenderDirectiveMetadata);
 }
 
-function _collectNestedProtoViews(renderProtoView:renderApi.ProtoViewDto,
-    parentIndex:number = null,
-    boundElementIndex = null,
-    result:List<RenderProtoViewWithIndex> = null): List<RenderProtoViewWithIndex> {
+function _collectNestedProtoViews(
+    renderProtoView: renderApi.ProtoViewDto, parentIndex: number = null, boundElementIndex = null,
+    result: List<RenderProtoViewWithIndex> = null): List<RenderProtoViewWithIndex> {
   if (isBlank(result)) {
     result = [];
   }
-  ListWrapper.push(result, new RenderProtoViewWithIndex(renderProtoView, result.length, parentIndex, boundElementIndex));
+  ListWrapper.push(result, new RenderProtoViewWithIndex(renderProtoView, result.length, parentIndex,
+                                                        boundElementIndex));
   var currentIndex = result.length - 1;
   var childBoundElementIndex = 0;
   ListWrapper.forEach(renderProtoView.elementBinders, (elementBinder) => {
     if (isPresent(elementBinder.nestedProtoView)) {
-      _collectNestedProtoViews(elementBinder.nestedProtoView, currentIndex, childBoundElementIndex, result);
+      _collectNestedProtoViews(elementBinder.nestedProtoView, currentIndex, childBoundElementIndex,
+                               result);
     }
     childBoundElementIndex++;
   });
@@ -191,15 +195,16 @@ function _collectNestedProtoViews(renderProtoView:renderApi.ProtoViewDto,
 }
 
 function _getChangeDetectorDefinitions(
-    hostComponentMetadata:renderApi.DirectiveMetadata,
-    nestedPvsWithIndex: List<RenderProtoViewWithIndex>,
-    nestedPvVariableNames: List<List<string>>,
-    allRenderDirectiveMetadata:List<renderApi.DirectiveMetadata>):List<ChangeDetectorDefinition> {
+    hostComponentMetadata: renderApi.DirectiveMetadata,
+    nestedPvsWithIndex: List<RenderProtoViewWithIndex>, nestedPvVariableNames: List<List<string>>,
+    allRenderDirectiveMetadata: List<renderApi.DirectiveMetadata>): List<ChangeDetectorDefinition> {
   return ListWrapper.map(nestedPvsWithIndex, (pvWithIndex) => {
     var elementBinders = pvWithIndex.renderProtoView.elementBinders;
     var bindingRecordsCreator = new BindingRecordsCreator();
-    var bindingRecords = bindingRecordsCreator.getBindingRecords(elementBinders, allRenderDirectiveMetadata);
-    var directiveRecords = bindingRecordsCreator.getDirectiveRecords(elementBinders, allRenderDirectiveMetadata);
+    var bindingRecords =
+        bindingRecordsCreator.getBindingRecords(elementBinders, allRenderDirectiveMetadata);
+    var directiveRecords =
+        bindingRecordsCreator.getDirectiveRecords(elementBinders, allRenderDirectiveMetadata);
     var strategyName = DEFAULT;
     var typeString;
     if (pvWithIndex.renderProtoView.type === renderApi.ProtoViewDto.COMPONENT_VIEW_TYPE) {
@@ -212,16 +217,14 @@ function _getChangeDetectorDefinitions(
     }
     var id = `${hostComponentMetadata.id}_${typeString}_${pvWithIndex.index}`;
     var variableNames = nestedPvVariableNames[pvWithIndex.index];
-    return new ChangeDetectorDefinition(id, strategyName, variableNames, bindingRecords, directiveRecords);
+    return new ChangeDetectorDefinition(id, strategyName, variableNames, bindingRecords,
+                                        directiveRecords);
   });
 }
 
 function _createAppProtoView(
-    renderProtoView: renderApi.ProtoViewDto,
-    protoChangeDetector: ProtoChangeDetector,
-    variableBindings: Map<string, string>,
-    allDirectives:List<DirectiveBinding>
-    ):AppProtoView {
+    renderProtoView: renderApi.ProtoViewDto, protoChangeDetector: ProtoChangeDetector,
+    variableBindings: Map<string, string>, allDirectives: List<DirectiveBinding>): AppProtoView {
   var elementBinders = renderProtoView.elementBinders;
   var protoView = new AppProtoView(renderProtoView.render, protoChangeDetector, variableBindings);
 
@@ -233,14 +236,13 @@ function _createAppProtoView(
 }
 
 function _collectNestedProtoViewsVariableBindings(
-    nestedPvsWithIndex: List<RenderProtoViewWithIndex>
-  ):List<Map<string, string>> {
+    nestedPvsWithIndex: List<RenderProtoViewWithIndex>): List<Map<string, string>> {
   return ListWrapper.map(nestedPvsWithIndex, (pvWithIndex) => {
     return _createVariableBindings(pvWithIndex.renderProtoView);
   });
 }
 
-function _createVariableBindings(renderProtoView):Map {
+function _createVariableBindings(renderProtoView): Map<string, string> {
   var variableBindings = MapWrapper.create();
   MapWrapper.forEach(renderProtoView.variableBindings, (mappedName, varName) => {
     MapWrapper.set(variableBindings, varName, mappedName);
@@ -255,48 +257,49 @@ function _createVariableBindings(renderProtoView):Map {
 
 function _collectNestedProtoViewsVariableNames(
     nestedPvsWithIndex: List<RenderProtoViewWithIndex>,
-    nestedPvVariableBindings:List<Map<string, string>>
-  ):List<List<string>> {
+    nestedPvVariableBindings: List<Map<string, string>>): List<List<string>> {
   var nestedPvVariableNames = ListWrapper.createFixedSize(nestedPvsWithIndex.length);
   ListWrapper.forEach(nestedPvsWithIndex, (pvWithIndex) => {
-    var parentVariableNames = isPresent(pvWithIndex.parentIndex) ? nestedPvVariableNames[pvWithIndex.parentIndex] : null;
-    nestedPvVariableNames[pvWithIndex.index] = _createVariableNames(
-      parentVariableNames, nestedPvVariableBindings[pvWithIndex.index]
-    );
+    var parentVariableNames =
+        isPresent(pvWithIndex.parentIndex) ? nestedPvVariableNames[pvWithIndex.parentIndex] : null;
+    nestedPvVariableNames[pvWithIndex.index] =
+        _createVariableNames(parentVariableNames, nestedPvVariableBindings[pvWithIndex.index]);
   });
   return nestedPvVariableNames;
 }
 
-function _createVariableNames(parentVariableNames, variableBindings):List {
+function _createVariableNames(parentVariableNames, variableBindings): List<string> {
   var variableNames = isPresent(parentVariableNames) ? ListWrapper.clone(parentVariableNames) : [];
-  MapWrapper.forEach(variableBindings, (local, v) => {
-    ListWrapper.push(variableNames, local);
-  });
+  MapWrapper.forEach(variableBindings, (local, v) => { ListWrapper.push(variableNames, local); });
   return variableNames;
 }
 
 function _createElementBinders(protoView, elementBinders, allDirectiveBindings) {
-  for (var i=0; i<elementBinders.length; i++) {
+  for (var i = 0; i < elementBinders.length; i++) {
     var renderElementBinder = elementBinders[i];
     var dirs = elementBinders[i].directives;
 
-    var parentPeiWithDistance = _findParentProtoElementInjectorWithDistance(
-        i, protoView.elementBinders, elementBinders);
-    var directiveBindings = ListWrapper.map(dirs, (dir) => allDirectiveBindings[dir.directiveIndex] );
+    var parentPeiWithDistance =
+        _findParentProtoElementInjectorWithDistance(i, protoView.elementBinders, elementBinders);
+    var directiveBindings =
+        ListWrapper.map(dirs, (dir) => allDirectiveBindings[dir.directiveIndex]);
     var componentDirectiveBinding = null;
     if (directiveBindings.length > 0) {
       if (directiveBindings[0].metadata.type === renderApi.DirectiveMetadata.COMPONENT_TYPE) {
         componentDirectiveBinding = directiveBindings[0];
       }
     }
-    var protoElementInjector = _createProtoElementInjector(
-        i, parentPeiWithDistance, renderElementBinder, componentDirectiveBinding, directiveBindings);
+    var protoElementInjector =
+        _createProtoElementInjector(i, parentPeiWithDistance, renderElementBinder,
+                                    componentDirectiveBinding, directiveBindings);
 
-    _createElementBinder(protoView, i, renderElementBinder, protoElementInjector, componentDirectiveBinding);
+    _createElementBinder(protoView, i, renderElementBinder, protoElementInjector,
+                         componentDirectiveBinding);
   }
 }
 
-function _findParentProtoElementInjectorWithDistance(binderIndex, elementBinders, renderElementBinders) {
+function _findParentProtoElementInjectorWithDistance(
+    binderIndex, elementBinders, renderElementBinders): ParentProtoElementInjectorWithDistance {
   var distance = 0;
   do {
     var renderElementBinder = renderElementBinders[binderIndex];
@@ -305,14 +308,16 @@ function _findParentProtoElementInjectorWithDistance(binderIndex, elementBinders
       distance += renderElementBinder.distanceToParent;
       var elementBinder = elementBinders[binderIndex];
       if (isPresent(elementBinder.protoElementInjector)) {
-        return new ParentProtoElementInjectorWithDistance(elementBinder.protoElementInjector, distance);
+        return new ParentProtoElementInjectorWithDistance(elementBinder.protoElementInjector,
+                                                          distance);
       }
     }
   } while (binderIndex !== -1);
   return new ParentProtoElementInjectorWithDistance(null, -1);
 }
 
-function _createProtoElementInjector(binderIndex, parentPeiWithDistance, renderElementBinder, componentDirectiveBinding, directiveBindings) {
+function _createProtoElementInjector(binderIndex, parentPeiWithDistance, renderElementBinder,
+                                     componentDirectiveBinding, directiveBindings) {
   var protoElementInjector = null;
   // Create a protoElementInjector for any element that either has bindings *or* has one
   // or more var- defined. Elements with a var- defined need a their own element injector
@@ -320,10 +325,8 @@ function _createProtoElementInjector(binderIndex, parentPeiWithDistance, renderE
   var hasVariables = MapWrapper.size(renderElementBinder.variableBindings) > 0;
   if (directiveBindings.length > 0 || hasVariables) {
     protoElementInjector = ProtoElementInjector.create(
-        parentPeiWithDistance.protoElementInjector, binderIndex,
-        directiveBindings,
-        isPresent(componentDirectiveBinding), parentPeiWithDistance.distance
-    );
+        parentPeiWithDistance.protoElementInjector, binderIndex, directiveBindings,
+        isPresent(componentDirectiveBinding), parentPeiWithDistance.distance);
     protoElementInjector.attributes = renderElementBinder.readAttributes;
     if (hasVariables) {
       protoElementInjector.exportComponent = isPresent(componentDirectiveBinding);
@@ -339,17 +342,14 @@ function _createProtoElementInjector(binderIndex, parentPeiWithDistance, renderE
   return protoElementInjector;
 }
 
-function _createElementBinder(protoView, boundElementIndex, renderElementBinder, protoElementInjector, componentDirectiveBinding) {
+function _createElementBinder(protoView, boundElementIndex, renderElementBinder,
+                              protoElementInjector, componentDirectiveBinding): ElementBinder {
   var parent = null;
   if (renderElementBinder.parentIndex !== -1) {
     parent = protoView.elementBinders[renderElementBinder.parentIndex];
   }
-  var elBinder = protoView.bindElement(
-    parent,
-    renderElementBinder.distanceToParent,
-    protoElementInjector,
-    componentDirectiveBinding
-  );
+  var elBinder = protoView.bindElement(parent, renderElementBinder.distanceToParent,
+                                       protoElementInjector, componentDirectiveBinding);
   protoView.bindEvent(renderElementBinder.eventBindings, boundElementIndex, -1);
   // variables
   // The view's locals needs to have a full set of variable names at construction time
@@ -362,7 +362,7 @@ function _createElementBinder(protoView, boundElementIndex, renderElementBinder,
   return elBinder;
 }
 
-function _bindDirectiveEvents(protoView, elementBinders:List<renderApi.ElementBinder>) {
+function _bindDirectiveEvents(protoView, elementBinders: List<renderApi.ElementBinder>) {
   for (var boundElementIndex = 0; boundElementIndex < elementBinders.length; ++boundElementIndex) {
     var dirs = elementBinders[boundElementIndex].directives;
     for (var i = 0; i < dirs.length; i++) {
@@ -376,11 +376,12 @@ function _bindDirectiveEvents(protoView, elementBinders:List<renderApi.ElementBi
 
 
 class RenderProtoViewWithIndex {
-  renderProtoView:renderApi.ProtoViewDto;
-  index:number;
-  parentIndex:number;
-  boundElementIndex:number;
-  constructor(renderProtoView:renderApi.ProtoViewDto, index:number, parentIndex:number, boundElementIndex:number) {
+  renderProtoView: renderApi.ProtoViewDto;
+  index: number;
+  parentIndex: number;
+  boundElementIndex: number;
+  constructor(renderProtoView: renderApi.ProtoViewDto, index: number, parentIndex: number,
+              boundElementIndex: number) {
     this.renderProtoView = renderProtoView;
     this.index = index;
     this.parentIndex = parentIndex;
@@ -389,9 +390,9 @@ class RenderProtoViewWithIndex {
 }
 
 class ParentProtoElementInjectorWithDistance {
-  protoElementInjector:ProtoElementInjector;
-  distance:number;
-  constructor(protoElementInjector:ProtoElementInjector, distance:number) {
+  protoElementInjector: ProtoElementInjector;
+  distance: number;
+  constructor(protoElementInjector: ProtoElementInjector, distance: number) {
     this.protoElementInjector = protoElementInjector;
     this.distance = distance;
   }
diff --git a/modules/angular2/src/core/compiler/query_list.js b/modules/angular2/src/core/compiler/query_list.ts
similarity index 73%
rename from modules/angular2/src/core/compiler/query_list.js
rename to modules/angular2/src/core/compiler/query_list.ts
index 1441629da1..181951c1e6 100644
--- a/modules/angular2/src/core/compiler/query_list.js
+++ b/modules/angular2/src/core/compiler/query_list.ts
@@ -6,15 +6,18 @@ import {BaseQueryList} from './base_query_list';
  * 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
+ * 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
+ * NOTE: In the future this class will implement an `Observable` interface. For now it uses a plain
+ * list of observable
  * callbacks.
  *
  * # Example:
  *
- * Assume that `<tabs>` component would like to get a list its children which are `<pane>` components as shown in this
+ * Assume that `<tabs>` component would like to get a list its children which are `<pane>`
+ * components as shown in this
  * example:
  *
  * ```html
@@ -24,15 +27,21 @@ import {BaseQueryList} from './base_query_list';
  * </tabs>
  * ```
  *
- * In the above example the list of `<tabs>` elements needs to get a list of `<pane>` elements so that it could render
+ * In the above example the list of `<tabs>` elements needs to get a list of `<pane>` elements so
+ * that it could render
  * tabs with the correct titles and in the correct order.
  *
- * A possible solution would be for a `<pane>` to inject `<tabs>` component and then register itself with `<tabs>`
- * component's on `hydrate` and deregister on `dehydrate` event. While a reasonable approach, this would only work
- * partialy since `*ng-for` could rearange the list of `<pane>` components which would not be reported to `<tabs>`
- * component and thus the list of `<pane>` componets would be out of sync with respect to the list of `<pane>` elements.
+ * A possible solution would be for a `<pane>` to inject `<tabs>` component and then register itself
+ * with `<tabs>`
+ * component's on `hydrate` and deregister on `dehydrate` event. While a reasonable approach, this
+ * would only work
+ * partialy since `*ng-for` could rearange the list of `<pane>` components which would not be
+ * reported to `<tabs>`
+ * component and thus the list of `<pane>` componets would be out of sync with respect to the list
+ * of `<pane>` elements.
  *
- * A preferred solution is to inject a `QueryList` which is a live list of directives in the component`s light DOM.
+ * A preferred solution is to inject a `QueryList` which is a live list of directives in the
+ * component`s light DOM.
  *
  * ```javascript
  * @Component({
@@ -67,17 +76,11 @@ import {BaseQueryList} from './base_query_list';
  * @exportedAs angular2/view
  */
 export class QueryList extends BaseQueryList {
+  /**
+   */
+  onChange(callback) { return super.onChange(callback); }
 
   /**
    */
-  onChange(callback) {
-    return super.onChange(callback);
-  }
-
-  /**
-   */
-  removeCallback(callback) {
-    return super.removeCallback(callback);
-  }
-
+  removeCallback(callback) { return super.removeCallback(callback); }
 }
diff --git a/modules/angular2/src/core/compiler/template_resolver.js b/modules/angular2/src/core/compiler/template_resolver.ts
similarity index 86%
rename from modules/angular2/src/core/compiler/template_resolver.js
rename to modules/angular2/src/core/compiler/template_resolver.ts
index c7f38faedf..c43e4e56b7 100644
--- a/modules/angular2/src/core/compiler/template_resolver.js
+++ b/modules/angular2/src/core/compiler/template_resolver.ts
@@ -1,4 +1,4 @@
-import {Injectable} from 'angular2/src/di/annotations_impl';
+import {Injectable} from 'angular2/di';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
 import {Type, stringify, isBlank, BaseException} from 'angular2/src/facade/lang';
@@ -9,11 +9,9 @@ import {reflector} from 'angular2/src/reflection/reflection';
 
 @Injectable()
 export class TemplateResolver {
-  _cache: Map;
+  _cache: Map<Type, /*node*/ any>;
 
-  constructor() {
-    this._cache = MapWrapper.create();
-  }
+  constructor() { this._cache = MapWrapper.create(); }
 
   resolve(component: Type): View {
     var view = MapWrapper.get(this._cache, component);
diff --git a/modules/angular2/src/core/compiler/view.js b/modules/angular2/src/core/compiler/view.ts
similarity index 73%
rename from modules/angular2/src/core/compiler/view.js
rename to modules/angular2/src/core/compiler/view.ts
index 73b98984c9..336b66395f 100644
--- a/modules/angular2/src/core/compiler/view.js
+++ b/modules/angular2/src/core/compiler/view.ts
@@ -1,10 +1,24 @@
 import {ListWrapper, MapWrapper, Map, StringMapWrapper, List} from 'angular2/src/facade/collection';
-import {AST, Locals, ChangeDispatcher, ProtoChangeDetector, ChangeDetector,
-  ChangeRecord, BindingRecord, DirectiveRecord, DirectiveIndex, ChangeDetectorRef} from 'angular2/change_detection';
+import {
+  AST,
+  Locals,
+  ChangeDispatcher,
+  ProtoChangeDetector,
+  ChangeDetector,
+  BindingRecord,
+  DirectiveRecord,
+  DirectiveIndex,
+  ChangeDetectorRef
+} from 'angular2/change_detection';
 
-import {ProtoElementInjector, ElementInjector, PreBuiltObjects, DirectiveBinding} from './element_injector';
+import {
+  ProtoElementInjector,
+  ElementInjector,
+  PreBuiltObjects,
+  DirectiveBinding
+} from './element_injector';
 import {ElementBinder} from './element_binder';
-import {IMPLEMENTS, int, isPresent, isBlank, BaseException} from 'angular2/src/facade/lang';
+import {int, isPresent, isBlank, BaseException} from 'angular2/src/facade/lang';
 import * as renderApi from 'angular2/src/render/api';
 import {EventDispatcher} from 'angular2/src/render/api';
 
@@ -21,22 +35,18 @@ export class AppViewContainer {
  * Const of making objects: http://jsperf.com/instantiate-size-of-object
  *
  */
-@IMPLEMENTS(ChangeDispatcher)
-@IMPLEMENTS(EventDispatcher)
-export class AppView {
-  render:renderApi.RenderViewRef;
+export class AppView implements ChangeDispatcher, EventDispatcher {
+  render: renderApi.RenderViewRef;
   /// This list matches the _nodes list. It is sparse, since only Elements have ElementInjector
-  rootElementInjectors:List<ElementInjector>;
-  elementInjectors:List<ElementInjector>;
-  changeDetector:ChangeDetector;
+  rootElementInjectors: List<ElementInjector>;
+  elementInjectors: List<ElementInjector>;
+  changeDetector: ChangeDetector;
   componentChildViews: List<AppView>;
   /// Host views that were added by an imperative view.
   /// This is a dynamically growing / shrinking array.
   freeHostViews: List<AppView>;
   viewContainers: List<AppViewContainer>;
   preBuiltObjects: List<PreBuiltObjects>;
-  proto: AppProtoView;
-  renderer: renderApi.Renderer;
 
   /**
    * The context against which data-binding expressions in this view are evaluated against.
@@ -50,11 +60,11 @@ export class AppView {
    * context). This is used for thing like `<video #player>` or
    * `<li template="for #item of items">`, where "player" and "item" are locals, respectively.
    */
-  locals:Locals;
+  locals: Locals;
 
-  constructor(renderer:renderApi.Renderer, proto:AppProtoView, protoLocals:Map) {
+  constructor(public renderer: renderApi.Renderer, public proto: AppProtoView,
+              protoLocals: Map<string, any>) {
     this.render = null;
-    this.proto = proto;
     this.changeDetector = null;
     this.elementInjectors = null;
     this.rootElementInjectors = null;
@@ -62,13 +72,13 @@ export class AppView {
     this.viewContainers = ListWrapper.createFixedSize(this.proto.elementBinders.length);
     this.preBuiltObjects = null;
     this.context = null;
-    this.locals = new Locals(null, MapWrapper.clone(protoLocals)); //TODO optimize this
-    this.renderer = renderer;
+    this.locals = new Locals(null, MapWrapper.clone(protoLocals));  // TODO optimize this
     this.freeHostViews = [];
   }
 
-  init(changeDetector:ChangeDetector, elementInjectors:List, rootElementInjectors:List,
-      preBuiltObjects:List, componentChildViews:List) {
+  init(changeDetector: ChangeDetector, elementInjectors: List<ElementInjector>,
+       rootElementInjectors: List<ElementInjector>, preBuiltObjects: List<PreBuiltObjects>,
+       componentChildViews: List<AppView>) {
     this.changeDetector = changeDetector;
     this.elementInjectors = elementInjectors;
     this.rootElementInjectors = rootElementInjectors;
@@ -76,7 +86,7 @@ export class AppView {
     this.componentChildViews = componentChildViews;
   }
 
-  setLocal(contextName: string, value):void {
+  setLocal(contextName: string, value): void {
     if (!this.hydrated()) throw new BaseException('Cannot set locals on dehydrated view.');
     if (!MapWrapper.contains(this.proto.variableBindings, contextName)) {
       return;
@@ -85,9 +95,7 @@ export class AppView {
     this.locals.set(templateName, value);
   }
 
-  hydrated():boolean {
-    return isPresent(this.context);
-  }
+  hydrated(): boolean { return isPresent(this.context); }
 
   /**
    * Triggers the event handlers for the element and the directives.
@@ -105,34 +113,32 @@ export class AppView {
   }
 
   // dispatch to element injector or text nodes based on context
-  notifyOnBinding(b:BindingRecord, currentValue:any): void {
+  notifyOnBinding(b: BindingRecord, currentValue: any): void {
     if (b.isElement()) {
-      this.renderer.setElementProperty(
-        this.render, b.elementIndex, b.propertyName, currentValue
-      );
+      this.renderer.setElementProperty(this.render, b.elementIndex, b.propertyName, currentValue);
     } else {
       // we know it refers to _textNodes.
       this.renderer.setText(this.render, b.elementIndex, currentValue);
     }
   }
 
-  getDirectiveFor(directive:DirectiveIndex) {
+  getDirectiveFor(directive: DirectiveIndex) {
     var elementInjector = this.elementInjectors[directive.elementIndex];
     return elementInjector.getDirectiveAtIndex(directive.directiveIndex);
   }
 
-  getDetectorFor(directive:DirectiveIndex) {
+  getDetectorFor(directive: DirectiveIndex) {
     var childView = this.componentChildViews[directive.elementIndex];
     return isPresent(childView) ? childView.changeDetector : null;
   }
 
-  callAction(elementIndex:number, actionExpression:string, action:Object) {
+  callAction(elementIndex: number, actionExpression: string, action: Object) {
     this.renderer.callAction(this.render, elementIndex, actionExpression, action);
   }
 
   // implementation of EventDispatcher#dispatchEvent
   // returns false if preventDefault must be applied to the DOM event
-  dispatchEvent(elementIndex:number, eventName:string, locals:Map<string, any>): boolean {
+  dispatchEvent(elementIndex: number, eventName: string, locals: Map<string, any>): boolean {
     // Most of the time the event will be fired only when the view is in the live document.
     // However, in a rare circumstance the view might get dehydrated, in between the event
     // queuing up and firing.
@@ -163,33 +169,26 @@ export class AppView {
  *
  */
 export class AppProtoView {
-  elementBinders:List<ElementBinder>;
-  protoChangeDetector:ProtoChangeDetector;
-  variableBindings: Map;
-  protoLocals:Map;
-  bindings:List;
-  render:renderApi.RenderProtoViewRef;
+  elementBinders: List<ElementBinder>;
+  protoLocals: Map<string, any>;
 
-  constructor(
-      render:renderApi.RenderProtoViewRef,
-      protoChangeDetector:ProtoChangeDetector,
-      variableBindings:Map) {
-    this.render = render;
+  constructor(public render: renderApi.RenderProtoViewRef,
+              public protoChangeDetector: ProtoChangeDetector,
+              public variableBindings: Map<string, string>) {
     this.elementBinders = [];
-    this.variableBindings = variableBindings;
     this.protoLocals = MapWrapper.create();
     if (isPresent(variableBindings)) {
       MapWrapper.forEach(variableBindings, (templateName, _) => {
         MapWrapper.set(this.protoLocals, templateName, null);
       });
     }
-    this.protoChangeDetector = protoChangeDetector;
   }
 
-  bindElement(parent:ElementBinder, distanceToParent:int, protoElementInjector:ProtoElementInjector,
-      componentDirective:DirectiveBinding = null):ElementBinder {
+  bindElement(parent: ElementBinder, distanceToParent: int,
+              protoElementInjector: ProtoElementInjector,
+              componentDirective: DirectiveBinding = null): ElementBinder {
     var elBinder = new ElementBinder(this.elementBinders.length, parent, distanceToParent,
-        protoElementInjector, componentDirective);
+                                     protoElementInjector, componentDirective);
     ListWrapper.push(this.elementBinders, elBinder);
     return elBinder;
   }
@@ -207,7 +206,8 @@ export class AppProtoView {
    * @param {int} directiveIndex The directive index in the binder or -1 when the event is not bound
    *                             to a directive
    */
-  bindEvent(eventBindings: List<renderApi.EventBinding>, boundElementIndex:number, directiveIndex: int = -1): void {
+  bindEvent(eventBindings: List<renderApi.EventBinding>, boundElementIndex: number,
+            directiveIndex: int = -1): void {
     var elBinder = this.elementBinders[boundElementIndex];
     var events = elBinder.hostListeners;
     if (isBlank(events)) {
diff --git a/modules/angular2/src/core/compiler/view_container_ref.js b/modules/angular2/src/core/compiler/view_container_ref.js
deleted file mode 100644
index 7c57d7441f..0000000000
--- a/modules/angular2/src/core/compiler/view_container_ref.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import {ListWrapper, List} from 'angular2/src/facade/collection';
-import {Injector} from 'angular2/di';
-import {isPresent, isBlank} from 'angular2/src/facade/lang';
-
-import * as avmModule from './view_manager';
-
-import {ElementRef} from './element_ref';
-import {ViewRef, ProtoViewRef, internalView} from './view_ref';
-/**
- * @exportedAs angular2/core
- */
-export class ViewContainerRef {
-  _viewManager: avmModule.AppViewManager;
-  _element: ElementRef;
-
-  constructor(viewManager: avmModule.AppViewManager,
-              element: ElementRef) {
-    this._viewManager = viewManager;
-    this._element = element;
-  }
-
-  _getViews() {
-    var vc = internalView(this._element.parentView).viewContainers[this._element.boundElementIndex];
-    return isPresent(vc) ? vc.views : [];
-  }
-
-  clear():void {
-    for (var i = this.length - 1; i >= 0; i--) {
-      this.remove(i);
-    }
-  }
-
-  get(index: number): ViewRef {
-    return new ViewRef(this._getViews()[index]);
-  }
-
-  get length() /* :int */ {
-    return this._getViews().length;
-  }
-
-  // TODO(rado): profile and decide whether bounds checks should be added
-  // to the methods below.
-  create(protoViewRef:ProtoViewRef = null, atIndex:number=-1, context:ElementRef, injector:Injector = null): ViewRef {
-    if (atIndex == -1) atIndex = this.length;
-    return this._viewManager.createViewInContainer(this._element, atIndex, protoViewRef, context, injector);
-  }
-
-  insert(viewRef:ViewRef, atIndex:number=-1): ViewRef {
-    if (atIndex == -1) atIndex = this.length;
-    return this._viewManager.attachViewInContainer(this._element, atIndex, viewRef);
-  }
-
-  indexOf(viewRef:ViewRef) {
-    return ListWrapper.indexOf(this._getViews(), internalView(viewRef));
-  }
-
-  remove(atIndex:number=-1):void {
-    if (atIndex == -1) atIndex = this.length - 1;
-    this._viewManager.destroyViewInContainer(this._element, atIndex);
-    // view is intentionally not returned to the client.
-  }
-
-  /**
-   * The method can be used together with insert to implement a view move, i.e.
-   * moving the dom nodes while the directives in the view stay intact.
-   */
-  detach(atIndex:number=-1): ViewRef {
-    if (atIndex == -1) atIndex = this.length - 1;
-    return this._viewManager.detachViewInContainer(this._element, atIndex);
-  }
-}
diff --git a/modules/angular2/src/core/compiler/view_container_ref.ts b/modules/angular2/src/core/compiler/view_container_ref.ts
new file mode 100644
index 0000000000..3373656bdc
--- /dev/null
+++ b/modules/angular2/src/core/compiler/view_container_ref.ts
@@ -0,0 +1,61 @@
+import {ListWrapper, List} from 'angular2/src/facade/collection';
+import {Injector} from 'angular2/di';
+import {isPresent, isBlank} from 'angular2/src/facade/lang';
+
+import * as avmModule from './view_manager';
+import * as viewModule from './view';
+
+import {ElementRef} from './element_ref';
+import {ViewRef, ProtoViewRef, internalView} from './view_ref';
+/**
+ * @exportedAs angular2/core
+ */
+export class ViewContainerRef {
+  constructor(public viewManager: avmModule.AppViewManager, public element: ElementRef) {}
+
+  private _getViews(): List<viewModule.AppView> {
+    var vc = internalView(this.element.parentView).viewContainers[this.element.boundElementIndex];
+    return isPresent(vc) ? vc.views : [];
+  }
+
+  clear(): void {
+    for (var i = this.length - 1; i >= 0; i--) {
+      this.remove(i);
+    }
+  }
+
+  get(index: number): ViewRef { return new ViewRef(this._getViews()[index]); }
+
+  get length() /* :int */ { return this._getViews().length; }
+
+  // TODO(rado): profile and decide whether bounds checks should be added
+  // to the methods below.
+  create(protoViewRef: ProtoViewRef = null, atIndex: number = -1, context: ElementRef = null,
+         injector: Injector = null): ViewRef {
+    if (atIndex == -1) atIndex = this.length;
+    return this.viewManager.createViewInContainer(this.element, atIndex, protoViewRef, context,
+                                                  injector);
+  }
+
+  insert(viewRef: ViewRef, atIndex: number = -1): ViewRef {
+    if (atIndex == -1) atIndex = this.length;
+    return this.viewManager.attachViewInContainer(this.element, atIndex, viewRef);
+  }
+
+  indexOf(viewRef: ViewRef) { return ListWrapper.indexOf(this._getViews(), internalView(viewRef)); }
+
+  remove(atIndex: number = -1): void {
+    if (atIndex == -1) atIndex = this.length - 1;
+    this.viewManager.destroyViewInContainer(this.element, atIndex);
+    // view is intentionally not returned to the client.
+  }
+
+  /**
+   * The method can be used together with insert to implement a view move, i.e.
+   * moving the dom nodes while the directives in the view stay intact.
+   */
+  detach(atIndex: number = -1): ViewRef {
+    if (atIndex == -1) atIndex = this.length - 1;
+    return this.viewManager.detachViewInContainer(this.element, atIndex);
+  }
+}
diff --git a/modules/angular2/src/core/compiler/view_manager.js b/modules/angular2/src/core/compiler/view_manager.ts
similarity index 75%
rename from modules/angular2/src/core/compiler/view_manager.js
rename to modules/angular2/src/core/compiler/view_manager.ts
index e04b08b499..f571d4825a 100644
--- a/modules/angular2/src/core/compiler/view_manager.js
+++ b/modules/angular2/src/core/compiler/view_manager.ts
@@ -1,5 +1,4 @@
-import {Injector, Binding} from 'angular2/di';
-import {Injectable} from 'angular2/src/di/annotations_impl';
+import {Injector, Binding, Injectable} from 'angular2/di';
 import {isPresent, isBlank, BaseException} from 'angular2/src/facade/lang';
 import * as viewModule from './view';
 import {ElementRef} from './element_ref';
@@ -16,53 +15,56 @@ import {AppViewPool} from './view_pool';
  */
 @Injectable()
 export class AppViewManager {
-  _viewPool:AppViewPool;
-  _utils:AppViewManagerUtils;
-  _renderer:Renderer;
+  _viewPool: AppViewPool;
+  _utils: AppViewManagerUtils;
+  _renderer: Renderer;
 
-  constructor(viewPool:AppViewPool, utils:AppViewManagerUtils, renderer:Renderer) {
+  constructor(viewPool: AppViewPool, utils: AppViewManagerUtils, renderer: Renderer) {
     this._renderer = renderer;
     this._viewPool = viewPool;
     this._utils = utils;
   }
 
-  getComponentView(hostLocation:ElementRef):ViewRef {
+  getComponentView(hostLocation: ElementRef): ViewRef {
     var hostView = internalView(hostLocation.parentView);
     var boundElementIndex = hostLocation.boundElementIndex;
     return new ViewRef(hostView.componentChildViews[boundElementIndex]);
   }
 
-  getViewContainer(location:ElementRef):ViewContainerRef {
+  getViewContainer(location: ElementRef): ViewContainerRef {
     var hostView = internalView(location.parentView);
     return hostView.elementInjectors[location.boundElementIndex].getViewContainerRef();
   }
 
-  getComponent(hostLocation:ElementRef):any {
+  getComponent(hostLocation: ElementRef): any {
     var hostView = internalView(hostLocation.parentView);
     var boundElementIndex = hostLocation.boundElementIndex;
     return this._utils.getComponentInstance(hostView, boundElementIndex);
   }
 
-  createDynamicComponentView(hostLocation:ElementRef,
-      componentProtoViewRef:ProtoViewRef, componentBinding:Binding, injector:Injector):ViewRef {
+  createDynamicComponentView(hostLocation: ElementRef, componentProtoViewRef: ProtoViewRef,
+                             componentBinding: Binding, injector: Injector): ViewRef {
     var componentProtoView = internalProtoView(componentProtoViewRef);
     var hostView = internalView(hostLocation.parentView);
     var boundElementIndex = hostLocation.boundElementIndex;
     var binder = hostView.proto.elementBinders[boundElementIndex];
     if (!binder.hasDynamicComponent()) {
-      throw new BaseException(`There is no dynamic component directive at element ${boundElementIndex}`)
+      throw new BaseException(
+          `There is no dynamic component directive at element ${boundElementIndex}`)
     }
     var componentView = this._createPooledView(componentProtoView);
     this._renderer.attachComponentView(hostView.render, boundElementIndex, componentView.render);
     this._utils.attachComponentView(hostView, boundElementIndex, componentView);
-    this._utils.hydrateDynamicComponentInElementInjector(hostView, boundElementIndex, componentBinding, injector);
+    this._utils.hydrateDynamicComponentInElementInjector(hostView, boundElementIndex,
+                                                         componentBinding, injector);
     this._utils.hydrateComponentView(hostView, boundElementIndex);
     this._viewHydrateRecurse(componentView);
 
     return new ViewRef(componentView);
   }
 
-  createRootHostView(hostProtoViewRef:ProtoViewRef, overrideSelector:string, injector:Injector):ViewRef {
+  createRootHostView(hostProtoViewRef: ProtoViewRef, overrideSelector: string,
+                     injector: Injector): ViewRef {
     var hostProtoView = internalProtoView(hostProtoViewRef);
     var hostElementSelector = overrideSelector;
     if (isBlank(hostElementSelector)) {
@@ -78,7 +80,7 @@ export class AppViewManager {
     return new ViewRef(hostView);
   }
 
-  destroyRootHostView(hostViewRef:ViewRef) {
+  destroyRootHostView(hostViewRef: ViewRef) {
     // Note: Don't detach the hostView as we want to leave the
     // root element in place. Also don't put the hostView into the view pool
     // as it is depending on the element for which it was created.
@@ -88,24 +90,28 @@ export class AppViewManager {
     this._renderer.destroyView(hostView.render);
   }
 
-  createFreeHostView(parentComponentLocation:ElementRef, hostProtoViewRef:ProtoViewRef, injector:Injector):ViewRef {
+  createFreeHostView(parentComponentLocation: ElementRef, hostProtoViewRef: ProtoViewRef,
+                     injector: Injector): ViewRef {
     var hostProtoView = internalProtoView(hostProtoViewRef);
     var hostView = this._createPooledView(hostProtoView);
     var parentComponentHostView = internalView(parentComponentLocation.parentView);
     var parentComponentBoundElementIndex = parentComponentLocation.boundElementIndex;
-    this._utils.attachAndHydrateFreeHostView(parentComponentHostView, parentComponentBoundElementIndex, hostView, injector);
+    this._utils.attachAndHydrateFreeHostView(parentComponentHostView,
+                                             parentComponentBoundElementIndex, hostView, injector);
     this._viewHydrateRecurse(hostView);
     return new ViewRef(hostView);
   }
 
-  destroyFreeHostView(parentComponentLocation:ElementRef, hostViewRef:ViewRef) {
+  destroyFreeHostView(parentComponentLocation: ElementRef, hostViewRef: ViewRef) {
     var hostView = internalView(hostViewRef);
-    var parentView = internalView(parentComponentLocation.parentView).componentChildViews[parentComponentLocation.boundElementIndex];
+    var parentView = internalView(parentComponentLocation.parentView)
+                         .componentChildViews[parentComponentLocation.boundElementIndex];
     this._destroyFreeHostView(parentView, hostView);
   }
 
-  createViewInContainer(viewContainerLocation:ElementRef,
-      atIndex:number, protoViewRef:ProtoViewRef, context:ElementRef = null, injector:Injector = null):ViewRef {
+  createViewInContainer(viewContainerLocation: ElementRef, atIndex: number,
+                        protoViewRef: ProtoViewRef, context: ElementRef = null,
+                        injector: Injector = null): ViewRef {
     var protoView = internalProtoView(protoViewRef);
     var parentView = internalView(viewContainerLocation.parentView);
     var boundElementIndex = viewContainerLocation.boundElementIndex;
@@ -118,20 +124,24 @@ export class AppViewManager {
 
     var view = this._createPooledView(protoView);
 
-    this._renderer.attachViewInContainer(parentView.render, boundElementIndex, atIndex, view.render);
-    this._utils.attachViewInContainer(parentView, boundElementIndex, contextView, contextBoundElementIndex, atIndex, view);
-    this._utils.hydrateViewInContainer(parentView, boundElementIndex, contextView, contextBoundElementIndex, atIndex, injector);
+    this._renderer.attachViewInContainer(parentView.render, boundElementIndex, atIndex,
+                                         view.render);
+    this._utils.attachViewInContainer(parentView, boundElementIndex, contextView,
+                                      contextBoundElementIndex, atIndex, view);
+    this._utils.hydrateViewInContainer(parentView, boundElementIndex, contextView,
+                                       contextBoundElementIndex, atIndex, injector);
     this._viewHydrateRecurse(view);
     return new ViewRef(view);
   }
 
-  destroyViewInContainer(viewContainerLocation:ElementRef, atIndex:number) {
+  destroyViewInContainer(viewContainerLocation: ElementRef, atIndex: number) {
     var parentView = internalView(viewContainerLocation.parentView);
     var boundElementIndex = viewContainerLocation.boundElementIndex;
     this._destroyViewInContainer(parentView, boundElementIndex, atIndex);
   }
 
-  attachViewInContainer(viewContainerLocation:ElementRef, atIndex:number, viewRef:ViewRef):ViewRef {
+  attachViewInContainer(viewContainerLocation: ElementRef, atIndex: number,
+                        viewRef: ViewRef): ViewRef {
     var view = internalView(viewRef);
     var parentView = internalView(viewContainerLocation.parentView);
     var boundElementIndex = viewContainerLocation.boundElementIndex;
@@ -142,31 +152,34 @@ export class AppViewManager {
     // Right now we are destroying any special
     // context view that might have been used.
     this._utils.attachViewInContainer(parentView, boundElementIndex, null, null, atIndex, view);
-    this._renderer.attachViewInContainer(parentView.render, boundElementIndex, atIndex, view.render);
+    this._renderer.attachViewInContainer(parentView.render, boundElementIndex, atIndex,
+                                         view.render);
     return viewRef;
   }
 
-  detachViewInContainer(viewContainerLocation:ElementRef, atIndex:number):ViewRef {
+  detachViewInContainer(viewContainerLocation: ElementRef, atIndex: number): ViewRef {
     var parentView = internalView(viewContainerLocation.parentView);
     var boundElementIndex = viewContainerLocation.boundElementIndex;
     var viewContainer = parentView.viewContainers[boundElementIndex];
     var view = viewContainer.views[atIndex];
     this._utils.detachViewInContainer(parentView, boundElementIndex, atIndex);
-    this._renderer.detachViewInContainer(parentView.render, boundElementIndex, atIndex, view.render);
+    this._renderer.detachViewInContainer(parentView.render, boundElementIndex, atIndex,
+                                         view.render);
     return new ViewRef(view);
   }
 
-  _createPooledView(protoView:viewModule.AppProtoView):viewModule.AppView {
+  _createPooledView(protoView: viewModule.AppProtoView): viewModule.AppView {
     var view = this._viewPool.getView(protoView);
     if (isBlank(view)) {
-      view = this._utils.createView(protoView, this._renderer.createView(protoView.render), this, this._renderer);
+      view = this._utils.createView(protoView, this._renderer.createView(protoView.render), this,
+                                    this._renderer);
       this._renderer.setEventDispatcher(view.render, view);
       this._createViewRecurse(view);
     }
     return view;
   }
 
-  _createViewRecurse(view:viewModule.AppView) {
+  _createViewRecurse(view: viewModule.AppView) {
     var binders = view.proto.elementBinders;
     for (var binderIdx = 0; binderIdx < binders.length; binderIdx++) {
       var binder = binders[binderIdx];
@@ -178,17 +191,18 @@ export class AppViewManager {
     }
   }
 
-  _destroyPooledView(view:viewModule.AppView) {
+  _destroyPooledView(view: viewModule.AppView) {
     // TODO: if the pool is full, call renderer.destroyView as well!
     this._viewPool.returnView(view);
   }
 
-  _destroyViewInContainer(parentView, boundElementIndex, atIndex:number) {
+  _destroyViewInContainer(parentView, boundElementIndex, atIndex: number) {
     var viewContainer = parentView.viewContainers[boundElementIndex];
     var view = viewContainer.views[atIndex];
     this._viewDehydrateRecurse(view, false);
     this._utils.detachViewInContainer(parentView, boundElementIndex, atIndex);
-    this._renderer.detachViewInContainer(parentView.render, boundElementIndex, atIndex, view.render);
+    this._renderer.detachViewInContainer(parentView.render, boundElementIndex, atIndex,
+                                         view.render);
     this._destroyPooledView(view);
   }
 
@@ -206,22 +220,19 @@ export class AppViewManager {
     this._destroyPooledView(hostView);
   }
 
-  _viewHydrateRecurse(
-      view:viewModule.AppView) {
+  _viewHydrateRecurse(view: viewModule.AppView) {
     this._renderer.hydrateView(view.render);
 
     var binders = view.proto.elementBinders;
     for (var i = 0; i < binders.length; ++i) {
       if (binders[i].hasStaticComponent()) {
         this._utils.hydrateComponentView(view, i);
-        this._viewHydrateRecurse(
-          view.componentChildViews[i]
-        );
+        this._viewHydrateRecurse(view.componentChildViews[i]);
       }
     }
   }
 
-  _viewDehydrateRecurse(view:viewModule.AppView, forceDestroyComponents) {
+  _viewDehydrateRecurse(view: viewModule.AppView, forceDestroyComponents) {
     this._utils.dehydrateView(view);
     this._renderer.dehydrateView(view.render);
     var binders = view.proto.elementBinders;
@@ -243,7 +254,7 @@ export class AppViewManager {
     }
 
     // freeHostViews
-    for (var i = view.freeHostViews.length-1; i>=0; i--) {
+    for (var i = view.freeHostViews.length - 1; i >= 0; i--) {
       var hostView = view.freeHostViews[i];
       this._destroyFreeHostView(view, hostView);
     }
diff --git a/modules/angular2/src/core/compiler/view_manager_utils.js b/modules/angular2/src/core/compiler/view_manager_utils.ts
similarity index 74%
rename from modules/angular2/src/core/compiler/view_manager_utils.js
rename to modules/angular2/src/core/compiler/view_manager_utils.ts
index 2c1860c608..7b6a900459 100644
--- a/modules/angular2/src/core/compiler/view_manager_utils.js
+++ b/modules/angular2/src/core/compiler/view_manager_utils.ts
@@ -1,24 +1,21 @@
-import {Injector, Binding} from 'angular2/di';
-import {Injectable} from 'angular2/src/di/annotations_impl';
+import {Injector, Binding, Injectable} from 'angular2/di';
 import {ListWrapper, MapWrapper, Map, StringMapWrapper, List} from 'angular2/src/facade/collection';
 import * as eli from './element_injector';
 import {isPresent, isBlank, BaseException} from 'angular2/src/facade/lang';
 import * as viewModule from './view';
 import * as avmModule from './view_manager';
 import {Renderer} from 'angular2/src/render/api';
-import {BindingPropagationConfig, Locals} from 'angular2/change_detection';
+import {Locals} from 'angular2/change_detection';
 import {DirectiveResolver} from './directive_resolver';
 import {RenderViewRef} from 'angular2/src/render/api';
 
 @Injectable()
 export class AppViewManagerUtils {
-  _directiveResolver:DirectiveResolver;
+  _directiveResolver: DirectiveResolver;
 
-  constructor(metadataReader:DirectiveResolver) {
-    this._directiveResolver = metadataReader;
-  }
+  constructor(metadataReader: DirectiveResolver) { this._directiveResolver = metadataReader; }
 
-  getComponentInstance(parentView:viewModule.AppView, boundElementIndex:number):any {
+  getComponentInstance(parentView: viewModule.AppView, boundElementIndex: number): any {
     var binder = parentView.proto.elementBinders[boundElementIndex];
     var eli = parentView.elementInjectors[boundElementIndex];
     if (binder.hasDynamicComponent()) {
@@ -28,7 +25,8 @@ export class AppViewManagerUtils {
     }
   }
 
-  createView(protoView:viewModule.AppProtoView, renderView:RenderViewRef, viewManager:avmModule.AppViewManager, renderer:Renderer): viewModule.AppView {
+  createView(protoView: viewModule.AppProtoView, renderView: RenderViewRef,
+             viewManager: avmModule.AppViewManager, renderer: Renderer): viewModule.AppView {
     var view = new viewModule.AppView(renderer, protoView, protoView.protoLocals);
     // TODO(tbosch): pass RenderViewRef as argument to AppView!
     view.render = renderView;
@@ -65,56 +63,56 @@ export class AppViewManagerUtils {
       }
     }
 
-    view.init(changeDetector, elementInjectors, rootElementInjectors,
-      preBuiltObjects, componentChildViews);
+    view.init(changeDetector, elementInjectors, rootElementInjectors, preBuiltObjects,
+              componentChildViews);
 
     return view;
   }
 
-  attachComponentView(hostView:viewModule.AppView, boundElementIndex:number,
-      componentView:viewModule.AppView) {
+  attachComponentView(hostView: viewModule.AppView, boundElementIndex: number,
+                      componentView: viewModule.AppView) {
     var childChangeDetector = componentView.changeDetector;
     hostView.changeDetector.addShadowDomChild(childChangeDetector);
     hostView.componentChildViews[boundElementIndex] = componentView;
   }
 
-  detachComponentView(hostView:viewModule.AppView, boundElementIndex:number) {
+  detachComponentView(hostView: viewModule.AppView, boundElementIndex: number) {
     var componentView = hostView.componentChildViews[boundElementIndex];
     hostView.changeDetector.removeShadowDomChild(componentView.changeDetector);
     hostView.componentChildViews[boundElementIndex] = null;
   }
 
-  hydrateComponentView(hostView:viewModule.AppView, boundElementIndex:number, injector:Injector = null) {
+  hydrateComponentView(hostView: viewModule.AppView, boundElementIndex: number,
+                       injector: Injector = null) {
     var elementInjector = hostView.elementInjectors[boundElementIndex];
     var componentView = hostView.componentChildViews[boundElementIndex];
     var component = this.getComponentInstance(hostView, boundElementIndex);
-    this._hydrateView(
-      componentView, injector, elementInjector, component, null
-    );
+    this._hydrateView(componentView, injector, elementInjector, component, null);
   }
 
-  hydrateRootHostView(hostView:viewModule.AppView, injector:Injector = null) {
+  hydrateRootHostView(hostView: viewModule.AppView, injector: Injector = null) {
     this._hydrateView(hostView, injector, null, new Object(), null);
   }
 
-  attachAndHydrateFreeHostView(parentComponentHostView:viewModule.AppView, parentComponentBoundElementIndex:number,
-      hostView:viewModule.AppView, injector:Injector = null) {
-    var hostElementInjector = parentComponentHostView.elementInjectors[parentComponentBoundElementIndex];
+  attachAndHydrateFreeHostView(parentComponentHostView: viewModule.AppView,
+                               parentComponentBoundElementIndex: number,
+                               hostView: viewModule.AppView, injector: Injector = null) {
+    var hostElementInjector =
+        parentComponentHostView.elementInjectors[parentComponentBoundElementIndex];
     var parentView = parentComponentHostView.componentChildViews[parentComponentBoundElementIndex];
     parentView.changeDetector.addChild(hostView.changeDetector);
     ListWrapper.push(parentView.freeHostViews, hostView);
     this._hydrateView(hostView, injector, hostElementInjector, new Object(), null);
   }
 
-  detachFreeHostView(parentView:viewModule.AppView,
-      hostView:viewModule.AppView) {
+  detachFreeHostView(parentView: viewModule.AppView, hostView: viewModule.AppView) {
     parentView.changeDetector.removeChild(hostView.changeDetector);
     ListWrapper.remove(parentView.freeHostViews, hostView);
   }
 
-  attachViewInContainer(parentView:viewModule.AppView, boundElementIndex:number,
-      contextView:viewModule.AppView, contextBoundElementIndex:number,
-      atIndex:number, view:viewModule.AppView) {
+  attachViewInContainer(parentView: viewModule.AppView, boundElementIndex: number,
+                        contextView: viewModule.AppView, contextBoundElementIndex: number,
+                        atIndex: number, view: viewModule.AppView) {
     if (isBlank(contextView)) {
       contextView = parentView;
       contextBoundElementIndex = boundElementIndex;
@@ -138,7 +136,8 @@ export class AppViewManagerUtils {
     }
   }
 
-  detachViewInContainer(parentView:viewModule.AppView, boundElementIndex:number, atIndex:number) {
+  detachViewInContainer(parentView: viewModule.AppView, boundElementIndex: number,
+                        atIndex: number) {
     var viewContainer = parentView.viewContainers[boundElementIndex];
     var view = viewContainer.views[atIndex];
     view.changeDetector.remove();
@@ -148,9 +147,9 @@ export class AppViewManagerUtils {
     }
   }
 
-  hydrateViewInContainer(parentView:viewModule.AppView, boundElementIndex:number,
-      contextView:viewModule.AppView, contextBoundElementIndex:number,
-      atIndex:number, injector:Injector) {
+  hydrateViewInContainer(parentView: viewModule.AppView, boundElementIndex: number,
+                         contextView: viewModule.AppView, contextBoundElementIndex: number,
+                         atIndex: number, injector: Injector) {
     if (isBlank(contextView)) {
       contextView = parentView;
       contextBoundElementIndex = boundElementIndex;
@@ -161,11 +160,12 @@ export class AppViewManagerUtils {
     this._hydrateView(view, injector, elementInjector, contextView.context, contextView.locals);
   }
 
-  hydrateDynamicComponentInElementInjector(hostView:viewModule.AppView, boundElementIndex:number,
-      componentBinding:Binding, injector:Injector = null) {
+  hydrateDynamicComponentInElementInjector(hostView: viewModule.AppView, boundElementIndex: number,
+                                           componentBinding: Binding, injector: Injector = null) {
     var elementInjector = hostView.elementInjectors[boundElementIndex];
     if (isPresent(elementInjector.getDynamicallyLoadedComponent())) {
-      throw new BaseException(`There already is a dynamic component loaded at element ${boundElementIndex}`);
+      throw new BaseException(
+          `There already is a dynamic component loaded at element ${boundElementIndex}`);
     }
     if (isBlank(injector)) {
       injector = elementInjector.getLightDomAppInjector();
@@ -175,7 +175,8 @@ export class AppViewManagerUtils {
     elementInjector.dynamicallyCreateComponent(componentDirective, injector);
   }
 
-  _hydrateView(view:viewModule.AppView, appInjector:Injector, hostElementInjector:eli.ElementInjector, context: Object, parentLocals:Locals) {
+  _hydrateView(view: viewModule.AppView, appInjector: Injector,
+               hostElementInjector: eli.ElementInjector, context: Object, parentLocals: Locals) {
     if (isBlank(appInjector)) {
       appInjector = hostElementInjector.getShadowDomAppInjector();
     }
@@ -207,7 +208,8 @@ export class AppViewManagerUtils {
     view.changeDetector.hydrate(view.context, view.locals, view);
   }
 
-  _setUpEventEmitters(view:viewModule.AppView, elementInjector:eli.ElementInjector, boundElementIndex:number) {
+  _setUpEventEmitters(view: viewModule.AppView, elementInjector: eli.ElementInjector,
+                      boundElementIndex: number) {
     var emitters = elementInjector.getEventEmitterAccessors();
     for (var directiveIndex = 0; directiveIndex < emitters.length; ++directiveIndex) {
       var directiveEmitters = emitters[directiveIndex];
@@ -220,7 +222,8 @@ export class AppViewManagerUtils {
     }
   }
 
-  _setUpHostActions(view:viewModule.AppView, elementInjector:eli.ElementInjector, boundElementIndex:number) {
+  _setUpHostActions(view: viewModule.AppView, elementInjector: eli.ElementInjector,
+                    boundElementIndex: number) {
     var hostActions = elementInjector.getHostActionAccessors();
     for (var directiveIndex = 0; directiveIndex < hostActions.length; ++directiveIndex) {
       var directiveHostActions = hostActions[directiveIndex];
@@ -233,7 +236,7 @@ export class AppViewManagerUtils {
     }
   }
 
-  dehydrateView(view:viewModule.AppView) {
+  dehydrateView(view: viewModule.AppView) {
     var binders = view.proto.elementBinders;
     for (var i = 0; i < binders.length; ++i) {
       var elementInjector = view.elementInjectors[i];
@@ -247,5 +250,4 @@ export class AppViewManagerUtils {
     view.context = null;
     view.changeDetector.dehydrate();
   }
-
 }
diff --git a/modules/angular2/src/core/compiler/view_pool.js b/modules/angular2/src/core/compiler/view_pool.ts
similarity index 80%
rename from modules/angular2/src/core/compiler/view_pool.js
rename to modules/angular2/src/core/compiler/view_pool.ts
index a6850e90c4..4d1120073b 100644
--- a/modules/angular2/src/core/compiler/view_pool.js
+++ b/modules/angular2/src/core/compiler/view_pool.ts
@@ -1,4 +1,4 @@
-import {Inject} from 'angular2/src/di/annotations_impl';
+import {Inject} from 'angular2/di';
 
 import {ListWrapper, MapWrapper, Map, List} from 'angular2/src/facade/collection';
 import {isPresent, isBlank} from 'angular2/src/facade/lang';
@@ -10,15 +10,15 @@ import * as viewModule from './view';
 export const APP_VIEW_POOL_CAPACITY = 'AppViewPool.viewPoolCapacity';
 
 export class AppViewPool {
-  _poolCapacityPerProtoView:number;
-  _pooledViewsPerProtoView:Map<viewModule.AppProtoView, List<viewModule.AppView>>;
+  _poolCapacityPerProtoView: number;
+  _pooledViewsPerProtoView: Map<viewModule.AppProtoView, List<viewModule.AppView>>;
 
   constructor(@Inject(APP_VIEW_POOL_CAPACITY) poolCapacityPerProtoView) {
     this._poolCapacityPerProtoView = poolCapacityPerProtoView;
     this._pooledViewsPerProtoView = MapWrapper.create();
   }
 
-  getView(protoView:viewModule.AppProtoView):viewModule.AppView {
+  getView(protoView: viewModule.AppProtoView): viewModule.AppView {
     var pooledViews = MapWrapper.get(this._pooledViewsPerProtoView, protoView);
     if (isPresent(pooledViews) && pooledViews.length > 0) {
       return ListWrapper.removeLast(pooledViews);
@@ -26,7 +26,7 @@ export class AppViewPool {
     return null;
   }
 
-  returnView(view:viewModule.AppView) {
+  returnView(view: viewModule.AppView) {
     var protoView = view.proto;
     var pooledViews = MapWrapper.get(this._pooledViewsPerProtoView, protoView);
     if (isBlank(pooledViews)) {
@@ -37,5 +37,4 @@ export class AppViewPool {
       ListWrapper.push(pooledViews, view);
     }
   }
-
 }
diff --git a/modules/angular2/src/core/compiler/view_ref.js b/modules/angular2/src/core/compiler/view_ref.ts
similarity index 50%
rename from modules/angular2/src/core/compiler/view_ref.js
rename to modules/angular2/src/core/compiler/view_ref.ts
index 420526447a..13ffd12149 100644
--- a/modules/angular2/src/core/compiler/view_ref.js
+++ b/modules/angular2/src/core/compiler/view_ref.ts
@@ -3,12 +3,12 @@ import * as viewModule from './view';
 import {RenderViewRef} from 'angular2/src/render/api';
 
 // This is a workaround for privacy in Dart as we don't have library parts
-export function internalView(viewRef:ViewRef):viewModule.AppView {
+export function internalView(viewRef: ViewRef): viewModule.AppView {
   return viewRef._view;
 }
 
 // This is a workaround for privacy in Dart as we don't have library parts
-export function internalProtoView(protoViewRef:ProtoViewRef):viewModule.AppProtoView {
+export function internalProtoView(protoViewRef: ProtoViewRef): viewModule.AppProtoView {
   return isPresent(protoViewRef) ? protoViewRef._protoView : null;
 }
 
@@ -16,28 +16,20 @@ export function internalProtoView(protoViewRef:ProtoViewRef):viewModule.AppProto
  * @exportedAs angular2/view
  */
 export class ViewRef {
-  _view:viewModule.AppView;
+  _view: viewModule.AppView;
 
-  constructor(view:viewModule.AppView) {
-    this._view = view;
-  }
+  constructor(view: viewModule.AppView) { this._view = view; }
 
-  get render():RenderViewRef {
-    return this._view.render;
-  }
+  get render(): RenderViewRef { return this._view.render; }
 
-  setLocal(contextName:string, value:any):void {
-    this._view.setLocal(contextName, value);
-  }
+  setLocal(contextName: string, value: any): void { this._view.setLocal(contextName, value); }
 }
 
 /**
  * @exportedAs angular2/view
  */
 export class ProtoViewRef {
-  _protoView:viewModule.AppProtoView;
+  _protoView: viewModule.AppProtoView;
 
-  constructor(protoView) {
-    this._protoView = protoView;
-  }
+  constructor(protoView) { this._protoView = protoView; }
 }
diff --git a/modules/angular2/src/core/exception_handler.js b/modules/angular2/src/core/exception_handler.ts
similarity index 82%
rename from modules/angular2/src/core/exception_handler.js
rename to modules/angular2/src/core/exception_handler.ts
index 36ef3586e6..d60d914ade 100644
--- a/modules/angular2/src/core/exception_handler.js
+++ b/modules/angular2/src/core/exception_handler.ts
@@ -1,4 +1,4 @@
-import {Injectable} from 'angular2/src/di/annotations_impl';
+import {Injectable} from 'angular2/di';
 import {isPresent, print} from 'angular2/src/facade/lang';
 import {ListWrapper, isListLikeIterable} from 'angular2/src/facade/collection';
 import {DOM} from 'angular2/src/dom/dom_adapter';
@@ -6,7 +6,8 @@ import {DOM} from 'angular2/src/dom/dom_adapter';
 /**
  * Provides a hook for centralized exception handling.
  *
- * The default implementation of `ExceptionHandler` prints error messages to the `Console`. To intercept error handling,
+ * The default implementation of `ExceptionHandler` prints error messages to the `Console`. To
+ * intercept error handling,
  * write a custom exception handler that replaces this default as appropriate for your app.
  *
  * # Example
@@ -35,7 +36,8 @@ import {DOM} from 'angular2/src/dom/dom_adapter';
 @Injectable()
 export class ExceptionHandler {
   call(error, stackTrace = null, reason = null) {
-    var longStackTrace = isListLikeIterable(stackTrace) ? ListWrapper.join(stackTrace, "\n\n") : stackTrace;
+    var longStackTrace =
+        isListLikeIterable(stackTrace) ? ListWrapper.join(stackTrace, "\n\n") : stackTrace;
     var reasonStr = isPresent(reason) ? `\n${reason}` : '';
     DOM.logError(`${error}${reasonStr}\nSTACKTRACE:\n${longStackTrace}`);
   }
diff --git a/modules/angular2/src/core/life_cycle/life_cycle.js b/modules/angular2/src/core/life_cycle/life_cycle.js
deleted file mode 100644
index 940cbef79b..0000000000
--- a/modules/angular2/src/core/life_cycle/life_cycle.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import {Injectable} from 'angular2/src/di/annotations_impl';
-import {ChangeDetector} from 'angular2/change_detection';
-import {NgZone} from 'angular2/src/core/zone/ng_zone';
-import {ExceptionHandler} from 'angular2/src/core/exception_handler';
-import {isPresent} from 'angular2/src/facade/lang';
-
-/**
- * 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();
- * });
- * ```
- * @exportedAs angular2/change_detection
- */
-@Injectable()
-export class LifeCycle {
-  _errorHandler;
-  _changeDetector:ChangeDetector;
-  _enforceNoNewChanges:boolean;
-
-  constructor(exceptionHandler:ExceptionHandler, changeDetector:ChangeDetector = null, enforceNoNewChanges:boolean = false) {
-    this._errorHandler = (exception, stackTrace) => {
-      exceptionHandler.call(exception, stackTrace);
-      throw exception;
-    };
-    this._changeDetector = changeDetector; // may be null when instantiated from application bootstrap
-    this._enforceNoNewChanges = enforceNoNewChanges;
-  }
-
-  /**
-   * @private
-   */
-  registerWith(zone:NgZone, changeDetector:ChangeDetector = null) {
-    if (isPresent(changeDetector)) {
-      this._changeDetector=changeDetector;
-    }
-
-    zone.initCallbacks({
-      onErrorHandler: this._errorHandler,
-      onTurnDone: () => this.tick()
-    });
-  }
-
-  /**
-   *  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() {
-    this._changeDetector.detectChanges();
-    if (this._enforceNoNewChanges) {
-      this._changeDetector.checkNoChanges();
-    }
-  }
-}
diff --git a/modules/angular2/src/core/life_cycle/life_cycle.ts b/modules/angular2/src/core/life_cycle/life_cycle.ts
new file mode 100644
index 0000000000..35d3568b86
--- /dev/null
+++ b/modules/angular2/src/core/life_cycle/life_cycle.ts
@@ -0,0 +1,81 @@
+import {Injectable} from 'angular2/di';
+import {ChangeDetector} from 'angular2/change_detection';
+import {NgZone} from 'angular2/src/core/zone/ng_zone';
+import {ExceptionHandler} from 'angular2/src/core/exception_handler';
+import {isPresent} from 'angular2/src/facade/lang';
+
+/**
+ * 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();
+ * });
+ * ```
+ * @exportedAs angular2/change_detection
+ */
+@Injectable()
+export class LifeCycle {
+  _errorHandler;
+  _changeDetector: ChangeDetector;
+  _enforceNoNewChanges: boolean;
+
+  constructor(exceptionHandler: ExceptionHandler, changeDetector: ChangeDetector = null,
+              enforceNoNewChanges: boolean = false) {
+    this._errorHandler = (exception, stackTrace) => { exceptionHandler.call(exception, stackTrace);
+    throw exception;
+  };
+  this._changeDetector =
+      changeDetector;  // may be null when instantiated from application bootstrap
+  this._enforceNoNewChanges = enforceNoNewChanges;
+}
+
+/**
+ * @private
+ */
+registerWith(zone: NgZone, changeDetector: ChangeDetector = null) {
+  if (isPresent(changeDetector)) {
+    this._changeDetector = changeDetector;
+  }
+
+  zone.initCallbacks({onErrorHandler: this._errorHandler, onTurnDone: () => this.tick()});
+}
+
+/**
+ *  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() {
+  this._changeDetector.detectChanges();
+  if (this._enforceNoNewChanges) {
+    this._changeDetector.checkNoChanges();
+  }
+}
+}
diff --git a/modules/angular2/src/core/testability/get_testability.es6 b/modules/angular2/src/core/testability/get_testability.ts
similarity index 78%
rename from modules/angular2/src/core/testability/get_testability.es6
rename to modules/angular2/src/core/testability/get_testability.ts
index 06a5ba2f96..58d4fd2c37 100644
--- a/modules/angular2/src/core/testability/get_testability.es6
+++ b/modules/angular2/src/core/testability/get_testability.ts
@@ -2,15 +2,11 @@ import {TestabilityRegistry, Testability} from 'angular2/src/core/testability/te
 import {global} from 'angular2/src/facade/lang';
 
 class PublicTestability {
-  _testabililty: Testability;
+  _testability: Testability;
 
-  constructor(testability: Testability) {
-    this._testability = testability;
-  }
+  constructor(testability: Testability) { this._testability = testability; }
 
-  whenStable(callback: Function) {
-    this._testability.whenStable(callback);
-  }
+  whenStable(callback: Function) { this._testability.whenStable(callback); }
 
   findBindings(using, binding: string, exactMatch: boolean) {
     return this._testability.findBindings(using, binding, exactMatch);
diff --git a/modules/angular2/src/core/testability/testability.js b/modules/angular2/src/core/testability/testability.ts
similarity index 86%
rename from modules/angular2/src/core/testability/testability.js
rename to modules/angular2/src/core/testability/testability.ts
index d919feac40..e054c54bfc 100644
--- a/modules/angular2/src/core/testability/testability.js
+++ b/modules/angular2/src/core/testability/testability.ts
@@ -1,8 +1,8 @@
-import {Injectable} from 'angular2/src/di/annotations_impl';
+import {Injectable} from 'angular2/di';
 import {DOM} from 'angular2/src/dom/dom_adapter';
 import {Map, MapWrapper, List, ListWrapper} from 'angular2/src/facade/collection';
 import {StringWrapper, isBlank, BaseException} from 'angular2/src/facade/lang';
-import * as getTestabilityModule from 'angular2/src/core/testability/get_testability';
+import * as getTestabilityModule from './get_testability';
 
 
 /**
@@ -13,7 +13,7 @@ import * as getTestabilityModule from 'angular2/src/core/testability/get_testabi
 @Injectable()
 export class Testability {
   _pendingCount: number;
-  _callbacks: List;
+  _callbacks: List<Function>;
 
   constructor() {
     this._pendingCount = 0;
@@ -45,11 +45,9 @@ export class Testability {
     // TODO(juliemr) - hook into the zone api.
   }
 
-  getPendingCount(): number {
-    return this._pendingCount;
-  }
+  getPendingCount(): number { return this._pendingCount; }
 
-  findBindings(using, binding: string, exactMatch: boolean): List {
+  findBindings(using, binding: string, exactMatch: boolean): List<any> {
     // TODO(juliemr): implement.
     return [];
   }
@@ -57,7 +55,7 @@ export class Testability {
 
 @Injectable()
 export class TestabilityRegistry {
-  _applications: Map;
+  _applications: Map<any, Testability>;
 
   constructor() {
     this._applications = MapWrapper.create();
@@ -69,7 +67,7 @@ export class TestabilityRegistry {
     MapWrapper.set(this._applications, token, testability);
   }
 
-  findTestabilityInTree(elem) : Testability {
+  findTestabilityInTree(elem): Testability {
     if (elem == null) {
       return null;
     }
diff --git a/modules/angular2/src/core/zone/ng_zone.ts b/modules/angular2/src/core/zone/ng_zone.ts
index 9b835f2902..5c4ace24e7 100644
--- a/modules/angular2/src/core/zone/ng_zone.ts
+++ b/modules/angular2/src/core/zone/ng_zone.ts
@@ -75,9 +75,9 @@ export class NgZone {
    * micro task
    */
   initCallbacks({onTurnStart, onTurnDone, onErrorHandler}: {
-    onTurnStart?: () => void,
-    onTurnDone?: () => void,
-    onErrorHandler?: (error, stack) => void
+    onTurnStart?: /*() => void*/ Function,
+    onTurnDone?: /*() => void*/ Function,
+    onErrorHandler?: /*(error, stack) => void*/ Function
   } = {}) {
     this._onTurnStart = normalizeBlank(onTurnStart);
     this._onTurnDone = normalizeBlank(onTurnDone);
diff --git a/modules/angular2/src/di/injector.ts b/modules/angular2/src/di/injector.ts
index 1bbf49392f..49d6db8cc8 100644
--- a/modules/angular2/src/di/injector.ts
+++ b/modules/angular2/src/di/injector.ts
@@ -67,7 +67,7 @@ function _isWaiting(obj): boolean {
  * @exportedAs angular2/di
  */
 export class Injector {
-  private _bindings: List<any>;
+  private _bindings: List<ResolvedBinding>;
   private _instances: List<any>;
   private _parent: Injector;
   private _defaultBindings: boolean;
@@ -90,7 +90,7 @@ export class Injector {
    *such as
    * `fromResolvedBindings` and `createChildFromResolved`.
    */
-  static resolve(bindings: List<any>): List<ResolvedBinding> {
+  static resolve(bindings: List<Type | Binding | List<any>>): List<ResolvedBinding> {
     var resolvedBindings = resolveBindings(bindings);
     var flatten = _flattenBindings(resolvedBindings, MapWrapper.create());
     return _createListOfBindings(flatten);
@@ -109,7 +109,8 @@ export class Injector {
    * bindings.
    * @param `defaultBindings` Setting to true will auto-create bindings.
    */
-  static resolveAndCreate(bindings: List<any>, {defaultBindings = false}: any = {}): Injector {
+  static resolveAndCreate(bindings: List<Type | Binding | List<any>>,
+                          {defaultBindings = false}: any = {}): Injector {
     return new Injector(Injector.resolve(bindings), null, defaultBindings);
   }
 
@@ -184,7 +185,7 @@ export class Injector {
    * recursive list of more bindings.
    *
    */
-  resolveAndCreateChild(bindings: List<any>): Injector {
+  resolveAndCreateChild(bindings: List<Type | Binding | List<any>>): Injector {
     return new Injector(Injector.resolve(bindings), this, false);
   }
 
@@ -368,7 +369,7 @@ class _AsyncInjectorStrategy {
   }
 }
 
-export function resolveBindings(bindings: List<any>): List<ResolvedBinding> {
+export function resolveBindings(bindings: List<Type | Binding | List<any>>): List<ResolvedBinding> {
   var resolvedList = ListWrapper.createFixedSize(bindings.length);
   for (var i = 0; i < bindings.length; i++) {
     var unresolved = resolveForwardRef(bindings[i]);
@@ -398,13 +399,14 @@ function flattenBindings(bindings: List<ResolvedBinding>): List<ResolvedBinding>
   return res;
 }
 
-function _createListOfBindings(flattenedBindings): List<any> {
+function _createListOfBindings(
+    flattenedBindings: Map<number, ResolvedBinding>): List<ResolvedBinding> {
   var bindings = ListWrapper.createFixedSize(Key.numberOfKeys + 1);
   MapWrapper.forEach(flattenedBindings, (v, keyId) => bindings[keyId] = v);
   return bindings;
 }
 
-function _flattenBindings(bindings: List<ResolvedBinding /* | List<any>*/>,
+function _flattenBindings(bindings: List<ResolvedBinding | List<any>>,
                           res: Map<number, ResolvedBinding>): Map<number, ResolvedBinding> {
   ListWrapper.forEach(bindings, function(b) {
     if (b instanceof ResolvedBinding) {
diff --git a/modules/angular2/src/dom/dom_adapter.ts b/modules/angular2/src/dom/dom_adapter.ts
index 4d203e46f4..2b134f7a2f 100644
--- a/modules/angular2/src/dom/dom_adapter.ts
+++ b/modules/angular2/src/dom/dom_adapter.ts
@@ -22,7 +22,7 @@ export class DomAdapter {
    * Maps attribute names to their corresponding property names for cases
    * where attribute name doesn't match property name.
    */
-  get attrToPropMap(): any { throw _abstract(); }
+  get attrToPropMap(): StringMap<string, string> { throw _abstract(); }
 
   parse(templateHtml: string) { throw _abstract(); }
   query(selector: string): any { throw _abstract(); }
diff --git a/modules/angular2/src/facade/collection.ts b/modules/angular2/src/facade/collection.ts
index 90264f0b69..a574016919 100644
--- a/modules/angular2/src/facade/collection.ts
+++ b/modules/angular2/src/facade/collection.ts
@@ -37,47 +37,49 @@ export class MapWrapper {
     return result;
   }
   static createFromPairs(pairs: List<any>): Map<any, any> { return createMapFromPairs(pairs); }
-  static get(m, k) { return m.get(k); }
-  static set(m, k, v) { m.set(k, v); }
-  static contains(m, k) { return m.has(k); }
-  static forEach(m, fn) { m.forEach(fn); }
-  static size(m) { return m.size; }
-  static delete (m, k) { m.delete(k); }
-  static clear(m) { m.clear(); }
-  static clearValues(m) {
+  static get<K, V>(m: Map<K, V>, k: K): V { return m.get(k); }
+  static set<K, V>(m: Map<K, V>, k: K, v: V) { m.set(k, v); }
+  static contains<K>(m: Map<K, any>, k: K) { return m.has(k); }
+  static forEach<K, V>(m: Map<K, V>, fn: /*(V, K) => void*/ Function) { m.forEach(<any>fn); }
+  static size(m: Map<any, any>) { return m.size; }
+  static delete<K>(m: Map<K, any>, k: K) { m.delete(k); }
+  static clear(m: Map<any, any>) { m.clear(); }
+  static clearValues(m: Map<any, any>) {
     var keyIterator = m.keys();
     var k;
-    while (!((k = keyIterator.next()).done)) {
+    while (!((k = (<any>keyIterator).next()).done)) {
       m.set(k.value, null);
     }
   }
   static iterable(m) { return m; }
-  static keys(m) { return m.keys(); }
-  static values(m) { return m.values(); }
+  static keys<K>(m: Map<K, any>): List<K> { return m.keys(); }
+  static values<V>(m: Map<any, V>): List<V> { return m.values(); }
 }
 
 /**
  * Wraps Javascript Objects
  */
 export class StringMapWrapper {
-  static create(): Object {
+  static create(): StringMap<any, any> {
     // Note: We are not using Object.create(null) here due to
     // performance!
     // http://jsperf.com/ng2-object-create-null
     return {};
   }
-  static contains(map, key) { return map.hasOwnProperty(key); }
-  static get(map, key) { return map.hasOwnProperty(key) ? map[key] : undefined; }
-  static set(map, key, value) { map[key] = value; }
-  static keys(map) { return Object.keys(map); }
-  static isEmpty(map) {
+  static contains(map: StringMap<string, any>, key: string) { return map.hasOwnProperty(key); }
+  static get<V>(map: StringMap<string, V>, key: string): V {
+    return map.hasOwnProperty(key) ? map[key] : undefined;
+  }
+  static set<V>(map: StringMap<string, V>, key: string, value: V) { map[key] = value; }
+  static keys(map: StringMap<string, any>): List<string> { return Object.keys(map); }
+  static isEmpty(map: StringMap<string, any>) {
     for (var prop in map) {
       return false;
     }
     return true;
   }
-  static delete (map, key) { delete map[key]; }
-  static forEach(map, callback) {
+  static delete (map: StringMap<string, any>, key: string) { delete map[key]; }
+  static forEach<K, V>(map: StringMap<string, V>, callback: /*(V, K) => void*/ Function) {
     for (var prop in map) {
       if (map.hasOwnProperty(prop)) {
         callback(map[prop], prop);
@@ -85,7 +87,7 @@ export class StringMapWrapper {
     }
   }
 
-  static merge(m1, m2) {
+  static merge<V>(m1: StringMap<string, V>, m2: StringMap<string, V>): StringMap<string, V> {
     var m = {};
 
     for (var attr in m1) {
@@ -103,7 +105,7 @@ export class StringMapWrapper {
     return m;
   }
 
-  static equals(m1, m2) {
+  static equals<V>(m1: StringMap<string, V>, m2: StringMap<string, V>): boolean {
     var k1 = Object.keys(m1);
     var k2 = Object.keys(m2);
     if (k1.length != k2.length) {
diff --git a/modules/angular2/src/facade/lang.ts b/modules/angular2/src/facade/lang.ts
index a9d868855f..56e8f9926f 100644
--- a/modules/angular2/src/facade/lang.ts
+++ b/modules/angular2/src/facade/lang.ts
@@ -2,7 +2,7 @@ var _global = typeof window === 'undefined' ? global : window;
 export {_global as global};
 
 export var Type = Function;
-export type Type = typeof Function;
+export type Type = new (... args: any[]) => any;
 
 export class BaseException extends Error {
   message;
diff --git a/modules/angular2/src/render/dom/compiler/directive_parser.ts b/modules/angular2/src/render/dom/compiler/directive_parser.ts
index 507a263852..ad12ac4fc8 100644
--- a/modules/angular2/src/render/dom/compiler/directive_parser.ts
+++ b/modules/angular2/src/render/dom/compiler/directive_parser.ts
@@ -18,12 +18,15 @@ import {CompileControl} from './compile_control';
 
 import {DirectiveMetadata} from '../../api';
 import {dashCaseToCamelCase, camelCaseToDashCase, EVENT_TARGET_SEPARATOR} from '../util';
+import {
+  DirectiveBuilder
+} from '../view/proto_view_builder'
 
-/**
- * Parses the directives on a single element. Assumes ViewSplitter has already created
- * <template> elements for template directives.
- */
-export class DirectiveParser implements CompileStep {
+    /**
+     * Parses the directives on a single element. Assumes ViewSplitter has already created
+     * <template> elements for template directives.
+     */
+    export class DirectiveParser implements CompileStep {
   _selectorMatcher: SelectorMatcher;
   _directives: List<DirectiveMetadata>;
   _parser: Parser;
@@ -118,7 +121,8 @@ export class DirectiveParser implements CompileStep {
     });
   }
 
-  _bindDirectiveProperty(dirProperty, bindConfig, compileElement, directiveBinderBuilder) {
+  _bindDirectiveProperty(dirProperty: string, bindConfig: string, compileElement: CompileElement,
+                         directiveBinderBuilder: DirectiveBuilder) {
     var pipes = this._splitBindConfig(bindConfig);
     var elProp = ListWrapper.removeAt(pipes, 0);
 
diff --git a/modules/angular2/src/render/dom/compiler/selector.ts b/modules/angular2/src/render/dom/compiler/selector.ts
index 31f92a9735..d639d33745 100644
--- a/modules/angular2/src/render/dom/compiler/selector.ts
+++ b/modules/angular2/src/render/dom/compiler/selector.ts
@@ -140,12 +140,12 @@ export class SelectorMatcher {
     return notMatcher;
   }
 
-  private _elementMap: Map<string, string>;
-  private _elementPartialMap: Map<string, string>;
-  private _classMap: Map<string, string>;
-  private _classPartialMap: Map<string, string>;
-  private _attrValueMap: Map<string, string>;
-  private _attrValuePartialMap: Map<string, string>;
+  private _elementMap: Map<string, List<string>>;
+  private _elementPartialMap: Map<string, SelectorMatcher>;
+  private _classMap: Map<string, List<string>>;
+  private _classPartialMap: Map<string, SelectorMatcher>;
+  private _attrValueMap: Map<string, Map<string, List<string>>>;
+  private _attrValuePartialMap: Map<string, Map<string, SelectorMatcher>>;
   private _listContexts: List<SelectorListContext>;
 
   constructor() {
@@ -212,22 +212,28 @@ export class SelectorMatcher {
         var isTerminal = index === attrs.length - 2;
         var attrName = attrs[index++];
         var attrValue = attrs[index++];
-        var map = isTerminal ? matcher._attrValueMap : matcher._attrValuePartialMap;
-        var valuesMap = MapWrapper.get(map, attrName);
-        if (isBlank(valuesMap)) {
-          valuesMap = MapWrapper.create();
-          MapWrapper.set(map, attrName, valuesMap);
-        }
         if (isTerminal) {
-          this._addTerminal(valuesMap, attrValue, selectable);
+          var terminalMap = matcher._attrValueMap;
+          var terminalValuesMap = MapWrapper.get(terminalMap, attrName);
+          if (isBlank(terminalValuesMap)) {
+            terminalValuesMap = MapWrapper.create();
+            MapWrapper.set(terminalMap, attrName, terminalValuesMap);
+          }
+          this._addTerminal(terminalValuesMap, attrValue, selectable);
         } else {
-          matcher = this._addPartial(valuesMap, attrValue);
+          var parttialMap = matcher._attrValuePartialMap;
+          var partialValuesMap = MapWrapper.get(parttialMap, attrName);
+          if (isBlank(partialValuesMap)) {
+            partialValuesMap = MapWrapper.create();
+            MapWrapper.set(parttialMap, attrName, partialValuesMap);
+          }
+          matcher = this._addPartial(partialValuesMap, attrValue);
         }
       }
     }
   }
 
-  private _addTerminal(map: Map<string, string>, name: string, selectable: SelectorContext) {
+  private _addTerminal(map: Map<string, List<string>>, name: string, selectable: SelectorContext) {
     var terminalList = MapWrapper.get(map, name);
     if (isBlank(terminalList)) {
       terminalList = ListWrapper.create();
@@ -236,7 +242,7 @@ export class SelectorMatcher {
     ListWrapper.push(terminalList, selectable);
   }
 
-  private _addPartial(map: Map<string, string>, name: string) {
+  private _addPartial(map: Map<string, SelectorMatcher>, name: string): SelectorMatcher {
     var matcher = MapWrapper.get(map, name);
     if (isBlank(matcher)) {
       matcher = new SelectorMatcher();
@@ -282,22 +288,24 @@ export class SelectorMatcher {
         var attrName = attrs[index++];
         var attrValue = attrs[index++];
 
-        var valuesMap = MapWrapper.get(this._attrValueMap, attrName);
+        var terminalValuesMap = MapWrapper.get(this._attrValueMap, attrName);
         if (!StringWrapper.equals(attrValue, _EMPTY_ATTR_VALUE)) {
-          result =
-              this._matchTerminal(valuesMap, _EMPTY_ATTR_VALUE, cssSelector, matchedCallback) ||
-              result;
+          result = this._matchTerminal(terminalValuesMap, _EMPTY_ATTR_VALUE, cssSelector,
+                                       matchedCallback) ||
+                   result;
         }
-        result = this._matchTerminal(valuesMap, attrValue, cssSelector, matchedCallback) || result;
+        result = this._matchTerminal(terminalValuesMap, attrValue, cssSelector, matchedCallback) ||
+                 result;
 
-        valuesMap = MapWrapper.get(this._attrValuePartialMap, attrName);
-        result = this._matchPartial(valuesMap, attrValue, cssSelector, matchedCallback) || result;
+        var partialValuesMap = MapWrapper.get(this._attrValuePartialMap, attrName);
+        result =
+            this._matchPartial(partialValuesMap, attrValue, cssSelector, matchedCallback) || result;
       }
     }
     return result;
   }
 
-  _matchTerminal(map: Map<string, string>, name, cssSelector: CssSelector,
+  _matchTerminal(map: Map<string, List<string>>, name, cssSelector: CssSelector,
                  matchedCallback /*: (CssSelector, any) => void*/): boolean {
     if (isBlank(map) || isBlank(name)) {
       return false;
@@ -320,7 +328,7 @@ export class SelectorMatcher {
     return result;
   }
 
-  _matchPartial(map: Map<string, string>, name, cssSelector: CssSelector,
+  _matchPartial(map: Map<string, SelectorMatcher>, name, cssSelector: CssSelector,
                 matchedCallback /*: (CssSelector, any) => void*/): boolean {
     if (isBlank(map) || isBlank(name)) {
       return false;
diff --git a/modules/angular2/src/render/dom/events/key_events.ts b/modules/angular2/src/render/dom/events/key_events.ts
index 003f9971ab..ec11038a82 100644
--- a/modules/angular2/src/render/dom/events/key_events.ts
+++ b/modules/angular2/src/render/dom/events/key_events.ts
@@ -11,7 +11,7 @@ import {StringMapWrapper, ListWrapper} from 'angular2/src/facade/collection';
 import {EventManagerPlugin} from './event_manager';
 
 var modifierKeys = ['alt', 'control', 'meta', 'shift'];
-var modifierKeyGetters =
+var modifierKeyGetters: StringMap<string, Function> =
     {
       'alt': (event) => event.altKey,
       'control': (event) => event.ctrlKey,
diff --git a/modules/angular2/src/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy.ts b/modules/angular2/src/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy.ts
index d27bb85228..155b705be5 100644
--- a/modules/angular2/src/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy.ts
+++ b/modules/angular2/src/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy.ts
@@ -40,14 +40,15 @@ export class EmulatedScopedShadowDomStrategy extends EmulatedUnscopedShadowDomSt
     cssText = this.styleUrlResolver.resolveUrls(cssText, templateUrl);
     var inlinedCss = this.styleInliner.inlineImports(cssText, templateUrl);
 
-    if (isPresent(inlinedCss.asyncResult)) {
+    if (PromiseWrapper.isPromise(inlinedCss)) {
       DOM.setText(styleEl, '');
-      return inlinedCss.asyncResult.then((css) => {
-        css = shimCssForComponent(css, hostComponentId);
-        DOM.setText(styleEl, css);
-      });
+      return (<Promise<string>>inlinedCss)
+          .then((css) => {
+            css = shimCssForComponent(css, hostComponentId);
+            DOM.setText(styleEl, css);
+          });
     } else {
-      var css = shimCssForComponent(inlinedCss.syncResult, hostComponentId);
+      var css = shimCssForComponent(<string>inlinedCss, hostComponentId);
       DOM.setText(styleEl, css);
       DOM.remove(styleEl);
       insertStyleElement(this.styleHost, styleEl);
diff --git a/modules/angular2/src/render/dom/shadow_dom/style_inliner.ts b/modules/angular2/src/render/dom/shadow_dom/style_inliner.ts
index 19470b5072..fdf0b16193 100644
--- a/modules/angular2/src/render/dom/shadow_dom/style_inliner.ts
+++ b/modules/angular2/src/render/dom/shadow_dom/style_inliner.ts
@@ -18,10 +18,6 @@ import {
   PromiseWrapper,
 } from 'angular2/src/facade/async';
 
-export class SyncAsyncResult<T> {
-  constructor(public syncResult: T, public asyncResult: Promise<T>) {}
-}
-
 /**
  * Inline @import rules in the given CSS.
  *
@@ -48,18 +44,18 @@ export class StyleInliner {
    * @param {string} baseUrl
    * @returns {*} a Promise<string> when @import rules are present, a string otherwise
    */
-  inlineImports(cssText: string, baseUrl: string): SyncAsyncResult<string> {
+  inlineImports(cssText: string, baseUrl: string): Promise<string>| string {
     return this._inlineImports(cssText, baseUrl, []);
   }
 
-  _inlineImports(cssText: string, baseUrl: string,
-                 inlinedUrls: List<string>): SyncAsyncResult<string> {
+  _inlineImports(cssText: string, baseUrl: string, inlinedUrls: List<string>): Promise<string>|
+      string {
     var partIndex = 0;
     var parts = StringWrapper.split(cssText, _importRe);
 
     if (parts.length === 1) {
       // no @import rule found, return the original css
-      return new SyncAsyncResult(cssText, null);
+      return cssText;
     }
 
     var promises = [];
@@ -87,14 +83,14 @@ export class StyleInliner {
         promise = PromiseWrapper.then(this._xhr.get(url), (rawCss) => {
           // resolve nested @import rules
           var inlinedCss = this._inlineImports(rawCss, url, inlinedUrls);
-          if (isPresent(inlinedCss.asyncResult)) {
+          if (PromiseWrapper.isPromise(inlinedCss)) {
             // wait until nested @import are inlined
-            return inlinedCss.asyncResult.then(
-                (css) => {return prefix + this._transformImportedCss(css, mediaQuery, url) + '\n'});
+            return (<Promise<string>>inlinedCss)
+                .then((css) => {return prefix + this._transformImportedCss(css, mediaQuery, url) +
+                                       '\n'});
           } else {
             // there are no nested @import, return the css
-            return prefix + this._transformImportedCss(inlinedCss.syncResult, mediaQuery, url) +
-                   '\n';
+            return prefix + this._transformImportedCss(<string>inlinedCss, mediaQuery, url) + '\n';
           }
         }, (error) => `/* failed to import ${url} */\n`);
       }
@@ -102,14 +98,14 @@ export class StyleInliner {
       partIndex += 2;
     }
 
-    return new SyncAsyncResult(null, PromiseWrapper.all(promises).then(function(cssParts) {
+    return PromiseWrapper.all(promises).then(function(cssParts) {
       var cssText = cssParts.join('');
       if (partIndex < parts.length) {
         // append then content located after the last @import rule
         cssText += parts[partIndex];
       }
       return cssText;
-    }));
+    });
   }
 
   _transformImportedCss(css: string, mediaQuery: string, url: string): string {
diff --git a/modules/angular2/src/services/ruler.js b/modules/angular2/src/services/ruler.ts
similarity index 55%
rename from modules/angular2/src/services/ruler.js
rename to modules/angular2/src/services/ruler.ts
index 19b617829c..25df625c79 100644
--- a/modules/angular2/src/services/ruler.js
+++ b/modules/angular2/src/services/ruler.ts
@@ -21,14 +21,14 @@ export class Rectangle {
 
 export class Ruler {
   domAdapter: DomAdapter;
-  constructor(domAdapter: DomAdapter) {
-    this.domAdapter = domAdapter;
-  }
+  constructor(domAdapter: DomAdapter) { this.domAdapter = domAdapter; }
 
-  measure(el:ElementRef): Promise<Rectangle> {
-    var clntRect = this.domAdapter.getBoundingClientRect(el.domElement);
+  measure(el: ElementRef): Promise<Rectangle> {
+    var clntRect = <any>this.domAdapter.getBoundingClientRect(el.domElement);
 
-    //even if getBoundingClientRect is synchronous we use async API in preparation for further changes
-    return PromiseWrapper.resolve(new Rectangle(clntRect.left, clntRect.top, clntRect.width, clntRect.height));
+    // even if getBoundingClientRect is synchronous we use async API in preparation for further
+    // changes
+    return PromiseWrapper.resolve(
+        new Rectangle(clntRect.left, clntRect.top, clntRect.width, clntRect.height));
   }
 }
diff --git a/modules/angular2/test/render/dom/shadow_dom/style_inliner_spec.js b/modules/angular2/test/render/dom/shadow_dom/style_inliner_spec.js
index 7a3d5529c4..6fa167157f 100644
--- a/modules/angular2/test/render/dom/shadow_dom/style_inliner_spec.js
+++ b/modules/angular2/test/render/dom/shadow_dom/style_inliner_spec.js
@@ -32,7 +32,7 @@ export function main() {
       it('should return a string when there is no import statement', inject([StyleInliner], (inliner) => {
         var css = '.main {}';
         var loadedCss = inliner.inlineImports(css, 'http://base');
-        expect(loadedCss.syncResult).toEqual(css);
+        expect(loadedCss).toEqual(css);
       }));
 
       it('should inline @import rules',
@@ -40,9 +40,9 @@ export function main() {
         xhr.reply('http://base/one.css', '.one {}');
         var css = '@import url("one.css");.main {}';
         var loadedCss = inliner.inlineImports(css, 'http://base');
-        expect(loadedCss.asyncResult).toBePromise();
+        expect(loadedCss).toBePromise();
         PromiseWrapper.then(
-          loadedCss.asyncResult,
+          loadedCss,
           function(css) {
             expect(css).toEqual('.one {}\n.main {}');
             async.done();
@@ -58,9 +58,9 @@ export function main() {
         xhr.reply('http://base/one.css', '.one {}');
         var css = '@import url(one.css);.main {}';
         var loadedCss = inliner.inlineImports(css, 'http://base');
-        expect(loadedCss.asyncResult).toBePromise();
+        expect(loadedCss).toBePromise();
         PromiseWrapper.then(
-          loadedCss.asyncResult,
+          loadedCss,
           function(css) {
             expect(css).toEqual('.one {}\n.main {}');
             async.done();
@@ -75,9 +75,9 @@ export function main() {
         inject([StyleInliner, AsyncTestCompleter], (inliner, async) => {
         var css = '@import "one.css";.main {}';
         var loadedCss = inliner.inlineImports(css, 'http://base');
-        expect(loadedCss.asyncResult).toBePromise();
+        expect(loadedCss).toBePromise();
         PromiseWrapper.then(
-          loadedCss.asyncResult,
+          loadedCss,
           function(css) {
             expect(css).toEqual('/* failed to import http://base/one.css */\n.main {}');
             async.done();
@@ -94,9 +94,9 @@ export function main() {
         xhr.reply('http://base/two.css', '.two {}');
         var css = '@import "one.css";@import "two.css";.main {}';
         var loadedCss = inliner.inlineImports(css, 'http://base');
-        expect(loadedCss.asyncResult).toBePromise();
+        expect(loadedCss).toBePromise();
         PromiseWrapper.then(
-          loadedCss.asyncResult,
+          loadedCss,
           function(css) {
             expect(css).toEqual('.one {}\n.two {}\n.main {}');
             async.done();
@@ -113,9 +113,9 @@ export function main() {
         xhr.reply('http://base/two.css', '.two {}');
         var css = '@import "one.css";.main {}';
         var loadedCss = inliner.inlineImports(css, 'http://base/');
-        expect(loadedCss.asyncResult).toBePromise();
+        expect(loadedCss).toBePromise();
         PromiseWrapper.then(
-          loadedCss.asyncResult,
+          loadedCss,
           function(css) {
             expect(css).toEqual('.two {}\n.one {}\n.main {}');
             async.done();
@@ -132,9 +132,9 @@ export function main() {
         xhr.reply('http://base/two.css', '@import "one.css";.two {}');
         var css = '@import "one.css";.main {}';
         var loadedCss = inliner.inlineImports(css, 'http://base/');
-        expect(loadedCss.asyncResult).toBePromise();
+        expect(loadedCss).toBePromise();
         PromiseWrapper.then(
-          loadedCss.asyncResult,
+          loadedCss,
           function(css) {
             expect(css).toEqual('.two {}\n.one {}\n.main {}');
             async.done();
@@ -150,9 +150,9 @@ export function main() {
         // Invalid rule: the url is not quoted
         var css = '@import one.css;.main {}';
         var loadedCss = inliner.inlineImports(css, 'http://base/');
-        expect(loadedCss.asyncResult).toBePromise();
+        expect(loadedCss).toBePromise();
         PromiseWrapper.then(
-          loadedCss.asyncResult,
+          loadedCss,
           function(css) {
             expect(css).toEqual('/* Invalid import rule: "@import one.css;" */.main {}');
             async.done();
@@ -170,9 +170,9 @@ export function main() {
         xhr.reply('http://base/one.css', '.one {}');
         var css = '@import "one.css" (min-width: 700px) and (orientation: landscape);';
         var loadedCss = inliner.inlineImports(css, 'http://base/');
-        expect(loadedCss.asyncResult).toBePromise();
+        expect(loadedCss).toBePromise();
         PromiseWrapper.then(
-          loadedCss.asyncResult,
+          loadedCss,
           function(css) {
             expect(css).toEqual('@media (min-width: 700px) and (orientation: landscape) {\n.one {}\n}\n');
             async.done();
@@ -192,9 +192,9 @@ export function main() {
         xhr.reply('http://base/nested/two.css', '.two {background-image: url("../img/two.jpg");}');
         var css = '@import "one.css";'
         var loadedCss = inliner.inlineImports(css, 'http://base/');
-        expect(loadedCss.asyncResult).toBePromise();
+        expect(loadedCss).toBePromise();
         PromiseWrapper.then(
-          loadedCss.asyncResult,
+          loadedCss,
           function(css) {
             expect(css).toEqual(
               ".two {background-image: url('http://base/img/two.jpg');}\n" +
diff --git a/modules/angular2/traceur-runtime.d.ts b/modules/angular2/traceur-runtime.d.ts
index 9942c049e2..7429ea76b6 100644
--- a/modules/angular2/traceur-runtime.d.ts
+++ b/modules/angular2/traceur-runtime.d.ts
@@ -37,6 +37,8 @@ interface Map<K, V> {
   clear(): void;
   delete (key: K): boolean;
   forEach(callbackfn: (value: V, index: K, map: Map<K, V>) => void, thisArg?: any): void;
+  keys(): List<K>;
+  values(): List<V>;
   get(key: K): V;
   has(key: K): boolean;
   set(key: K, value: V): Map<K, V>;