cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

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