repackaging: all the file moves

modules/@angular/common/src/directives/core_directives.ts

@@ -0,0 +1,61 @@
+import {Type} from 'angular2/src/facade/lang';
+import {NgClass} from './ng_class';
+import {NgFor} from './ng_for';
+import {NgIf} from './ng_if';
+import {NgTemplateOutlet} from './ng_template_outlet';
+import {NgStyle} from './ng_style';
+import {NgSwitch, NgSwitchWhen, NgSwitchDefault} from './ng_switch';
+import {NgPlural, NgPluralCase} from './ng_plural';
+
+/**
+ * A collection of Angular core directives that are likely to be used in each and every Angular
+ * application.
+ *
+ * This collection can be used to quickly enumerate all the built-in directives in the `directives`
+ * property of the `@Component` annotation.
+ *
+ * ### Example ([live demo](http://plnkr.co/edit/yakGwpCdUkg0qfzX5m8g?p=preview))
+ *
+ * Instead of writing:
+ *
+ * ```typescript
+ * import {NgClass, NgIf, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/common';
+ * import {OtherDirective} from './myDirectives';
+ *
+ * @Component({
+ *   selector: 'my-component',
+ *   templateUrl: 'myComponent.html',
+ *   directives: [NgClass, NgIf, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault, OtherDirective]
+ * })
+ * export class MyComponent {
+ *   ...
+ * }
+ * ```
+ * one could import all the core directives at once:
+ *
+ * ```typescript
+ * import {CORE_DIRECTIVES} from 'angular2/common';
+ * import {OtherDirective} from './myDirectives';
+ *
+ * @Component({
+ *   selector: 'my-component',
+ *   templateUrl: 'myComponent.html',
+ *   directives: [CORE_DIRECTIVES, OtherDirective]
+ * })
+ * export class MyComponent {
+ *   ...
+ * }
+ * ```
+ */
+export const CORE_DIRECTIVES: Type[] = /*@ts2dart_const*/[
+  NgClass,
+  NgFor,
+  NgIf,
+  NgTemplateOutlet,
+  NgStyle,
+  NgSwitch,
+  NgSwitchWhen,
+  NgSwitchDefault,
+  NgPlural,
+  NgPluralCase
+];

modules/@angular/common/src/directives/ng_class.ts

