From 6bfa48bc6415c9c80b53b512e9d14735e4608e3a Mon Sep 17 00:00:00 2001
From: Marc Laval <mlaval@amadeus.com>
Date: Wed, 4 Feb 2015 22:27:31 +0100
Subject: [PATCH] refactor(directives): Drop ng- prefix from all angular
 directives and rename NgRepeat to Foreach

fixes #532

Closes #539
---
 modules/angular2/directives.js                |  8 +--
 modules/angular2/docs/core/01_templates.md    | 44 +++++++-------
 modules/angular2/docs/core/02_directives.md   | 10 ++--
 modules/angular2/docs/core/10_view.md         | 14 ++---
 .../directives/{ng_repeat.js => foreach.js}   |  8 +--
 .../src/directives/{ng_if.js => if.js}        |  6 +-
 .../{ng_non_bindable.js => non_bindable.js}   |  4 +-
 .../directives/{ng_switch.js => switch.js}    | 58 +++++++++----------
 .../{ng_repeat_spec.js => foreach_spec.js}    | 29 ++++------
 .../directives/{ng_if_spec.js => if_spec.js}  | 43 ++++++--------
 ..._bindable_spec.js => non_bindable_spec.js} | 22 +++----
 .../{ng_switch_spec.js => switch_spec.js}     | 50 +++++++---------
 .../src/naive_infinite_scroll/app.js          |  8 +--
 .../src/naive_infinite_scroll/cells.js        |  6 +-
 .../src/naive_infinite_scroll/index.js        | 16 ++---
 .../src/naive_infinite_scroll/scroll_area.js  |  6 +-
 .../outputgeneration/DartParseTreeWriter.js   |  2 +-
 tools/transpiler/unittest/transpilertests.js  |  6 +-
 18 files changed, 158 insertions(+), 182 deletions(-)
 rename modules/angular2/src/directives/{ng_repeat.js => foreach.js} (93%)
 rename modules/angular2/src/directives/{ng_if.js => if.js} (91%)
 rename modules/angular2/src/directives/{ng_non_bindable.js => non_bindable.js} (64%)
 rename modules/angular2/src/directives/{ng_switch.js => switch.js} (72%)
 rename modules/angular2/test/directives/{ng_repeat_spec.js => foreach_spec.js} (86%)
 rename modules/angular2/test/directives/{ng_if_spec.js => if_spec.js} (77%)
 rename modules/angular2/test/directives/{ng_non_bindable_spec.js => non_bindable_spec.js} (79%)
 rename modules/angular2/test/directives/{ng_switch_spec.js => switch_spec.js} (73%)

diff --git a/modules/angular2/directives.js b/modules/angular2/directives.js
index b96135cd13..6a1b817ab5 100644
--- a/modules/angular2/directives.js
+++ b/modules/angular2/directives.js
@@ -1,4 +1,4 @@
-export * from './src/directives/ng_if';
-export * from './src/directives/ng_non_bindable';
-export * from './src/directives/ng_repeat';
-export * from './src/directives/ng_switch';
+export * from './src/directives/foreach';
+export * from './src/directives/if';
+export * from './src/directives/non_bindable';
+export * from './src/directives/switch';
diff --git a/modules/angular2/docs/core/01_templates.md b/modules/angular2/docs/core/01_templates.md
index 6d50cde555..a85506bb9a 100644
--- a/modules/angular2/docs/core/01_templates.md
+++ b/modules/angular2/docs/core/01_templates.md
@@ -157,7 +157,7 @@ Example:
 
 ```
 <ul>
-  <li template="ng-repeat: #item in items">
+  <li template="foreach: #item in items">
     {{item}}
   </li>
 </ul>
@@ -169,8 +169,8 @@ Example:
 Example:
 ```
 <ul>
-  <template def-ng-repeat:"item"
-            bind-ng-repeat-in="items">
+  <template def-foreach:"item"
+            bind-foreach-in="items">
     <li>
       {{item}}
     </li>
@@ -187,8 +187,8 @@ Example:
 Example:
 
 ```
-<template #ng-repeat="item"
-          [ng-repeat-in]="items">
+<template #foreach="item"
+          [foreach-in]="items">
   _some_content_to_repeat_
 </template>
 ```
@@ -198,8 +198,8 @@ Example:
 
 Example:
 ```
-<template def-ng-repeat="item"
-          bind-ng-repeat-in="items">
+<template def-foreach="item"
+          bind-foreach-in="items">
   _some_content_to_repeat_
 </template>
 ```
@@ -345,20 +345,20 @@ Example of conditionally included template:
 
 ```
 Hello {{user}}!
-<div template="ng-if: isAdimnistrator">
+<div template="if: isAdimnistrator">
   ...administrator menu here...
 </div>
 ```
 
-In the above example the `ng-if` instantiator determins if the child view (an instance of the child template) should be
-inserted into ther root view. The `ng-if` makes this decision based on if the `isAdimnistrator` binding is true.
+In the above example the `if` instantiator determins if the child view (an instance of the child template) should be
+inserted into ther root view. The `if` makes this decision based on if the `isAdimnistrator` binding is true.
 
 The above example is in the shart form, for better clarity let's rewrite it in the canonical form, which is functionaly
 identical.
 
 ```
 Hello {{user}}!
-<template [ng-if]="isAdimnistrator">
+<template [if]="isAdimnistrator">
   <div>
     ...administrator menu here...
   </div>
@@ -371,22 +371,22 @@ NOTE: Only Instantiator directives can be placed on the template element. (Decor
 ### Template Microsyntax
 
 Often times it is necessary to encode a lot of different bindings into a template to controll how the instantiation
-of the templates occures. One such example is ng-repeat.
+of the templates occures. One such example is foreach.
 
 ```
 <form #foo=form>
 </form>
 <ul>
-  <template ng-repeat #person [in]="people" #i="index">
+  <template foreach #person [in]="people" #i="index">
     <li>{{i}}. {{item}}<li>
   </template>
 </ul>
 ```
 
 Where:
-* `ng-repeat` triggers the ng-repeat directive.
-* `[in]="people"` binds to an iterable object to the `ng-repeat` controller.
-* `#person` exports the implicit `ng-repeat` item.
+* `foreach` triggers the foreach directive.
+* `[in]="people"` binds to an iterable object to the `foreach` controller.
+* `#person` exports the implicit `foreach` item.
 * `#i=index` exports item index as `i`.
 
 The above example is explicit but quite wordy, for this reason in most situatios a short hand version of the
