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 ``` ``` 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: ' * ' * }) * 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 * * ... - * {{o.text}} + * {{o.text}} * * ``` * @@ -29,7 +29,7 @@ import {BaseQueryList} from './base_query_list'; * * A possible solution would be for a `` to inject `` component and then register itself with `` * 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 `` components which would not be reported to `` + * partialy since `*ng-for` could rearange the list of `` components which would not be reported to `` * component and thus the list of `` componets would be out of sync with respect to the list of `` 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: ` *
    - *
  • {{pane.title}}
  • + *
  • {{pane.title}}
  • *
* * ` 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'; * * ``` *
    - *
  • + *
  • * Error {{i}} of {{errors.length}}: {{error.message}} *
  • *
@@ -30,19 +30,19 @@ import {ListWrapper} from 'angular2/src/facade/collection'; * * # Syntax * - * - `
  • ...
  • ` - * - `
  • ...
  • ` - * - `` + * - `
  • ...
  • ` + * - `
  • ...
  • ` + * - `` * * @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(
    )', - directives: [ToolbarViewContainer, For] + template: 'TOOLBAR(
    )', + 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 = '
    ' + - '
    ' + + '
    ' + '
    '; tb.createView(MyComp, {html: template}).then((view) => { @@ -88,8 +88,8 @@ export function main() { @Component({selector: 'needs-query'}) @View({ - directives: [For], - template: '
    {{dir.text}}|
    ' + directives: [NgFor], + template: '
    {{dir.text}}|
    ' }) 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 = '
    {{item.toString()}};
    '; + describe('ng-for', () => { + var TEMPLATE = '
    {{item.toString()}};
    '; 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 = '
    • {{item["name"]}};
    '; + var template = '
    • {{item["name"]}};
    '; 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 = '
    • {{item}};
    '; + var template = '
    • {{item}};
    '; 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 = '
    '+ - '
    ' + - '
    ' + + '
    ' + + '
    ' + '{{subitem}}-{{item.length}};' + '
    |'+ '
    '+ @@ -187,8 +187,8 @@ export function main() { it('should repeat over nested arrays with no intermediate element', inject([TestBed, AsyncTestCompleter], (tb, async) => { var template = - '