@@ -0,0 +1,186 @@
+import {isPresent, isString, isArray} from 'angular2/src/facade/lang';
+import {
+  DoCheck,
+  OnDestroy,
+  Directive,
+  ElementRef,
+  IterableDiffers,
+  KeyValueDiffers,
+  Renderer,
+  IterableDiffer,
+  KeyValueDiffer,
+  CollectionChangeRecord,
+  KeyValueChangeRecord
+} from 'angular2/core';
+import {StringMapWrapper, isListLikeIterable} from 'angular2/src/facade/collection';
+
+/**
+ * The `NgClass` directive conditionally adds and removes CSS classes on an HTML element based on
+ * an expression's evaluation result.
+ *
+ * The result of an expression evaluation is interpreted differently depending on type of
+ * the expression evaluation result:
+ * - `string` - all the CSS classes listed in a string (space delimited) are added
+ * - `Array` - all the CSS classes (Array elements) are added
+ * - `Object` - each key corresponds to a CSS class name while values are interpreted as expressions
+ * evaluating to `Boolean`. If a given expression evaluates to `true` a corresponding CSS class
+ * is added - otherwise it is removed.
+ *
+ * While the `NgClass` directive can interpret expressions evaluating to `string`, `Array`
+ * or `Object`, the `Object`-based version is the most often used and has an advantage of keeping
+ * all the CSS class names in a template.
+ *
+ * ### Example ([live demo](http://plnkr.co/edit/a4YdtmWywhJ33uqfpPPn?p=preview)):
+ *
+ * ```
+ * import {Component} from 'angular2/core';
+ * import {NgClass} from 'angular2/common';
+ *
+ * @Component({
+ *   selector: 'toggle-button',
+ *   inputs: ['isDisabled'],
+ *   template: `
+ *      <div class="button" [ngClass]="{active: isOn, disabled: isDisabled}"
+ *          (click)="toggle(!isOn)">
+ *          Click me!
+ *      </div>`,
+ *   styles: [`
+ *     .button {
+ *       width: 120px;
+ *       border: medium solid black;
+ *     }
+ *
+ *     .active {
+ *       background-color: red;
+ *    }
+ *
+ *     .disabled {
+ *       color: gray;
+ *       border: medium solid gray;
+ *     }
+ *   `]
+ *   directives: [NgClass]
+ * })
+ * class ToggleButton {
+ *   isOn = false;
+ *   isDisabled = false;
+ *
+ *   toggle(newState) {
+ *     if (!this.isDisabled) {
+ *       this.isOn = newState;
+ *     }
+ *   }
+ * }
+ * ```
+ */
+@Directive({selector: '[ngClass]', inputs: ['rawClass: ngClass', 'initialClasses: class']})
+export class NgClass implements DoCheck, OnDestroy {
+  private _iterableDiffer: IterableDiffer;
+  private _keyValueDiffer: KeyValueDiffer;
+  private _initialClasses: string[] = [];
+  private _rawClass: string[] | Set<string>;
+
+  constructor(private _iterableDiffers: IterableDiffers, private _keyValueDiffers: KeyValueDiffers,
+              private _ngEl: ElementRef, private _renderer: Renderer) {}
+
+  set initialClasses(v: string) {
+    this._applyInitialClasses(true);
+    this._initialClasses = isPresent(v) && isString(v) ? v.split(' ') : [];
+    this._applyInitialClasses(false);
+    this._applyClasses(this._rawClass, false);
+  }
+
+  set rawClass(v: string | string[] | Set<string>| {[key: string]: any}) {
+    this._cleanupClasses(this._rawClass);
+
+    if (isString(v)) {
+      v = (<string>v).split(' ');
+    }
+
+    this._rawClass = <string[] | Set<string>>v;
+    this._iterableDiffer = null;
+    this._keyValueDiffer = null;
+    if (isPresent(v)) {
+      if (isListLikeIterable(v)) {
+        this._iterableDiffer = this._iterableDiffers.find(v).create(null);
+      } else {
+        this._keyValueDiffer = this._keyValueDiffers.find(v).create(null);
+      }
+    }
+  }
+
+  ngDoCheck(): void {
+    if (isPresent(this._iterableDiffer)) {
+      var changes = this._iterableDiffer.diff(this._rawClass);
+      if (isPresent(changes)) {
+        this._applyIterableChanges(changes);
+      }
+    }
+    if (isPresent(this._keyValueDiffer)) {
+      var changes = this._keyValueDiffer.diff(this._rawClass);
+      if (isPresent(changes)) {
+        this._applyKeyValueChanges(changes);
+      }
+    }
+  }
+
+  ngOnDestroy(): void { this._cleanupClasses(this._rawClass); }
+
+  private _cleanupClasses(rawClassVal: string[] | Set<string>| {[key: string]: any}): void {
+    this._applyClasses(rawClassVal, true);
+    this._applyInitialClasses(false);
+  }
+
+  private _applyKeyValueChanges(changes: any): void {
+    changes.forEachAddedItem(
+        (record: KeyValueChangeRecord) => { this._toggleClass(record.key, record.currentValue); });
+    changes.forEachChangedItem(
+        (record: KeyValueChangeRecord) => { this._toggleClass(record.key, record.currentValue); });
+    changes.forEachRemovedItem((record: KeyValueChangeRecord) => {
+      if (record.previousValue) {
+        this._toggleClass(record.key, false);
+      }
+    });
+  }
+
+  private _applyIterableChanges(changes: any): void {
+    changes.forEachAddedItem(
+        (record: CollectionChangeRecord) => { this._toggleClass(record.item, true); });
+    changes.forEachRemovedItem(
+        (record: CollectionChangeRecord) => { this._toggleClass(record.item, false); });
+  }
+
+  private _applyInitialClasses(isCleanup: boolean) {
+    this._initialClasses.forEach(className => this._toggleClass(className, !isCleanup));
+  }
+
+  private _applyClasses(rawClassVal: string[] | Set<string>| {[key: string]: any},
+                        isCleanup: boolean) {
+    if (isPresent(rawClassVal)) {
+      if (isArray(rawClassVal)) {
+        (<string[]>rawClassVal).forEach(className => this._toggleClass(className, !isCleanup));
+      } else if (rawClassVal instanceof Set) {
+        (<Set<string>>rawClassVal).forEach(className => this._toggleClass(className, !isCleanup));
+      } else {
+        StringMapWrapper.forEach(<{[k: string]: any}>rawClassVal,
+                                 (expVal: any, className: string) => {
+                                   if (isPresent(expVal)) this._toggleClass(className, !isCleanup);
+                                 });
+      }
+    }
+  }
+
+  private _toggleClass(className: string, enabled: boolean): void {
+    className = className.trim();
+    if (className.length > 0) {
+      if (className.indexOf(' ') > -1) {
+        var classes = className.split(/\s+/g);
+        for (var i = 0, len = classes.length; i < len; i++) {
+          this._renderer.setElementClass(this._ngEl.nativeElement, classes[i], enabled);
+        }
+      } else {
+        this._renderer.setElementClass(this._ngEl.nativeElement, className, enabled);
+      }
+    }
+  }
+}

modules/@angular/common/src/directives/ng_for.ts

