chore: rename for to ng-for

Closes #1598
Closes #1295
Closes #1827

Closes #1827

modules/angular2/src/change_detection/parser/parser.ts

@@ -523,9 +523,17 @@ class _ParseAST {
 
   parseTemplateBindings() {
     var bindings = [];
+    var prefix = null;
     while (this.index < this.tokens.length) {
       var keyIsVar: boolean = this.optionalKeywordVar();
       var key = this.expectTemplateBindingKey();
+      if (!keyIsVar) {
+        if (prefix == null) {
+          prefix = key;
+        } else {
+          key = prefix + '-' + key;
+        }
+      }
       this.optionalCharacter($COLON);
       var name = null;
       var expression = null;

modules/angular2/src/core/annotations_impl/view.js

@@ -62,7 +62,7 @@ export class View {
    *   directives: [For]
    *   template: '
    *   <ul>
-   *     <li *for="item in items">{{item}}</li>
+   *     <li *ng-for="item in items">{{item}}</li>
    *   </ul>'
    * })
    * class MyComponent {

modules/angular2/src/core/compiler/query_list.js

@@ -7,7 +7,7 @@ import {BaseQueryList} from './base_query_list';
  * The directives are kept in depth-first pre-order traversal of the DOM.
  *
  * The `QueryList` is iterable, therefore it can be used in both javascript code with `for..of` loop as well as in
- * template with `*for="of"` directive.
+ * template with `*ng-for="of"` directive.
  *
  * NOTE: In the future this class will implement an `Observable` interface. For now it uses a plain list of observable
  * callbacks.
@@ -20,7 +20,7 @@ import {BaseQueryList} from './base_query_list';
  * ```html
  * <tabs>
  *   <pane title="Overview">...</pane>
- *   <pane *for="#o of objects" [title]="o.title">{{o.text}}</pane>
+ *   <pane *ng-for="#o of objects" [title]="o.title">{{o.text}}</pane>
  * </tabs>
  * ```
  *
@@ -29,7 +29,7 @@ import {BaseQueryList} from './base_query_list';
  *
  * 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 `*for` could rearange the list of `<pane>` components which would not be reported to `<tabs>`
+ * 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.
@@ -41,7 +41,7 @@ import {BaseQueryList} from './base_query_list';
  * @View({
  *  template: `
  *    <ul>
- *      <li *for="#pane of panes">{{pane.title}}</li>
+ *      <li *ng-for="#pane of panes">{{pane.title}}</li>
  *    </ul>
  *    <content></content>
  *  `

modules/angular2/src/directives/ng_for.js

@@ -22,7 +22,7 @@ import {ListWrapper} from 'angular2/src/facade/collection';
  *
  * ```
  * <ul>
- *   <li *for="#error of errors; #i = index">
+ *   <li *ng-for="#error of errors; #i = index">
  *     Error {{i}} of {{errors.length}}: {{error.message}}
  *   </li>
  * </ul>
@@ -30,19 +30,19 @@ import {ListWrapper} from 'angular2/src/facade/collection';
  *
  * # Syntax
  *
- * - `<li *for="#item of items; #i = index">...</li>`
- * - `<li template="for #item of items; #i=index">...</li>`
- * - `<template [for]="#item" [of]="items" #i="index"><li>...</li></template>`
+ * - `<li *ng-for="#item of items; #i = index">...</li>`
+ * - `<li template="ng-for #item ng-for-of items; #i=index">...</li>`
+ * - `<template [ng-for]="#item" [ng-for-of]="items" #i="index"><li>...</li></template>`
  *
  * @exportedAs angular2/directives
  */
 @Directive({
-  selector: '[for][of]',
+  selector: '[ng-for][ng-for-of]',
   properties: {
-    'iterableChanges': 'of | iterableDiff'
+    'iterableChanges': 'ngForOf | iterableDiff'
   }
 })
-export class For  {
+export class NgFor  {
   viewContainer: ViewContainerRef;
   protoViewRef: ProtoViewRef;
   constructor(viewContainer:ViewContainerRef, protoViewRef: ProtoViewRef) {
@@ -67,13 +67,13 @@ export class For  {
       (movedRecord) => ListWrapper.push(recordViewTuples, new RecordViewTuple(movedRecord, null))
     );
 
-    var insertTuples = For.bulkRemove(recordViewTuples, this.viewContainer);
+    var insertTuples = NgFor.bulkRemove(recordViewTuples, this.viewContainer);
 
     changes.forEachAddedItem(
       (addedRecord) => ListWrapper.push(insertTuples, new RecordViewTuple(addedRecord, null))
     );
 
-    For.bulkInsert(insertTuples, this.viewContainer, this.protoViewRef);
+    NgFor.bulkInsert(insertTuples, this.viewContainer, this.protoViewRef);
 
     for (var i = 0; i < insertTuples.length; i++) {
       this.perViewChange(insertTuples[i].view, insertTuples[i].record);

modules/angular2/src/render/dom/view/proto_view_builder.js

@@ -36,7 +36,7 @@ export class ProtoViewBuilder {
   bindVariable(name, value) {
     // Store the variable map from value to variable, reflecting how it will be used later by
     // DomView. When a local is set to the view, a lookup for the variable name will take place keyed
-    // by the "value", or exported identifier. For example, ng-repeat sets a view local of "index".
+    // by the "value", or exported identifier. For example, ng-for sets a view local of "index".
     // When this occurs, a lookup keyed by "index" must occur to find if there is a var referencing
     // it.
     MapWrapper.set(this.variableBindings, value, name);
@@ -190,7 +190,7 @@ export class ElementBinderBuilder {
     } else {
       // Store the variable map from value to variable, reflecting how it will be used later by
       // DomView. When a local is set to the view, a lookup for the variable name will take place keyed
-      // by the "value", or exported identifier. For example, ng-repeat sets a view local of "index".
+      // by the "value", or exported identifier. For example, ng-for sets a view local of "index".
       // When this occurs, a lookup keyed by "index" must occur to find if there is a var referencing
       // it.
       MapWrapper.set(this.variableBindings, value, name);