chore: rename for to ng-for

Closes #1598
Closes #1295
Closes #1827

Closes #1827

modules/angular2/directives.js

@@ -6,13 +6,13 @@
  */
 
 import {CONST_EXPR} from './src/facade/lang';
-import {For} from './src/directives/for';
+import {NgFor} from './src/directives/ng_for';
 import {NgIf} from './src/directives/ng_if';
 import {NgNonBindable} from './src/directives/ng_non_bindable';
 import {NgSwitch, NgSwitchWhen, NgSwitchDefault} from './src/directives/ng_switch';
 
 export * from './src/directives/class';
-export * from './src/directives/for';
+export * from './src/directives/ng_for';
 export * from './src/directives/ng_if';
 export * from './src/directives/ng_non_bindable';
 export * from './src/directives/ng_switch';
@@ -24,7 +24,7 @@ export * from './src/directives/ng_switch';
  * instead of writing:
  *
  * ```
- * import {If, For, NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/angular2';
+ * import {If, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/angular2';
  * import {OtherDirective} from 'myDirectives';
  *
  * @Component({
@@ -32,7 +32,7 @@ export * from './src/directives/ng_switch';
  * })
  * @View({
  *   templateUrl: 'myComponent.html',
- *   directives: [If, For, NgSwitch, NgSwitchWhen, NgSwitchDefault, OtherDirective]
+ *   directives: [If, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault, OtherDirective]
  * })
  * export class MyComponent {
  *   ...
@@ -58,5 +58,5 @@ export * from './src/directives/ng_switch';
  *
  */
 export const coreDirectives:List = CONST_EXPR([
-  For, NgIf, NgNonBindable, NgSwitch, NgSwitchWhen, NgSwitchDefault
+  NgFor, NgIf, NgNonBindable, NgSwitch, NgSwitchWhen, NgSwitchDefault
 ]);

modules/angular2/docs/core/01_templates.md

@@ -456,7 +456,7 @@ Finally, we can move the `for` keyword to the left hand side and prefix it with
 
 ```
 <ul>