@@ -0,0 +1,197 @@
+import {
+  DoCheck,
+  Directive,
+  ChangeDetectorRef,
+  IterableDiffer,
+  IterableDiffers,
+  ViewContainerRef,
+  TemplateRef,
+  EmbeddedViewRef,
+  TrackByFn
+} from 'angular2/core';
+import {isPresent, isBlank, stringify, getTypeNameForDebugging} from 'angular2/src/facade/lang';
+import {
+  DefaultIterableDiffer,
+  CollectionChangeRecord
+} from "../../core/change_detection/differs/default_iterable_differ";
+import {BaseException} from "../../facade/exceptions";
+
+export class NgForRow {
+  constructor(public $implicit: any, public index: number, public count: number) {}
+
+  get first(): boolean { return this.index === 0; }
+
+  get last(): boolean { return this.index === this.count - 1; }
+
+  get even(): boolean { return this.index % 2 === 0; }
+
+  get odd(): boolean { return !this.even; }
+}
+
+/**
+ * The `NgFor` directive instantiates a template once per item from an iterable. The context for
+ * each instantiated template inherits from the outer context with the given loop variable set
+ * to the current item from the iterable.
+ *
+ * ### Local Variables
+ *
+ * `NgFor` provides several exported values that can be aliased to local variables:
+ *
+ * * `index` will be set to the current loop iteration for each template context.
+ * * `first` will be set to a boolean value indicating whether the item is the first one in the
+ *   iteration.
+ * * `last` will be set to a boolean value indicating whether the item is the last one in the
+ *   iteration.
+ * * `even` will be set to a boolean value indicating whether this item has an even index.
+ * * `odd` will be set to a boolean value indicating whether this item has an odd index.
+ *
+ * ### Change Propagation
+ *
+ * When the contents of the iterator changes, `NgFor` makes the corresponding changes to the DOM:
+ *
+ * * When an item is added, a new instance of the template is added to the DOM.
+ * * When an item is removed, its template instance is removed from the DOM.
+ * * When items are reordered, their respective templates are reordered in the DOM.
+ * * Otherwise, the DOM element for that item will remain the same.
+ *
+ * Angular uses object identity to track insertions and deletions within the iterator and reproduce
+ * those changes in the DOM. This has important implications for animations and any stateful
+ * controls
+ * (such as `<input>` elements which accept user input) that are present. Inserted rows can be
+ * animated in, deleted rows can be animated out, and unchanged rows retain any unsaved state such
+ * as user input.
+ *
+ * It is possible for the identities of elements in the iterator to change while the data does not.
+ * This can happen, for example, if the iterator produced from an RPC to the server, and that
+ * RPC is re-run. Even if the data hasn't changed, the second response will produce objects with
+ * different identities, and Angular will tear down the entire DOM and rebuild it (as if all old
+ * elements were deleted and all new elements inserted). This is an expensive operation and should
+ * be avoided if possible.
+ *
+ * ### Syntax
+ *
+ * - `<li *ngFor="let item of items; #i = index">...</li>`
+ * - `<li template="ngFor #item of items; #i = index">...</li>`
+ * - `<template ngFor #item [ngForOf]="items" #i="index"><li>...</li></template>`
+ *
+ * ### Example
+ *
+ * See a [live demo](http://plnkr.co/edit/KVuXxDp0qinGDyo307QW?p=preview) for a more detailed
+ * example.
+ */
+@Directive({selector: '[ngFor][ngForOf]', inputs: ['ngForTrackBy', 'ngForOf', 'ngForTemplate']})
+export class NgFor implements DoCheck {
+  /** @internal */
+  _ngForOf: any;
+  /** @internal */
+  _ngForTrackBy: TrackByFn;
+  private _differ: IterableDiffer;
+
+  constructor(private _viewContainer: ViewContainerRef, private _templateRef: TemplateRef<NgForRow>,
+              private _iterableDiffers: IterableDiffers, private _cdr: ChangeDetectorRef) {}
+
+  set ngForOf(value: any) {
+    this._ngForOf = value;
+    if (isBlank(this._differ) && isPresent(value)) {
+      try {
+        this._differ = this._iterableDiffers.find(value).create(this._cdr, this._ngForTrackBy);
+      } catch (e) {
+        throw new BaseException(
+            `Cannot find a differ supporting object '${value}' of type '${getTypeNameForDebugging(value)}'. NgFor only supports binding to Iterables such as Arrays.`);
+      }
+    }
+  }
+
+  set ngForTemplate(value: TemplateRef<NgForRow>) {
+    if (isPresent(value)) {
+      this._templateRef = value;
+    }
+  }
+
+  set ngForTrackBy(value: TrackByFn) { this._ngForTrackBy = value; }
+
+  ngDoCheck() {
+    if (isPresent(this._differ)) {
+      var changes = this._differ.diff(this._ngForOf);
+      if (isPresent(changes)) this._applyChanges(changes);
+    }
+  }
+
+  private _applyChanges(changes: DefaultIterableDiffer) {
+    // TODO(rado): check if change detection can produce a change record that is
+    // easier to consume than current.
+    var recordViewTuples: RecordViewTuple[] = [];
+    changes.forEachRemovedItem((removedRecord: CollectionChangeRecord) =>
+                                   recordViewTuples.push(new RecordViewTuple(removedRecord, null)));
+
+    changes.forEachMovedItem((movedRecord: CollectionChangeRecord) =>
+                                 recordViewTuples.push(new RecordViewTuple(movedRecord, null)));
+
+    var insertTuples = this._bulkRemove(recordViewTuples);
+
+    changes.forEachAddedItem((addedRecord: CollectionChangeRecord) =>
+                                 insertTuples.push(new RecordViewTuple(addedRecord, null)));
+
+    this._bulkInsert(insertTuples);
+
+    for (var i = 0; i < insertTuples.length; i++) {
+      this._perViewChange(insertTuples[i].view, insertTuples[i].record);
+    }
+
+    for (var i = 0, ilen = this._viewContainer.length; i < ilen; i++) {
+      var viewRef = <EmbeddedViewRef<NgForRow>>this._viewContainer.get(i);
+      viewRef.context.index = i;
+      viewRef.context.count = ilen;
+    }
+
+    changes.forEachIdentityChange((record) => {
+      var viewRef = <EmbeddedViewRef<NgForRow>>this._viewContainer.get(record.currentIndex);
+      viewRef.context.$implicit = record.item;
+    });
+  }
+
+  private _perViewChange(view: EmbeddedViewRef<NgForRow>, record: CollectionChangeRecord) {
+    view.context.$implicit = record.item;
+  }
+
+  private _bulkRemove(tuples: RecordViewTuple[]): RecordViewTuple[] {
+    tuples.sort((a: RecordViewTuple, b: RecordViewTuple) =>
+                    a.record.previousIndex - b.record.previousIndex);
+    var movedTuples: RecordViewTuple[] = [];
+    for (var i = tuples.length - 1; i >= 0; i--) {
+      var tuple = tuples[i];
+      // separate moved views from removed views.
+      if (isPresent(tuple.record.currentIndex)) {
+        tuple.view =
+            <EmbeddedViewRef<NgForRow>>this._viewContainer.detach(tuple.record.previousIndex);
+        movedTuples.push(tuple);
+      } else {
+        this._viewContainer.remove(tuple.record.previousIndex);
+      }
+    }
+    return movedTuples;
+  }
+
+  private _bulkInsert(tuples: RecordViewTuple[]): RecordViewTuple[] {
+    tuples.sort((a, b) => a.record.currentIndex - b.record.currentIndex);
+    for (var i = 0; i < tuples.length; i++) {
+      var tuple = tuples[i];
+      if (isPresent(tuple.view)) {
+        this._viewContainer.insert(tuple.view, tuple.record.currentIndex);
+      } else {
+        tuple.view = this._viewContainer.createEmbeddedView(
+            this._templateRef, new NgForRow(null, null, null), tuple.record.currentIndex);
+      }
+    }
+    return tuples;
+  }
+}
+
+class RecordViewTuple {
+  view: EmbeddedViewRef<NgForRow>;
+  record: any;
+  constructor(record: any, view: EmbeddedViewRef<NgForRow>) {
+    this.record = record;
+    this.view = view;
+  }
+}

