From 842459aa46c1387a6f599422321486a6abe0c7a7 Mon Sep 17 00:00:00 2001
From: Victor Berchet <victor@suumit.com>
Date: Thu, 14 May 2015 17:21:43 +0200
Subject: [PATCH] doc: fix & sync with latest updates

---
 modules/angular2/docs/core/01_templates.md  | 30 ++++++++--------
 modules/angular2/docs/core/02_directives.md | 38 ++++++++++-----------
 modules/angular2/docs/core/10_view.md       | 14 ++++----
 modules/angular2/docs/core/12_zones.md      | 13 ++++---
 4 files changed, 49 insertions(+), 46 deletions(-)

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}}!
-<div template="if: isAdministrator">
+<div template="ng-if: isAdministrator">
   ...administrator menu here...
 </div>
 ```
 
-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}}!
-<template [if]="isAdministrator">
+<template [ng-if]="isAdministrator">
   <div>
     ...administrator menu here...
   </div>
@@ -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`.
 
 ```
 <form #foo=form>
 </form>
 <ul>
-  <template for #person [in]="people" #i="index">
+  <template [ng-for] #person [ng-for-of]="people" #i="index">
     <li>{{i}}. {{person}}<li>
   </template>
 </ul>
 ```
 
 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.
 
 ```
 <ul>
-  <li template="for; #person; of=people; #i=index;">{{i}}. {{person}}<li>
+  <li template="ng-for; #person; of=people; #i=index;">{{i}}. {{person}}<li>
 </ul>
 ```
 
@@ -439,20 +439,20 @@ which allows us to further shorten the text.
 
 ```
 <ul>
-  <li template="for #person of people #i=index">{{i}}. {{person}}<li>
+  <li template="ng-for #person of people #i=index">{{i}}. {{person}}<li>
 </ul>
 ```
 
 We can also optionally use `var` instead of `#` and add `:` to `for` which creates the following recommended
-microsyntax for `for`.
+microsyntax for `ng-for`.
 
 ```
 <ul>
-  <li template="for: var person of people; var i=index">{{i}}. {{person}}<li>
+  <li template="ng-for: var person of people; var i=index">{{i}}. {{person}}<li>
 </ul>
 ```
 
-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:
 
 ```
 <ul>
@@ -569,7 +569,7 @@ Angular are:
 <div title="{{expression}}">{{expression}}</div>
 <div [title]="expression">...</div>
 <div bind-title="expression">...</div>
-<div template="if: expression">...</div>
+<div template="ng-if: expression">...</div>
 ```
 
 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:
 
 ```
 <ul>
-  <li template="foreach: person in people">{{person}}</li>
+  <li template="ng-for: #person of people">{{person}}</li>
 </ul>
 ```
 
@@ -119,33 +119,33 @@ The next step is to compose these two ProtoViews into an actual view which is re
 
 ```
 <ul>                    | viewA(someContext)
-  <template></template> | viewA(someContext): new Foreach(new ViewContainer(protoViewB))
+  <template></template> | viewA(someContext): new NgFor(new ViewContainer(protoViewB))
 </ul>                   | 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
 
 ```
 <ul>                    | viewA(someContext)
-  <template></template> | viewA(someContext): new Foreach(new ViewContainer(protoViewB))
+  <template></template> | viewA(someContext): new NgFor(new ViewContainer(protoViewB))
   <li>{{person}}</li>   | viewB0(locals0(someContext))
   <li>{{person}}</li>   | viewB1(locals0(someContext))
 </ul>                   | 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.
 
 ```
 <ul>                    | viewA
-  <template></template> | viewA: new Foreach(new ViewContainer(protoViewB))
+  <template></template> | viewA: new NgFor(new ViewContainer(protoViewB))
   <li>Alice</li>        | viewB0
   <li>Bob</li>          | viewB1
 </ul>                   | 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 () {