-  <li *for="var person of people; var i=index">{{i}}. {{person}}<li>
+  <li *ng-for="var person of people; var i=index">{{i}}. {{person}}<li>
 </ul>
 ```
 

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 *ng-for="#item of items; #i = index">...</li>`
- * - `<li template="for #item of items; #i=index">...</li>`
+ * - `<li template="ng-for #item ng-for-of items; #i=index">...</li>`
- * - `<template [for]="#item" [of]="items" #i="index"><li>...</li></template>`
+ * - `<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);

modules/angular2/test/change_detection/parser/parser_spec.js

@@ -533,7 +533,7 @@ export function main() {
 
       it('should allow multiple pairs', () => {
         var bindings = parseTemplateBindings("a 1 b 2");
-        expect(keys(bindings)).toEqual(['a', 'b']);
+        expect(keys(bindings)).toEqual(['a', 'a-b']);
         expect(exprSources(bindings)).toEqual(['1 ', '2']);
       });
 
@@ -565,7 +565,7 @@ export function main() {
         expect(keyValues(bindings)).toEqual(['keyword', '#item=\$implicit', '#i=k']);
 
         bindings = parseTemplateBindings("directive: var item in expr; var a = b", 'location');
-        expect(keyValues(bindings)).toEqual(['directive', '#item=\$implicit', 'in=expr in location', '#a=b']);
+        expect(keyValues(bindings)).toEqual(['directive', '#item=\$implicit', 'directive-in=expr in location', '#a=b']);
       });
 
       it('should parse pipes', () => {

modules/angular2/test/core/compiler/integration_spec.js

@@ -33,7 +33,7 @@ import {Parent, Ancestor} from 'angular2/src/core/annotations_impl/visibility';
 import {Attribute, Query} from 'angular2/src/core/annotations_impl/di';
 
 import {NgIf} from 'angular2/src/directives/ng_if';
-import {For} from 'angular2/src/directives/for';
+import {NgFor} from '../../../src/directives/ng_for';
 
 import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
 import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
@@ -1517,8 +1517,8 @@ class ToolbarPart {
   selector: 'toolbar'
 })
 @View({
-  template: 'TOOLBAR(<div *for="var part of query" [toolbar-vc]="part"></div>)',
+  template: 'TOOLBAR(<div *ng-for="var part of query" [toolbar-vc]="part"></div>)',
-  directives: [ToolbarViewContainer, For]
+  directives: [ToolbarViewContainer, NgFor]
 })
 class ToolbarComponent {
   query:QueryList;

modules/angular2/test/core/compiler/query_integration_spec.js

@@ -17,7 +17,7 @@ import {TestBed} from 'angular2/src/test_lib/test_bed';
 import {QueryList} from 'angular2/src/core/compiler/query_list';
 import {Query} from 'angular2/src/core/annotations_impl/di';
 
-import {NgIf, For} from 'angular2/angular2';
+import {NgIf, NgFor} from 'angular2/angular2';
 
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
@@ -66,7 +66,7 @@ export function main() {
     it('should reflect moved directives', inject([TestBed, AsyncTestCompleter], (tb, async) => {
       var template =
         '<div text="1"></div>' +
-        '<needs-query text="2"><div *for="var i of list" [text]="i"></div></needs-query>' +
+        '<needs-query text="2"><div *ng-for="var i of list" [text]="i"></div></needs-query>' +
         '<div text="4"></div>';
 
       tb.createView(MyComp, {html: template}).then((view) => {
@@ -88,8 +88,8 @@ export function main() {
 
 @Component({selector: 'needs-query'})
 @View({
-  directives: [For],
+  directives: [NgFor],
-  template: '<div *for="var dir of query">{{dir.text}}|</div>'
+  template: '<div *ng-for="var dir of query">{{dir.text}}|</div>'
 })
 class NeedsQuery {
   query: QueryList;
@@ -113,7 +113,7 @@ class TextDirective {
 
 @Component({selector: 'my-comp'})
 @View({
-  directives: [NeedsQuery, TextDirective,  NgIf, For]
+  directives: [NeedsQuery, TextDirective,  NgIf, NgFor]
 })
 class MyComp {
   shouldShow: boolean;

modules/angular2/test/directives/ng_for_spec.js

@@ -18,14 +18,14 @@ import {ListWrapper} from 'angular2/src/facade/collection';
 import {Component} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {For} from 'angular2/src/directives/for';
+import {NgFor} from '../../src/directives/ng_for';
 
 import {TestBed} from 'angular2/src/test_lib/test_bed';
 
 
 export function main() {
-  describe('for', () => {
+  describe('ng-for', () => {
-    var TEMPLATE = '<div><copy-me template="for #item of items">{{item.toString()}};</copy-me></div>';
+    var TEMPLATE = '<div><copy-me template="ng-for #item of items">{{item.toString()}};</copy-me></div>';
 
     it('should reflect initial elements', inject([TestBed, AsyncTestCompleter], (tb, async) => {
       tb.createView(TestComponent, {html: TEMPLATE}).then((view) => {
@@ -87,7 +87,7 @@ export function main() {
     }));
 
     it('should iterate over an array of objects', inject([TestBed, AsyncTestCompleter], (tb, async) => {
-      var template = '<ul><li template="for #item of items">{{item["name"]}};</li></ul>';
+      var template = '<ul><li template="ng-for #item of items">{{item["name"]}};</li></ul>';
 
       tb.createView(TestComponent, {html: template}).then((view) => {
 
@@ -113,7 +113,7 @@ export function main() {
     }));
 
     it('should gracefully handle nulls', inject([TestBed, AsyncTestCompleter], (tb, async) => {
-      var template = '<ul><li template="for #item of null">{{item}};</li></ul>';
+      var template = '<ul><li template="ng-for #item of null">{{item}};</li></ul>';
       tb.createView(TestComponent, {html: template}).then((view) => {
         view.detectChanges();
         expect(DOM.getText(view.rootNodes[0])).toEqual('');
@@ -162,8 +162,8 @@ export function main() {
     it('should repeat over nested arrays', inject([TestBed, AsyncTestCompleter], (tb, async) => {
       var template =
         '<div>'+
-          '<div template="for #item of items">' +
+          '<div template="ng-for #item of items">' +
-            '<div template="for #subitem of item">' +
+            '<div template="ng-for #subitem of item">' +
               '{{subitem}}-{{item.length}};' +
             '</div>|'+
           '</div>'+
@@ -187,8 +187,8 @@ export function main() {
     it('should repeat over nested arrays with no intermediate element',
       inject([TestBed, AsyncTestCompleter], (tb, async) => {
       var template =
-          '<div><template [for] #item [of]="items">' +
+          '<div><template [ng-for] #item [ng-for-of]="items">' +
-            '<div template="for #subitem of item">' +
+            '<div template="ng-for #subitem of item">' +
             '{{subitem}}-{{item.length}};' +
           '</div></template></div>';
 
@@ -207,7 +207,7 @@ export function main() {
     it('should display indices correctly',
       inject([TestBed, AsyncTestCompleter], (tb, async) => {
       var template =
-        '<div><copy-me template="for: var item of items; var i=index">{{i.toString()}}</copy-me></div>';
+        '<div><copy-me template="ng-for: var item of items; var i=index">{{i.toString()}}</copy-me></div>';
 
       tb.createView(TestComponent, {html: template}).then((view) => {
         view.context.items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
@@ -231,7 +231,7 @@ class Foo {
 }
 
 @Component({selector: 'test-cmp'})
-@View({directives: [For]})
+@View({directives: [NgFor]})
 class TestComponent {
   items: any;
   constructor() {

modules/benchmarks/src/costs/index.js

@@ -8,7 +8,7 @@ import {List, ListWrapper} from 'angular2/src/facade/collection';
 import {reflector} from 'angular2/src/reflection/reflection';
 import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
 import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util';
-import {If, For} from 'angular2/directives';
+import {If, NgFor} from 'angular2/directives';
 
 // TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
 // add those imports back into 'angular2/angular2';
@@ -54,18 +54,18 @@ export function main() {
 
 @Component({selector: 'app'})
 @View({
-  directives: [If, For, DummyComponent, DummyDirective, DynamicDummy],
+  directives: [If, NgFor, DummyComponent, DummyDirective, DynamicDummy],
   template: `
     <div *ng-if="testingPlainComponents">