modules/@angular/common/src/directives/ng_if.ts

@@ -0,0 +1,42 @@
+import {Directive, ViewContainerRef, TemplateRef} from 'angular2/core';
+import {isBlank} from 'angular2/src/facade/lang';
+
+/**
+ * Removes or recreates a portion of the DOM tree based on an {expression}.
+ *
+ * If the expression assigned to `ngIf` evaluates to a false value then the element
+ * is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
+ *
+ * ### Example ([live demo](http://plnkr.co/edit/fe0kgemFBtmQOY31b4tw?p=preview)):
+ *
+ * ```
+ * <div *ngIf="errorCount > 0" class="error">
+ *   <!-- Error message displayed when the errorCount property on the current context is greater
+ * than 0. -->
+ *   {{errorCount}} errors detected
+ * </div>
+ * ```
+ *
+ * ### Syntax
+ *
+ * - `<div *ngIf="condition">...</div>`
+ * - `<div template="ngIf condition">...</div>`
+ * - `<template [ngIf]="condition"><div>...</div></template>`
+ */
+@Directive({selector: '[ngIf]', inputs: ['ngIf']})
+export class NgIf {
+  private _prevCondition: boolean = null;
+
+  constructor(private _viewContainer: ViewContainerRef, private _templateRef: TemplateRef<Object>) {
+  }
+
+  set ngIf(newCondition: any /* boolean */) {
+    if (newCondition && (isBlank(this._prevCondition) || !this._prevCondition)) {
+      this._prevCondition = true;
+      this._viewContainer.createEmbeddedView(this._templateRef);
+    } else if (!newCondition && (isBlank(this._prevCondition) || this._prevCondition)) {
+      this._prevCondition = false;
+      this._viewContainer.clear();
+    }
+  }
+}

modules/@angular/common/src/directives/ng_plural.ts

