diff --git a/modules/angular2/directives.js b/modules/angular2/directives.js index 70c5695c9a..bd6946b969 100644 --- a/modules/angular2/directives.js +++ b/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 ]); diff --git a/modules/angular2/docs/core/01_templates.md b/modules/angular2/docs/core/01_templates.md index 478185ba05..7682be75fc 100644 --- a/modules/angular2/docs/core/01_templates.md +++ b/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> ``` diff --git a/modules/angular2/src/change_detection/parser/parser.ts b/modules/angular2/src/change_detection/parser/parser.ts index 2027a79f78..b42b1d9bdf 100644 --- a/modules/angular2/src/change_detection/parser/parser.ts +++ b/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; diff --git a/modules/angular2/src/core/annotations_impl/view.js b/modules/angular2/src/core/annotations_impl/view.js index 2b98a28d57..9ab6a90d47 100644 --- a/modules/angular2/src/core/annotations_impl/view.js +++ b/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 { diff --git a/modules/angular2/src/core/compiler/query_list.js b/modules/angular2/src/core/compiler/query_list.js index 39124dfab0..1441629da1 100644 --- a/modules/angular2/src/core/compiler/query_list.js +++ b/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> * ` diff --git a/modules/angular2/src/directives/for.js b/modules/angular2/src/directives/ng_for.js similarity index 87% rename from modules/angular2/src/directives/for.js rename to modules/angular2/src/directives/ng_for.js index 6692d2bc98..b9499ce1f8 100644 --- a/modules/angular2/src/directives/for.js +++ b/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); diff --git a/modules/angular2/src/render/dom/view/proto_view_builder.js b/modules/angular2/src/render/dom/view/proto_view_builder.js index de76f4530a..d52da67aed 100644 --- a/modules/angular2/src/render/dom/view/proto_view_builder.js +++ b/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); diff --git a/modules/angular2/test/change_detection/parser/parser_spec.js b/modules/angular2/test/change_detection/parser/parser_spec.js index 7213e49aa0..8dc841fb93 100644 --- a/modules/angular2/test/change_detection/parser/parser_spec.js +++ b/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', () => { diff --git a/modules/angular2/test/core/compiler/integration_spec.js b/modules/angular2/test/core/compiler/integration_spec.js index 994c4dd70e..7c68fd5a69 100644 --- a/modules/angular2/test/core/compiler/integration_spec.js +++ b/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>)', - directives: [ToolbarViewContainer, For] + template: 'TOOLBAR(<div *ng-for="var part of query" [toolbar-vc]="part"></div>)', + directives: [ToolbarViewContainer, NgFor] }) class ToolbarComponent { query:QueryList; diff --git a/modules/angular2/test/core/compiler/query_integration_spec.js b/modules/angular2/test/core/compiler/query_integration_spec.js index a37fab323a..6ac232c022 100644 --- a/modules/angular2/test/core/compiler/query_integration_spec.js +++ b/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], - template: '<div *for="var dir of query">{{dir.text}}|</div>' + directives: [NgFor], + 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; diff --git a/modules/angular2/test/directives/for_spec.js b/modules/angular2/test/directives/ng_for_spec.js similarity index 90% rename from modules/angular2/test/directives/for_spec.js rename to modules/angular2/test/directives/ng_for_spec.js index ad8dd99931..dfaabf47ee 100644 --- a/modules/angular2/test/directives/for_spec.js +++ b/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', () => { - var TEMPLATE = '<div><copy-me template="for #item of items">{{item.toString()}};</copy-me></div>'; + describe('ng-for', () => { + 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="for #subitem of item">' + + '<div template="ng-for #item of items">' + + '<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="for #subitem of item">' + + '<div><template [ng-for] #item [ng-for-of]="items">' + + '<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() { diff --git a/modules/angular2/test/directives/switch_spec.js b/modules/angular2/test/directives/ng_switch_spec.js similarity index 100% rename from modules/angular2/test/directives/switch_spec.js rename to modules/angular2/test/directives/ng_switch_spec.js diff --git a/modules/benchmarks/src/costs/index.js b/modules/benchmarks/src/costs/index.js index 3b9c660ee2..9a45dc9d47 100644 --- a/modules/benchmarks/src/costs/index.js +++ b/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> ` }) diff --git a/modules/benchmarks/src/largetable/largetable_benchmark.js b/modules/benchmarks/src/largetable/largetable_benchmark.js index c6abdee920..2bc96b5f2d 100644 --- a/modules/benchmarks/src/largetable/largetable_benchmark.js +++ b/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'"> diff --git a/modules/benchmarks/src/naive_infinite_scroll/app.js b/modules/benchmarks/src/naive_infinite_scroll/app.js index 46b13f2fd6..5f70d17afa 100644 --- a/modules/benchmarks/src/naive_infinite_scroll/app.js +++ b/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"> diff --git a/modules/benchmarks/src/naive_infinite_scroll/cells.js b/modules/benchmarks/src/naive_infinite_scroll/cells.js index 7eff183cef..17ba892b49 100644 --- a/modules/benchmarks/src/naive_infinite_scroll/cells.js +++ b/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" diff --git a/modules/benchmarks/src/naive_infinite_scroll/scroll_area.js b/modules/benchmarks/src/naive_infinite_scroll/scroll_area.js index 406fce747b..102fba0ce5 100644 --- a/modules/benchmarks/src/naive_infinite_scroll/scroll_area.js +++ b/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" diff --git a/modules/examples/src/forms/index.es6 b/modules/examples/src/forms/index.es6 index 9b357e23fe..3630293261 100644 --- a/modules/examples/src/forms/index.es6 +++ b/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)"> diff --git a/modules/examples/src/todo/todo.html b/modules/examples/src/todo/todo.html index b0a5e39e5b..65fe995f72 100644 --- a/modules/examples/src/todo/todo.html +++ b/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">