-      <dummy *for="#i of list"></dummy>
+      <dummy *ng-for="#i of list"></dummy>
     </div>
 
     <div *ng-if="testingWithDirectives">
-      <dummy dummy-decorator *for="#i of list"></dummy>
+      <dummy dummy-decorator *ng-for="#i of list"></dummy>
     </div>
 
     <div *ng-if="testingDynamicComponents">
-      <dynamic-dummy *for="#i of list"></dynamic-dummy>
+      <dynamic-dummy *ng-for="#i of list"></dynamic-dummy>
     </div>
   `
 })

modules/benchmarks/src/largetable/largetable_benchmark.js

@@ -13,7 +13,7 @@ import {DOM} from 'angular2/src/dom/dom_adapter';
 import {window, document, gc} from 'angular2/src/facade/browser';
 import {getIntParameter, getStringParameter, bindAction} from 'angular2/src/test_lib/benchmark_util';
 
-import {For, NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/directives';
+import {NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/directives';
 import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
 
 import {ListWrapper} from 'angular2/src/facade/collection';
@@ -239,7 +239,7 @@ class AppComponent {
   }
 })
 @View({
-  directives: [For, NgSwitch, NgSwitchWhen, NgSwitchDefault],
+  directives: [NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault],
   template: `
       <table [ng-switch]="benchmarkType">
         <tbody template="switch-when 'interpolation'">

modules/benchmarks/src/naive_infinite_scroll/app.js

@@ -3,7 +3,7 @@ import {getIntParameter, bindAction} from 'angular2/src/test_lib/benchmark_util'
 import {PromiseWrapper} from 'angular2/src/facade/async';
 import {ListWrapper} from 'angular2/src/facade/collection';
 import {ScrollAreaComponent} from './scroll_area';
-import {NgIf, For} from 'angular2/directives';
+import {NgIf, NgFor} from 'angular2/directives';
 import {DOM} from 'angular2/src/dom/dom_adapter';
 import {document} from 'angular2/src/facade/browser';
 
@@ -14,7 +14,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
 
 @Component({selector: 'scroll-app'})
 @View({
-  directives: [ScrollAreaComponent, NgIf, For],
+  directives: [ScrollAreaComponent, NgIf, NgFor],
   template: `
   <div>
     <div style="display: flex">

modules/benchmarks/src/naive_infinite_scroll/cells.js

@@ -1,7 +1,7 @@
 import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
 import {Company, Opportunity, Offering, Account, CustomDate, STATUS_LIST}
     from './common';
-import {For} from 'angular2/directives';
+import {NgFor} from 'angular2/directives';
 
 // TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
 // add those imports back into 'angular2/angular2';
@@ -80,7 +80,7 @@ export class Stage {
   }
 })
 @View({
-    directives: [For],
+    directives: [NgFor],
     template: `
       <div [style]="style">
           <button template="for #stage of stages"

modules/benchmarks/src/naive_infinite_scroll/scroll_area.js

@@ -10,13 +10,13 @@ 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 {For} from 'angular2/directives';
+import {NgFor} from 'angular2/directives';
 
 @Component({
   selector: 'scroll-area',
 })
 @View({
-  directives: [ScrollItemComponent, For],
+  directives: [ScrollItemComponent, NgFor],
   template: `
     <div>
         <div id="scrollDiv"

modules/examples/src/forms/index.es6

@@ -135,7 +135,7 @@ class SurveyQuestion {
 
       <button (click)="addQuestion()">Add Question</button>
       <survey-question
-          *for="var q of form.controls.questions.controls; var i=index"
+          *ng-for="var q of form.controls.questions.controls; var i=index"
           [question]="q"
           [index]="i + 1"
           (destroy)="destroyQuestion(i)">

modules/examples/src/todo/todo.html

@@ -18,7 +18,7 @@
 
     <ul id="todo-list">
 
-      <li *for="#todo of todoStore.list">
+      <li *ng-for="#todo of todoStore.list">
 
         <div class="view"
             [class.hidden]="todoEdit == todo">