@@ -0,0 +1,147 @@
+import {
+  Directive,
+  ViewContainerRef,
+  TemplateRef,
+  ContentChildren,
+  QueryList,
+  Attribute,
+  AfterContentInit,
+  Input
+} from 'angular2/core';
+import {isPresent, NumberWrapper} from 'angular2/src/facade/lang';
+import {Map} from 'angular2/src/facade/collection';
+import {SwitchView} from './ng_switch';
+
+const _CATEGORY_DEFAULT = 'other';
+
+export abstract class NgLocalization { abstract getPluralCategory(value: any): string; }
+
+/**
+ * `ngPlural` is an i18n directive that displays DOM sub-trees that match the switch expression
+ * value, or failing that, DOM sub-trees that match the switch expression's pluralization category.
+ *
+ * To use this directive, you must provide an extension of `NgLocalization` that maps values to
+ * category names. You then define a container element that sets the `[ngPlural]` attribute to a
+ * switch expression.
+ *    - Inner elements defined with an `[ngPluralCase]` attribute will display based on their
+ * expression.
+ *    - If `[ngPluralCase]` is set to a value starting with `=`, it will only display if the value
+ * matches the switch expression exactly.
+ *    - Otherwise, the view will be treated as a "category match", and will only display if exact
+ * value matches aren't found and the value maps to its category using the `getPluralCategory`
+ * function provided.
+ *
+ * If no matching views are found for a switch expression, inner elements marked
+ * `[ngPluralCase]="other"` will be displayed.
+ *
+ * ```typescript
+ * class MyLocalization extends NgLocalization {
+ *    getPluralCategory(value: any) {
+ *       if(value < 5) {
+ *          return 'few';
+ *       }
+ *    }
+ * }
+ *
+ * @Component({
+ *    selector: 'app',
+ *    providers: [provide(NgLocalization, {useClass: MyLocalization})]
+ * })
+ * @View({
+ *   template: `
+ *     <p>Value = {{value}}</p>
+ *     <button (click)="inc()">Increment</button>
+ *
+ *     <div [ngPlural]="value">
+ *       <template ngPluralCase="=0">there is nothing</template>
+ *       <template ngPluralCase="=1">there is one</template>
+ *       <template ngPluralCase="few">there are a few</template>
+ *       <template ngPluralCase="other">there is some number</template>
+ *     </div>
+ *   `,
+ *   directives: [NgPlural, NgPluralCase]
+ * })
+ * export class App {
+ *   value = 'init';
+ *
+ *   inc() {
+ *     this.value = this.value === 'init' ? 0 : this.value + 1;
+ *   }
+ * }
+ *
+ * ```
+ */
+
+@Directive({selector: '[ngPluralCase]'})
+export class NgPluralCase {
+  /** @internal */
+  _view: SwitchView;
+  constructor(@Attribute('ngPluralCase') public value: string, template: TemplateRef<Object>,
+              viewContainer: ViewContainerRef) {
+    this._view = new SwitchView(viewContainer, template);
+  }
+}
+
+
+@Directive({selector: '[ngPlural]'})
+export class NgPlural implements AfterContentInit {
+  private _switchValue: number;
+  private _activeView: SwitchView;
+  private _caseViews = new Map<any, SwitchView>();
+  @ContentChildren(NgPluralCase) cases: QueryList<NgPluralCase> = null;
+
+  constructor(private _localization: NgLocalization) {}
+
+  @Input()
+  set ngPlural(value: number) {
+    this._switchValue = value;
+    this._updateView();
+  }
+
+  ngAfterContentInit() {
+    this.cases.forEach((pluralCase: NgPluralCase): void => {
+      this._caseViews.set(this._formatValue(pluralCase), pluralCase._view);
+    });
+    this._updateView();
+  }
+
+  /** @internal */
+  _updateView(): void {
+    this._clearViews();
+
+    var view: SwitchView = this._caseViews.get(this._switchValue);
+    if (!isPresent(view)) view = this._getCategoryView(this._switchValue);
+
+    this._activateView(view);
+  }
+
+  /** @internal */
+  _clearViews() {
+    if (isPresent(this._activeView)) this._activeView.destroy();
+  }
+
+  /** @internal */
+  _activateView(view: SwitchView) {
+    if (!isPresent(view)) return;
+    this._activeView = view;
+    this._activeView.create();
+  }
+
+  /** @internal */
+  _getCategoryView(value: number): SwitchView {
+    var category: string = this._localization.getPluralCategory(value);
+    var categoryView: SwitchView = this._caseViews.get(category);
+    return isPresent(categoryView) ? categoryView : this._caseViews.get(_CATEGORY_DEFAULT);
+  }
+
+  /** @internal */
+  _isValueView(pluralCase: NgPluralCase): boolean { return pluralCase.value[0] === "="; }
+
+  /** @internal */
+  _formatValue(pluralCase: NgPluralCase): any {
+    return this._isValueView(pluralCase) ? this._stripValue(pluralCase.value) : pluralCase.value;
+  }
+
+  /** @internal */
+  _stripValue(value: string): number { return NumberWrapper.parseInt(value.substring(1), 10); }
+}

modules/@angular/common/src/directives/ng_style.ts