@@ -394,7 +394,7 @@ syntax is prefferable.
 
 ```
 <ul>
-  <li template="ng-repeat; #person; in=people; #i=index;">{{i}}. {{item}}<li>
+  <li template="foreach; #person; in=people; #i=index;">{{i}}. {{item}}<li>
 </ul>
 ```
 
@@ -404,16 +404,16 @@ which allows us to further shorten the text.
 
 ```
 <ul>
-  <li template="ng-repeat #person in people #i=index">{{i}}. {{item}}<li>
+  <li template="foreach #person in people #i=index">{{i}}. {{item}}<li>
 </ul>
 ```
 
-We can also optionaly use `var` instead of `#` and add `:` to `ng-repeat` which creates the following recomended
-microsyntax for `ng-repeat`.
+We can also optionaly use `var` instead of `#` and add `:` to `foreach` which creates the following recomended
+microsyntax for `foreach`.
 
 ```
 <ul>
-  <li template="ng-repeat: var person in people; var i=index">{{i}}. {{item}}<li>
+  <li template="foreach: var person in people; var i=index">{{i}}. {{item}}<li>
 </ul>
 ```
 
@@ -524,7 +524,7 @@ Angular are:
 <div title="{{expression}}">{{expression}}</div>
 <div [title]="expression">...</div>
 <div bind-title="expression">...</div>
-<div template="ng-if: expression">...</div>
+<div template="if: expression">...</div>
 ```
 
 Expressions are simplified version of expression in the langugage in which you are writing your application. (i.e. 
diff --git a/modules/angular2/docs/core/02_directives.md b/modules/angular2/docs/core/02_directives.md
index 2db559fae0..730f0b368d 100644
--- a/modules/angular2/docs/core/02_directives.md
+++ b/modules/angular2/docs/core/02_directives.md
@@ -10,7 +10,7 @@ There are three different kinds of directives (described in mored detailed in la
 
 1. *Decorators*: can be placed on any DOM element and can be combined with other directives.
 2. *Components*: Components have encapsulated view and can configure injectors.
-3. *Instantiator*: Is responsible for adding or removing child views in parent view. (i.e. ng-repeat, ng-if)
+3. *Instantiator*: Is responsible for adding or removing child views in parent view. (i.e. foreach, if)
 
 
 
@@ -166,7 +166,7 @@ Example of usage:
 
 ## Instantiator
 
-Instantiator is a directive which can controll instantiation of child views which are then inserted into the DOM. (Examples are `ng-if` and `ng-repeat`.) 
+Instantiator is a directive which can controll instantiation of child views which are then inserted into the DOM. (Examples are `if` and `foreach`.) 
 
 * Instantiators can only be placed on `<template>` elements (or the short hand version which uses `<element template>` attribute.)
 * Only one instantiator can be present per DOM template element.
@@ -179,12 +179,12 @@ Instantiator is a directive which can controll instantiation of child views whic
 
 ```
 @Instantiator({
-  selector: '[ng-if]',
+  selector: '[if]',
   bind: {
-    'ng-if': 'condition'
+    'if': 'condition'
   }
 })
