iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: rename for to ng-for 

Closes #1598
Closes #1295
Closes #1827

Closes #1827
This commit is contained in:
Misko Hevery 2015-05-11 17:04:55 -07:00
parent e9f236b70f
commit 111fa60a93
19 changed files with 66 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
modules/angular2/directives.js vendored
View File

@ -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
]);

2
modules/angular2/docs/core/01_templates.md
View File

@ -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>
```

8
modules/angular2/src/change_detection/parser/parser.ts
View File

@ -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;

2
modules/angular2/src/core/annotations_impl/view.js vendored
View File

@ -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 {

8
modules/angular2/src/core/compiler/query_list.js vendored
View File

@ -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>
* `

18
modules/angular2/src/directives/for.js → modules/angular2/src/directives/ng_for.js vendored
View File

@ -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);

4
modules/angular2/src/render/dom/view/proto_view_builder.js vendored
View File

@ -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);

4
modules/angular2/test/change_detection/parser/parser_spec.js vendored
View File

@ -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', () => {

6
modules/angular2/test/core/compiler/integration_spec.js vendored
View File

@ -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;

10
modules/angular2/test/core/compiler/query_integration_spec.js vendored
View File

@ -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;

22
modules/angular2/test/directives/for_spec.js → modules/angular2/test/directives/ng_for_spec.js vendored
View File

@ -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() {

0
modules/angular2/test/directives/switch_spec.js → modules/angular2/test/directives/ng_switch_spec.js vendored
View File

10
modules/benchmarks/src/costs/index.js
View File

@ -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>
`
})

4
modules/benchmarks/src/largetable/largetable_benchmark.js
View File

@ -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'">

4
modules/benchmarks/src/naive_infinite_scroll/app.js
View File

@ -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">

4
modules/benchmarks/src/naive_infinite_scroll/cells.js
View File

@ -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"

4
modules/benchmarks/src/naive_infinite_scroll/scroll_area.js
View File

@ -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"

2
modules/examples/src/forms/index.es6
View File

@ -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)">

2
modules/examples/src/todo/todo.html
View File

@ -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">