@@ -0,0 +1,101 @@
+import {
+  DoCheck,
+  KeyValueDiffer,
+  KeyValueDiffers,
+  ElementRef,
+  Directive,
+  Renderer
+} from 'angular2/core';
+import {isPresent, isBlank, print} from 'angular2/src/facade/lang';
+import {KeyValueChangeRecord} from "../../core/change_detection/differs/default_keyvalue_differ";
+
+/**
+ * The `NgStyle` directive changes styles based on a result of expression evaluation.
+ *
+ * An expression assigned to the `ngStyle` property must evaluate to an object and the
+ * corresponding element styles are updated based on changes to this object. Style names to update
+ * are taken from the object's keys, and values - from the corresponding object's values.
+ *
+ * ### Syntax
+ *
+ * - `<div [ngStyle]="{'font-style': style}"></div>`
+ * - `<div [ngStyle]="styleExp"></div>` - here the `styleExp` must evaluate to an object
+ *
+ * ### Example ([live demo](http://plnkr.co/edit/YamGS6GkUh9GqWNQhCyM?p=preview)):
+ *
+ * ```
+ * import {Component} from 'angular2/core';
+ * import {NgStyle} from 'angular2/common';
+ *
+ * @Component({
+ *  selector: 'ngStyle-example',
+ *  template: `
+ *    <h1 [ngStyle]="{'font-style': style, 'font-size': size, 'font-weight': weight}">
+ *      Change style of this text!
+ *    </h1>
+ *
+ *    <hr>
+ *
+ *    <label>Italic: <input type="checkbox" (change)="changeStyle($event)"></label>
+ *    <label>Bold: <input type="checkbox" (change)="changeWeight($event)"></label>
+ *    <label>Size: <input type="text" [value]="size" (change)="size = $event.target.value"></label>
+ *  `,
+ *  directives: [NgStyle]
+ * })
+ * export class NgStyleExample {
+ *    style = 'normal';
+ *    weight = 'normal';
+ *    size = '20px';
+ *
+ *    changeStyle($event: any) {
+ *      this.style = $event.target.checked ? 'italic' : 'normal';
+ *    }
+ *
+ *    changeWeight($event: any) {
+ *      this.weight = $event.target.checked ? 'bold' : 'normal';
+ *    }
+ * }
+ * ```
+ *
+ * In this example the `font-style`, `font-size` and `font-weight` styles will be updated
+ * based on the `style` property's value changes.
+ */
+@Directive({selector: '[ngStyle]', inputs: ['rawStyle: ngStyle']})
+export class NgStyle implements DoCheck {
+  /** @internal */
+  _rawStyle: {[key: string]: string};
+  /** @internal */
+  _differ: KeyValueDiffer;
+
+  constructor(private _differs: KeyValueDiffers, private _ngEl: ElementRef,
+              private _renderer: Renderer) {}
+
+  set rawStyle(v: {[key: string]: string}) {
+    this._rawStyle = v;
+    if (isBlank(this._differ) && isPresent(v)) {
+      this._differ = this._differs.find(this._rawStyle).create(null);
+    }
+  }
+
+  ngDoCheck() {
+    if (isPresent(this._differ)) {
+      var changes = this._differ.diff(this._rawStyle);
+      if (isPresent(changes)) {
+        this._applyChanges(changes);
+      }
+    }
+  }
+
+  private _applyChanges(changes: any): void {
+    changes.forEachAddedItem(
+        (record: KeyValueChangeRecord) => { this._setStyle(record.key, record.currentValue); });
+    changes.forEachChangedItem(
+        (record: KeyValueChangeRecord) => { this._setStyle(record.key, record.currentValue); });
+    changes.forEachRemovedItem(
+        (record: KeyValueChangeRecord) => { this._setStyle(record.key, null); });
+  }
+
+  private _setStyle(name: string, val: string): void {
+    this._renderer.setElementStyle(this._ngEl.nativeElement, name, val);
+  }
+}

modules/@angular/common/src/directives/ng_switch.ts

