diff --git a/modules/angular2/docs/core/01_templates.md b/modules/angular2/docs/core/01_templates.md
index 7682be75fc..ebc63a0bd4 100644
--- a/modules/angular2/docs/core/01_templates.md
+++ b/modules/angular2/docs/core/01_templates.md
@@ -382,20 +382,20 @@ Example of conditionally included template:
```
Hello {{user}}!
-
+
...administrator menu here...
```
-In the above example the `if` directive determines whether the child view (an instance of the child template) should be
-inserted into the root view. The `if` makes this decision based on if the `isAdministrator` binding is true.
+In the above example the `ng-if` directive determines whether the child view (an instance of the child template) should be
+inserted into the root view. The `ng-if` makes this decision based on if the `isAdministrator` binding is true.
The above example is in the short form, for better clarity let's rewrite it in the canonical form, which is functionally
identical.
```
Hello {{user}}!
-
+
...administrator menu here...
@@ -406,22 +406,22 @@ Hello {{user}}!
### Template Microsyntax
Often times it is necessary to encode a lot of different bindings into a template to control how the instantiation
-of the templates occurs. One such example is `for`.
+of the templates occurs. One such example is `ng-for`.
```
```
Where:
-* `for` triggers the for directive.
-* `[in]="people"` binds an iterable object to the `for` controller.
-* `#person` exports the implicit `for` item.
+* `[ng-for]` triggers the for directive.
+* `#person` exports the implicit `ng-for` item.
+* `[ng-for-of]="people"` binds an iterable object to the `ng-for` controller.
* `#i=index` exports item index as `i`.
The above example is explicit but quite wordy. For this reason in most situations a short hand version of the
@@ -429,7 +429,7 @@ syntax is preferable.
```
- - {{i}}. {{person}}
-
+
- {{i}}. {{person}}
-
```
@@ -439,20 +439,20 @@ which allows us to further shorten the text.
```
- - {{i}}. {{person}}
-
+
- {{i}}. {{person}}
-
```
We can also optionally use `var` instead of `#` and add `:` to `for` which creates the following recommended
-microsyntax for `for`.
+microsyntax for `ng-for`.
```
- - {{i}}. {{person}}
-
+
- {{i}}. {{person}}
-
```
-Finally, we can move the `for` keyword to the left hand side and prefix it with `*` as so:
+Finally, we can move the `ng-for` keyword to the left hand side and prefix it with `*` as so:
```
@@ -569,7 +569,7 @@ Angular are:
{{expression}}
...
...
-...
+...
```
Expressions are simplified version of expression in the language 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 69af3c7de8..3bd564327c 100644
--- a/modules/angular2/docs/core/02_directives.md
+++ b/modules/angular2/docs/core/02_directives.md
@@ -21,6 +21,7 @@ Angular supports these CSS selector constructs:
* Class: `.class`
* AND operation: `name[attribute]`
* OR operation: `name,.class`
+* NOT operation: `:not(.class)`
Angular does not support these (and any CSS selector which crosses element boundaries):
* Descendant: `body div`
@@ -29,7 +30,7 @@ Angular does not support these (and any CSS selector which crosses element bound
* Sibling: `div ~ table`
* Wildcard: `*`
* ID: `#id`
-* Pseudo selectors: `:pseudo`
+* Pseudo selectors: `:pseudo` other than `:not`
@@ -61,20 +62,20 @@ Here is a trivial example of a tooltip decorator. The directive will log a toolt
```
@Directive({
- selector: '[tooltip]', // CSS Selector which triggers the decorator
- properties: { // List which properties need to be bound
- text: 'tooltip' // - DOM element tooltip property should be
- }, // mapped to the directive text property.
- hostListeners: { // List which events need to be mapped.
- mouseover: 'show' // - Invoke the show() method every time
- } // the mouseover event is fired.
-})
-class Form { // Directive controller class, instantiated
- // when CSS matches.
- text:string; // text property on the Directive Controller.
-
- show(event) { // Show method which implements the show action.
- console.log(this.text);
+ selector: '[tooltip]', | CSS Selector which triggers the decorator
+ properties: { | List which properties need to be bound
+ text: 'tooltip' | - DOM element tooltip property should be
+ }, | mapped to the directive text property.
+ hostListeners: { | List which events need to be mapped.
+ mouseover: 'show' | - Invoke the show() method every time
+ } | the mouseover event is fired.
+}) |
+class Form { | Directive controller class, instantiated
+ | when CSS matches.
+ text:string; | text property on the Directive Controller.
+ |
+ show(event) { | Show method which implements the show action.
+ console.log(this.text); |
}
}
```
@@ -113,7 +114,7 @@ Example of a component:
}, |
}) |
@View({ | View annotation
- templateUrl: 'pane.html' | - URL of template HTML
+ templateUrl: 'pane.html' | - URL of template HTML
}) |
class Pane { | Component controller class
title:string; | - title property
@@ -160,7 +161,7 @@ Example of usage:
## Directives that use a ViewContainer
-Directives that use a ViewContainer can control instantiation of child views which are then inserted into the DOM. (Examples are `if` and `for`.)
+Directives that use a ViewContainer can control instantiation of child views which are then inserted into the DOM. (Examples are `ng-if` and `ng-for`.)
* Every `template` element creates a `ProtoView` which can be used to create Views via the ViewContainer.
* The child views show up as siblings of the directive in the DOM.
@@ -229,7 +230,7 @@ class MyService {} | Assume a service which needs to be inject
injectables: [MyService] |
}) |
@View({ | Assume we have a template that needs to be
- templateUrl: 'my_app.html', | configured with directives to be injected.
+ templateUrl: 'my_app.html', | configured with directives to be injected.
directives: [House] |
}) |
class MyApp {} |
@@ -358,7 +359,6 @@ class Dad {
constructor(@Parent() dad:Grandpa) {
this.name = 'Joe Jr';
this.dad = dad.name;
- console.log(dad)
}
}
diff --git a/modules/angular2/docs/core/10_view.md b/modules/angular2/docs/core/10_view.md
index d17a26f5f6..96da860441 100644
--- a/modules/angular2/docs/core/10_view.md
+++ b/modules/angular2/docs/core/10_view.md
@@ -94,7 +94,7 @@ Let's start with a View such as:
```
- - {{person}}
+ - {{person}}
```
@@ -119,33 +119,33 @@ The next step is to compose these two ProtoViews into an actual view which is re
```
| viewA(someContext)
- | viewA(someContext): new Foreach(new ViewContainer(protoViewB))
+ | viewA(someContext): new NgFor(new ViewContainer(protoViewB))
| viewA(someContext)
```
-*Step2:* Instantiate `Foreach` directive which will receive the `ViewContainerRef`. (The ViewContainerRef
+*Step2:* Instantiate `NgFor` directive which will receive the `ViewContainerRef`. (The ViewContainerRef
has a reference to `protoViewA`).
-*Step3:* As the `Foreach` directive unrolls it asks the `ViewContainerRef` to instantiate `protoViewB` and insert
+*Step3:* As the `NgFor` directive unrolls it asks the `ViewContainerRef` to instantiate `protoViewB` and insert
it after the `ViewContainer` anchor. This is repeated for each `person` in `people`. Notice that
```
| viewA(someContext)
- | viewA(someContext): new Foreach(new ViewContainer(protoViewB))
+ | viewA(someContext): new NgFor(new ViewContainer(protoViewB))
- {{person}}
| viewB0(locals0(someContext))
- {{person}}
| viewB1(locals0(someContext))
| viewA(someContext)
```
-*Step4:* All of the bindings in the child Views are updated. Notice that in the case of `Foreach`
+*Step4:* All of the bindings in the child Views are updated. Notice that in the case of `NgFor`
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 Foreach(new ViewContainer(protoViewB))
+ | viewA: new NgFor(new ViewContainer(protoViewB))
- Alice
| viewB0
- Bob
| viewB1
| viewA
diff --git a/modules/angular2/docs/core/12_zones.md b/modules/angular2/docs/core/12_zones.md
index a0417bf512..070b624549 100644
--- a/modules/angular2/docs/core/12_zones.md
+++ b/modules/angular2/docs/core/12_zones.md
@@ -8,16 +8,17 @@ UI bindings. Zones means that in Angular v2 you don't have to remember to call `
## Execution Context
```
-zone['inTheZone'] = false;
-zone.run(function () {
- zone['inTheZone'] = true;
+zone.inTheZone = false;
+
+zone.fork().run(function () {
+ zone.inTheZone = true;
setTimeout(function () {
- console.log('async in the zone: ' + zone['inTheZone']);
+ console.log('async in the zone: ' + zone.inTheZone);
}, 0);
});
-console.log('sync in the zone: ' + zone['inTheZone']);
+console.log('sync in the zone: ' + zone.inTheZone);
```
The above will log:
@@ -58,6 +59,8 @@ execution which was registered in the `run` block.
In Angular2 it is not necessary to notify Angular of changes manually after async callback, because a relevant
async callbacks are intercepted. The question is how do we know which callbacks are Angular relevant?
+// TODO(vicb): outdated, rework.
+
```
/// Some other code running on page can do async operation
document.addEventListener('mousemove', function () {