-export class NgIf {
+export class If {
   viewPort: ViewPort;
   view: View;
 
diff --git a/modules/angular2/docs/core/10_view.md b/modules/angular2/docs/core/10_view.md
index 209a0c6efb..0a9222c2d0 100644
--- a/modules/angular2/docs/core/10_view.md
+++ b/modules/angular2/docs/core/10_view.md
@@ -77,7 +77,7 @@ Let's start with a Template such as:
 
 ```
 <ul>
-  <li template="ng-repeat: person in people">{{person}}</li>
+  <li template="foreach: person in people">{{person}}</li>
 </ul>
 ```
 
@@ -102,28 +102,28 @@ The next step is to compose these two ProtoViews into actual view which is rende
 
 ```
 <ul>                    | viewA(SomeContexnt)
-  <template></template> | viewA(SomeContexnt): new NgRepeat(new ViewPort(protoViewB))
+  <template></template> | viewA(SomeContexnt): new Foreach(new ViewPort(protoViewB))
 </ul>                   | viewA(SomeContexnt)
 ```
 
-*Step2:* Instantiate `NgRepeat` directive which will receive the `ViewPort`. (The ViewPort has reference to `protoViewA`).
+*Step2:* Instantiate `Foreach` directive which will receive the `ViewPort`. (The ViewPort has reference to `protoViewA`).
 
 
-*Step3:* As the `NgRepeat` unrolls it asks the `ViewPort` to instantiate `protoViewB` and insert it after the `ViewPort` anchor. This is repeated for each `person` in `people`. Notice that 
+*Step3:* As the `Foreach` unrolls it asks the `ViewPort` to instantiate `protoViewB` and insert it after the `ViewPort` anchor. This is repeated for each `person` in `people`. Notice that 
 
 ```
 <ul>                    | viewA(someContext)
-  <template></template> | viewA(someContext): new NgRepeat(new ViewPort(protoViewB))
+  <template></template> | viewA(someContext): new Foreach(new ViewPort(protoViewB))
   <li>{{person}}</li>   | viewB0(locals0(someContext))
   <li>{{person}}</li>   | viewB1(locals0(someContext))
 </ul>                   | viewA(lomeContexnt)
 ```
 
-*Step4:* All of the bindings in the child Views are updated. Notice that in the case of `NgRepeat` the evaluation context for the `viewB0` and `viewB1` are `locals0` and `locals1` respectively. Locals allow the introduction of new local variables visible only within the scope of the View, and delegate any unknown references to the parent context.
+*Step4:* All of the bindings in the child Views are updated. Notice that in the case of `Foreach` the evaluation context for the `viewB0` and `viewB1` are `locals0` and `locals1` respectively. Locals allow the introduction of new local variables visible only within the scope of the View, and delegate any unknown references to the parent context.
 
 ```
 <ul>                    | viewA
-  <template></template> | viewA: new NgRepeat(new ViewPort(protoViewB))
+  <template></template> | viewA: new Foreach(new ViewPort(protoViewB))
   <li>Alice</li>        | viewB0
   <li>Bob</li>          | viewB1
 </ul>                   | viewA
diff --git a/modules/angular2/src/directives/ng_repeat.js b/modules/angular2/src/directives/foreach.js
similarity index 93%
rename from modules/angular2/src/directives/ng_repeat.js
rename to modules/angular2/src/directives/foreach.js
index 48c972ef0e..16de07fe31 100644
--- a/modules/angular2/src/directives/ng_repeat.js
+++ b/modules/angular2/src/directives/foreach.js
@@ -6,12 +6,12 @@ import {isPresent, isBlank} from 'angular2/src/facade/lang';
 import {ListWrapper} from 'angular2/src/facade/collection';
 
 @Template({
-  selector: '[ng-repeat]',
+  selector: '[foreach][in]',
   bind: {
     'in': 'iterable[]'
   }
 })
-export class NgRepeat extends OnChange {
+export class Foreach extends OnChange {
   viewPort: ViewPort;
   iterable;
   constructor(viewPort: ViewPort) {
@@ -35,13 +35,13 @@ export class NgRepeat extends OnChange {
       (movedRecord) => ListWrapper.push(recordViewTuples, new RecordViewTuple(movedRecord, null))
     );
 
-    var insertTuples = NgRepeat.bulkRemove(recordViewTuples, this.viewPort);
+    var insertTuples = Foreach.bulkRemove(recordViewTuples, this.viewPort);
 
     iteratorChanges.currentValue.forEachAddedItem(
       (addedRecord) => ListWrapper.push(insertTuples, new RecordViewTuple(addedRecord, null))
     );
 
-    NgRepeat.bulkInsert(insertTuples, this.viewPort);
+    Foreach.bulkInsert(insertTuples, this.viewPort);
 
     for (var i = 0; i < insertTuples.length; i++) {
       this.perViewChange(insertTuples[i].view, insertTuples[i].record);
diff --git a/modules/angular2/src/directives/ng_if.js b/modules/angular2/src/directives/if.js
similarity index 91%
rename from modules/angular2/src/directives/ng_if.js
rename to modules/angular2/src/directives/if.js
index 1b6c457f44..29d21d12a6 100644
--- a/modules/angular2/src/directives/ng_if.js
+++ b/modules/angular2/src/directives/if.js
@@ -3,12 +3,12 @@ import {ViewPort} from 'angular2/src/core/compiler/viewport';
 import {isBlank} from 'angular2/src/facade/lang';
 
 @Template({
-  selector: '[ng-if]',
+  selector: '[if]',
   bind: {
-    'ng-if': 'condition'
+    'if': 'condition'
   }
 })
-export class NgIf {
+export class If {
   viewPort: ViewPort;
   prevCondition: boolean;
 
diff --git a/modules/angular2/src/directives/ng_non_bindable.js b/modules/angular2/src/directives/non_bindable.js
similarity index 64%
rename from modules/angular2/src/directives/ng_non_bindable.js
rename to modules/angular2/src/directives/non_bindable.js
index 28cf47a87e..c4978746dd 100644
--- a/modules/angular2/src/directives/ng_non_bindable.js
+++ b/modules/angular2/src/directives/non_bindable.js
@@ -1,8 +1,8 @@
 import {Decorator} from 'angular2/src/core/annotations/annotations';
 
 @Decorator({
-  selector: '[ng-non-bindable]',
+  selector: '[non-bindable]',
   compileChildren: false
 })
-export class NgNonBindable {
+export class NonBindable {
 }
diff --git a/modules/angular2/src/directives/ng_switch.js b/modules/angular2/src/directives/switch.js
similarity index 72%
rename from modules/angular2/src/directives/ng_switch.js
rename to modules/angular2/src/directives/switch.js
index b583f4aef8..e7ec734855 100644
--- a/modules/angular2/src/directives/ng_switch.js
+++ b/modules/angular2/src/directives/switch.js
@@ -7,37 +7,37 @@ import {ListWrapper, List, MapWrapper, Map} from 'angular2/src/facade/collection
 import {Parent} from 'angular2/src/core/annotations/visibility';
 
 /**
- * The `ngSwitch` directive is used to conditionally swap DOM structure on your template based on a
+ * The `Switch` directive is used to conditionally swap DOM structure on your template based on a
  * scope expression.
- * Elements within `ngSwitch` but without `ngSwitchWhen` or `ngSwitchDefault` directives will be
+ * Elements within `Switch` but without `SwitchWhen` or `SwitchDefault` directives will be
  * preserved at the location as specified in the template.
  *
- * `ngSwitch` simply chooses nested elements and makes them visible based on which element matches
+ * `Switch` simply chooses nested elements and makes them visible based on which element matches
  * the value obtained from the evaluated expression. In other words, you define a container element
- * (where you place the directive), place an expression on the **`[ng-switch]="..."` attribute**),
- * define any inner elements inside of the directive and place a `[ng-switch-when]` attribute per
+ * (where you place the directive), place an expression on the **`[switch]="..."` attribute**),
+ * define any inner elements inside of the directive and place a `[switch-when]` attribute per
  * element.
- * The when attribute is used to inform ngSwitch which element to display when the expression is
+ * The when attribute is used to inform Switch which element to display when the expression is
  * evaluated. If a matching expression is not found via a when attribute then an element with the
  * default attribute is displayed.
  *
  * Example:
  *
  * ```
- * <ANY [ng-switch]="expression">
- *   <template [ng-switch-when]="whenExpression1">...</template>
- *   <template [ng-switch-when]="whenExpression1">...</template>
- *   <template [ng-switch-default]>...</template>
+ * <ANY [switch]="expression">
+ *   <template [switch-when]="whenExpression1">...</template>
+ *   <template [switch-when]="whenExpression1">...</template>
+ *   <template [switch-default]>...</template>
  * </ANY>
  * ```
  */
 @Decorator({
-  selector: '[ng-switch]',
+  selector: '[switch]',
   bind: {
-    'ng-switch': 'value'
+    'switch': 'value'
   }
 })
-export class NgSwitch {
+export class Switch {
   _switchValue: any;
   _useDefault: boolean;
   _valueViewPorts: Map;
@@ -130,38 +130,38 @@ export class NgSwitch {
 /**
  * Defines a case statement as an expression.
  *
- * If multiple `ngSwitchWhen` match the `ngSwitch` value, all of them are displayed.
+ * If multiple `SwitchWhen` match the `Switch` value, all of them are displayed.
  *
  * Example:
  *
  * ```
  * // match against a context variable
- * <template [ng-switch-when]="contextVariable">...</template>
+ * <template [switch-when]="contextVariable">...</template>
  *
  * // match against a constant string
- * <template [ng-switch-when]="'stringValue'">...</template>
+ * <template [switch-when]="'stringValue'">...</template>
  * ```
  */
 @Template({
-  selector: '[ng-switch-when]',
+  selector: '[switch-when]',
   bind: {
-    'ng-switch-when' : 'when'
+    'switch-when' : 'when'
   }
 })
-export class NgSwitchWhen {
+export class SwitchWhen {
   _value: any;
-  _ngSwitch: NgSwitch;
+  _switch: Switch;
   _viewPort: ViewPort;
 
-  constructor(el: NgElement, viewPort: ViewPort, @Parent() ngSwitch: NgSwitch) {
+  constructor(el: NgElement, viewPort: ViewPort, @Parent() sswitch: Switch) {
     // `_whenDefault` is used as a marker for a not yet initialized value
     this._value = _whenDefault;
-    this._ngSwitch = ngSwitch;
+    this._switch = sswitch;
     this._viewPort = viewPort;
   }
 
   set when(value) {
-    this._ngSwitch._onWhenValueChanged(this._value, value, this._viewPort);
+    this._switch._onWhenValueChanged(this._value, value, this._viewPort);
     this._value = value;
   }
 }
@@ -170,20 +170,20 @@ export class NgSwitchWhen {
 /**
  * Defines a default case statement.
  *
- * Default case statements are displayed when no `NgSwitchWhen` match the `ngSwitch` value.
+ * Default case statements are displayed when no `SwitchWhen` match the `switch` value.
  *
  * Example:
  *
  * ```
- * <template [ng-switch-default]>...</template>
+ * <template [switch-default]>...</template>
  * ```
  */
 @Template({
-  selector: '[ng-switch-default]'
+  selector: '[switch-default]'
 })
-export class NgSwitchDefault {
-  constructor(viewPort: ViewPort, @Parent() ngSwitch: NgSwitch) {
-    ngSwitch._registerViewPort(_whenDefault, viewPort);
+export class SwitchDefault {
+  constructor(viewPort: ViewPort, @Parent() sswitch: Switch) {
+    sswitch._registerViewPort(_whenDefault, viewPort);
   }
 }
 
diff --git a/modules/angular2/test/directives/ng_repeat_spec.js b/modules/angular2/test/directives/foreach_spec.js
similarity index 86%
rename from modules/angular2/test/directives/ng_repeat_spec.js
rename to modules/angular2/test/directives/foreach_spec.js
index b94e44d636..bf0cbaee70 100644
--- a/modules/angular2/test/directives/ng_repeat_spec.js
+++ b/modules/angular2/test/directives/foreach_spec.js
@@ -6,7 +6,6 @@ import {Injector} from 'angular2/di';
 import {Lexer, Parser, ChangeDetector, dynamicChangeDetection} from 'angular2/change_detection';
 
 import {Compiler, CompilerCache} from 'angular2/src/core/compiler/compiler';
-import {OnChange} from 'angular2/src/core/compiler/interfaces';
 import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
 import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
 
@@ -15,20 +14,14 @@ import {TemplateConfig} from 'angular2/src/core/annotations/template_config';
 
 import {ViewPort} from 'angular2/src/core/compiler/viewport';
 import {MapWrapper, ListWrapper} from 'angular2/src/facade/collection';
-import {NgRepeat} from 'angular2/src/directives/ng_repeat';
+import {Foreach} from 'angular2/src/directives/foreach';
 
 export function main() {
-  describe('ng-repeat', () => {
+  describe('foreach', () => {
     var view, cd, compiler, component;
     beforeEach(() => {
-      compiler = new Compiler(
-        dynamicChangeDetection,
-        null,
-        new DirectiveMetadataReader(),
-        new Parser(new Lexer()),
-        new CompilerCache(),
-        new NativeShadowDomStrategy()
-      );
+      compiler = new Compiler(dynamicChangeDetection, null, new DirectiveMetadataReader(),
+        new Parser(new Lexer()), new CompilerCache(), new NativeShadowDomStrategy());
     });
 
     function createView(pv) {
@@ -42,7 +35,7 @@ export function main() {
       return compiler.compile(TestComponent, el(template));
     }
 
-    var TEMPLATE = '<div><copy-me template="ng-repeat #item in items">{{item.toString()}};</copy-me></div>';
+    var TEMPLATE = '<div><copy-me template="foreach #item in items">{{item.toString()}};</copy-me></div>';
 
     it('should reflect initial elements', (done) => {
       compileWithTemplate(TEMPLATE).then((pv) => {
@@ -109,7 +102,7 @@ export function main() {
     });
 
     it('should iterate over an array of objects', () => {
-      compileWithTemplate('<ul><li template="ng-repeat #item in items">{{item["name"]}};</li></ul>').then((pv) => {
+      compileWithTemplate('<ul><li template="foreach #item in items">{{item["name"]}};</li></ul>').then((pv) => {
         createView(pv);
 
         // INIT
@@ -133,7 +126,7 @@ export function main() {
     });
 
     it('should gracefully handle nulls', (done) => {
-      compileWithTemplate('<ul><li template="ng-repeat #item in null">{{item}};</li></ul>').then((pv) => {
+      compileWithTemplate('<ul><li template="foreach #item in null">{{item}};</li></ul>').then((pv) => {
         createView(pv);
         cd.detectChanges();
         expect(DOM.getText(view.nodes[0])).toEqual('');
@@ -183,8 +176,8 @@ export function main() {
 
   it('should repeat over nested arrays', (done) => {
     compileWithTemplate(
-        '<div><div template="ng-repeat #item in items">' +
-          '<div template="ng-repeat #subitem in item">' +
+        '<div><div template="foreach #item in items">' +
+          '<div template="foreach #subitem in item">' +
           '{{subitem}};' +
         '</div>|</div></div>'
     ).then((pv) => {
@@ -201,7 +194,7 @@ export function main() {
 
   it('should display indices correctly', (done) => {
     var INDEX_TEMPLATE =
-      '<div><copy-me template="ng-repeat: var item in items; var i=index">{{i.toString()}}</copy-me></div>';
+      '<div><copy-me template="foreach: var item in items; var i=index">{{i.toString()}}</copy-me></div>';
     compileWithTemplate(INDEX_TEMPLATE).then((pv) => {
       createView(pv);
       component.items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
@@ -228,7 +221,7 @@ class Foo {
   selector: 'test-cmp',
   template: new TemplateConfig({
     inline: '',  // each test swaps with a custom template.
-    directives: [NgRepeat]
+    directives: [Foreach]
   })
 })
 class TestComponent {
diff --git a/modules/angular2/test/directives/ng_if_spec.js b/modules/angular2/test/directives/if_spec.js
similarity index 77%
rename from modules/angular2/test/directives/ng_if_spec.js
rename to modules/angular2/test/directives/if_spec.js
index aa43a3ec5f..a04a76f179 100644
--- a/modules/angular2/test/directives/ng_if_spec.js
+++ b/modules/angular2/test/directives/if_spec.js
@@ -1,4 +1,4 @@
-import {describe, xit, it, expect, beforeEach, ddescribe, iit, IS_DARTIUM, el} from 'angular2/test_lib';
+import {describe, xit, it, expect, beforeEach, ddescribe, iit, el, IS_DARTIUM} from 'angular2/test_lib';
 
 import {DOM} from 'angular2/src/facade/dom';
 
@@ -12,19 +12,14 @@ import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_str
 import {Component} from 'angular2/src/core/annotations/annotations';
 import {TemplateConfig} from 'angular2/src/core/annotations/template_config';
 
-import {NgIf} from 'angular2/src/directives/ng_if';
+import {If} from 'angular2/src/directives/if';
 
 export function main() {
-  describe('ng-if', () => {
+  describe('if directive', () => {
     var view, cd, compiler, component;
     beforeEach(() => {
-      compiler = new Compiler(
-        dynamicChangeDetection,
-        null,
-        new DirectiveMetadataReader(),
-        new Parser(new Lexer()),
-        new CompilerCache(),
-        new NativeShadowDomStrategy());
+      compiler = new Compiler(dynamicChangeDetection, null, new DirectiveMetadataReader(),
+        new Parser(new Lexer()), new CompilerCache(), new NativeShadowDomStrategy());
     });
 
     function createView(pv) {
@@ -39,7 +34,7 @@ export function main() {
     }
 
     it('should work in a template attribute', (done) => {
-      compileWithTemplate('<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>').then((pv) => {
+      compileWithTemplate('<div><copy-me template="if booleanCondition">hello</copy-me></div>').then((pv) => {
         createView(pv);
         cd.detectChanges();
 
@@ -50,7 +45,7 @@ export function main() {
     });
 
     it('should work in a template element', (done) => {
-      compileWithTemplate('<div><template [ng-if]="booleanCondition"><copy-me>hello2</copy-me></template></div>').then((pv) => {
+      compileWithTemplate('<div><template [if]="booleanCondition"><copy-me>hello2</copy-me></template></div>').then((pv) => {
         createView(pv);
         cd.detectChanges();
 
@@ -61,7 +56,7 @@ export function main() {
     });
 
     it('should toggle node when condition changes', (done) => {
-      compileWithTemplate('<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>').then((pv) => {
+      compileWithTemplate('<div><copy-me template="if booleanCondition">hello</copy-me></div>').then((pv) => {
         createView(pv);
 
         component.booleanCondition = false;
@@ -84,12 +79,12 @@ export function main() {
       });
     });
 
-    it('should update several nodes with ng-if', (done) => {
+    it('should update several nodes with if', (done) => {
       var templateString =
       '<div>' +
-        '<copy-me template="ng-if numberCondition + 1 >= 2">helloNumber</copy-me>' +
-        '<copy-me template="ng-if stringCondition == \'foo\'">helloString</copy-me>' +
-        '<copy-me template="ng-if functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
+        '<copy-me template="if numberCondition + 1 >= 2">helloNumber</copy-me>' +
+        '<copy-me template="if stringCondition == \'foo\'">helloString</copy-me>' +
+        '<copy-me template="if functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
       '</div>';
       compileWithTemplate(templateString).then((pv) => {
         createView(pv);
@@ -115,7 +110,7 @@ export function main() {
 
     if (!IS_DARTIUM) {
       it('should leave the element if the condition is a non-empty string (JS)', (done) => {
-        compileWithTemplate('<div><copy-me template="ng-if stringCondition">hello</copy-me></div>').then((pv) => {
+        compileWithTemplate('<div><copy-me template="if stringCondition">hello</copy-me></div>').then((pv) => {
           createView(pv);
           cd.detectChanges();
 
@@ -126,7 +121,7 @@ export function main() {
       });
 
       it('should leave the element if the condition is an object (JS)', (done) => {
-        compileWithTemplate('<div><copy-me template="ng-if objectCondition">hello</copy-me></div>').then((pv) => {
+        compileWithTemplate('<div><copy-me template="if objectCondition">hello</copy-me></div>').then((pv) => {
           createView(pv);
           cd.detectChanges();
 
@@ -137,7 +132,7 @@ export function main() {
       });
 
       it('should remove the element if the condition is null (JS)', (done) => {
-        compileWithTemplate('<div><copy-me template="ng-if nullCondition">hello</copy-me></div>').then((pv) => {
+        compileWithTemplate('<div><copy-me template="if nullCondition">hello</copy-me></div>').then((pv) => {
           createView(pv);
           cd.detectChanges();
 
@@ -148,7 +143,7 @@ export function main() {
       });
 
       it('should not add the element twice if the condition goes from true to true (JS)', (done) => {
-        compileWithTemplate('<div><copy-me template="ng-if numberCondition">hello</copy-me></div>').then((pv) => {
+        compileWithTemplate('<div><copy-me template="if numberCondition">hello</copy-me></div>').then((pv) => {
           createView(pv);
 
           cd.detectChanges();
@@ -165,7 +160,7 @@ export function main() {
       });
 
       it('should not recreate the element if the condition goes from true to true (JS)', (done) => {
-        compileWithTemplate('<div><copy-me template="ng-if numberCondition">hello</copy-me></div>').then((pv) => {
+        compileWithTemplate('<div><copy-me template="if numberCondition">hello</copy-me></div>').then((pv) => {
           createView(pv);
 
           cd.detectChanges();
@@ -180,7 +175,7 @@ export function main() {
       });
     } else {
       it('should not create the element if the condition is not a boolean (DART)', (done) => {
-        compileWithTemplate('<div><copy-me template="ng-if numberCondition">hello</copy-me></div>').then((pv) => {
+        compileWithTemplate('<div><copy-me template="if numberCondition">hello</copy-me></div>').then((pv) => {
           createView(pv);
           expect(function(){cd.detectChanges();}).toThrowError();
           expect(view.nodes[0].querySelectorAll('copy-me').length).toEqual(0);
@@ -197,7 +192,7 @@ export function main() {
   selector: 'test-cmp',
   template: new TemplateConfig({
     inline: '',  // each test swaps with a custom template.
-    directives: [NgIf]
+    directives: [If]
   })
 })
 class TestComponent {
diff --git a/modules/angular2/test/directives/ng_non_bindable_spec.js b/modules/angular2/test/directives/non_bindable_spec.js
similarity index 79%
rename from modules/angular2/test/directives/ng_non_bindable_spec.js
rename to modules/angular2/test/directives/non_bindable_spec.js
index bb796791d2..36f416ec37 100644
--- a/modules/angular2/test/directives/ng_non_bindable_spec.js
+++ b/modules/angular2/test/directives/non_bindable_spec.js
@@ -8,20 +8,14 @@ import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_str
 import {Decorator, Component} from 'angular2/src/core/annotations/annotations';
 import {TemplateConfig} from 'angular2/src/core/annotations/template_config';
 import {NgElement} from 'angular2/src/core/dom/element';
-import {NgNonBindable} from 'angular2/src/directives/ng_non_bindable';
+import {NonBindable} from 'angular2/src/directives/non_bindable';
 
 export function main() {
-  describe('ng-non-bindable', () => {
+  describe('non-bindable', () => {
     var view, cd, compiler, component;
     beforeEach(() => {
-      compiler = new Compiler(
-        dynamicChangeDetection,
-        null,
-        new DirectiveMetadataReader(),
-        new Parser(new Lexer()),
-        new CompilerCache(),
-        new NativeShadowDomStrategy()
-      );
+      compiler = new Compiler(dynamicChangeDetection,
+        null, new DirectiveMetadataReader(), new Parser(new Lexer()), new CompilerCache(), new NativeShadowDomStrategy());
     });
 
     function createView(pv) {
@@ -36,7 +30,7 @@ export function main() {
     }
 
     it('should not interpolate children', (done) => {
-      var template = '<div>{{text}}<span ng-non-bindable>{{text}}</span></div>';
+      var template = '<div>{{text}}<span non-bindable>{{text}}</span></div>';
       compileWithTemplate(template).then((pv) => {
         createView(pv);
         cd.detectChanges();
@@ -46,7 +40,7 @@ export function main() {
     });
 
     it('should ignore directives on child nodes', (done) => {
-      var template = '<div ng-non-bindable><span id=child test-dec>{{text}}</span></div>';
+      var template = '<div non-bindable><span id=child test-dec>{{text}}</span></div>';
       compileWithTemplate(template).then((pv) => {
         createView(pv);
         cd.detectChanges();
@@ -57,7 +51,7 @@ export function main() {
     });
 
     it('should trigger directives on the same node', (done) => {
-      var template = '<div><span id=child ng-non-bindable test-dec>{{text}}</span></div>';
+      var template = '<div><span id=child non-bindable test-dec>{{text}}</span></div>';
       compileWithTemplate(template).then((pv) => {
         createView(pv);
         cd.detectChanges();
@@ -73,7 +67,7 @@ export function main() {
   selector: 'test-cmp',
   template: new TemplateConfig({
     inline: '',  // each test swaps with a custom template.
-    directives: [NgNonBindable, TestDecorator]
+    directives: [NonBindable, TestDecorator]
   })
 })
 class TestComponent {
diff --git a/modules/angular2/test/directives/ng_switch_spec.js b/modules/angular2/test/directives/switch_spec.js
similarity index 73%
rename from modules/angular2/test/directives/ng_switch_spec.js
rename to modules/angular2/test/directives/switch_spec.js
index a84a088921..56be4d2b38 100644
--- a/modules/angular2/test/directives/ng_switch_spec.js
+++ b/modules/angular2/test/directives/switch_spec.js
@@ -7,20 +7,14 @@ import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_meta
 import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
 import {Component} from 'angular2/src/core/annotations/annotations';
 import {TemplateConfig} from 'angular2/src/core/annotations/template_config';
-import {NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/src/directives/ng_switch';
+import {Switch, SwitchWhen, SwitchDefault} from 'angular2/src/directives/switch';
 
 export function main() {
-  describe('ng-switch', () => {
+  describe('switch', () => {
     var view, cd, compiler, component;
     beforeEach(() => {
-      compiler = new Compiler(
-        dynamicChangeDetection,
-        null,
-        new DirectiveMetadataReader(),
-        new Parser(new Lexer()),
-        new CompilerCache(),
-        new NativeShadowDomStrategy()
-      );
+      compiler = new Compiler(dynamicChangeDetection, null, new DirectiveMetadataReader(),
+        new Parser(new Lexer()), new CompilerCache(), new NativeShadowDomStrategy());
     });
 
     function createView(pv) {
@@ -37,9 +31,9 @@ export function main() {
     describe('switch value changes', () => {
       it('should switch amongst when values', (done) => {
         var template = '<div>' +
-          '<ul [ng-switch]="switchValue">' +
-            '<template [ng-switch-when]="\'a\'"><li>when a</li></template>' +
-            '<template [ng-switch-when]="\'b\'"><li>when b</li></template>' +
+          '<ul [switch]="switchValue">' +
+            '<template [switch-when]="\'a\'"><li>when a</li></template>' +
+            '<template [switch-when]="\'b\'"><li>when b</li></template>' +
           '</ul></div>';
         compileWithTemplate(template).then((pv) => {
           createView(pv);
@@ -60,9 +54,9 @@ export function main() {
 
       it('should switch amongst when values with fallback to default', (done) => {
         var template = '<div>' +
-          '<ul [ng-switch]="switchValue">' +
-            '<li template="ng-switch-when \'a\'">when a</li>' +
-            '<li template="ng-switch-default">when default</li>' +
+          '<ul [switch]="switchValue">' +
+            '<li template="switch-when \'a\'">when a</li>' +
+            '<li template="switch-default">when default</li>' +
           '</ul></div>';
         compileWithTemplate(template).then((pv) => {
           createView(pv);
@@ -83,13 +77,13 @@ export function main() {
 
       it('should support multiple whens with the same value', (done) => {
         var template = '<div>' +
-          '<ul [ng-switch]="switchValue">' +
-            '<template [ng-switch-when]="\'a\'"><li>when a1;</li></template>' +
-            '<template [ng-switch-when]="\'b\'"><li>when b1;</li></template>' +
-            '<template [ng-switch-when]="\'a\'"><li>when a2;</li></template>' +
-            '<template [ng-switch-when]="\'b\'"><li>when b2;</li></template>' +
-            '<template [ng-switch-default]><li>when default1;</li></template>' +
-            '<template [ng-switch-default]><li>when default2;</li></template>' +
+          '<ul [switch]="switchValue">' +
+            '<template [switch-when]="\'a\'"><li>when a1;</li></template>' +
+            '<template [switch-when]="\'b\'"><li>when b1;</li></template>' +
+            '<template [switch-when]="\'a\'"><li>when a2;</li></template>' +
+            '<template [switch-when]="\'b\'"><li>when b2;</li></template>' +
+            '<template [switch-default]><li>when default1;</li></template>' +
+            '<template [switch-default]><li>when default2;</li></template>' +
           '</ul></div>';
         compileWithTemplate(template).then((pv) => {
           createView(pv);
@@ -112,10 +106,10 @@ export function main() {
     describe('when values changes', () => {
       it('should switch amongst when values', (done) => {
         var template = '<div>' +
-          '<ul [ng-switch]="switchValue">' +
-            '<template [ng-switch-when]="when1"><li>when 1;</li></template>' +
-            '<template [ng-switch-when]="when2"><li>when 2;</li></template>' +
-            '<template [ng-switch-default]><li>when default;</li></template>' +
+          '<ul [switch]="switchValue">' +
+            '<template [switch-when]="when1"><li>when 1;</li></template>' +
+            '<template [switch-when]="when2"><li>when 2;</li></template>' +
+            '<template [switch-default]><li>when default;</li></template>' +
           '</ul></div>';
         compileWithTemplate(template).then((pv) => {
           createView(pv);
@@ -153,7 +147,7 @@ export function main() {
   selector: 'test-cmp',
   template: new TemplateConfig({
     inline: '',  // each test swaps with a custom template.
-    directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]
+    directives: [Switch, SwitchWhen, SwitchDefault]
   })
 })
 class TestComponent {
diff --git a/modules/benchmarks/src/naive_infinite_scroll/app.js b/modules/benchmarks/src/naive_infinite_scroll/app.js
index 67aacdd45c..5c17991a8f 100644
--- a/modules/benchmarks/src/naive_infinite_scroll/app.js
+++ b/modules/benchmarks/src/naive_infinite_scroll/app.js
@@ -6,7 +6,7 @@ import {bootstrap, Component, Template, TemplateConfig, ViewPort, Compiler}
 import {PromiseWrapper} from 'angular2/src/facade/async';
 import {ListWrapper} from 'angular2/src/facade/collection';
 import {ScrollAreaComponent} from './scroll_area';
-import {NgIf, NgRepeat} from 'angular2/directives';
+import {If, Foreach} from 'angular2/directives';
 import {DOM, document, Element} from 'angular2/src/facade/dom';
 
 export class App {
@@ -86,7 +86,7 @@ export function setupReflectorForApp() {
       new Component({
         selector: 'scroll-app',
         template: new TemplateConfig({
-          directives: [ScrollAreaComponent, NgIf, NgRepeat],
+          directives: [ScrollAreaComponent, If, Foreach],
           inline: `
             <div>
               <div style="display: flex">
@@ -96,9 +96,9 @@ export function setupReflectorForApp() {
                   <button id="reset-btn">Reset</button>
                 </div>
               </div>
-              <div template="ng-if scrollAreas.length > 0">
+              <div template="if scrollAreas.length > 0">
                 <p>Following tables are only here to add weight to the UI:</p>
-                <scroll-area template="ng-repeat #scrollArea in scrollAreas"></scroll-area>
+                <scroll-area template="foreach #scrollArea in scrollAreas"></scroll-area>
               </div>
             </div>`
         })
diff --git a/modules/benchmarks/src/naive_infinite_scroll/cells.js b/modules/benchmarks/src/naive_infinite_scroll/cells.js
index 6fcd51a478..805d0045e0 100644
--- a/modules/benchmarks/src/naive_infinite_scroll/cells.js
+++ b/modules/benchmarks/src/naive_infinite_scroll/cells.js
@@ -7,7 +7,7 @@ import {PromiseWrapper} from 'angular2/src/facade/async';
 import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
 import {Company, Opportunity, Offering, Account, CustomDate, STATUS_LIST}
     from './common';
-import {NgRepeat} from 'angular2/directives';
+import {Foreach} from 'angular2/directives';
 
 export class HasStyle {
   style:Map;
@@ -158,10 +158,10 @@ export function setupReflectorForCells() {
       new Component({
         selector: 'stage-buttons',
         template: new TemplateConfig({
-            directives: [NgRepeat],
+            directives: [Foreach],
             inline: `
               <div [style]="style">
-                  <button template="ng-repeat #stage in stages"
+                  <button template="foreach #stage in stages"
                           [disabled]="stage.isDisabled"
                           [style]="stage.style"
                           on-click="setStage(stage)">
diff --git a/modules/benchmarks/src/naive_infinite_scroll/index.js b/modules/benchmarks/src/naive_infinite_scroll/index.js
index aa0c75fd27..c0e613aaac 100644
--- a/modules/benchmarks/src/naive_infinite_scroll/index.js
+++ b/modules/benchmarks/src/naive_infinite_scroll/index.js
@@ -15,7 +15,7 @@ import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
 import {XHR} from 'angular2/src/core/compiler/xhr/xhr';
 import {XHRImpl} from 'angular2/src/core/compiler/xhr/xhr_impl';
 
-import {NgIf, NgRepeat} from 'angular2/directives';
+import {If, Foreach} from 'angular2/directives';
 import {App, setupReflectorForApp} from './app';
 import {ScrollAreaComponent, setupReflectorForScrollArea} from './scroll_area';
 import {ScrollItemComponent, setupReflectorForScrollItem} from './scroll_item';
@@ -149,22 +149,22 @@ export function setupReflector() {
 }
 
 export function setupReflectorForAngular() {
-  reflector.registerType(NgIf, {
-    'factory': (vp) => new NgIf(vp),
+  reflector.registerType(If, {
+    'factory': (vp) => new If(vp),
     'parameters': [[ViewPort]],
     'annotations' : [new Template({
-      selector: '[ng-if]',
+      selector: '[if]',
       bind: {
-        'ng-if': 'condition'
+        'if': 'condition'
       }
     })]
   });
 
-  reflector.registerType(NgRepeat, {
-    'factory': (vp) => new NgRepeat(vp),
+  reflector.registerType(Foreach, {
+    'factory': (vp) => new Foreach(vp),
     'parameters': [[ViewPort]],
     'annotations' : [new Template({
-      selector: '[ng-repeat]',
+      selector: '[foreach]',
       bind: {
         'in': 'iterable[]'
       }
diff --git a/modules/benchmarks/src/naive_infinite_scroll/scroll_area.js b/modules/benchmarks/src/naive_infinite_scroll/scroll_area.js
index 7f18407db5..7b42930d31 100644
--- a/modules/benchmarks/src/naive_infinite_scroll/scroll_area.js
+++ b/modules/benchmarks/src/naive_infinite_scroll/scroll_area.js
@@ -12,7 +12,7 @@ import {Offering, ITEMS, ITEM_HEIGHT, VISIBLE_ITEMS, VIEW_PORT_HEIGHT,
     ROW_WIDTH, HEIGHT} from './common';
 import {generateOfferings} from './random_data';
 import {ScrollItemComponent} from './scroll_item';
-import {NgRepeat} from 'angular2/directives';
+import {Foreach} from 'angular2/directives';
 
 export class ScrollAreaComponent {
   _fullList:List<Offering>;
@@ -68,7 +68,7 @@ export function setupReflectorForScrollArea() {
       new Component({
         selector: 'scroll-area',
         template: new TemplateConfig({
-            directives: [ScrollItemComponent, NgRepeat],
+            directives: [ScrollItemComponent, Foreach],
             inline: `
               <div>
                   <div id="scrollDiv"
@@ -77,7 +77,7 @@ export function setupReflectorForScrollArea() {
                       <div id="padding"></div>
                       <div id="inner">
                           <scroll-item
-                              template="ng-repeat #item in visibleItems"
+                              template="foreach #item in visibleItems"
                               [offering]="item">
                           </scroll-item>
                       </div>
diff --git a/tools/transpiler/src/outputgeneration/DartParseTreeWriter.js b/tools/transpiler/src/outputgeneration/DartParseTreeWriter.js
index d2a8a8cfde..936aaa6b11 100644
--- a/tools/transpiler/src/outputgeneration/DartParseTreeWriter.js
+++ b/tools/transpiler/src/outputgeneration/DartParseTreeWriter.js
@@ -492,7 +492,7 @@ export class DartParseTreeWriter extends JavaScriptParseTreeWriter {
   }
 
   toString() {
-    return "library " + this.libName + ";\n" + super.toString();
+    return "library " + this.libName + "_dart;\n" + super.toString();
   }
 }
 
diff --git a/tools/transpiler/unittest/transpilertests.js b/tools/transpiler/unittest/transpilertests.js
index d8b8a972ec..42af136038 100644
--- a/tools/transpiler/unittest/transpilertests.js
+++ b/tools/transpiler/unittest/transpilertests.js
@@ -20,7 +20,7 @@ describe('transpile to dart', function(){
         "var s1:string = \"${a}\";" +
         "var s2:string = '\\${a}';" +
         "var s3:string = '$a';");
-      expect(result.js).toBe("library test;\n" +
+      expect(result.js).toBe("library test_dart;\n" +
       "num a = 1;\n" +
       "String s1 = \"\\${a}\";\n" +
       "String s2 = '\\${a}';\n" +
@@ -32,7 +32,7 @@ describe('transpile to dart', function(){
         "var a:number = 1;" +
         "var s1:string = `$a`;" +
         "var s2:string = `\\$a`;");
-      expect(result.js).toBe("library test;\n" +
+      expect(result.js).toBe("library test_dart;\n" +
       "num a = 1;\n" +
       "String s1 = '''\\$a''';\n" +
       "String s2 = '''\\$a''';\n");
@@ -42,7 +42,7 @@ describe('transpile to dart', function(){
       var result = compiler.compile(OPTIONS, "test.js",
         "var a:number = 1;" +
         "var s1:string = `${a}`;");
-      expect(result.js).toBe("library test;\n" +
+      expect(result.js).toBe("library test_dart;\n" +
       "num a = 1;\n" +
       "String s1 = '''${a}''';\n");
     });