@@ -0,0 +1,203 @@
+import {Directive, Host, ViewContainerRef, TemplateRef} from 'angular2/core';
+import {isPresent, isBlank, normalizeBlank} from 'angular2/src/facade/lang';
+import {ListWrapper, Map} from 'angular2/src/facade/collection';
+
+const _WHEN_DEFAULT = /*@ts2dart_const*/ new Object();
+
+export class SwitchView {
+  constructor(private _viewContainerRef: ViewContainerRef,
+              private _templateRef: TemplateRef<Object>) {}
+
+  create(): void { this._viewContainerRef.createEmbeddedView(this._templateRef); }
+
+  destroy(): void { this._viewContainerRef.clear(); }
+}
+
+/**
+ * Adds or removes DOM sub-trees when their match expressions match the switch expression.
+ *
+ * Elements within `NgSwitch` but without `NgSwitchWhen` or `NgSwitchDefault` directives will be
+ * preserved at the location as specified in the template.
+ *
+ * `NgSwitch` simply inserts nested elements based on which match expression matches the value
+ * obtained from the evaluated switch expression. In other words, you define a container element
+ * (where you place the directive with a switch expression on the
+ * `[ngSwitch]="..."` attribute), define any inner elements inside of the directive and
+ * place a `[ngSwitchWhen]` attribute per element.
+ *
+ * The `ngSwitchWhen` property is used to inform `NgSwitch` which element to display when the
+ * expression is evaluated. If a matching expression is not found via a `ngSwitchWhen` property
+ * then an element with the `ngSwitchDefault` attribute is displayed.
+ *
+ * ### Example ([live demo](http://plnkr.co/edit/DQMTII95CbuqWrl3lYAs?p=preview))
+ *
+ * ```typescript
+ * @Component({
+ *   selector: 'app',
+ *   template: `
+ *     <p>Value = {{value}}</p>
+ *     <button (click)="inc()">Increment</button>
+ *
+ *     <div [ngSwitch]="value">
+ *       <p *ngSwitchWhen="'init'">increment to start</p>
+ *       <p *ngSwitchWhen="0">0, increment again</p>
+ *       <p *ngSwitchWhen="1">1, increment again</p>
+ *       <p *ngSwitchWhen="2">2, stop incrementing</p>
+ *       <p *ngSwitchDefault>&gt; 2, STOP!</p>
+ *     </div>
+ *
+ *     <!-- alternate syntax -->
+ *
+ *     <p [ngSwitch]="value">
+ *       <template ngSwitchWhen="init">increment to start</template>
+ *       <template [ngSwitchWhen]="0">0, increment again</template>
+ *       <template [ngSwitchWhen]="1">1, increment again</template>
+ *       <template [ngSwitchWhen]="2">2, stop incrementing</template>
+ *       <template ngSwitchDefault>&gt; 2, STOP!</template>
+ *     </p>
+ *   `,
+ *   directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]
+ * })
+ * export class App {
+ *   value = 'init';
+ *
+ *   inc() {
+ *     this.value = this.value === 'init' ? 0 : this.value + 1;
+ *   }
+ * }
+ *
+ * bootstrap(App).catch(err => console.error(err));
+ * ```
+ */
+@Directive({selector: '[ngSwitch]', inputs: ['ngSwitch']})
+export class NgSwitch {
+  private _switchValue: any;
+  private _useDefault: boolean = false;
+  private _valueViews = new Map<any, SwitchView[]>();
+  private _activeViews: SwitchView[] = [];
+
+  set ngSwitch(value: any) {
+    // Empty the currently active ViewContainers
+    this._emptyAllActiveViews();
+
+    // Add the ViewContainers matching the value (with a fallback to default)
+    this._useDefault = false;
+    var views = this._valueViews.get(value);
+    if (isBlank(views)) {
+      this._useDefault = true;
+      views = normalizeBlank(this._valueViews.get(_WHEN_DEFAULT));
+    }
+    this._activateViews(views);
+
+    this._switchValue = value;
+  }
+
+  /** @internal */
+  _onWhenValueChanged(oldWhen: any, newWhen: any, view: SwitchView): void {
+    this._deregisterView(oldWhen, view);
+    this._registerView(newWhen, view);
+
+    if (oldWhen === this._switchValue) {
+      view.destroy();
+      ListWrapper.remove(this._activeViews, view);
+    } else if (newWhen === this._switchValue) {
+      if (this._useDefault) {
+        this._useDefault = false;
+        this._emptyAllActiveViews();
+      }
+      view.create();
+      this._activeViews.push(view);
+    }
+
+    // Switch to default when there is no more active ViewContainers
+    if (this._activeViews.length === 0 && !this._useDefault) {
+      this._useDefault = true;
+      this._activateViews(this._valueViews.get(_WHEN_DEFAULT));
+    }
+  }
+
+  /** @internal */
+  _emptyAllActiveViews(): void {
+    var activeContainers = this._activeViews;
+    for (var i = 0; i < activeContainers.length; i++) {
+      activeContainers[i].destroy();
+    }
+    this._activeViews = [];
+  }
+
+  /** @internal */
+  _activateViews(views: SwitchView[]): void {
+    // TODO(vicb): assert(this._activeViews.length === 0);
+    if (isPresent(views)) {
+      for (var i = 0; i < views.length; i++) {
+        views[i].create();
+      }
+      this._activeViews = views;
+    }
+  }
+
+  /** @internal */
+  _registerView(value: any, view: SwitchView): void {
+    var views = this._valueViews.get(value);
+    if (isBlank(views)) {
+      views = [];
+      this._valueViews.set(value, views);
+    }
+    views.push(view);
+  }
+
+  /** @internal */
+  _deregisterView(value: any, view: SwitchView): void {
+    // `_WHEN_DEFAULT` is used a marker for non-registered whens
+    if (value === _WHEN_DEFAULT) return;
+    var views = this._valueViews.get(value);
+    if (views.length == 1) {
+      this._valueViews.delete(value);
+    } else {
+      ListWrapper.remove(views, view);
+    }
+  }
+}
+
+/**
+ * Insert the sub-tree when the `ngSwitchWhen` expression evaluates to the same value as the
+ * enclosing switch expression.
+ *
+ * If multiple match expression match the switch expression value, all of them are displayed.
+ *
+ * See {@link NgSwitch} for more details and example.
+ */
+@Directive({selector: '[ngSwitchWhen]', inputs: ['ngSwitchWhen']})
+export class NgSwitchWhen {
+  // `_WHEN_DEFAULT` is used as a marker for a not yet initialized value
+  /** @internal */
+  _value: any = _WHEN_DEFAULT;
+  /** @internal */
+  _view: SwitchView;
+  private _switch: NgSwitch;
+
+  constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef<Object>,
+              @Host() ngSwitch: NgSwitch) {
+    this._switch = ngSwitch;
+    this._view = new SwitchView(viewContainer, templateRef);
+  }
+
+  set ngSwitchWhen(value: any) {
+    this._switch._onWhenValueChanged(this._value, value, this._view);
+    this._value = value;
+  }
+}
+
+/**
+ * Default case statements are displayed when no match expression matches the switch expression
+ * value.
+ *
+ * See {@link NgSwitch} for more details and example.
+ */
+@Directive({selector: '[ngSwitchDefault]'})
+export class NgSwitchDefault {
+  constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef<Object>,
+              @Host() sswitch: NgSwitch) {
+    sswitch._registerView(_WHEN_DEFAULT, new SwitchView(viewContainer, templateRef));
+  }
+}

