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

refactor(directives): Drop ng- prefix from all angular directives and rename NgRepeat to Foreach 

fixes #532

Closes #539
This commit is contained in:
Marc Laval 2015-02-04 22:27:31 +01:00 committed by Misko Hevery
parent 63f23ec0b6
commit 6bfa48bc64
18 changed files with 158 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
modules/angular2/directives.js vendored
View File

@ -1,4 +1,4 @@
export * from './src/directives/ng_if';
export * from './src/directives/ng_non_bindable';
export * from './src/directives/ng_repeat';
export * from './src/directives/ng_switch';
export * from './src/directives/foreach';
export * from './src/directives/if';
export * from './src/directives/non_bindable';
export * from './src/directives/switch';

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

@ -157,7 +157,7 @@ Example:
```
<ul>
<li template="ng-repeat: #item in items">
<li template="foreach: #item in items">
{{item}}
</li>
</ul>
@ -169,8 +169,8 @@ Example:
Example:
```
<ul>
<template def-ng-repeat:"item"
bind-ng-repeat-in="items">
<template def-foreach:"item"
bind-foreach-in="items">
<li>
{{item}}
</li>
@ -187,8 +187,8 @@ Example:
Example:
```
<template #ng-repeat="item"
[ng-repeat-in]="items">
<template #foreach="item"
[foreach-in]="items">
_some_content_to_repeat_
</template>
```
@ -198,8 +198,8 @@ Example:
Example:
```
<template def-ng-repeat="item"
bind-ng-repeat-in="items">
<template def-foreach="item"
bind-foreach-in="items">
_some_content_to_repeat_
</template>
```
@ -345,20 +345,20 @@ Example of conditionally included template:
```
Hello {{user}}!
<div template="ng-if: isAdimnistrator">
<div template="if: isAdimnistrator">
...administrator menu here...
</div>
```
In the above example the `ng-if` instantiator determins if the child view (an instance of the child template) should be
inserted into ther root view. The `ng-if` makes this decision based on if the `isAdimnistrator` binding is true.
In the above example the `if` instantiator determins if the child view (an instance of the child template) should be
inserted into ther root view. The `if` makes this decision based on if the `isAdimnistrator` binding is true.
The above example is in the shart form, for better clarity let's rewrite it in the canonical form, which is functionaly
identical.
```
Hello {{user}}!
<template [ng-if]="isAdimnistrator">
<template [if]="isAdimnistrator">
<div>
...administrator menu here...
</div>
@ -371,22 +371,22 @@ NOTE: Only Instantiator directives can be placed on the template element. (Decor
### Template Microsyntax
Often times it is necessary to encode a lot of different bindings into a template to controll how the instantiation
of the templates occures. One such example is ng-repeat.
of the templates occures. One such example is foreach.
```
<form #foo=form>
</form>
<ul>
<template ng-repeat #person [in]="people" #i="index">
<template foreach #person [in]="people" #i="index">
<li>{{i}}. {{item}}<li>
</template>
</ul>
```
Where:
* `ng-repeat` triggers the ng-repeat directive.
* `[in]="people"` binds to an iterable object to the `ng-repeat` controller.
* `#person` exports the implicit `ng-repeat` item.
* `foreach` triggers the foreach directive.
* `[in]="people"` binds to an iterable object to the `foreach` controller.
* `#person` exports the implicit `foreach` item.
* `#i=index` exports item index as `i`.
The above example is explicit but quite wordy, for this reason in most situatios a short hand version of the
@ -394,7 +394,7 @@ syntax is prefferable.
```
<ul>
<li template="ng-repeat; #person; in=people; #i=index;">{{i}}. {{item}}<li>
<li template="foreach; #person; in=people; #i=index;">{{i}}. {{item}}<li>
</ul>
```
@ -404,16 +404,16 @@ which allows us to further shorten the text.
```
<ul>
<li template="ng-repeat #person in people #i=index">{{i}}. {{item}}<li>
<li template="foreach #person in people #i=index">{{i}}. {{item}}<li>
</ul>
```
We can also optionaly use `var` instead of `#` and add `:` to `ng-repeat` which creates the following recomended
microsyntax for `ng-repeat`.
We can also optionaly use `var` instead of `#` and add `:` to `foreach` which creates the following recomended
microsyntax for `foreach`.
```
<ul>
<li template="ng-repeat: var person in people; var i=index">{{i}}. {{item}}<li>
<li template="foreach: var person in people; var i=index">{{i}}. {{item}}<li>
</ul>
```
@ -524,7 +524,7 @@ Angular are:
<div title="{{expression}}">{{expression}}</div>
<div [title]="expression">...</div>
<div bind-title="expression">...</div>
<div template="ng-if: expression">...</div>
<div template="if: expression">...</div>
```
Expressions are simplified version of expression in the langugage in which you are writing your application. (i.e.

10
modules/angular2/docs/core/02_directives.md
View File

@ -10,7 +10,7 @@ There are three different kinds of directives (described in mored detailed in la
1. *Decorators*: can be placed on any DOM element and can be combined with other directives.
2. *Components*: Components have encapsulated view and can configure injectors.
3. *Instantiator*: Is responsible for adding or removing child views in parent view. (i.e. ng-repeat, ng-if)
3. *Instantiator*: Is responsible for adding or removing child views in parent view. (i.e. foreach, if)
@ -166,7 +166,7 @@ Example of usage:
## Instantiator
Instantiator is a directive which can controll instantiation of child views which are then inserted into the DOM. (Examples are `ng-if` and `ng-repeat`.)
Instantiator is a directive which can controll instantiation of child views which are then inserted into the DOM. (Examples are `if` and `foreach`.)
* Instantiators can only be placed on `<template>` elements (or the short hand version which uses `<element template>` attribute.)
* Only one instantiator can be present per DOM template element.
@ -179,12 +179,12 @@ Instantiator is a directive which can controll instantiation of child views whic
```
@Instantiator({
selector: '[ng-if]',
selector: '[if]',
bind: {
'ng-if': 'condition'
'if': 'condition'
}
})
export class NgIf {
export class If {
viewPort: ViewPort;
view: View;

14
modules/angular2/docs/core/10_view.md
View File

@ -77,7 +77,7 @@ Let's start with a Template such as:
```
<ul>
<li template="ng-repeat: person in people">{{person}}</li>
<li template="foreach: person in people">{{person}}</li>
</ul>
```
@ -102,28 +102,28 @@ The next step is to compose these two ProtoViews into actual view which is rende
```
<ul> | viewA(SomeContexnt)
<template></template> | viewA(SomeContexnt): new NgRepeat(new ViewPort(protoViewB))
<template></template> | viewA(SomeContexnt): new Foreach(new ViewPort(protoViewB))
</ul> | viewA(SomeContexnt)
```
*Step2:* Instantiate `NgRepeat` directive which will receive the `ViewPort`. (The ViewPort has reference to `protoViewA`).
*Step2:* Instantiate `Foreach` directive which will receive the `ViewPort`. (The ViewPort has reference to `protoViewA`).
*Step3:* As the `NgRepeat` unrolls it asks the `ViewPort` to instantiate `protoViewB` and insert it after the `ViewPort` anchor. This is repeated for each `person` in `people`. Notice that
*Step3:* As the `Foreach` unrolls it asks the `ViewPort` to instantiate `protoViewB` and insert it after the `ViewPort` anchor. This is repeated for each `person` in `people`. Notice that
```
<ul> | viewA(someContext)
<template></template> | viewA(someContext): new NgRepeat(new ViewPort(protoViewB))
<template></template> | viewA(someContext): new Foreach(new ViewPort(protoViewB))
<li>{{person}}</li> | viewB0(locals0(someContext))
<li>{{person}}</li> | viewB1(locals0(someContext))
</ul> | viewA(lomeContexnt)
```
*Step4:* All of the bindings in the child Views are updated. Notice that in the case of `NgRepeat` the evaluation context for the `viewB0` and `viewB1` are `locals0` and `locals1` respectively. Locals allow the introduction of new local variables visible only within the scope of the View, and delegate any unknown references to the parent context.
*Step4:* All of the bindings in the child Views are updated. Notice that in the case of `Foreach` the evaluation context for the `viewB0` and `viewB1` are `locals0` and `locals1` respectively. Locals allow the introduction of new local variables visible only within the scope of the View, and delegate any unknown references to the parent context.
```
<ul> | viewA
<template></template> | viewA: new NgRepeat(new ViewPort(protoViewB))
<template></template> | viewA: new Foreach(new ViewPort(protoViewB))
<li>Alice</li> | viewB0
<li>Bob</li> | viewB1
</ul> | viewA

8
modules/angular2/src/directives/ng_repeat.js → modules/angular2/src/directives/foreach.js vendored
View File

@ -6,12 +6,12 @@ import {isPresent, isBlank} from 'angular2/src/facade/lang';
import {ListWrapper} from 'angular2/src/facade/collection';
@Template({
selector: '[ng-repeat]',
selector: '[foreach][in]',
bind: {
'in': 'iterable[]'
}
})
export class NgRepeat extends OnChange {
export class Foreach extends OnChange {
viewPort: ViewPort;
iterable;
constructor(viewPort: ViewPort) {
@ -35,13 +35,13 @@ export class NgRepeat extends OnChange {
(movedRecord) => ListWrapper.push(recordViewTuples, new RecordViewTuple(movedRecord, null))
);
var insertTuples = NgRepeat.bulkRemove(recordViewTuples, this.viewPort);
var insertTuples = Foreach.bulkRemove(recordViewTuples, this.viewPort);
iteratorChanges.currentValue.forEachAddedItem(
(addedRecord) => ListWrapper.push(insertTuples, new RecordViewTuple(addedRecord, null))
);
NgRepeat.bulkInsert(insertTuples, this.viewPort);
Foreach.bulkInsert(insertTuples, this.viewPort);
for (var i = 0; i < insertTuples.length; i++) {
this.perViewChange(insertTuples[i].view, insertTuples[i].record);

6
modules/angular2/src/directives/ng_if.js → modules/angular2/src/directives/if.js vendored
View File

@ -3,12 +3,12 @@ import {ViewPort} from 'angular2/src/core/compiler/viewport';
import {isBlank} from 'angular2/src/facade/lang';
@Template({
selector: '[ng-if]',
selector: '[if]',
bind: {
'ng-if': 'condition'
'if': 'condition'
}
})
export class NgIf {
export class If {
viewPort: ViewPort;
prevCondition: boolean;

4
modules/angular2/src/directives/ng_non_bindable.js → modules/angular2/src/directives/non_bindable.js vendored
View File

@ -1,8 +1,8 @@
import {Decorator} from 'angular2/src/core/annotations/annotations';
@Decorator({
selector: '[ng-non-bindable]',
selector: '[non-bindable]',
compileChildren: false
})
export class NgNonBindable {
export class NonBindable {
}

58
modules/angular2/src/directives/ng_switch.js → modules/angular2/src/directives/switch.js vendored
View File

@ -7,37 +7,37 @@ import {ListWrapper, List, MapWrapper, Map} from 'angular2/src/facade/collection
import {Parent} from 'angular2/src/core/annotations/visibility';
/**
* The `ngSwitch` directive is used to conditionally swap DOM structure on your template based on a
* The `Switch` directive is used to conditionally swap DOM structure on your template based on a
* scope expression.
* Elements within `ngSwitch` but without `ngSwitchWhen` or `ngSwitchDefault` directives will be
* Elements within `Switch` but without `SwitchWhen` or `SwitchDefault` directives will be
* preserved at the location as specified in the template.
*
* `ngSwitch` simply chooses nested elements and makes them visible based on which element matches
* `Switch` simply chooses nested elements and makes them visible based on which element matches
* the value obtained from the evaluated expression. In other words, you define a container element
* (where you place the directive), place an expression on the **`[ng-switch]="..."` attribute**),
* define any inner elements inside of the directive and place a `[ng-switch-when]` attribute per
* (where you place the directive), place an expression on the **`[switch]="..."` attribute**),
* define any inner elements inside of the directive and place a `[switch-when]` attribute per
* element.
* The when attribute is used to inform ngSwitch which element to display when the expression is
* The when attribute is used to inform Switch which element to display when the expression is
* evaluated. If a matching expression is not found via a when attribute then an element with the
* default attribute is displayed.
*
* Example:
*
* ```
* <ANY [ng-switch]="expression">
* <template [ng-switch-when]="whenExpression1">...</template>
* <template [ng-switch-when]="whenExpression1">...</template>
* <template [ng-switch-default]>...</template>
* <ANY [switch]="expression">
* <template [switch-when]="whenExpression1">...</template>
* <template [switch-when]="whenExpression1">...</template>
* <template [switch-default]>...</template>
* </ANY>
* ```
*/
@Decorator({
selector: '[ng-switch]',
selector: '[switch]',
bind: {
'ng-switch': 'value'
'switch': 'value'
}
})
export class NgSwitch {
export class Switch {
_switchValue: any;
_useDefault: boolean;
_valueViewPorts: Map;
@ -130,38 +130,38 @@ export class NgSwitch {
/**
* Defines a case statement as an expression.
*
* If multiple `ngSwitchWhen` match the `ngSwitch` value, all of them are displayed.
* If multiple `SwitchWhen` match the `Switch` value, all of them are displayed.
*
* Example:
*
* ```
* // match against a context variable
* <template [ng-switch-when]="contextVariable">...</template>
* <template [switch-when]="contextVariable">...</template>
*
* // match against a constant string
* <template [ng-switch-when]="'stringValue'">...</template>
* <template [switch-when]="'stringValue'">...</template>
* ```
*/
@Template({
selector: '[ng-switch-when]',
selector: '[switch-when]',
bind: {
'ng-switch-when' : 'when'
'switch-when' : 'when'
}
})
export class NgSwitchWhen {
export class SwitchWhen {
_value: any;
_ngSwitch: NgSwitch;
_switch: Switch;
_viewPort: ViewPort;
constructor(el: NgElement, viewPort: ViewPort, @Parent() ngSwitch: NgSwitch) {
constructor(el: NgElement, viewPort: ViewPort, @Parent() sswitch: Switch) {
// `_whenDefault` is used as a marker for a not yet initialized value
this._value = _whenDefault;
this._ngSwitch = ngSwitch;
this._switch = sswitch;
this._viewPort = viewPort;
}
set when(value) {
this._ngSwitch._onWhenValueChanged(this._value, value, this._viewPort);
this._switch._onWhenValueChanged(this._value, value, this._viewPort);
this._value = value;
}
}
@ -170,20 +170,20 @@ export class NgSwitchWhen {
/**
* Defines a default case statement.
*
* Default case statements are displayed when no `NgSwitchWhen` match the `ngSwitch` value.
* Default case statements are displayed when no `SwitchWhen` match the `switch` value.
*
* Example:
*
* ```
* <template [ng-switch-default]>...</template>
* <template [switch-default]>...</template>
* ```
*/
@Template({
selector: '[ng-switch-default]'
selector: '[switch-default]'
})
export class NgSwitchDefault {
constructor(viewPort: ViewPort, @Parent() ngSwitch: NgSwitch) {
ngSwitch._registerViewPort(_whenDefault, viewPort);
export class SwitchDefault {
constructor(viewPort: ViewPort, @Parent() sswitch: Switch) {
sswitch._registerViewPort(_whenDefault, viewPort);
}
}

29
modules/angular2/test/directives/ng_repeat_spec.js → modules/angular2/test/directives/foreach_spec.js vendored
View File

@ -6,7 +6,6 @@ import {Injector} from 'angular2/di';
import {Lexer, Parser, ChangeDetector, dynamicChangeDetection} from 'angular2/change_detection';
import {Compiler, CompilerCache} from 'angular2/src/core/compiler/compiler';
import {OnChange} from 'angular2/src/core/compiler/interfaces';
import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_metadata_reader';
import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
@ -15,20 +14,14 @@ import {TemplateConfig} from 'angular2/src/core/annotations/template_config';
import {ViewPort} from 'angular2/src/core/compiler/viewport';
import {MapWrapper, ListWrapper} from 'angular2/src/facade/collection';
import {NgRepeat} from 'angular2/src/directives/ng_repeat';
import {Foreach} from 'angular2/src/directives/foreach';
export function main() {
describe('ng-repeat', () => {
describe('foreach', () => {
var view, cd, compiler, component;
beforeEach(() => {
compiler = new Compiler(
dynamicChangeDetection,
null,
new DirectiveMetadataReader(),
new Parser(new Lexer()),
new CompilerCache(),
new NativeShadowDomStrategy()
);
compiler = new Compiler(dynamicChangeDetection, null, new DirectiveMetadataReader(),
new Parser(new Lexer()), new CompilerCache(), new NativeShadowDomStrategy());
});
function createView(pv) {
@ -42,7 +35,7 @@ export function main() {
return compiler.compile(TestComponent, el(template));
}
var TEMPLATE = '<div><copy-me template="ng-repeat #item in items">{{item.toString()}};</copy-me></div>';
var TEMPLATE = '<div><copy-me template="foreach #item in items">{{item.toString()}};</copy-me></div>';
it('should reflect initial elements', (done) => {
compileWithTemplate(TEMPLATE).then((pv) => {
@ -109,7 +102,7 @@ export function main() {
});
it('should iterate over an array of objects', () => {
compileWithTemplate('<ul><li template="ng-repeat #item in items">{{item["name"]}};</li></ul>').then((pv) => {
compileWithTemplate('<ul><li template="foreach #item in items">{{item["name"]}};</li></ul>').then((pv) => {
createView(pv);
// INIT
@ -133,7 +126,7 @@ export function main() {
});
it('should gracefully handle nulls', (done) => {
compileWithTemplate('<ul><li template="ng-repeat #item in null">{{item}};</li></ul>').then((pv) => {
compileWithTemplate('<ul><li template="foreach #item in null">{{item}};</li></ul>').then((pv) => {
createView(pv);
cd.detectChanges();
expect(DOM.getText(view.nodes[0])).toEqual('');
@ -183,8 +176,8 @@ export function main() {
it('should repeat over nested arrays', (done) => {
compileWithTemplate(
'<div><div template="ng-repeat #item in items">' +
'<div template="ng-repeat #subitem in item">' +
'<div><div template="foreach #item in items">' +
'<div template="foreach #subitem in item">' +
'{{subitem}};' +
'</div>|</div></div>'
).then((pv) => {
@ -201,7 +194,7 @@ export function main() {
it('should display indices correctly', (done) => {
var INDEX_TEMPLATE =
'<div><copy-me template="ng-repeat: var item in items; var i=index">{{i.toString()}}</copy-me></div>';
'<div><copy-me template="foreach: var item in items; var i=index">{{i.toString()}}</copy-me></div>';
compileWithTemplate(INDEX_TEMPLATE).then((pv) => {
createView(pv);
component.items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
@ -228,7 +221,7 @@ class Foo {
selector: 'test-cmp',
template: new TemplateConfig({
inline: '', // each test swaps with a custom template.
directives: [NgRepeat]
directives: [Foreach]
})
})
class TestComponent {

43
modules/angular2/test/directives/ng_if_spec.js → modules/angular2/test/directives/if_spec.js vendored
View File

@ -1,4 +1,4 @@
import {describe, xit, it, expect, beforeEach, ddescribe, iit, IS_DARTIUM, el} from 'angular2/test_lib';
import {describe, xit, it, expect, beforeEach, ddescribe, iit, el, IS_DARTIUM} from 'angular2/test_lib';
import {DOM} from 'angular2/src/facade/dom';
@ -12,19 +12,14 @@ import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_str
import {Component} from 'angular2/src/core/annotations/annotations';
import {TemplateConfig} from 'angular2/src/core/annotations/template_config';
import {NgIf} from 'angular2/src/directives/ng_if';
import {If} from 'angular2/src/directives/if';
export function main() {
describe('ng-if', () => {
describe('if directive', () => {
var view, cd, compiler, component;
beforeEach(() => {
compiler = new Compiler(
dynamicChangeDetection,
null,
new DirectiveMetadataReader(),
new Parser(new Lexer()),
new CompilerCache(),
new NativeShadowDomStrategy());
compiler = new Compiler(dynamicChangeDetection, null, new DirectiveMetadataReader(),
new Parser(new Lexer()), new CompilerCache(), new NativeShadowDomStrategy());
});
function createView(pv) {
@ -39,7 +34,7 @@ export function main() {
}
it('should work in a template attribute', (done) => {
compileWithTemplate('<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>').then((pv) => {
compileWithTemplate('<div><copy-me template="if booleanCondition">hello</copy-me></div>').then((pv) => {
createView(pv);
cd.detectChanges();
@ -50,7 +45,7 @@ export function main() {
});
it('should work in a template element', (done) => {
compileWithTemplate('<div><template [ng-if]="booleanCondition"><copy-me>hello2</copy-me></template></div>').then((pv) => {
compileWithTemplate('<div><template [if]="booleanCondition"><copy-me>hello2</copy-me></template></div>').then((pv) => {
createView(pv);
cd.detectChanges();
@ -61,7 +56,7 @@ export function main() {
});
it('should toggle node when condition changes', (done) => {
compileWithTemplate('<div><copy-me template="ng-if booleanCondition">hello</copy-me></div>').then((pv) => {
compileWithTemplate('<div><copy-me template="if booleanCondition">hello</copy-me></div>').then((pv) => {
createView(pv);
component.booleanCondition = false;
@ -84,12 +79,12 @@ export function main() {
});
});
it('should update several nodes with ng-if', (done) => {
it('should update several nodes with if', (done) => {
var templateString =
'<div>' +
'<copy-me template="ng-if numberCondition + 1 >= 2">helloNumber</copy-me>' +
'<copy-me template="ng-if stringCondition == \'foo\'">helloString</copy-me>' +
'<copy-me template="ng-if functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
'<copy-me template="if numberCondition + 1 >= 2">helloNumber</copy-me>' +
'<copy-me template="if stringCondition == \'foo\'">helloString</copy-me>' +
'<copy-me template="if functionCondition(stringCondition, numberCondition)">helloFunction</copy-me>' +
'</div>';
compileWithTemplate(templateString).then((pv) => {
createView(pv);
@ -115,7 +110,7 @@ export function main() {
if (!IS_DARTIUM) {
it('should leave the element if the condition is a non-empty string (JS)', (done) => {
compileWithTemplate('<div><copy-me template="ng-if stringCondition">hello</copy-me></div>').then((pv) => {
compileWithTemplate('<div><copy-me template="if stringCondition">hello</copy-me></div>').then((pv) => {
createView(pv);
cd.detectChanges();
@ -126,7 +121,7 @@ export function main() {
});
it('should leave the element if the condition is an object (JS)', (done) => {
compileWithTemplate('<div><copy-me template="ng-if objectCondition">hello</copy-me></div>').then((pv) => {
compileWithTemplate('<div><copy-me template="if objectCondition">hello</copy-me></div>').then((pv) => {
createView(pv);
cd.detectChanges();
@ -137,7 +132,7 @@ export function main() {
});
it('should remove the element if the condition is null (JS)', (done) => {
compileWithTemplate('<div><copy-me template="ng-if nullCondition">hello</copy-me></div>').then((pv) => {
compileWithTemplate('<div><copy-me template="if nullCondition">hello</copy-me></div>').then((pv) => {
createView(pv);
cd.detectChanges();
@ -148,7 +143,7 @@ export function main() {
});
it('should not add the element twice if the condition goes from true to true (JS)', (done) => {
compileWithTemplate('<div><copy-me template="ng-if numberCondition">hello</copy-me></div>').then((pv) => {
compileWithTemplate('<div><copy-me template="if numberCondition">hello</copy-me></div>').then((pv) => {
createView(pv);
cd.detectChanges();
@ -165,7 +160,7 @@ export function main() {
});
it('should not recreate the element if the condition goes from true to true (JS)', (done) => {
compileWithTemplate('<div><copy-me template="ng-if numberCondition">hello</copy-me></div>').then((pv) => {
compileWithTemplate('<div><copy-me template="if numberCondition">hello</copy-me></div>').then((pv) => {
createView(pv);
cd.detectChanges();
@ -180,7 +175,7 @@ export function main() {
});
} else {
it('should not create the element if the condition is not a boolean (DART)', (done) => {
compileWithTemplate('<div><copy-me template="ng-if numberCondition">hello</copy-me></div>').then((pv) => {
compileWithTemplate('<div><copy-me template="if numberCondition">hello</copy-me></div>').then((pv) => {
createView(pv);
expect(function(){cd.detectChanges();}).toThrowError();
expect(view.nodes[0].querySelectorAll('copy-me').length).toEqual(0);
@ -197,7 +192,7 @@ export function main() {
selector: 'test-cmp',
template: new TemplateConfig({
inline: '', // each test swaps with a custom template.
directives: [NgIf]
directives: [If]
})
})
class TestComponent {

22
modules/angular2/test/directives/ng_non_bindable_spec.js → modules/angular2/test/directives/non_bindable_spec.js vendored
View File

@ -8,20 +8,14 @@ import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_str
import {Decorator, Component} from 'angular2/src/core/annotations/annotations';
import {TemplateConfig} from 'angular2/src/core/annotations/template_config';
import {NgElement} from 'angular2/src/core/dom/element';
import {NgNonBindable} from 'angular2/src/directives/ng_non_bindable';
import {NonBindable} from 'angular2/src/directives/non_bindable';
export function main() {
describe('ng-non-bindable', () => {
describe('non-bindable', () => {
var view, cd, compiler, component;
beforeEach(() => {
compiler = new Compiler(
dynamicChangeDetection,
null,
new DirectiveMetadataReader(),
new Parser(new Lexer()),
new CompilerCache(),
new NativeShadowDomStrategy()
);
compiler = new Compiler(dynamicChangeDetection,
null, new DirectiveMetadataReader(), new Parser(new Lexer()), new CompilerCache(), new NativeShadowDomStrategy());
});
function createView(pv) {
@ -36,7 +30,7 @@ export function main() {
}
it('should not interpolate children', (done) => {
var template = '<div>{{text}}<span ng-non-bindable>{{text}}</span></div>';
var template = '<div>{{text}}<span non-bindable>{{text}}</span></div>';
compileWithTemplate(template).then((pv) => {
createView(pv);
cd.detectChanges();
@ -46,7 +40,7 @@ export function main() {
});
it('should ignore directives on child nodes', (done) => {
var template = '<div ng-non-bindable><span id=child test-dec>{{text}}</span></div>';
var template = '<div non-bindable><span id=child test-dec>{{text}}</span></div>';
compileWithTemplate(template).then((pv) => {
createView(pv);
cd.detectChanges();
@ -57,7 +51,7 @@ export function main() {
});
it('should trigger directives on the same node', (done) => {
var template = '<div><span id=child ng-non-bindable test-dec>{{text}}</span></div>';
var template = '<div><span id=child non-bindable test-dec>{{text}}</span></div>';
compileWithTemplate(template).then((pv) => {
createView(pv);
cd.detectChanges();
@ -73,7 +67,7 @@ export function main() {
selector: 'test-cmp',
template: new TemplateConfig({
inline: '', // each test swaps with a custom template.
directives: [NgNonBindable, TestDecorator]
directives: [NonBindable, TestDecorator]
})
})
class TestComponent {

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

@ -7,20 +7,14 @@ import {DirectiveMetadataReader} from 'angular2/src/core/compiler/directive_meta
import {NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
import {Component} from 'angular2/src/core/annotations/annotations';
import {TemplateConfig} from 'angular2/src/core/annotations/template_config';
import {NgSwitch, NgSwitchWhen, NgSwitchDefault} from 'angular2/src/directives/ng_switch';
import {Switch, SwitchWhen, SwitchDefault} from 'angular2/src/directives/switch';
export function main() {
describe('ng-switch', () => {
describe('switch', () => {
var view, cd, compiler, component;
beforeEach(() => {
compiler = new Compiler(
dynamicChangeDetection,
null,
new DirectiveMetadataReader(),
new Parser(new Lexer()),
new CompilerCache(),
new NativeShadowDomStrategy()
);
compiler = new Compiler(dynamicChangeDetection, null, new DirectiveMetadataReader(),
new Parser(new Lexer()), new CompilerCache(), new NativeShadowDomStrategy());
});
function createView(pv) {
@ -37,9 +31,9 @@ export function main() {
describe('switch value changes', () => {
it('should switch amongst when values', (done) => {
var template = '<div>' +
'<ul [ng-switch]="switchValue">' +
'<template [ng-switch-when]="\'a\'"><li>when a</li></template>' +
'<template [ng-switch-when]="\'b\'"><li>when b</li></template>' +
'<ul [switch]="switchValue">' +
'<template [switch-when]="\'a\'"><li>when a</li></template>' +
'<template [switch-when]="\'b\'"><li>when b</li></template>' +
'</ul></div>';
compileWithTemplate(template).then((pv) => {
createView(pv);
@ -60,9 +54,9 @@ export function main() {
it('should switch amongst when values with fallback to default', (done) => {
var template = '<div>' +
'<ul [ng-switch]="switchValue">' +
'<li template="ng-switch-when \'a\'">when a</li>' +
'<li template="ng-switch-default">when default</li>' +
'<ul [switch]="switchValue">' +
'<li template="switch-when \'a\'">when a</li>' +
'<li template="switch-default">when default</li>' +
'</ul></div>';
compileWithTemplate(template).then((pv) => {
createView(pv);
@ -83,13 +77,13 @@ export function main() {
it('should support multiple whens with the same value', (done) => {
var template = '<div>' +
'<ul [ng-switch]="switchValue">' +
'<template [ng-switch-when]="\'a\'"><li>when a1;</li></template>' +
'<template [ng-switch-when]="\'b\'"><li>when b1;</li></template>' +
'<template [ng-switch-when]="\'a\'"><li>when a2;</li></template>' +
'<template [ng-switch-when]="\'b\'"><li>when b2;</li></template>' +
'<template [ng-switch-default]><li>when default1;</li></template>' +
'<template [ng-switch-default]><li>when default2;</li></template>' +
'<ul [switch]="switchValue">' +
'<template [switch-when]="\'a\'"><li>when a1;</li></template>' +
'<template [switch-when]="\'b\'"><li>when b1;</li></template>' +
'<template [switch-when]="\'a\'"><li>when a2;</li></template>' +
'<template [switch-when]="\'b\'"><li>when b2;</li></template>' +
'<template [switch-default]><li>when default1;</li></template>' +
'<template [switch-default]><li>when default2;</li></template>' +
'</ul></div>';
compileWithTemplate(template).then((pv) => {
createView(pv);
@ -112,10 +106,10 @@ export function main() {
describe('when values changes', () => {
it('should switch amongst when values', (done) => {
var template = '<div>' +
'<ul [ng-switch]="switchValue">' +
'<template [ng-switch-when]="when1"><li>when 1;</li></template>' +
'<template [ng-switch-when]="when2"><li>when 2;</li></template>' +
'<template [ng-switch-default]><li>when default;</li></template>' +
'<ul [switch]="switchValue">' +
'<template [switch-when]="when1"><li>when 1;</li></template>' +
'<template [switch-when]="when2"><li>when 2;</li></template>' +
'<template [switch-default]><li>when default;</li></template>' +
'</ul></div>';
compileWithTemplate(template).then((pv) => {
createView(pv);
@ -153,7 +147,7 @@ export function main() {
selector: 'test-cmp',
template: new TemplateConfig({
inline: '', // each test swaps with a custom template.
directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]
directives: [Switch, SwitchWhen, SwitchDefault]
})
})
class TestComponent {

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

@ -6,7 +6,7 @@ import {bootstrap, Component, Template, TemplateConfig, ViewPort, Compiler}
import {PromiseWrapper} from 'angular2/src/facade/async';
import {ListWrapper} from 'angular2/src/facade/collection';
import {ScrollAreaComponent} from './scroll_area';
import {NgIf, NgRepeat} from 'angular2/directives';
import {If, Foreach} from 'angular2/directives';
import {DOM, document, Element} from 'angular2/src/facade/dom';
export class App {
@ -86,7 +86,7 @@ export function setupReflectorForApp() {
new Component({
selector: 'scroll-app',
template: new TemplateConfig({
directives: [ScrollAreaComponent, NgIf, NgRepeat],
directives: [ScrollAreaComponent, If, Foreach],
inline: `
<div>
<div style="display: flex">
@ -96,9 +96,9 @@ export function setupReflectorForApp() {
<button id="reset-btn">Reset</button>
</div>
</div>
<div template="ng-if scrollAreas.length > 0">
<div template="if scrollAreas.length > 0">
<p>Following tables are only here to add weight to the UI:</p>
<scroll-area template="ng-repeat #scrollArea in scrollAreas"></scroll-area>
<scroll-area template="foreach #scrollArea in scrollAreas"></scroll-area>
</div>
</div>`
})

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

@ -7,7 +7,7 @@ import {PromiseWrapper} from 'angular2/src/facade/async';
import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
import {Company, Opportunity, Offering, Account, CustomDate, STATUS_LIST}
from './common';
import {NgRepeat} from 'angular2/directives';
import {Foreach} from 'angular2/directives';
export class HasStyle {
style:Map;
@ -158,10 +158,10 @@ export function setupReflectorForCells() {
new Component({
selector: 'stage-buttons',
template: new TemplateConfig({
directives: [NgRepeat],
directives: [Foreach],
inline: `
<div [style]="style">
<button template="ng-repeat #stage in stages"
<button template="foreach #stage in stages"
[disabled]="stage.isDisabled"
[style]="stage.style"
on-click="setStage(stage)">

16
modules/benchmarks/src/naive_infinite_scroll/index.js
View File

@ -15,7 +15,7 @@ import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
import {XHR} from 'angular2/src/core/compiler/xhr/xhr';
import {XHRImpl} from 'angular2/src/core/compiler/xhr/xhr_impl';
import {NgIf, NgRepeat} from 'angular2/directives';
import {If, Foreach} from 'angular2/directives';
import {App, setupReflectorForApp} from './app';
import {ScrollAreaComponent, setupReflectorForScrollArea} from './scroll_area';
import {ScrollItemComponent, setupReflectorForScrollItem} from './scroll_item';
@ -149,22 +149,22 @@ export function setupReflector() {
}
export function setupReflectorForAngular() {
reflector.registerType(NgIf, {
'factory': (vp) => new NgIf(vp),
reflector.registerType(If, {
'factory': (vp) => new If(vp),
'parameters': [[ViewPort]],
'annotations' : [new Template({
selector: '[ng-if]',
selector: '[if]',
bind: {
'ng-if': 'condition'
'if': 'condition'
}
})]
});
reflector.registerType(NgRepeat, {
'factory': (vp) => new NgRepeat(vp),
reflector.registerType(Foreach, {
'factory': (vp) => new Foreach(vp),
'parameters': [[ViewPort]],
'annotations' : [new Template({
selector: '[ng-repeat]',
selector: '[foreach]',
bind: {
'in': 'iterable[]'
}

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

@ -12,7 +12,7 @@ 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 {NgRepeat} from 'angular2/directives';
import {Foreach} from 'angular2/directives';
export class ScrollAreaComponent {
_fullList:List<Offering>;
@ -68,7 +68,7 @@ export function setupReflectorForScrollArea() {
new Component({
selector: 'scroll-area',
template: new TemplateConfig({
directives: [ScrollItemComponent, NgRepeat],
directives: [ScrollItemComponent, Foreach],
inline: `
<div>
<div id="scrollDiv"
@ -77,7 +77,7 @@ export function setupReflectorForScrollArea() {
<div id="padding"></div>
<div id="inner">
<scroll-item
template="ng-repeat #item in visibleItems"
template="foreach #item in visibleItems"
[offering]="item">
</scroll-item>
</div>

2
tools/transpiler/src/outputgeneration/DartParseTreeWriter.js
View File

@ -492,7 +492,7 @@ export class DartParseTreeWriter extends JavaScriptParseTreeWriter {
}
toString() {
return "library " + this.libName + ";\n" + super.toString();
return "library " + this.libName + "_dart;\n" + super.toString();
}
}

6
tools/transpiler/unittest/transpilertests.js
View File

@ -20,7 +20,7 @@ describe('transpile to dart', function(){
"var s1:string = \"${a}\";" +
"var s2:string = '\\${a}';" +
"var s3:string = '$a';");
expect(result.js).toBe("library test;\n" +
expect(result.js).toBe("library test_dart;\n" +
"num a = 1;\n" +
"String s1 = \"\\${a}\";\n" +
"String s2 = '\\${a}';\n" +
@ -32,7 +32,7 @@ describe('transpile to dart', function(){
"var a:number = 1;" +
"var s1:string = `$a`;" +
"var s2:string = `\\$a`;");
expect(result.js).toBe("library test;\n" +
expect(result.js).toBe("library test_dart;\n" +
"num a = 1;\n" +
"String s1 = '''\\$a''';\n" +
"String s2 = '''\\$a''';\n");
@ -42,7 +42,7 @@ describe('transpile to dart', function(){
var result = compiler.compile(OPTIONS, "test.js",
"var a:number = 1;" +
"var s1:string = `${a}`;");
expect(result.js).toBe("library test;\n" +
expect(result.js).toBe("library test_dart;\n" +
"num a = 1;\n" +
"String s1 = '''${a}''';\n");
});