```
-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}}!
-
+
...administrator menu here...
@@ -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.
```
-
+
{{i}}. {{item}}
```
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.
```
-
{{i}}. {{item}}
+
{{i}}. {{item}}
```
@@ -404,16 +404,16 @@ which allows us to further shorten the text.
```
-
{{i}}. {{item}}
+
{{i}}. {{item}}
```
-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`.
```
-
{{i}}. {{item}}
+
{{i}}. {{item}}
```
@@ -524,7 +524,7 @@ Angular are:
{{expression}}
...
...
-
...
+
...
```
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 `` elements (or the short hand version which uses `` 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:
```
-
{{person}}
+
{{person}}
```
@@ -102,28 +102,28 @@ The next step is to compose these two ProtoViews into actual view which is rende
```
| viewA(SomeContexnt)
- | viewA(SomeContexnt): new NgRepeat(new ViewPort(protoViewB))
+ | viewA(SomeContexnt): new Foreach(new ViewPort(protoViewB))
| 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
```
| viewA(someContext)
- | viewA(someContext): new NgRepeat(new ViewPort(protoViewB))
+ | viewA(someContext): new Foreach(new ViewPort(protoViewB))
{{person}}
| viewB0(locals0(someContext))
{{person}}
| viewB1(locals0(someContext))
| 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.
```
| viewA
- | viewA: new NgRepeat(new ViewPort(protoViewB))
+ | viewA: new Foreach(new ViewPort(protoViewB))
Alice
| viewB0
Bob
| viewB1
| 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:
*
* ```
- *
- * ...
- * ...
- * ...
+ *
+ * ...
+ * ...
+ * ...
*
* ```
*/
@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
- * ...
+ * ...
*
* // match against a constant string
- * ...
+ * ...
* ```
*/
@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({
- 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 = '
{{item.toString()}};
';
+ var TEMPLATE = '
{{item.toString()}};
';
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('
';
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('
hello
').then((pv) => {
+ compileWithTemplate('
hello
').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('
hello
').then((pv) => {
+ compileWithTemplate('
hello
').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('
hello
').then((pv) => {
+ compileWithTemplate('
hello
').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('
hello
').then((pv) => {
+ compileWithTemplate('
hello
').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('
hello
').then((pv) => {
+ compileWithTemplate('
hello
').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('
hello
').then((pv) => {
+ compileWithTemplate('
hello
').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 = '
{{text}}{{text}}
';
+ var template = '
{{text}}{{text}}
';
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 = '
{{text}}
';
+ var template = '
{{text}}
';
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 = '
{{text}}
';
+ var template = '
{{text}}
';
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 = '
' +
- '
' +
- '
when a
' +
- '
when b
' +
+ '
' +
+ '
when a
' +
+ '
when b
' +
'
';
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 = '
' +
- '
' +
- '
when a
' +
- '
when default
' +
+ '
' +
+ '
when a
' +
+ '
when default
' +
'
';
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 = '