diff --git a/modules/angular2/directives.js b/modules/angular2/directives.js
index b96135cd13..6a1b817ab5 100644
--- a/modules/angular2/directives.js
+++ b/modules/angular2/directives.js
@@ -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';
diff --git a/modules/angular2/docs/core/01_templates.md b/modules/angular2/docs/core/01_templates.md
index 6d50cde555..a85506bb9a 100644
--- a/modules/angular2/docs/core/01_templates.md
+++ b/modules/angular2/docs/core/01_templates.md
@@ -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.
diff --git a/modules/angular2/docs/core/02_directives.md b/modules/angular2/docs/core/02_directives.md
index 2db559fae0..730f0b368d 100644
--- a/modules/angular2/docs/core/02_directives.md
+++ b/modules/angular2/docs/core/02_directives.md
@@ -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;
diff --git a/modules/angular2/docs/core/10_view.md b/modules/angular2/docs/core/10_view.md
index 209a0c6efb..0a9222c2d0 100644
--- a/modules/angular2/docs/core/10_view.md
+++ b/modules/angular2/docs/core/10_view.md
@@ -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
diff --git a/modules/angular2/src/directives/ng_repeat.js b/modules/angular2/src/directives/foreach.js
similarity index 93%
rename from modules/angular2/src/directives/ng_repeat.js
rename to modules/angular2/src/directives/foreach.js
index 48c972ef0e..16de07fe31 100644
--- a/modules/angular2/src/directives/ng_repeat.js
+++ b/modules/angular2/src/directives/foreach.js
@@ -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);
diff --git a/modules/angular2/src/directives/ng_if.js b/modules/angular2/src/directives/if.js
similarity index 91%
rename from modules/angular2/src/directives/ng_if.js
rename to modules/angular2/src/directives/if.js
index 1b6c457f44..29d21d12a6 100644
--- a/modules/angular2/src/directives/ng_if.js
+++ b/modules/angular2/src/directives/if.js
@@ -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;
diff --git a/modules/angular2/src/directives/ng_non_bindable.js b/modules/angular2/src/directives/non_bindable.js
similarity index 64%
rename from modules/angular2/src/directives/ng_non_bindable.js
rename to modules/angular2/src/directives/non_bindable.js
index 28cf47a87e..c4978746dd 100644
--- a/modules/angular2/src/directives/ng_non_bindable.js
+++ b/modules/angular2/src/directives/non_bindable.js
@@ -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 {
}
diff --git a/modules/angular2/src/directives/ng_switch.js b/modules/angular2/src/directives/switch.js
similarity index 72%
rename from modules/angular2/src/directives/ng_switch.js
rename to modules/angular2/src/directives/switch.js
index b583f4aef8..e7ec734855 100644
--- a/modules/angular2/src/directives/ng_switch.js
+++ b/modules/angular2/src/directives/switch.js
@@ -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);
}
}
diff --git a/modules/angular2/test/directives/ng_repeat_spec.js b/modules/angular2/test/directives/foreach_spec.js
similarity index 86%
rename from modules/angular2/test/directives/ng_repeat_spec.js
rename to modules/angular2/test/directives/foreach_spec.js
index b94e44d636..bf0cbaee70 100644
--- a/modules/angular2/test/directives/ng_repeat_spec.js
+++ b/modules/angular2/test/directives/foreach_spec.js
@@ -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 {
diff --git a/modules/angular2/test/directives/ng_if_spec.js b/modules/angular2/test/directives/if_spec.js
similarity index 77%
rename from modules/angular2/test/directives/ng_if_spec.js
rename to modules/angular2/test/directives/if_spec.js
index aa43a3ec5f..a04a76f179 100644
--- a/modules/angular2/test/directives/ng_if_spec.js
+++ b/modules/angular2/test/directives/if_spec.js
@@ -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 {
diff --git a/modules/angular2/test/directives/ng_non_bindable_spec.js b/modules/angular2/test/directives/non_bindable_spec.js
similarity index 79%
rename from modules/angular2/test/directives/ng_non_bindable_spec.js
rename to modules/angular2/test/directives/non_bindable_spec.js
index bb796791d2..36f416ec37 100644
--- a/modules/angular2/test/directives/ng_non_bindable_spec.js
+++ b/modules/angular2/test/directives/non_bindable_spec.js
@@ -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 {
diff --git a/modules/angular2/test/directives/ng_switch_spec.js b/modules/angular2/test/directives/switch_spec.js
similarity index 73%
rename from modules/angular2/test/directives/ng_switch_spec.js
rename to modules/angular2/test/directives/switch_spec.js
index a84a088921..56be4d2b38 100644
--- a/modules/angular2/test/directives/ng_switch_spec.js
+++ b/modules/angular2/test/directives/switch_spec.js
@@ -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 {
diff --git a/modules/benchmarks/src/naive_infinite_scroll/app.js b/modules/benchmarks/src/naive_infinite_scroll/app.js
index 67aacdd45c..5c17991a8f 100644
--- a/modules/benchmarks/src/naive_infinite_scroll/app.js
+++ b/modules/benchmarks/src/naive_infinite_scroll/app.js
@@ -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>`
})
diff --git a/modules/benchmarks/src/naive_infinite_scroll/cells.js b/modules/benchmarks/src/naive_infinite_scroll/cells.js
index 6fcd51a478..805d0045e0 100644
--- a/modules/benchmarks/src/naive_infinite_scroll/cells.js
+++ b/modules/benchmarks/src/naive_infinite_scroll/cells.js
@@ -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)">
diff --git a/modules/benchmarks/src/naive_infinite_scroll/index.js b/modules/benchmarks/src/naive_infinite_scroll/index.js
index aa0c75fd27..c0e613aaac 100644
--- a/modules/benchmarks/src/naive_infinite_scroll/index.js
+++ b/modules/benchmarks/src/naive_infinite_scroll/index.js
@@ -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[]'
}
diff --git a/modules/benchmarks/src/naive_infinite_scroll/scroll_area.js b/modules/benchmarks/src/naive_infinite_scroll/scroll_area.js
index 7f18407db5..7b42930d31 100644
--- a/modules/benchmarks/src/naive_infinite_scroll/scroll_area.js
+++ b/modules/benchmarks/src/naive_infinite_scroll/scroll_area.js
@@ -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>
diff --git a/tools/transpiler/src/outputgeneration/DartParseTreeWriter.js b/tools/transpiler/src/outputgeneration/DartParseTreeWriter.js
index d2a8a8cfde..936aaa6b11 100644
--- a/tools/transpiler/src/outputgeneration/DartParseTreeWriter.js
+++ b/tools/transpiler/src/outputgeneration/DartParseTreeWriter.js
@@ -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();
}
}
diff --git a/tools/transpiler/unittest/transpilertests.js b/tools/transpiler/unittest/transpilertests.js
index d8b8a972ec..42af136038 100644
--- a/tools/transpiler/unittest/transpilertests.js
+++ b/tools/transpiler/unittest/transpilertests.js
@@ -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");
});