modules/@angular/common/src/directives/ng_template_outlet.ts

@@ -0,0 +1,26 @@
+import {Directive, Input, ViewContainerRef, ViewRef, TemplateRef} from 'angular2/core';
+import {isPresent} from 'angular2/src/facade/lang';
+
+/**
+ * Creates and inserts an embedded view based on a prepared `TemplateRef`.
+ *
+ * ### Syntax
+ * - `<template [ngTemplateOutlet]="templateRefExpression"></template>`
+ */
+@Directive({selector: '[ngTemplateOutlet]'})
+export class NgTemplateOutlet {
+  private _insertedViewRef: ViewRef;
+
+  constructor(private _viewContainerRef: ViewContainerRef) {}
+
+  @Input()
+  set ngTemplateOutlet(templateRef: TemplateRef<Object>) {
+    if (isPresent(this._insertedViewRef)) {
+      this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._insertedViewRef));
+    }
+
+    if (isPresent(templateRef)) {
+      this._insertedViewRef = this._viewContainerRef.createEmbeddedView(templateRef);
+    }
+  }
+}

modules/@angular/common/src/directives/observable_list_diff.dart

@@ -0,0 +1,63 @@
+library angular2.directives.observable_list_iterable_diff;
+
+import 'package:observe/observe.dart' show ObservableList;
+import 'package:angular2/core.dart';
+import 'package:angular2/src/core/change_detection/differs/default_iterable_differ.dart';
+import 'dart:async';
+
+class ObservableListDiff extends DefaultIterableDiffer {
+  ChangeDetectorRef _ref;
+  ObservableListDiff(this._ref);
+
+  bool _updated = true;
+  ObservableList _collection;
+  StreamSubscription _subscription;
+
+  onDestroy() {
+    if (this._subscription != null) {
+      this._subscription.cancel();
+      this._subscription = null;
+      this._collection = null;
+    }
+  }
+
+  DefaultIterableDiffer diff(ObservableList collection) {
+    if (collection is! ObservableList) {
+      throw "Cannot change the type of a collection";
+    }
+
+    // A new collection instance is passed in.
+    // - We need to set up a listener.
+    // - We need to diff collection.
+    if (!identical(_collection, collection)) {
+      _collection = collection;
+
+      if (_subscription != null) _subscription.cancel();
+      _subscription = collection.changes.listen((_) {
+        _updated = true;
+        _ref.markForCheck();
+      });
+      _updated = false;
+      return super.diff(collection);
+
+      // An update has been registered since the last change detection check.
+      // - We reset the flag.
+      // - We diff the collection.
+    } else if (_updated) {
+      _updated = false;
+      return super.diff(collection);
+
+      // No updates has been registered.
+    } else {
+      return null;
+    }
+  }
+}
+
+class ObservableListDiffFactory implements IterableDifferFactory {
+  const ObservableListDiffFactory();
+  bool supports(obj) => obj is ObservableList;
+  IterableDiffer create(ChangeDetectorRef cdRef, [Function trackByFn]) {
+    return new ObservableListDiff(cdRef);
+  }
+}

modules/@angular/common/src/directives/observable_list_diff.ts

@@ -0,0 +1,10 @@
+// TS does not have Observables
+
+// I need to be here to make TypeScript think this is a module.
+import {} from 'angular2/src/facade/lang';
+
+/**
+ * This module exists in Dart, but not in Typescript. This exported symbol
+ * is only here to help Typescript think this is a module.
+ */
+export var workaround_empty_observable_list_diff: any;