From ab90d68240acae6b7accb65e7a9f85dd81d232ca Mon Sep 17 00:00:00 2001
From: Naomi Black <naomitraveller@gmail.com>
Date: Tue, 15 Dec 2015 11:23:25 -0800
Subject: [PATCH] docs(router): fix filetree styles

---
 public/docs/dart/latest/guide/cheatsheet.json | 989 ++++++++---------
 public/docs/js/latest/guide/cheatsheet.json   | 997 +++++++++---------
 public/docs/ts/latest/guide/cheatsheet.json   | 989 ++++++++---------
 public/docs/ts/latest/guide/router.jade       | 133 +--
 4 files changed, 1593 insertions(+), 1515 deletions(-)

diff --git a/public/docs/dart/latest/guide/cheatsheet.json b/public/docs/dart/latest/guide/cheatsheet.json
index a18289d76c..e70ffd1648 100644
--- a/public/docs/dart/latest/guide/cheatsheet.json
+++ b/public/docs/dart/latest/guide/cheatsheet.json
@@ -1,487 +1,506 @@
-[
-  {
-    "name": "Bootstrapping",
-    "description": "<p>\n<code>import &#39;package:angular2/bootstrap.dart&#39;;</code></p>\n",
-    "items": [
-      {
-        "syntax": "bootstrap​(MyAppComponent, [MyService, provide(...)]);",
-        "bold": [
-          "provide"
-        ],
-        "description": "<p>Bootstraps an application with MyAppComponent as the root component, and\nconfigures the app&#39;s dependency injection providers.</p>\n"
-      }
+{
+  "currentEnvironment": "Dart",
+  "version": {
+    "raw": "2.0.0-beta.0",
+    "major": 2,
+    "minor": 0,
+    "patch": 0,
+    "prerelease": [
+      "local"
     ],
-    "index": 0
+    "build": "sha.323393a",
+    "version": "2.0.0-local",
+    "codeName": "snapshot",
+    "isSnapshot": true,
+    "full": "2.0.0-local+sha.323393a",
+    "branch": "master",
+    "commitSHA": "323393a86201db871c2fbc6dc7bd12229b498d9a"
   },
-  {
-    "name": "Template syntax",
-    "description": "",
-    "items": [
-      {
-        "syntax": "<input [value]=\"firstName\">",
-        "bold": [
-          "[value]"
-        ],
-        "description": "<p>Binds property <code>value</code> to the result of expression <code>firstName</code>.</p>\n"
-      },
-      {
-        "syntax": "<div [attr.role]=\"myAriaRole\">",
-        "bold": [
-          "[attr.role]"
-        ],
-        "description": "<p>Binds attribute <code>role</code> to the result of expression <code>myAriaRole</code>.</p>\n"
-      },
-      {
-        "syntax": "<div [class.extra-sparkle]=\"isDelightful\">",
-        "bold": [
-          "[class.extra-sparkle]"
-        ],
-        "description": "<p>Binds the presence of the CSS class <code>extra-sparkle</code> on the element to the truthiness of the expression <code>isDelightful</code>.</p>\n"
-      },
-      {
-        "syntax": "<div [style.width.px]=\"mySize\">",
-        "bold": [
-          "[style.width.px]"
-        ],
-        "description": "<p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p>\n"
-      },
-      {
-        "syntax": "<button (click)=\"readRainbow($event)\">",
-        "bold": [
-          "(click)"
-        ],
-        "description": "<p>Calls method <code>readRainbow</code> when a click event is triggered on this button element (or its children) and passes in the event object.</p>\n"
-      },
-      {
-        "syntax": "<div title=\"Hello {{ponyName}}\">",
-        "bold": [
-          "{{ponyName}}"
-        ],
-        "description": "<p>Binds a property to an interpolated string, e.g. &quot;Hello Seabiscuit&quot;. Equivalent to:\n<code>&lt;div [title]=&quot;&#39;Hello&#39; + ponyName&quot;&gt;</code></p>\n"
-      },
-      {
-        "syntax": "<p>Hello {{ponyName}}</p>",
-        "bold": [
-          "{{ponyName}}"
-        ],
-        "description": "<p>Binds text content to an interpolated string, e.g. &quot;Hello Seabiscuit&quot;.</p>\n"
-      },
-      {
-        "syntax": "<my-cmp [(title)]=\"name\">",
-        "bold": [
-          "[(title)]"
-        ],
-        "description": "<p>Sets up two-way data binding. Equivalent to: <code>&lt;my-cmp [title]=&quot;name&quot; (titleChange)=&quot;name=$event&quot;&gt;</code></p>\n"
-      },
-      {
-        "syntax": "<video #movieplayer ...>\n  <button (click)=\"movieplayer.play()\">\n</video>",
-        "bold": [
-          "#movieplayer",
-          "(click)"
-        ],
-        "description": "<p>Creates a local variable <code>movieplayer</code> that provides access to the <code>video</code> element instance in data-binding and event-binding expressions in the current template.</p>\n"
-      },
-      {
-        "syntax": "<p *my-unless=\"myExpression\">...</p>",
-        "bold": [
-          "*my-unless"
-        ],
-        "description": "<p>The <code>*</code> symbol means that the current element will be turned into an embedded template. Equivalent to:\n<code>&lt;template [myless]=&quot;myExpression&quot;&gt;&lt;p&gt;...&lt;/p&gt;&lt;/template&gt;</code></p>\n"
-      },
-      {
-        "syntax": "<p>Card No.: {{cardNumber | myCreditCardNumberFormatter}}</p>",
-        "bold": [
-          "{{cardNumber | myCreditCardNumberFormatter}}"
-        ],
-        "description": "<p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>creditCardNumberFormatter</code>.</p>\n"
-      },
-      {
-        "syntax": "<p>Employer: {{employer?.companyName}}</p>",
-        "bold": [
-          "{{employer?.companyName}}"
-        ],
-        "description": "<p>The Elvis operator (<code>?</code>) means that the <code>employer</code> field is optional and if <code>undefined</code>, the rest of the expression should be ignored.</p>\n"
-      }
-    ],
-    "index": 1
-  },
-  {
-    "name": "Built-in directives",
-    "description": "<p>\n<code>import &#39;package:angular2/common.dart&#39;;</code></p>\n",
-    "items": [
-      {
-        "syntax": "<section *ngIf=\"showSection\">",
-        "bold": [
-          "*ngIf"
-        ],
-        "description": "<p>Removes or recreates a portion of the DOM tree based on the showSection expression.</p>\n"
-      },
-      {
-        "syntax": "<li *ngFor=\"#item of list\">",
-        "bold": [
-          "*ngFor"
-        ],
-        "description": "<p>Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.</p>\n"
-      },
-      {
-        "syntax": "<div [ngSwitch]=\"conditionExpression\">\n  <template [ngSwitchWhen]=\"case1Exp\">...</template>\n  <template ngSwitchWhen=\"case2LiteralString\">...</template>\n  <template ngSwitchDefault>...</template>\n</div>",
-        "bold": [
-          "[ngSwitch]",
-          "[ngSwitchWhen]",
-          "ngSwitchWhen",
-          "ngSwitchDefault"
-        ],
-        "description": "<p>Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.</p>\n"
-      },
-      {
-        "syntax": "<div [ngClass]=\"{active: isActive, disabled: isDisabled}\">",
-        "bold": [
-          "[ngClass]"
-        ],
-        "description": "<p>Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand side expression should return {class-name: true/false} map.</p>\n"
-      }
-    ],
-    "index": 2
-  },
-  {
-    "name": "Forms",
-    "description": "<p>\n<code>import &#39;package:angular2/common.dart&#39;;</code></p>\n",
-    "items": [
-      {
-        "syntax": "<input [(ngModel)]=\"userName\">",
-        "bold": [
-          "[(ngModel)]"
-        ],
-        "description": "<p>Provides two-way data-binding, parsing and validation for form controls.</p>\n"
-      }
-    ],
-    "index": 3
-  },
-  {
-    "name": "Class decorators",
-    "description": "<p>\n<code>import &#39;package:angular2/core.dart&#39;;</code></p>\n",
-    "items": [
-      {
-        "syntax": "@Component(...)\nclass MyComponent() {}",
-        "bold": [
-          "@Component(...)"
-        ],
-        "description": "<p>Declares that a class is a component and provides metadata about the component.</p>\n"
-      },
-      {
-        "syntax": "@Pipe(...)\nclass MyPipe() {}",
-        "bold": [
-          "@Pipe(...)"
-        ],
-        "description": "<p>Declares that a class is a pipe and provides metadata about the pipe.</p>\n"
-      },
-      {
-        "syntax": "@Injectable()\nclass MyService() {}",
-        "bold": [
-          "@Injectable()"
-        ],
-        "description": "<p>Declares that a class has dependencies that should be injected into the constructor when the dependency\ninjector is creating an instance of this class.</p>\n"
-      }
-    ],
-    "index": 4
-  },
-  {
-    "name": "Directive configuration",
-    "description": "<p>\n<code>@Directive(property1: value1, ...)</code></p>\n",
-    "items": [
-      {
-        "syntax": "selector: '.cool-button:not(a)'",
-        "bold": [
-          "selector:"
-        ],
-        "description": "<p>Specifies a CSS selector that identifies this directive within a template. Supported selectors include <code>element</code>,\n<code>[attribute]</code>, <code>.class</code>, and <code>:not()</code>.</p>\n<p>Does not support parent-child relationship selectors.</p>\n"
-      },
-      {
-        "syntax": "providers: [MyService, provide(...)]",
-        "bold": [
-          "providers:"
-        ],
-        "description": "<p>Array of dependency injection providers for this directive and its children.</p>\n"
-      }
-    ],
-    "index": 5
-  },
-  {
-    "name": "Component configuration",
-    "description": "<p><code>@Component</code> extends <code>@Directive</code>,\nso the <code>@Directive</code> configuration applies to components as well</p>\n",
-    "items": [
-      {
-        "syntax": "viewProviders: [MyService, provide(...)]",
-        "bold": [
-          "viewProviders:"
-        ],
-        "description": "<p>Array of dependency injection providers scoped to this component&#39;s view.</p>\n"
-      },
-      {
-        "syntax": "template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'",
-        "bold": [
-          "template:",
-          "templateUrl:"
-        ],
-        "description": "<p>Inline template / external template URL of the component&#39;s view.</p>\n"
-      },
-      {
-        "syntax": "styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']",
-        "bold": [
-          "styles:",
-          "styleUrls:"
-        ],
-        "description": "<p>List of inline CSS styles / external stylesheet URLs for styling component’s view.</p>\n"
-      },
-      {
-        "syntax": "directives: [MyDirective, MyComponent]",
-        "bold": [
-          "directives:"
-        ],
-        "description": "<p>List of directives used in the the component’s template.</p>\n"
-      },
-      {
-        "syntax": "pipes: [MyPipe, OtherPipe]",
-        "bold": [
-          "pipes:"
-        ],
-        "description": "<p>List of pipes used in the component&#39;s template.</p>\n"
-      }
-    ],
-    "index": 6
-  },
-  {
-    "name": "Class field decorators for directives and components",
-    "description": "<p>\n<code>import &#39;package:angular2/core.dart&#39;;</code></p>\n",
-    "items": [
-      {
-        "syntax": "@Input() myProperty;",
-        "bold": [
-          "@Input()"
-        ],
-        "description": "<p>Declares an input property that we can update via property binding (e.g.\n<code>&lt;my-cmp [my-property]=&quot;someExpression&quot;&gt;</code>).</p>\n"
-      },
-      {
-        "syntax": "@Output() myEvent = new EventEmitter();",
-        "bold": [
-          "@Output()"
-        ],
-        "description": "<p>Declares an output property that fires events to which we can subscribe with an event binding (e.g. <code>&lt;my-cmp (my-event)=&quot;doSomething()&quot;&gt;</code>).</p>\n"
-      },
-      {
-        "syntax": "@HostBinding('[class.valid]') isValid;",
-        "bold": [
-          "@HostBinding('[class.valid]')"
-        ],
-        "description": "<p>Binds a host element property (e.g. CSS class valid) to directive/component property (e.g. isValid).</p>\n"
-      },
-      {
-        "syntax": "@HostListener('click', ['$event']) onClick(e) {...}",
-        "bold": [
-          "@HostListener('click', ['$event'])"
-        ],
-        "description": "<p>Subscribes to a host element event (e.g. click) with a directive/component method (e.g. onClick), optionally passing an argument ($event).</p>\n"
-      },
-      {
-        "syntax": "@ContentChild(myPredicate) myChildComponent;",
-        "bold": [
-          "@ContentChild(myPredicate)"
-        ],
-        "description": "<p>Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.</p>\n"
-      },
-      {
-        "syntax": "@ContentChildren(myPredicate) myChildComponents;",
-        "bold": [
-          "@ContentChildren(myPredicate)"
-        ],
-        "description": "<p>Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.</p>\n"
-      },
-      {
-        "syntax": "@ViewChild(myPredicate) myChildComponent;",
-        "bold": [
-          "@ViewChild(myPredicate)"
-        ],
-        "description": "<p>Binds the first result of the component view query (myPredicate) to the myChildComponent property of the class. Not available for directives.</p>\n"
-      },
-      {
-        "syntax": "@ViewChildren(myPredicate) myChildComponents;",
-        "bold": [
-          "@ViewChildren(myPredicate)"
-        ],
-        "description": "<p>Binds the results of the component view query (myPredicate) to the myChildComponents property of the class. Not available for directives.</p>\n"
-      }
-    ],
-    "index": 7
-  },
-  {
-    "name": "Directive and component change detection and lifecycle hooks",
-    "description": "<p>(implemented as class methods)</p>\n",
-    "items": [
-      {
-        "syntax": "MyAppComponent(MyService myService, ...) { ... }",
-        "bold": [
-          "MyAppComponent(MyService myService, ...)"
-        ],
-        "description": "<p>The class constructor is called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.</p>\n"
-      },
-      {
-        "syntax": "ngOnChanges(changeRecord) { ... }",
-        "bold": [
-          "ngOnChanges(changeRecord)"
-        ],
-        "description": "<p>Called after every change to input properties and before processing content or child views.</p>\n"
-      },
-      {
-        "syntax": "ngOnInit() { ... }",
-        "bold": [
-          "ngOnInit()"
-        ],
-        "description": "<p>Called after the constructor, initializing input properties, and the first call to ngOnChanges.</p>\n"
-      },
-      {
-        "syntax": "ngDoCheck() { ... }",
-        "bold": [
-          "ngDoCheck()"
-        ],
-        "description": "<p>Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.</p>\n"
-      },
-      {
-        "syntax": "ngAfterContentInit() { ... }",
-        "bold": [
-          "ngAfterContentInit()"
-        ],
-        "description": "<p>Called after ngOnInit when the component&#39;s or directive&#39;s content has been initialized.</p>\n"
-      },
-      {
-        "syntax": "ngAfterContentChecked() { ... }",
-        "bold": [
-          "ngAfterContentChecked()"
-        ],
-        "description": "<p>Called after every check of the component&#39;s or directive&#39;s content.</p>\n"
-      },
-      {
-        "syntax": "ngAfterViewInit() { ... }",
-        "bold": [
-          "ngAfterViewInit()"
-        ],
-        "description": "<p>Called after ngAfterContentInit when the component&#39;s view has been initialized. Applies to components only.</p>\n"
-      },
-      {
-        "syntax": "ngAfterViewChecked() { ... }",
-        "bold": [
-          "ngAfterViewChecked()"
-        ],
-        "description": "<p>Called after every check of the component&#39;s view. Applies to components only.</p>\n"
-      },
-      {
-        "syntax": "ngOnDestroy() { ... }",
-        "bold": [
-          "ngOnDestroy()"
-        ],
-        "description": "<p>Called once, before the instance is destroyed.</p>\n"
-      }
-    ],
-    "index": 8
-  },
-  {
-    "name": "Dependency injection configuration",
-    "description": "<p>\n<code>import &#39;package:angular2/core.dart&#39;;</code></p>\n",
-    "items": [
-      {
-        "syntax": "provide(MyService, {useClass: MyMockService})",
-        "bold": [
-          "provide",
-          "useClass"
-        ],
-        "description": "<p>Sets or overrides the provider for MyService to the MyMockService class.</p>\n"
-      },
-      {
-        "syntax": "provide(MyService, {useFactory: myFactory})",
-        "bold": [
-          "provide",
-          "useFactory"
-        ],
-        "description": "<p>Sets or overrides the provider for MyService to the myFactory factory function.</p>\n"
-      },
-      {
-        "syntax": "provide(MyValue, {useValue: 41})",
-        "bold": [
-          "provide",
-          "useValue"
-        ],
-        "description": "<p>Sets or overrides the provider for MyValue to the value 41.</p>\n"
-      }
-    ],
-    "index": 9
-  },
-  {
-    "name": "Routing and navigation",
-    "description": "<p>\n<code>import &#39;package:angular2/router.dart&#39;;</code></p>\n",
-    "items": [
-      {
-        "syntax": "@RouteConfig(const [\n  const Route(path: '/:myParam', component: MyComponent, name: 'MyCmp' ),\n])",
-        "bold": [
-          "@RouteConfig"
-        ],
-        "description": "<p>Configures routes for the decorated component. Supports static, parameterized, and wildcard routes.</p>\n"
-      },
-      {
-        "syntax": "<router-outlet></router-outlet>",
-        "bold": [
-          "router-outlet"
-        ],
-        "description": "<p>Marks the location to load the component of the active route.</p>\n"
-      },
-      {
-        "syntax": "<a [routerLink]=\"[ '/MyCmp', {myParam: 'value' } ]\">",
-        "bold": [
-          "[routerLink]"
-        ],
-        "description": "<p>Creates a link to a different view based on a route instruction consisting of a route name and optional parameters. The route name matches the as property of a configured route. Add the &#39;/&#39; prefix to navigate to a root route; add the &#39;./&#39; prefix for a child route.</p>\n"
-      },
-      {
-        "syntax": "@CanActivate(() => ...)class MyComponent() {}",
-        "bold": [
-          "@CanActivate"
-        ],
-        "description": "<p>A component decorator defining a function that the router should call first to determine if it should activate this component. Should return a boolean or a future.</p>\n"
-      },
-      {
-        "syntax": "routerOnActivate(nextInstruction, prevInstruction) { ... }",
-        "bold": [
-          "routerOnActivate"
-        ],
-        "description": "<p>After navigating to a component, the router calls the component&#39;s routerOnActivate method (if defined).</p>\n"
-      },
-      {
-        "syntax": "routerCanReuse(nextInstruction, prevInstruction) { ... }",
-        "bold": [
-          "routerCanReuse"
-        ],
-        "description": "<p>The router calls a component&#39;s routerCanReuse method (if defined) to determine whether to reuse the instance or destroy it and create a new instance. Should return a boolean or a future.</p>\n"
-      },
-      {
-        "syntax": "routerOnReuse(nextInstruction, prevInstruction) { ... }",
-        "bold": [
-          "routerOnReuse"
-        ],
-        "description": "<p>The router calls the component&#39;s routerOnReuse method (if defined) when it re-uses a component instance.</p>\n"
-      },
-      {
-        "syntax": "routerCanDeactivate(nextInstruction, prevInstruction) { ... }",
-        "bold": [
-          "routerCanDeactivate"
-        ],
-        "description": "<p>The router calls the routerCanDeactivate methods (if defined) of every component that would be removed after a navigation. The navigation proceeds if and only if all such methods return true or a future that completes successfully.</p>\n"
-      },
-      {
-        "syntax": "routerOnDeactivate(nextInstruction, prevInstruction) { ... }",
-        "bold": [
-          "routerOnDeactivate"
-        ],
-        "description": "<p>Called before the directive is removed as the result of a route change. May return a future that pauses removing the directive until the future completes.</p>\n"
-      }
-    ],
-    "index": 10
-  }
-]
\ No newline at end of file
+  "sections": [
+    {
+      "name": "Bootstrapping",
+      "description": "<p>\n\n<code>import &#39;package:angular2/bootstrap.dart&#39;;</code></p>\n",
+      "items": [
+        {
+          "syntax": "bootstrap​(MyAppComponent, [MyService, provide(...)]);",
+          "bold": [
+            "provide"
+          ],
+          "description": "<p>Bootstraps an application with MyAppComponent as the root component and configures the DI providers. </p>\n"
+        }
+      ],
+      "index": 0
+    },
+    {
+      "name": "Template syntax",
+      "description": "",
+      "items": [
+        {
+          "syntax": "<input [value]=\"firstName\">",
+          "bold": [
+            "[value]"
+          ],
+          "description": "<p>Binds property <code>value</code> to the result of expression <code>firstName</code>.</p>\n"
+        },
+        {
+          "syntax": "<div [attr.role]=\"myAriaRole\">",
+          "bold": [
+            "[attr.role]"
+          ],
+          "description": "<p>Binds attribute <code>role</code> to the result of expression <code>myAriaRole</code>.</p>\n"
+        },
+        {
+          "syntax": "<div [class.extra-sparkle]=\"isDelightful\">",
+          "bold": [
+            "[class.extra-sparkle]"
+          ],
+          "description": "<p>Binds the presence of the CSS class <code>extra-sparkle</code> on the element to the truthiness of the expression <code>isDelightful</code>.</p>\n"
+        },
+        {
+          "syntax": "<div [style.width.px]=\"mySize\">",
+          "bold": [
+            "[style.width.px]"
+          ],
+          "description": "<p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p>\n"
+        },
+        {
+          "syntax": "<button (click)=\"readRainbow($event)\">",
+          "bold": [
+            "(click)"
+          ],
+          "description": "<p>Calls method <code>readRainbow</code> when a click event is triggered on this button element (or its children) and passes in the event object.</p>\n"
+        },
+        {
+          "syntax": "<div title=\"Hello {{ponyName}}\">",
+          "bold": [
+            "{{ponyName}}"
+          ],
+          "description": "<p>Binds a property to an interpolated string, e.g. &quot;Hello Seabiscuit&quot;. Equivalent to:\n<code>&lt;div [title]=&quot;&#39;Hello&#39; + ponyName&quot;&gt;</code></p>\n"
+        },
+        {
+          "syntax": "<p>Hello {{ponyName}}</p>",
+          "bold": [
+            "{{ponyName}}"
+          ],
+          "description": "<p>Binds text content to an interpolated string, e.g. &quot;Hello Seabiscuit&quot;.</p>\n"
+        },
+        {
+          "syntax": "<my-cmp [(title)]=\"name\">",
+          "bold": [
+            "[(title)]"
+          ],
+          "description": "<p>Sets up two-way data binding. Equivalent to: <code>&lt;my-cmp [title]=&quot;name&quot; (titleChange)=&quot;name=$event&quot;&gt;</code></p>\n"
+        },
+        {
+          "syntax": "<video #movieplayer ...>\n  <button (click)=\"movieplayer.play()\">\n</video>",
+          "bold": [
+            "#movieplayer",
+            "(click)"
+          ],
+          "description": "<p>Creates a local variable <code>movieplayer</code> that provides access to the <code>video</code> element instance in data-binding and event-binding expressions in the current template.</p>\n"
+        },
+        {
+          "syntax": "<p *my-unless=\"myExpression\">...</p>",
+          "bold": [
+            "*my-unless"
+          ],
+          "description": "<p>The <code>*</code> symbol means that the current element will be turned into an embedded template. Equivalent to:\n<code>&lt;template [myless]=&quot;myExpression&quot;&gt;&lt;p&gt;...&lt;/p&gt;&lt;/template&gt;</code></p>\n"
+        },
+        {
+          "syntax": "<p>Card No.: {{cardNumber | myCreditCardNumberFormatter}}</p>",
+          "bold": [
+            "{{cardNumber | myCreditCardNumberFormatter}}"
+          ],
+          "description": "<p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>creditCardNumberFormatter</code>.</p>\n"
+        },
+        {
+          "syntax": "<p>Employer: {{employer?.companyName}}</p>",
+          "bold": [
+            "{{employer?.companyName}}"
+          ],
+          "description": "<p>The Elvis operator (<code>?</code>) means that the <code>employer</code> field is optional and if <code>undefined</code>, the rest of the expression should be ignored.</p>\n"
+        }
+      ],
+      "index": 1
+    },
+    {
+      "name": "Built-in directives",
+      "description": "<p>\n\n<code>import &#39;package:angular2/common.dart&#39;;</code></p>\n",
+      "items": [
+        {
+          "syntax": "<section *ngIf=\"showSection\">",
+          "bold": [
+            "*ngIf"
+          ],
+          "description": "<p>Removes or recreates a portion of the DOM tree based on the showSection expression.</p>\n"
+        },
+        {
+          "syntax": "<li *ngFor=\"#item of list\">",
+          "bold": [
+            "*ngFor"
+          ],
+          "description": "<p>Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.</p>\n"
+        },
+        {
+          "syntax": "<div [ngSwitch]=\"conditionExpression\">\n  <template [ngSwitchWhen]=\"case1Exp\">...</template>\n  <template ngSwitchWhen=\"case2LiteralString\">...</template>\n  <template ngSwitchDefault>...</template>\n</div>",
+          "bold": [
+            "[ngSwitch]",
+            "[ngSwitchWhen]",
+            "ngSwitchWhen",
+            "ngSwitchDefault"
+          ],
+          "description": "<p>Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.</p>\n"
+        },
+        {
+          "syntax": "<div [ngClass]=\"{active: isActive, disabled: isDisabled}\">",
+          "bold": [
+            "[ngClass]"
+          ],
+          "description": "<p>Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand side expression should return {class-name: true/false} map.</p>\n"
+        }
+      ],
+      "index": 2
+    },
+    {
+      "name": "Forms",
+      "description": "<p>\n\n<code>import &#39;package:angular2/common.dart&#39;;</code></p>\n",
+      "items": [
+        {
+          "syntax": "<input [(ngModel)]=\"userName\">",
+          "bold": [
+            "[(ngModel)]"
+          ],
+          "description": "<p>Provides two-way data-binding, parsing and validation for form controls.</p>\n"
+        }
+      ],
+      "index": 3
+    },
+    {
+      "name": "Class decorators",
+      "description": "<p>\n\n<code>import &#39;package:angular2/core.dart&#39;;</code></p>\n",
+      "items": [
+        {
+          "syntax": "@Component(...)\nclass MyComponent() {}",
+          "bold": [
+            "@Component(...)"
+          ],
+          "description": "<p>Declares that a class is a component and provides metadata about the component.</p>\n"
+        },
+        {
+          "syntax": "@Pipe(...)\nclass MyPipe() {}",
+          "bold": [
+            "@Pipe(...)"
+          ],
+          "description": "<p>Declares that a class is a pipe and provides metadata about the pipe.</p>\n"
+        },
+        {
+          "syntax": "@Injectable()\nclass MyService() {}",
+          "bold": [
+            "@Injectable()"
+          ],
+          "description": "<p>Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.\n\n</p>\n"
+        }
+      ],
+      "index": 4
+    },
+    {
+      "name": "Directive configuration",
+      "description": "<p>\n\n<code>@Directive(property1: value1, ...)</code></p>\n",
+      "items": [
+        {
+          "syntax": "selector: '.cool-button:not(a)'",
+          "bold": [
+            "selector:"
+          ],
+          "description": "<p>Specifies a CSS selector that identifies this directive within a template. Supported selectors include <code>element</code>,\n<code>[attribute]</code>, <code>.class</code>, and <code>:not()</code>.</p>\n<p>Does not support parent-child relationship selectors.</p>\n"
+        },
+        {
+          "syntax": "providers: [MyService, provide(...)]",
+          "bold": [
+            "providers:"
+          ],
+          "description": "<p>Array of dependency injection providers for this directive and its children.</p>\n"
+        }
+      ],
+      "index": 5
+    },
+    {
+      "name": "Component configuration",
+      "description": "<p>\n<code>@Component</code> extends <code>@Directive</code>,\nso the <code>@Directive</code> configuration applies to components as well</p>\n",
+      "items": [
+        {
+          "syntax": "viewProviders: [MyService, provide(...)]",
+          "bold": [
+            "viewProviders:"
+          ],
+          "description": "<p>Array of dependency injection providers scoped to this component&#39;s view.</p>\n"
+        },
+        {
+          "syntax": "template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'",
+          "bold": [
+            "template:",
+            "templateUrl:"
+          ],
+          "description": "<p>Inline template / external template URL of the component&#39;s view.</p>\n"
+        },
+        {
+          "syntax": "styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']",
+          "bold": [
+            "styles:",
+            "styleUrls:"
+          ],
+          "description": "<p>List of inline CSS styles / external stylesheet URLs for styling component’s view.</p>\n"
+        },
+        {
+          "syntax": "directives: [MyDirective, MyComponent]",
+          "bold": [
+            "directives:"
+          ],
+          "description": "<p>List of directives used in the the component’s template.</p>\n"
+        },
+        {
+          "syntax": "pipes: [MyPipe, OtherPipe]",
+          "bold": [
+            "pipes:"
+          ],
+          "description": "<p>List of pipes used in the component&#39;s template.</p>\n"
+        }
+      ],
+      "index": 6
+    },
+    {
+      "name": "Class field decorators for directives and components",
+      "description": "<p>\n\n<code>import &#39;package:angular2/core.dart&#39;;</code></p>\n",
+      "items": [
+        {
+          "syntax": "@Input() myProperty;",
+          "bold": [
+            "@Input()"
+          ],
+          "description": "<p>Declares an input property that we can update via property binding (e.g.\n<code>&lt;my-cmp [my-property]=&quot;someExpression&quot;&gt;</code>).</p>\n"
+        },
+        {
+          "syntax": "@Output() myEvent = new EventEmitter();",
+          "bold": [
+            "@Output()"
+          ],
+          "description": "<p>Declares an output property that fires events to which we can subscribe with an event binding (e.g. <code>&lt;my-cmp (my-event)=&quot;doSomething()&quot;&gt;</code>).</p>\n"
+        },
+        {
+          "syntax": "@HostBinding('[class.valid]') isValid;",
+          "bold": [
+            "@HostBinding('[class.valid]')"
+          ],
+          "description": "<p>Binds a host element property (e.g. CSS class valid) to directive/component property (e.g. isValid).</p>\n"
+        },
+        {
+          "syntax": "@HostListener('click', ['$event']) onClick(e) {...}",
+          "bold": [
+            "@HostListener('click', ['$event'])"
+          ],
+          "description": "<p>Subscribes to a host element event (e.g. click) with a directive/component method (e.g. onClick), optionally passing an argument ($event).</p>\n"
+        },
+        {
+          "syntax": "@ContentChild(myPredicate) myChildComponent;",
+          "bold": [
+            "@ContentChild(myPredicate)"
+          ],
+          "description": "<p>Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.</p>\n"
+        },
+        {
+          "syntax": "@ContentChildren(myPredicate) myChildComponents;",
+          "bold": [
+            "@ContentChildren(myPredicate)"
+          ],
+          "description": "<p>Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.</p>\n"
+        },
+        {
+          "syntax": "@ViewChild(myPredicate) myChildComponent;",
+          "bold": [
+            "@ViewChild(myPredicate)"
+          ],
+          "description": "<p>Binds the first result of the component view query (myPredicate) to the myChildComponent property of the class. Not available for directives.</p>\n"
+        },
+        {
+          "syntax": "@ViewChildren(myPredicate) myChildComponents;",
+          "bold": [
+            "@ViewChildren(myPredicate)"
+          ],
+          "description": "<p>Binds the results of the component view query (myPredicate) to the myChildComponents property of the class. Not available for directives.</p>\n"
+        }
+      ],
+      "index": 7
+    },
+    {
+      "name": "Directive and component change detection and lifecycle hooks",
+      "description": "<p>(implemented as class methods)\n</p>\n",
+      "items": [
+        {
+          "syntax": "MyAppComponent(MyService myService, ...) { ... }",
+          "bold": [
+            "MyAppComponent(MyService myService, ...)"
+          ],
+          "description": "<p>The class constructor is called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.</p>\n"
+        },
+        {
+          "syntax": "ngOnChanges(changeRecord) { ... }",
+          "bold": [
+            "ngOnChanges(changeRecord)"
+          ],
+          "description": "<p>Called after every change to input properties and before processing content or child views.</p>\n"
+        },
+        {
+          "syntax": "ngOnInit() { ... }",
+          "bold": [
+            "ngOnInit()"
+          ],
+          "description": "<p>Called after the constructor, initializing input properties, and the first call to ngOnChanges.</p>\n"
+        },
+        {
+          "syntax": "ngDoCheck() { ... }",
+          "bold": [
+            "ngDoCheck()"
+          ],
+          "description": "<p>Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.</p>\n"
+        },
+        {
+          "syntax": "ngAfterContentInit() { ... }",
+          "bold": [
+            "ngAfterContentInit()"
+          ],
+          "description": "<p>Called after ngOnInit when the component&#39;s or directive&#39;s content has been initialized.</p>\n"
+        },
+        {
+          "syntax": "ngAfterContentChecked() { ... }",
+          "bold": [
+            "ngAfterContentChecked()"
+          ],
+          "description": "<p>Called after every check of the component&#39;s or directive&#39;s content.</p>\n"
+        },
+        {
+          "syntax": "ngAfterViewInit() { ... }",
+          "bold": [
+            "ngAfterViewInit()"
+          ],
+          "description": "<p>Called after ngAfterContentInit when the component&#39;s view has been initialized. Applies to components only.</p>\n"
+        },
+        {
+          "syntax": "ngAfterViewChecked() { ... }",
+          "bold": [
+            "ngAfterViewChecked()"
+          ],
+          "description": "<p>Called after every check of the component&#39;s view. Applies to components only.</p>\n"
+        },
+        {
+          "syntax": "ngOnDestroy() { ... }",
+          "bold": [
+            "ngOnDestroy()"
+          ],
+          "description": "<p>Called once, before the instance is destroyed.</p>\n"
+        }
+      ],
+      "index": 8
+    },
+    {
+      "name": "Dependency injection configuration",
+      "description": "<p>\n\n<code>import &#39;package:angular2/core.dart&#39;;</code></p>\n",
+      "items": [
+        {
+          "syntax": "provide(MyService, {useClass: MyMockService})",
+          "bold": [
+            "provide",
+            "useClass"
+          ],
+          "description": "<p>Sets or overrides the provider for MyService to the MyMockService class.</p>\n"
+        },
+        {
+          "syntax": "provide(MyService, {useFactory: myFactory})",
+          "bold": [
+            "provide",
+            "useFactory"
+          ],
+          "description": "<p>Sets or overrides the provider for MyService to the myFactory factory function.</p>\n"
+        },
+        {
+          "syntax": "provide(MyValue, {useValue: 41})",
+          "bold": [
+            "provide",
+            "useValue"
+          ],
+          "description": "<p>Sets or overrides the provider for MyValue to the value 41.</p>\n"
+        }
+      ],
+      "index": 9
+    },
+    {
+      "name": "Routing and navigation",
+      "description": "<p>\n\n<code>import &#39;package:angular2/router.dart&#39;;</code></p>\n",
+      "items": [
+        {
+          "syntax": "@RouteConfig(const [\n  const Route(path: '/:myParam', component: MyComponent, name: 'MyCmp' ),\n])",
+          "bold": [
+            "@RouteConfig"
+          ],
+          "description": "<p>Configures routes for the decorated component. Supports static, parameterized, and wildcard routes.</p>\n"
+        },
+        {
+          "syntax": "<router-outlet></router-outlet>",
+          "bold": [
+            "router-outlet"
+          ],
+          "description": "<p>Marks the location to load the component of the active route.</p>\n"
+        },
+        {
+          "syntax": "<a [routerLink]=\"[ '/MyCmp', {myParam: 'value' } ]\">",
+          "bold": [
+            "[routerLink]"
+          ],
+          "description": "<p>Creates a link to a different view based on a route instruction consisting of a route name and optional parameters. The route name matches the as property of a configured route. Add the &#39;/&#39; prefix to navigate to a root route; add the &#39;./&#39; prefix for a child route.</p>\n"
+        },
+        {
+          "syntax": "@CanActivate(() => ...)class MyComponent() {}",
+          "bold": [
+            "@CanActivate"
+          ],
+          "description": "<p>A component decorator defining a function that the router should call first to determine if it should activate this component. Should return a boolean or a future.</p>\n"
+        },
+        {
+          "syntax": "routerOnActivate(nextInstruction, prevInstruction) { ... }",
+          "bold": [
+            "routerOnActivate"
+          ],
+          "description": "<p>After navigating to a component, the router calls the component&#39;s routerOnActivate method (if defined).</p>\n"
+        },
+        {
+          "syntax": "routerCanReuse(nextInstruction, prevInstruction) { ... }",
+          "bold": [
+            "routerCanReuse"
+          ],
+          "description": "<p>The router calls a component&#39;s routerCanReuse method (if defined) to determine whether to reuse the instance or destroy it and create a new instance. Should return a boolean or a future.</p>\n"
+        },
+        {
+          "syntax": "routerOnReuse(nextInstruction, prevInstruction) { ... }",
+          "bold": [
+            "routerOnReuse"
+          ],
+          "description": "<p>The router calls the component&#39;s routerOnReuse method (if defined) when it re-uses a component instance.</p>\n"
+        },
+        {
+          "syntax": "routerCanDeactivate(nextInstruction, prevInstruction) { ... }",
+          "bold": [
+            "routerCanDeactivate"
+          ],
+          "description": "<p>The router calls the routerCanDeactivate methods (if defined) of every component that would be removed after a navigation. The navigation proceeds if and only if all such methods return true or a future that completes successfully.</p>\n"
+        },
+        {
+          "syntax": "routerOnDeactivate(nextInstruction, prevInstruction) { ... }",
+          "bold": [
+            "routerOnDeactivate"
+          ],
+          "description": "<p>Called before the directive is removed as the result of a route change. May return a future that pauses removing the directive until the future completes.</p>\n"
+        }
+      ],
+      "index": 10
+    }
+  ]
+}
\ No newline at end of file
diff --git a/public/docs/js/latest/guide/cheatsheet.json b/public/docs/js/latest/guide/cheatsheet.json
index ac52d9d6dd..2d99d70a63 100644
--- a/public/docs/js/latest/guide/cheatsheet.json
+++ b/public/docs/js/latest/guide/cheatsheet.json
@@ -1,487 +1,514 @@
-[
-  {
-    "name": "Bootstrapping",
-    "description": "<p><code>import {bootstrap} from &#39;angular2/platform/browser&#39;;</code>\n</p>\n",
-    "items": [
-      {
-        "syntax": "bootstrap​(MyAppComponent, [MyService, provide(...)]);",
-        "bold": [
-          "provide"
-        ],
-        "description": "<p>Bootstraps an application with MyAppComponent as the root component, and\nconfigures the app&#39;s dependency injection providers.</p>\n"
-      }
+{
+  "currentEnvironment": "JavaScript",
+  "version": {
+    "raw": "2.0.0-beta.0",
+    "major": 2,
+    "minor": 0,
+    "patch": 0,
+    "prerelease": [
+      "local"
     ],
-    "index": 0
+    "build": "sha.323393a",
+    "version": "2.0.0-local",
+    "codeName": "snapshot",
+    "isSnapshot": true,
+    "full": "2.0.0-local+sha.323393a",
+    "branch": "master",
+    "commitSHA": "323393a86201db871c2fbc6dc7bd12229b498d9a"
   },
-  {
-    "name": "Template syntax",
-    "description": "",
-    "items": [
-      {
-        "syntax": "<input [value]=\"firstName\">",
-        "bold": [
-          "[value]"
-        ],
-        "description": "<p>Binds property <code>value</code> to the result of expression <code>firstName</code>.</p>\n"
-      },
-      {
-        "syntax": "<div [attr.role]=\"myAriaRole\">",
-        "bold": [
-          "[attr.role]"
-        ],
-        "description": "<p>Binds attribute <code>role</code> to the result of expression <code>myAriaRole</code>.</p>\n"
-      },
-      {
-        "syntax": "<div [class.extra-sparkle]=\"isDelightful\">",
-        "bold": [
-          "[class.extra-sparkle]"
-        ],
-        "description": "<p>Binds the presence of the CSS class <code>extra-sparkle</code> on the element to the truthiness of the expression <code>isDelightful</code>.</p>\n"
-      },
-      {
-        "syntax": "<div [style.width.px]=\"mySize\">",
-        "bold": [
-          "[style.width.px]"
-        ],
-        "description": "<p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p>\n"
-      },
-      {
-        "syntax": "<button (click)=\"readRainbow($event)\">",
-        "bold": [
-          "(click)"
-        ],
-        "description": "<p>Calls method <code>readRainbow</code> when a click event is triggered on this button element (or its children) and passes in the event object.</p>\n"
-      },
-      {
-        "syntax": "<div title=\"Hello {{ponyName}}\">",
-        "bold": [
-          "{{ponyName}}"
-        ],
-        "description": "<p>Binds a property to an interpolated string, e.g. &quot;Hello Seabiscuit&quot;. Equivalent to:\n<code>&lt;div [title]=&quot;&#39;Hello&#39; + ponyName&quot;&gt;</code></p>\n"
-      },
-      {
-        "syntax": "<p>Hello {{ponyName}}</p>",
-        "bold": [
-          "{{ponyName}}"
-        ],
-        "description": "<p>Binds text content to an interpolated string, e.g. &quot;Hello Seabiscuit&quot;.</p>\n"
-      },
-      {
-        "syntax": "<my-cmp [(title)]=\"name\">",
-        "bold": [
-          "[(title)]"
-        ],
-        "description": "<p>Sets up two-way data binding. Equivalent to: <code>&lt;my-cmp [title]=&quot;name&quot; (titleChange)=&quot;name=$event&quot;&gt;</code></p>\n"
-      },
-      {
-        "syntax": "<video #movieplayer ...>\n  <button (click)=\"movieplayer.play()\">\n</video>",
-        "bold": [
-          "#movieplayer",
-          "(click)"
-        ],
-        "description": "<p>Creates a local variable <code>movieplayer</code> that provides access to the <code>video</code> element instance in data-binding and event-binding expressions in the current template.</p>\n"
-      },
-      {
-        "syntax": "<p *my-unless=\"myExpression\">...</p>",
-        "bold": [
-          "*my-unless"
-        ],
-        "description": "<p>The <code>*</code> symbol means that the current element will be turned into an embedded template. Equivalent to:\n<code>&lt;template [myless]=&quot;myExpression&quot;&gt;&lt;p&gt;...&lt;/p&gt;&lt;/template&gt;</code></p>\n"
-      },
-      {
-        "syntax": "<p>Card No.: {{cardNumber | myCreditCardNumberFormatter}}</p>",
-        "bold": [
-          "{{cardNumber | myCreditCardNumberFormatter}}"
-        ],
-        "description": "<p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>creditCardNumberFormatter</code>.</p>\n"
-      },
-      {
-        "syntax": "<p>Employer: {{employer?.companyName}}</p>",
-        "bold": [
-          "{{employer?.companyName}}"
-        ],
-        "description": "<p>The Elvis operator (<code>?</code>) means that the <code>employer</code> field is optional and if <code>undefined</code>, the rest of the expression should be ignored.</p>\n"
-      }
-    ],
-    "index": 1
-  },
-  {
-    "name": "Built-in directives",
-    "description": "<p><code>import {NgIf, ...} from &#39;angular2/common&#39;;</code>\n</p>\n",
-    "items": [
-      {
-        "syntax": "<section *ngIf=\"showSection\">",
-        "bold": [
-          "*ngIf"
-        ],
-        "description": "<p>Removes or recreates a portion of the DOM tree based on the showSection expression.</p>\n"
-      },
-      {
-        "syntax": "<li *ngFor=\"#item of list\">",
-        "bold": [
-          "*ngFor"
-        ],
-        "description": "<p>Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.</p>\n"
-      },
-      {
-        "syntax": "<div [ngSwitch]=\"conditionExpression\">\n  <template [ngSwitchWhen]=\"case1Exp\">...</template>\n  <template ngSwitchWhen=\"case2LiteralString\">...</template>\n  <template ngSwitchDefault>...</template>\n</div>",
-        "bold": [
-          "[ngSwitch]",
-          "[ngSwitchWhen]",
-          "ngSwitchWhen",
-          "ngSwitchDefault"
-        ],
-        "description": "<p>Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.</p>\n"
-      },
-      {
-        "syntax": "<div [ngClass]=\"{active: isActive, disabled: isDisabled}\">",
-        "bold": [
-          "[ngClass]"
-        ],
-        "description": "<p>Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand side expression should return {class-name: true/false} map.</p>\n"
-      }
-    ],
-    "index": 2
-  },
-  {
-    "name": "Forms",
-    "description": "<p><code>import {FORM_DIRECTIVES} from &#39;angular2/common&#39;;</code>\n</p>\n",
-    "items": [
-      {
-        "syntax": "<input [(ngModel)]=\"userName\">",
-        "bold": [
-          "[(ngModel)]"
-        ],
-        "description": "<p>Provides two-way data-binding, parsing and validation for form controls.</p>\n"
-      }
-    ],
-    "index": 3
-  },
-  {
-    "name": "Class decorators",
-    "description": "<p><code>import {Directive, ...} from &#39;angular2/core&#39;;</code>\n</p>\n",
-    "items": [
-      {
-        "syntax": "@Component({...})\nclass MyComponent() {}",
-        "bold": [
-          "@Component({...})"
-        ],
-        "description": "<p>Declares that a class is a component and provides metadata about the component.</p>\n"
-      },
-      {
-        "syntax": "@Pipe({...})\nclass MyPipe() {}",
-        "bold": [
-          "@Pipe({...})"
-        ],
-        "description": "<p>Declares that a class is a pipe and provides metadata about the pipe.</p>\n"
-      },
-      {
-        "syntax": "@Injectable()\nclass MyService() {}",
-        "bold": [
-          "@Injectable()"
-        ],
-        "description": "<p>Declares that a class has dependencies that should be injected into the constructor when the dependency\ninjector is creating an instance of this class.</p>\n"
-      }
-    ],
-    "index": 4
-  },
-  {
-    "name": "Directive configuration",
-    "description": "<p><code>@Directive({ property1: value1, ... })</code>\n</p>\n",
-    "items": [
-      {
-        "syntax": "selector: '.cool-button:not(a)'",
-        "bold": [
-          "selector:"
-        ],
-        "description": "<p>Specifies a CSS selector that identifies this directive within a template. Supported selectors include <code>element</code>,\n<code>[attribute]</code>, <code>.class</code>, and <code>:not()</code>.</p>\n<p>Does not support parent-child relationship selectors.</p>\n"
-      },
-      {
-        "syntax": "providers: [MyService, provide(...)]",
-        "bold": [
-          "providers:"
-        ],
-        "description": "<p>Array of dependency injection providers for this directive and its children.</p>\n"
-      }
-    ],
-    "index": 5
-  },
-  {
-    "name": "Component configuration",
-    "description": "<p><code>@Component</code> extends <code>@Directive</code>,\nso the <code>@Directive</code> configuration applies to components as well</p>\n",
-    "items": [
-      {
-        "syntax": "viewProviders: [MyService, provide(...)]",
-        "bold": [
-          "viewProviders:"
-        ],
-        "description": "<p>Array of dependency injection providers scoped to this component&#39;s view.</p>\n"
-      },
-      {
-        "syntax": "template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'",
-        "bold": [
-          "template:",
-          "templateUrl:"
-        ],
-        "description": "<p>Inline template / external template URL of the component&#39;s view.</p>\n"
-      },
-      {
-        "syntax": "styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']",
-        "bold": [
-          "styles:",
-          "styleUrls:"
-        ],
-        "description": "<p>List of inline CSS styles / external stylesheet URLs for styling component’s view.</p>\n"
-      },
-      {
-        "syntax": "directives: [MyDirective, MyComponent]",
-        "bold": [
-          "directives:"
-        ],
-        "description": "<p>List of directives used in the the component’s template.</p>\n"
-      },
-      {
-        "syntax": "pipes: [MyPipe, OtherPipe]",
-        "bold": [
-          "pipes:"
-        ],
-        "description": "<p>List of pipes used in the component&#39;s template.</p>\n"
-      }
-    ],
-    "index": 6
-  },
-  {
-    "name": "Class field decorators for directives and components",
-    "description": "<p><code>import {Input, ...} from &#39;angular2/core&#39;;</code>\n</p>\n",
-    "items": [
-      {
-        "syntax": "@Input() myProperty;",
-        "bold": [
-          "@Input()"
-        ],
-        "description": "<p>Declares an input property that we can update via property binding (e.g.\n<code>&lt;my-cmp [my-property]=&quot;someExpression&quot;&gt;</code>).</p>\n"
-      },
-      {
-        "syntax": "@Output() myEvent = new EventEmitter();",
-        "bold": [
-          "@Output()"
-        ],
-        "description": "<p>Declares an output property that fires events to which we can subscribe with an event binding (e.g. <code>&lt;my-cmp (my-event)=&quot;doSomething()&quot;&gt;</code>).</p>\n"
-      },
-      {
-        "syntax": "@HostBinding('[class.valid]') isValid;",
-        "bold": [
-          "@HostBinding('[class.valid]')"
-        ],
-        "description": "<p>Binds a host element property (e.g. CSS class valid) to directive/component property (e.g. isValid).</p>\n"
-      },
-      {
-        "syntax": "@HostListener('click', ['$event']) onClick(e) {...}",
-        "bold": [
-          "@HostListener('click', ['$event'])"
-        ],
-        "description": "<p>Subscribes to a host element event (e.g. click) with a directive/component method (e.g. onClick), optionally passing an argument ($event).</p>\n"
-      },
-      {
-        "syntax": "@ContentChild(myPredicate) myChildComponent;",
-        "bold": [
-          "@ContentChild(myPredicate)"
-        ],
-        "description": "<p>Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.</p>\n"
-      },
-      {
-        "syntax": "@ContentChildren(myPredicate) myChildComponents;",
-        "bold": [
-          "@ContentChildren(myPredicate)"
-        ],
-        "description": "<p>Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.</p>\n"
-      },
-      {
-        "syntax": "@ViewChild(myPredicate) myChildComponent;",
-        "bold": [
-          "@ViewChild(myPredicate)"
-        ],
-        "description": "<p>Binds the first result of the component view query (myPredicate) to the myChildComponent property of the class. Not available for directives.</p>\n"
-      },
-      {
-        "syntax": "@ViewChildren(myPredicate) myChildComponents;",
-        "bold": [
-          "@ViewChildren(myPredicate)"
-        ],
-        "description": "<p>Binds the results of the component view query (myPredicate) to the myChildComponents property of the class. Not available for directives.</p>\n"
-      }
-    ],
-    "index": 7
-  },
-  {
-    "name": "Directive and component change detection and lifecycle hooks",
-    "description": "<p>(implemented as class methods)</p>\n",
-    "items": [
-      {
-        "syntax": "constructor(myService: MyService, ...) { ... }",
-        "bold": [
-          "constructor(myService: MyService, ...)"
-        ],
-        "description": "<p>The class constructor is called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.</p>\n"
-      },
-      {
-        "syntax": "ngOnChanges(changeRecord) { ... }",
-        "bold": [
-          "ngOnChanges(changeRecord)"
-        ],
-        "description": "<p>Called after every change to input properties and before processing content or child views.</p>\n"
-      },
-      {
-        "syntax": "ngOnInit() { ... }",
-        "bold": [
-          "ngOnInit()"
-        ],
-        "description": "<p>Called after the constructor, initializing input properties, and the first call to ngOnChanges.</p>\n"
-      },
-      {
-        "syntax": "ngDoCheck() { ... }",
-        "bold": [
-          "ngDoCheck()"
-        ],
-        "description": "<p>Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.</p>\n"
-      },
-      {
-        "syntax": "ngAfterContentInit() { ... }",
-        "bold": [
-          "ngAfterContentInit()"
-        ],
-        "description": "<p>Called after ngOnInit when the component&#39;s or directive&#39;s content has been initialized.</p>\n"
-      },
-      {
-        "syntax": "ngAfterContentChecked() { ... }",
-        "bold": [
-          "ngAfterContentChecked()"
-        ],
-        "description": "<p>Called after every check of the component&#39;s or directive&#39;s content.</p>\n"
-      },
-      {
-        "syntax": "ngAfterViewInit() { ... }",
-        "bold": [
-          "ngAfterViewInit()"
-        ],
-        "description": "<p>Called after ngAfterContentInit when the component&#39;s view has been initialized. Applies to components only.</p>\n"
-      },
-      {
-        "syntax": "ngAfterViewChecked() { ... }",
-        "bold": [
-          "ngAfterViewChecked()"
-        ],
-        "description": "<p>Called after every check of the component&#39;s view. Applies to components only.</p>\n"
-      },
-      {
-        "syntax": "ngOnDestroy() { ... }",
-        "bold": [
-          "ngOnDestroy()"
-        ],
-        "description": "<p>Called once, before the instance is destroyed.</p>\n"
-      }
-    ],
-    "index": 8
-  },
-  {
-    "name": "Dependency injection configuration",
-    "description": "<p><code>import {provide} from &#39;angular2/core&#39;;</code>\n</p>\n",
-    "items": [
-      {
-        "syntax": "provide(MyService, {useClass: MyMockService})",
-        "bold": [
-          "provide",
-          "useClass"
-        ],
-        "description": "<p>Sets or overrides the provider for MyService to the MyMockService class.</p>\n"
-      },
-      {
-        "syntax": "provide(MyService, {useFactory: myFactory})",
-        "bold": [
-          "provide",
-          "useFactory"
-        ],
-        "description": "<p>Sets or overrides the provider for MyService to the myFactory factory function.</p>\n"
-      },
-      {
-        "syntax": "provide(MyValue, {useValue: 41})",
-        "bold": [
-          "provide",
-          "useValue"
-        ],
-        "description": "<p>Sets or overrides the provider for MyValue to the value 41.</p>\n"
-      }
-    ],
-    "index": 9
-  },
-  {
-    "name": "Routing and navigation",
-    "description": "<p><code>import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...} from &#39;angular2/router&#39;;</code>\n</p>\n",
-    "items": [
-      {
-        "syntax": "@RouteConfig([\n  { path: '/:myParam', component: MyComponent, as: 'MyCmp' },\n  { path: '/staticPath', component: ..., as: ...},\n  { path: '/*wildCardParam', component: ..., as: ...}\n])\nclass MyComponent() {}",
-        "bold": [
-          "@RouteConfig"
-        ],
-        "description": "<p>Configures routes for the decorated component. Supports static, parameterized, and wildcard routes.</p>\n"
-      },
-      {
-        "syntax": "<router-outlet></router-outlet>",
-        "bold": [
-          "router-outlet"
-        ],
-        "description": "<p>Marks the location to load the component of the active route.</p>\n"
-      },
-      {
-        "syntax": "<a [routerLink]=\"[ '/MyCmp', {myParam: 'value' } ]\">",
-        "bold": [
-          "[routerLink]"
-        ],
-        "description": "<p>Creates a link to a different view based on a route instruction consisting of a route name and optional parameters. The route name matches the as property of a configured route. Add the &#39;/&#39; prefix to navigate to a root route; add the &#39;./&#39; prefix for a child route.</p>\n"
-      },
-      {
-        "syntax": "@CanActivate(() => { ... })class MyComponent() {}",
-        "bold": [
-          "@CanActivate"
-        ],
-        "description": "<p>A component decorator defining a function that the router should call first to determine if it should activate this component. Should return a boolean or a promise.</p>\n"
-      },
-      {
-        "syntax": "routerOnActivate(nextInstruction, prevInstruction) { ... }",
-        "bold": [
-          "routerOnActivate"
-        ],
-        "description": "<p>After navigating to a component, the router calls the component&#39;s routerOnActivate method (if defined).</p>\n"
-      },
-      {
-        "syntax": "routerCanReuse(nextInstruction, prevInstruction) { ... }",
-        "bold": [
-          "routerCanReuse"
-        ],
-        "description": "<p>The router calls a component&#39;s routerCanReuse method (if defined) to determine whether to reuse the instance or destroy it and create a new instance. Should return a boolean or a promise.</p>\n"
-      },
-      {
-        "syntax": "routerOnReuse(nextInstruction, prevInstruction) { ... }",
-        "bold": [
-          "routerOnReuse"
-        ],
-        "description": "<p>The router calls the component&#39;s routerOnReuse method (if defined) when it re-uses a component instance.</p>\n"
-      },
-      {
-        "syntax": "routerCanDeactivate(nextInstruction, prevInstruction) { ... }",
-        "bold": [
-          "routerCanDeactivate"
-        ],
-        "description": "<p>The router calls the routerCanDeactivate methods (if defined) of every component that would be removed after a navigation. The navigation proceeds if and only if all such methods return true or a promise that is resolved.</p>\n"
-      },
-      {
-        "syntax": "routerOnDeactivate(nextInstruction, prevInstruction) { ... }",
-        "bold": [
-          "routerOnDeactivate"
-        ],
-        "description": "<p>Called before the directive is removed as the result of a route change. May return a promise that pauses removing the directive until the promise resolves.</p>\n"
-      }
-    ],
-    "index": 10
-  }
-]
\ No newline at end of file
+  "sections": [
+    {
+      "name": "Bootstrapping",
+      "description": "<p>\nAvailable from the <code>ng.platform.browser</code> namespace.\n</p>\n",
+      "items": [
+        {
+          "syntax": "document.addEventListener('DOMContentLoaded', function () {\n  ng.platform.browser.bootstrap(MyAppComponent,\n    [MyService, ng.core.provide(...)]);\n});",
+          "bold": [
+            "provide"
+          ],
+          "description": "<p>Bootstraps an application with MyAppComponent as the root component and configures the DI providers. Must be wrapped in the event listener to fire when the page loads.</p>\n"
+        }
+      ],
+      "index": 0
+    },
+    {
+      "name": "Template syntax",
+      "description": "",
+      "items": [
+        {
+          "syntax": "<input [value]=\"firstName\">",
+          "bold": [
+            "[value]"
+          ],
+          "description": "<p>Binds property <code>value</code> to the result of expression <code>firstName</code>.</p>\n"
+        },
+        {
+          "syntax": "<div [attr.role]=\"myAriaRole\">",
+          "bold": [
+            "[attr.role]"
+          ],
+          "description": "<p>Binds attribute <code>role</code> to the result of expression <code>myAriaRole</code>.</p>\n"
+        },
+        {
+          "syntax": "<div [class.extra-sparkle]=\"isDelightful\">",
+          "bold": [
+            "[class.extra-sparkle]"
+          ],
+          "description": "<p>Binds the presence of the CSS class <code>extra-sparkle</code> on the element to the truthiness of the expression <code>isDelightful</code>.</p>\n"
+        },
+        {
+          "syntax": "<div [style.width.px]=\"mySize\">",
+          "bold": [
+            "[style.width.px]"
+          ],
+          "description": "<p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p>\n"
+        },
+        {
+          "syntax": "<button (click)=\"readRainbow($event)\">",
+          "bold": [
+            "(click)"
+          ],
+          "description": "<p>Calls method <code>readRainbow</code> when a click event is triggered on this button element (or its children) and passes in the event object.</p>\n"
+        },
+        {
+          "syntax": "<div title=\"Hello {{ponyName}}\">",
+          "bold": [
+            "{{ponyName}}"
+          ],
+          "description": "<p>Binds a property to an interpolated string, e.g. &quot;Hello Seabiscuit&quot;. Equivalent to:\n<code>&lt;div [title]=&quot;&#39;Hello&#39; + ponyName&quot;&gt;</code></p>\n"
+        },
+        {
+          "syntax": "<p>Hello {{ponyName}}</p>",
+          "bold": [
+            "{{ponyName}}"
+          ],
+          "description": "<p>Binds text content to an interpolated string, e.g. &quot;Hello Seabiscuit&quot;.</p>\n"
+        },
+        {
+          "syntax": "<my-cmp [(title)]=\"name\">",
+          "bold": [
+            "[(title)]"
+          ],
+          "description": "<p>Sets up two-way data binding. Equivalent to: <code>&lt;my-cmp [title]=&quot;name&quot; (titleChange)=&quot;name=$event&quot;&gt;</code></p>\n"
+        },
+        {
+          "syntax": "<video #movieplayer ...>\n  <button (click)=\"movieplayer.play()\">\n</video>",
+          "bold": [
+            "#movieplayer",
+            "(click)"
+          ],
+          "description": "<p>Creates a local variable <code>movieplayer</code> that provides access to the <code>video</code> element instance in data-binding and event-binding expressions in the current template.</p>\n"
+        },
+        {
+          "syntax": "<p *my-unless=\"myExpression\">...</p>",
+          "bold": [
+            "*my-unless"
+          ],
+          "description": "<p>The <code>*</code> symbol means that the current element will be turned into an embedded template. Equivalent to:\n<code>&lt;template [myless]=&quot;myExpression&quot;&gt;&lt;p&gt;...&lt;/p&gt;&lt;/template&gt;</code></p>\n"
+        },
+        {
+          "syntax": "<p>Card No.: {{cardNumber | myCreditCardNumberFormatter}}</p>",
+          "bold": [
+            "{{cardNumber | myCreditCardNumberFormatter}}"
+          ],
+          "description": "<p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>creditCardNumberFormatter</code>.</p>\n"
+        },
+        {
+          "syntax": "<p>Employer: {{employer?.companyName}}</p>",
+          "bold": [
+            "{{employer?.companyName}}"
+          ],
+          "description": "<p>The Elvis operator (<code>?</code>) means that the <code>employer</code> field is optional and if <code>undefined</code>, the rest of the expression should be ignored.</p>\n"
+        }
+      ],
+      "index": 1
+    },
+    {
+      "name": "Built-in directives",
+      "description": "<p>\nAvailable from the <code>ng.common</code> namespace\n</p>\n",
+      "items": [
+        {
+          "syntax": "<section *ngIf=\"showSection\">",
+          "bold": [
+            "*ngIf"
+          ],
+          "description": "<p>Removes or recreates a portion of the DOM tree based on the showSection expression.</p>\n"
+        },
+        {
+          "syntax": "<li *ngFor=\"#item of list\">",
+          "bold": [
+            "*ngFor"
+          ],
+          "description": "<p>Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.</p>\n"
+        },
+        {
+          "syntax": "<div [ngSwitch]=\"conditionExpression\">\n  <template [ngSwitchWhen]=\"case1Exp\">...</template>\n  <template ngSwitchWhen=\"case2LiteralString\">...</template>\n  <template ngSwitchDefault>...</template>\n</div>",
+          "bold": [
+            "[ngSwitch]",
+            "[ngSwitchWhen]",
+            "ngSwitchWhen",
+            "ngSwitchDefault"
+          ],
+          "description": "<p>Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.</p>\n"
+        },
+        {
+          "syntax": "<div [ngClass]=\"{active: isActive, disabled: isDisabled}\">",
+          "bold": [
+            "[ngClass]"
+          ],
+          "description": "<p>Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand side expression should return {class-name: true/false} map.</p>\n"
+        }
+      ],
+      "index": 2
+    },
+    {
+      "name": "Forms",
+      "description": "<p>\nAvailable from <code>ng.common.FORM_DIRECTIVES</code>\n</p>\n",
+      "items": [
+        {
+          "syntax": "<input [(ngModel)]=\"userName\">",
+          "bold": [
+            "[(ngModel)]"
+          ],
+          "description": "<p>Provides two-way data-binding, parsing and validation for form controls.</p>\n"
+        }
+      ],
+      "index": 3
+    },
+    {
+      "name": "Class decorators",
+      "description": "<p>\nAvailable from the <code>ng.core</code> namespace\n</p>\n",
+      "items": [
+        {
+          "syntax": "var MyComponent = ng.core.Component({...}).Class({...})",
+          "bold": [
+            "ng.core.Component({...})"
+          ],
+          "description": "<p>Declares that a class is a component and provides metadata about the component.</p>\n"
+        },
+        {
+          "syntax": "var MyPipe = ng.core.Pipe({...}).Class({...})",
+          "bold": [
+            "ng.core.Pipe({...})"
+          ],
+          "description": "<p>Declares that a class is a pipe and provides metadata about the pipe.</p>\n"
+        },
+        {
+          "syntax": "var OtherService = ng.core.Class({constructor: function() { }});\nvar MyService = ng.core.Class({constructor: [OtherService, function(otherService) { }]});",
+          "bold": [
+            "var MyService = ng.core.Class({constructor: [OtherService, function(otherService) { }]});"
+          ],
+          "description": "<p>\n\nDeclares a service to inject into a class by providing an array with the services with the final item being the function which will receive the injected services.\n</p>\n"
+        }
+      ],
+      "index": 4
+    },
+    {
+      "name": "Directive configuration",
+      "description": "<p>\n<code>ng.core.Directive({ property1: value1, ... }).Class({...})</code>\n</p>\n",
+      "items": [
+        {
+          "syntax": "selector: '.cool-button:not(a)'",
+          "bold": [
+            "selector:"
+          ],
+          "description": "<p>Specifies a CSS selector that identifies this directive within a template. Supported selectors include <code>element</code>,\n<code>[attribute]</code>, <code>.class</code>, and <code>:not()</code>.</p>\n<p>Does not support parent-child relationship selectors.</p>\n"
+        },
+        {
+          "syntax": "providers: [MyService, ng.core.provide(...)]",
+          "bold": [
+            "providers:"
+          ],
+          "description": "<p>Array of dependency injection providers for this directive and its children.</p>\n"
+        }
+      ],
+      "index": 5
+    },
+    {
+      "name": "Component configuration",
+      "description": "<p><code>ng.core.Component</code> extends <code>ng.core.Directive</code>,\nso the <code>ng.core.Directive</code> configuration applies to components as well\n</p>\n",
+      "items": [
+        {
+          "syntax": "viewProviders: [MyService, ng.core.provide(...)]",
+          "bold": [
+            "viewProviders:"
+          ],
+          "description": "<p>Array of dependency injection providers scoped to this component&#39;s view.</p>\n"
+        },
+        {
+          "syntax": "template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'",
+          "bold": [
+            "template:",
+            "templateUrl:"
+          ],
+          "description": "<p>Inline template / external template URL of the component&#39;s view.</p>\n"
+        },
+        {
+          "syntax": "styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']",
+          "bold": [
+            "styles:",
+            "styleUrls:"
+          ],
+          "description": "<p>List of inline CSS styles / external stylesheet URLs for styling component’s view.</p>\n"
+        },
+        {
+          "syntax": "directives: [MyDirective, MyComponent]",
+          "bold": [
+            "directives:"
+          ],
+          "description": "<p>List of directives used in the the component’s template.</p>\n"
+        },
+        {
+          "syntax": "pipes: [MyPipe, OtherPipe]",
+          "bold": [
+            "pipes:"
+          ],
+          "description": "<p>List of pipes used in the component&#39;s template.</p>\n"
+        }
+      ],
+      "index": 6
+    },
+    {
+      "name": "Class field decorators for directives and components",
+      "description": "<p>\nAvailable from the <code>ng.core</code> namespace\n</p>\n",
+      "items": [
+        {
+          "syntax": "ng.core.Input(myProperty, myComponent);",
+          "bold": [
+            "ng.core.Input(",
+            ");"
+          ],
+          "description": "<p>Declares an input property that we can update via property binding (e.g.\n<code>&lt;my-cmp [my-property]=&quot;someExpression&quot;&gt;</code>).</p>\n"
+        },
+        {
+          "syntax": "myEvent = new ng.core.EventEmitter(); ng.core.Output(myEvent, myComponent);",
+          "bold": [
+            "ng.core.Output(",
+            ");"
+          ],
+          "description": "<p>Declares an output property that fires events to which we can subscribe with an event binding (e.g. <code>&lt;my-cmp (my-event)=&quot;doSomething()&quot;&gt;</code>).</p>\n"
+        },
+        {
+          "syntax": "ng.core.HostBinding('[class.valid]', 'isValid', myComponent);",
+          "bold": [
+            "ng.core.HostBinding('[class.valid]', 'isValid'",
+            ");"
+          ],
+          "description": "<p>Binds a host element property (e.g. CSS class valid) to directive/component property (e.g. isValid).</p>\n"
+        },
+        {
+          "syntax": "ng.core.HostListener('click', ['$event'], onClick(e) {...}, myComponent);",
+          "bold": [
+            "ng.core.HostListener('click', ['$event'], onClick(e)",
+            ");"
+          ],
+          "description": "<p>Subscribes to a host element event (e.g. click) with a directive/component method (e.g. onClick), optionally passing an argument ($event).</p>\n"
+        },
+        {
+          "syntax": "ng.core.ContentChild(myPredicate, 'myChildComponent', myComponent);",
+          "bold": [
+            "ng.core.ContentChild(myPredicate,",
+            ");"
+          ],
+          "description": "<p>Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.</p>\n"
+        },
+        {
+          "syntax": "ng.core.ContentChildren(myPredicate, 'myChildComponents', myComponent);",
+          "bold": [
+            "ng.core.ContentChildren(myPredicate,",
+            ");"
+          ],
+          "description": "<p>Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.</p>\n"
+        },
+        {
+          "syntax": "ng.core.ViewChild(myPredicate, 'myChildComponent', myComponent);",
+          "bold": [
+            "ng.core.ViewChild(myPredicate,",
+            ");"
+          ],
+          "description": "<p>Binds the first result of the component view query (myPredicate) to the myChildComponent property of the class. Not available for directives.</p>\n"
+        },
+        {
+          "syntax": "ng.core.ViewChildren(myPredicate, 'myChildComponents', myComponent);",
+          "bold": [
+            "ng.core.ViewChildren(myPredicate,",
+            ");"
+          ],
+          "description": "<p>Binds the results of the component view query (myPredicate) to the myChildComponents property of the class. Not available for directives.</p>\n"
+        }
+      ],
+      "index": 7
+    },
+    {
+      "name": "Directive and component change detection and lifecycle hooks",
+      "description": "<p>\n(implemented as component properties)</p>\n",
+      "items": [
+        {
+          "syntax": "constructor: function(MyService, ...) { ... }",
+          "bold": [
+            "constructor: function(MyService, ...)"
+          ],
+          "description": "<p>The class constructor is called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.</p>\n"
+        },
+        {
+          "syntax": "ngOnChanges: function(changeRecord) { ... }",
+          "bold": [
+            "ngOnChanges: function(changeRecord)"
+          ],
+          "description": "<p>Called after every change to input properties and before processing content or child views.</p>\n"
+        },
+        {
+          "syntax": "ngOnInit: function() { ... }",
+          "bold": [
+            "ngOnInit: function()"
+          ],
+          "description": "<p>Called after the constructor, initializing input properties, and the first call to ngOnChanges.</p>\n"
+        },
+        {
+          "syntax": "ngDoCheck: function() { ... }",
+          "bold": [
+            "ngDoCheck: function()"
+          ],
+          "description": "<p>Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.</p>\n"
+        },
+        {
+          "syntax": "ngAfterContentInit: function() { ... }",
+          "bold": [
+            "ngAfterContentInit: function()"
+          ],
+          "description": "<p>Called after ngOnInit when the component&#39;s or directive&#39;s content has been initialized.</p>\n"
+        },
+        {
+          "syntax": "ngAfterContentChecked: function() { ... }",
+          "bold": [
+            "ngAfterContentChecked: function()"
+          ],
+          "description": "<p>Called after every check of the component&#39;s or directive&#39;s content.</p>\n"
+        },
+        {
+          "syntax": "ngAfterViewInit: function() { ... }",
+          "bold": [
+            "ngAfterViewInit: function()"
+          ],
+          "description": "<p>Called after ngAfterContentInit when the component&#39;s view has been initialized. Applies to components only.</p>\n"
+        },
+        {
+          "syntax": "ngAfterViewChecked: function() { ... }",
+          "bold": [
+            "ngAfterViewChecked: function()"
+          ],
+          "description": "<p>Called after every check of the component&#39;s view. Applies to components only.</p>\n"
+        },
+        {
+          "syntax": "ngOnDestroy: function() { ... }",
+          "bold": [
+            "ngOnDestroy: function()"
+          ],
+          "description": "<p>Called once, before the instance is destroyed.</p>\n"
+        }
+      ],
+      "index": 8
+    },
+    {
+      "name": "Dependency injection configuration",
+      "description": "<p>\nAvailable from the <code>ng.core</code> namespace\n</p>\n",
+      "items": [
+        {
+          "syntax": "ng.core.provide(MyService, {useClass: MyMockService})",
+          "bold": [
+            "provide",
+            "useClass"
+          ],
+          "description": "<p>Sets or overrides the provider for MyService to the MyMockService class.</p>\n"
+        },
+        {
+          "syntax": "ng.core.provide(MyService, {useFactory: myFactory})",
+          "bold": [
+            "provide",
+            "useFactory"
+          ],
+          "description": "<p>Sets or overrides the provider for MyService to the myFactory factory function.</p>\n"
+        },
+        {
+          "syntax": "provide(MyValue, {useValue: 41})",
+          "bold": [
+            "provide",
+            "useValue"
+          ],
+          "description": "<p>Sets or overrides the provider for MyValue to the value 41.</p>\n"
+        }
+      ],
+      "index": 9
+    },
+    {
+      "name": "Routing and navigation",
+      "description": "<p>\nAvailable from the <code>ng.router</code> namespace\n</p>\n",
+      "items": [
+        {
+          "syntax": "var MyComponent = ng.router.RouteConfig([\n  { path: '/:myParam', component: MyComponent, as: 'MyCmp' },\n  { path: '/staticPath', component: ..., as: ...},\n  { path: '/*wildCardParam', component: ..., as: ...}\n]).Class({\n  constructor: function() {}\n});",
+          "bold": [
+            "ng.router.RouteConfig"
+          ],
+          "description": "<p>Configures routes for the decorated component. Supports static, parameterized, and wildcard routes.</p>\n"
+        },
+        {
+          "syntax": "<router-outlet></router-outlet>",
+          "bold": [
+            "router-outlet"
+          ],
+          "description": "<p>Marks the location to load the component of the active route.</p>\n"
+        },
+        {
+          "syntax": "<a [routerLink]=\"[ '/MyCmp', {myParam: 'value' } ]\">",
+          "bold": [
+            "[routerLink]"
+          ],
+          "description": "<p>Creates a link to a different view based on a route instruction consisting of a route name and optional parameters. The route name matches the as property of a configured route. Add the &#39;/&#39; prefix to navigate to a root route; add the &#39;./&#39; prefix for a child route.</p>\n"
+        },
+        {
+          "syntax": "var MyComponent = ng.router.CanActivate(function() { ... }).Component({...}).Class({constructor: ...});",
+          "bold": [
+            "ng.router.CanActivate(function() { ... })"
+          ],
+          "description": "<p>A component decorator defining a function that the router should call first to determine if it should activate this component. Should return a boolean or a promise.</p>\n"
+        },
+        {
+          "syntax": "routerOnActivate: function(nextInstruction, prevInstruction) { ... }",
+          "bold": [
+            "routerOnActivate"
+          ],
+          "description": "<p>After navigating to a component, the router calls the component&#39;s routerOnActivate method (if defined).</p>\n"
+        },
+        {
+          "syntax": "routerCanReuse: function(nextInstruction, prevInstruction) { ... }",
+          "bold": [
+            "routerCanReuse"
+          ],
+          "description": "<p>The router calls a component&#39;s routerCanReuse method (if defined) to determine whether to reuse the instance or destroy it and create a new instance. Should return a boolean or a promise.</p>\n"
+        },
+        {
+          "syntax": "routerOnReuse: function(nextInstruction, prevInstruction) { ... }",
+          "bold": [
+            "routerOnReuse"
+          ],
+          "description": "<p>The router calls the component&#39;s routerOnReuse method (if defined) when it re-uses a component instance.</p>\n"
+        },
+        {
+          "syntax": "routerCanDeactivate: function(nextInstruction, prevInstruction) { ... }",
+          "bold": [
+            "routerCanDeactivate"
+          ],
+          "description": "<p>The router calls the routerCanDeactivate methods (if defined) of every component that would be removed after a navigation. The navigation proceeds if and only if all such methods return true or a promise that is resolved.</p>\n"
+        },
+        {
+          "syntax": "routerOnDeactivate: function(nextInstruction, prevInstruction) { ... }",
+          "bold": [
+            "routerOnDeactivate"
+          ],
+          "description": "<p>Called before the directive is removed as the result of a route change. May return a promise that pauses removing the directive until the promise resolves.</p>\n"
+        }
+      ],
+      "index": 10
+    }
+  ]
+}
\ No newline at end of file
diff --git a/public/docs/ts/latest/guide/cheatsheet.json b/public/docs/ts/latest/guide/cheatsheet.json
index ac52d9d6dd..a4cbe3060f 100644
--- a/public/docs/ts/latest/guide/cheatsheet.json
+++ b/public/docs/ts/latest/guide/cheatsheet.json
@@ -1,487 +1,506 @@
-[
-  {
-    "name": "Bootstrapping",
-    "description": "<p><code>import {bootstrap} from &#39;angular2/platform/browser&#39;;</code>\n</p>\n",
-    "items": [
-      {
-        "syntax": "bootstrap​(MyAppComponent, [MyService, provide(...)]);",
-        "bold": [
-          "provide"
-        ],
-        "description": "<p>Bootstraps an application with MyAppComponent as the root component, and\nconfigures the app&#39;s dependency injection providers.</p>\n"
-      }
+{
+  "currentEnvironment": "TypeScript",
+  "version": {
+    "raw": "2.0.0-beta.0",
+    "major": 2,
+    "minor": 0,
+    "patch": 0,
+    "prerelease": [
+      "local"
     ],
-    "index": 0
+    "build": "sha.323393a",
+    "version": "2.0.0-local",
+    "codeName": "snapshot",
+    "isSnapshot": true,
+    "full": "2.0.0-local+sha.323393a",
+    "branch": "master",
+    "commitSHA": "323393a86201db871c2fbc6dc7bd12229b498d9a"
   },
-  {
-    "name": "Template syntax",
-    "description": "",
-    "items": [
-      {
-        "syntax": "<input [value]=\"firstName\">",
-        "bold": [
-          "[value]"
-        ],
-        "description": "<p>Binds property <code>value</code> to the result of expression <code>firstName</code>.</p>\n"
-      },
-      {
-        "syntax": "<div [attr.role]=\"myAriaRole\">",
-        "bold": [
-          "[attr.role]"
-        ],
-        "description": "<p>Binds attribute <code>role</code> to the result of expression <code>myAriaRole</code>.</p>\n"
-      },
-      {
-        "syntax": "<div [class.extra-sparkle]=\"isDelightful\">",
-        "bold": [
-          "[class.extra-sparkle]"
-        ],
-        "description": "<p>Binds the presence of the CSS class <code>extra-sparkle</code> on the element to the truthiness of the expression <code>isDelightful</code>.</p>\n"
-      },
-      {
-        "syntax": "<div [style.width.px]=\"mySize\">",
-        "bold": [
-          "[style.width.px]"
-        ],
-        "description": "<p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p>\n"
-      },
-      {
-        "syntax": "<button (click)=\"readRainbow($event)\">",
-        "bold": [
-          "(click)"
-        ],
-        "description": "<p>Calls method <code>readRainbow</code> when a click event is triggered on this button element (or its children) and passes in the event object.</p>\n"
-      },
-      {
-        "syntax": "<div title=\"Hello {{ponyName}}\">",
-        "bold": [
-          "{{ponyName}}"
-        ],
-        "description": "<p>Binds a property to an interpolated string, e.g. &quot;Hello Seabiscuit&quot;. Equivalent to:\n<code>&lt;div [title]=&quot;&#39;Hello&#39; + ponyName&quot;&gt;</code></p>\n"
-      },
-      {
-        "syntax": "<p>Hello {{ponyName}}</p>",
-        "bold": [
-          "{{ponyName}}"
-        ],
-        "description": "<p>Binds text content to an interpolated string, e.g. &quot;Hello Seabiscuit&quot;.</p>\n"
-      },
-      {
-        "syntax": "<my-cmp [(title)]=\"name\">",
-        "bold": [
-          "[(title)]"
-        ],
-        "description": "<p>Sets up two-way data binding. Equivalent to: <code>&lt;my-cmp [title]=&quot;name&quot; (titleChange)=&quot;name=$event&quot;&gt;</code></p>\n"
-      },
-      {
-        "syntax": "<video #movieplayer ...>\n  <button (click)=\"movieplayer.play()\">\n</video>",
-        "bold": [
-          "#movieplayer",
-          "(click)"
-        ],
-        "description": "<p>Creates a local variable <code>movieplayer</code> that provides access to the <code>video</code> element instance in data-binding and event-binding expressions in the current template.</p>\n"
-      },
-      {
-        "syntax": "<p *my-unless=\"myExpression\">...</p>",
-        "bold": [
-          "*my-unless"
-        ],
-        "description": "<p>The <code>*</code> symbol means that the current element will be turned into an embedded template. Equivalent to:\n<code>&lt;template [myless]=&quot;myExpression&quot;&gt;&lt;p&gt;...&lt;/p&gt;&lt;/template&gt;</code></p>\n"
-      },
-      {
-        "syntax": "<p>Card No.: {{cardNumber | myCreditCardNumberFormatter}}</p>",
-        "bold": [
-          "{{cardNumber | myCreditCardNumberFormatter}}"
-        ],
-        "description": "<p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>creditCardNumberFormatter</code>.</p>\n"
-      },
-      {
-        "syntax": "<p>Employer: {{employer?.companyName}}</p>",
-        "bold": [
-          "{{employer?.companyName}}"
-        ],
-        "description": "<p>The Elvis operator (<code>?</code>) means that the <code>employer</code> field is optional and if <code>undefined</code>, the rest of the expression should be ignored.</p>\n"
-      }
-    ],
-    "index": 1
-  },
-  {
-    "name": "Built-in directives",
-    "description": "<p><code>import {NgIf, ...} from &#39;angular2/common&#39;;</code>\n</p>\n",
-    "items": [
-      {
-        "syntax": "<section *ngIf=\"showSection\">",
-        "bold": [
-          "*ngIf"
-        ],
-        "description": "<p>Removes or recreates a portion of the DOM tree based on the showSection expression.</p>\n"
-      },
-      {
-        "syntax": "<li *ngFor=\"#item of list\">",
-        "bold": [
-          "*ngFor"
-        ],
-        "description": "<p>Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.</p>\n"
-      },
-      {
-        "syntax": "<div [ngSwitch]=\"conditionExpression\">\n  <template [ngSwitchWhen]=\"case1Exp\">...</template>\n  <template ngSwitchWhen=\"case2LiteralString\">...</template>\n  <template ngSwitchDefault>...</template>\n</div>",
-        "bold": [
-          "[ngSwitch]",
-          "[ngSwitchWhen]",
-          "ngSwitchWhen",
-          "ngSwitchDefault"
-        ],
-        "description": "<p>Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.</p>\n"
-      },
-      {
-        "syntax": "<div [ngClass]=\"{active: isActive, disabled: isDisabled}\">",
-        "bold": [
-          "[ngClass]"
-        ],
-        "description": "<p>Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand side expression should return {class-name: true/false} map.</p>\n"
-      }
-    ],
-    "index": 2
-  },
-  {
-    "name": "Forms",
-    "description": "<p><code>import {FORM_DIRECTIVES} from &#39;angular2/common&#39;;</code>\n</p>\n",
-    "items": [
-      {
-        "syntax": "<input [(ngModel)]=\"userName\">",
-        "bold": [
-          "[(ngModel)]"
-        ],
-        "description": "<p>Provides two-way data-binding, parsing and validation for form controls.</p>\n"
-      }
-    ],
-    "index": 3
-  },
-  {
-    "name": "Class decorators",
-    "description": "<p><code>import {Directive, ...} from &#39;angular2/core&#39;;</code>\n</p>\n",
-    "items": [
-      {
-        "syntax": "@Component({...})\nclass MyComponent() {}",
-        "bold": [
-          "@Component({...})"
-        ],
-        "description": "<p>Declares that a class is a component and provides metadata about the component.</p>\n"
-      },
-      {
-        "syntax": "@Pipe({...})\nclass MyPipe() {}",
-        "bold": [
-          "@Pipe({...})"
-        ],
-        "description": "<p>Declares that a class is a pipe and provides metadata about the pipe.</p>\n"
-      },
-      {
-        "syntax": "@Injectable()\nclass MyService() {}",
-        "bold": [
-          "@Injectable()"
-        ],
-        "description": "<p>Declares that a class has dependencies that should be injected into the constructor when the dependency\ninjector is creating an instance of this class.</p>\n"
-      }
-    ],
-    "index": 4
-  },
-  {
-    "name": "Directive configuration",
-    "description": "<p><code>@Directive({ property1: value1, ... })</code>\n</p>\n",
-    "items": [
-      {
-        "syntax": "selector: '.cool-button:not(a)'",
-        "bold": [
-          "selector:"
-        ],
-        "description": "<p>Specifies a CSS selector that identifies this directive within a template. Supported selectors include <code>element</code>,\n<code>[attribute]</code>, <code>.class</code>, and <code>:not()</code>.</p>\n<p>Does not support parent-child relationship selectors.</p>\n"
-      },
-      {
-        "syntax": "providers: [MyService, provide(...)]",
-        "bold": [
-          "providers:"
-        ],
-        "description": "<p>Array of dependency injection providers for this directive and its children.</p>\n"
-      }
-    ],
-    "index": 5
-  },
-  {
-    "name": "Component configuration",
-    "description": "<p><code>@Component</code> extends <code>@Directive</code>,\nso the <code>@Directive</code> configuration applies to components as well</p>\n",
-    "items": [
-      {
-        "syntax": "viewProviders: [MyService, provide(...)]",
-        "bold": [
-          "viewProviders:"
-        ],
-        "description": "<p>Array of dependency injection providers scoped to this component&#39;s view.</p>\n"
-      },
-      {
-        "syntax": "template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'",
-        "bold": [
-          "template:",
-          "templateUrl:"
-        ],
-        "description": "<p>Inline template / external template URL of the component&#39;s view.</p>\n"
-      },
-      {
-        "syntax": "styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']",
-        "bold": [
-          "styles:",
-          "styleUrls:"
-        ],
-        "description": "<p>List of inline CSS styles / external stylesheet URLs for styling component’s view.</p>\n"
-      },
-      {
-        "syntax": "directives: [MyDirective, MyComponent]",
-        "bold": [
-          "directives:"
-        ],
-        "description": "<p>List of directives used in the the component’s template.</p>\n"
-      },
-      {
-        "syntax": "pipes: [MyPipe, OtherPipe]",
-        "bold": [
-          "pipes:"
-        ],
-        "description": "<p>List of pipes used in the component&#39;s template.</p>\n"
-      }
-    ],
-    "index": 6
-  },
-  {
-    "name": "Class field decorators for directives and components",
-    "description": "<p><code>import {Input, ...} from &#39;angular2/core&#39;;</code>\n</p>\n",
-    "items": [
-      {
-        "syntax": "@Input() myProperty;",
-        "bold": [
-          "@Input()"
-        ],
-        "description": "<p>Declares an input property that we can update via property binding (e.g.\n<code>&lt;my-cmp [my-property]=&quot;someExpression&quot;&gt;</code>).</p>\n"
-      },
-      {
-        "syntax": "@Output() myEvent = new EventEmitter();",
-        "bold": [
-          "@Output()"
-        ],
-        "description": "<p>Declares an output property that fires events to which we can subscribe with an event binding (e.g. <code>&lt;my-cmp (my-event)=&quot;doSomething()&quot;&gt;</code>).</p>\n"
-      },
-      {
-        "syntax": "@HostBinding('[class.valid]') isValid;",
-        "bold": [
-          "@HostBinding('[class.valid]')"
-        ],
-        "description": "<p>Binds a host element property (e.g. CSS class valid) to directive/component property (e.g. isValid).</p>\n"
-      },
-      {
-        "syntax": "@HostListener('click', ['$event']) onClick(e) {...}",
-        "bold": [
-          "@HostListener('click', ['$event'])"
-        ],
-        "description": "<p>Subscribes to a host element event (e.g. click) with a directive/component method (e.g. onClick), optionally passing an argument ($event).</p>\n"
-      },
-      {
-        "syntax": "@ContentChild(myPredicate) myChildComponent;",
-        "bold": [
-          "@ContentChild(myPredicate)"
-        ],
-        "description": "<p>Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.</p>\n"
-      },
-      {
-        "syntax": "@ContentChildren(myPredicate) myChildComponents;",
-        "bold": [
-          "@ContentChildren(myPredicate)"
-        ],
-        "description": "<p>Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.</p>\n"
-      },
-      {
-        "syntax": "@ViewChild(myPredicate) myChildComponent;",
-        "bold": [
-          "@ViewChild(myPredicate)"
-        ],
-        "description": "<p>Binds the first result of the component view query (myPredicate) to the myChildComponent property of the class. Not available for directives.</p>\n"
-      },
-      {
-        "syntax": "@ViewChildren(myPredicate) myChildComponents;",
-        "bold": [
-          "@ViewChildren(myPredicate)"
-        ],
-        "description": "<p>Binds the results of the component view query (myPredicate) to the myChildComponents property of the class. Not available for directives.</p>\n"
-      }
-    ],
-    "index": 7
-  },
-  {
-    "name": "Directive and component change detection and lifecycle hooks",
-    "description": "<p>(implemented as class methods)</p>\n",
-    "items": [
-      {
-        "syntax": "constructor(myService: MyService, ...) { ... }",
-        "bold": [
-          "constructor(myService: MyService, ...)"
-        ],
-        "description": "<p>The class constructor is called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.</p>\n"
-      },
-      {
-        "syntax": "ngOnChanges(changeRecord) { ... }",
-        "bold": [
-          "ngOnChanges(changeRecord)"
-        ],
-        "description": "<p>Called after every change to input properties and before processing content or child views.</p>\n"
-      },
-      {
-        "syntax": "ngOnInit() { ... }",
-        "bold": [
-          "ngOnInit()"
-        ],
-        "description": "<p>Called after the constructor, initializing input properties, and the first call to ngOnChanges.</p>\n"
-      },
-      {
-        "syntax": "ngDoCheck() { ... }",
-        "bold": [
-          "ngDoCheck()"
-        ],
-        "description": "<p>Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.</p>\n"
-      },
-      {
-        "syntax": "ngAfterContentInit() { ... }",
-        "bold": [
-          "ngAfterContentInit()"
-        ],
-        "description": "<p>Called after ngOnInit when the component&#39;s or directive&#39;s content has been initialized.</p>\n"
-      },
-      {
-        "syntax": "ngAfterContentChecked() { ... }",
-        "bold": [
-          "ngAfterContentChecked()"
-        ],
-        "description": "<p>Called after every check of the component&#39;s or directive&#39;s content.</p>\n"
-      },
-      {
-        "syntax": "ngAfterViewInit() { ... }",
-        "bold": [
-          "ngAfterViewInit()"
-        ],
-        "description": "<p>Called after ngAfterContentInit when the component&#39;s view has been initialized. Applies to components only.</p>\n"
-      },
-      {
-        "syntax": "ngAfterViewChecked() { ... }",
-        "bold": [
-          "ngAfterViewChecked()"
-        ],
-        "description": "<p>Called after every check of the component&#39;s view. Applies to components only.</p>\n"
-      },
-      {
-        "syntax": "ngOnDestroy() { ... }",
-        "bold": [
-          "ngOnDestroy()"
-        ],
-        "description": "<p>Called once, before the instance is destroyed.</p>\n"
-      }
-    ],
-    "index": 8
-  },
-  {
-    "name": "Dependency injection configuration",
-    "description": "<p><code>import {provide} from &#39;angular2/core&#39;;</code>\n</p>\n",
-    "items": [
-      {
-        "syntax": "provide(MyService, {useClass: MyMockService})",
-        "bold": [
-          "provide",
-          "useClass"
-        ],
-        "description": "<p>Sets or overrides the provider for MyService to the MyMockService class.</p>\n"
-      },
-      {
-        "syntax": "provide(MyService, {useFactory: myFactory})",
-        "bold": [
-          "provide",
-          "useFactory"
-        ],
-        "description": "<p>Sets or overrides the provider for MyService to the myFactory factory function.</p>\n"
-      },
-      {
-        "syntax": "provide(MyValue, {useValue: 41})",
-        "bold": [
-          "provide",
-          "useValue"
-        ],
-        "description": "<p>Sets or overrides the provider for MyValue to the value 41.</p>\n"
-      }
-    ],
-    "index": 9
-  },
-  {
-    "name": "Routing and navigation",
-    "description": "<p><code>import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...} from &#39;angular2/router&#39;;</code>\n</p>\n",
-    "items": [
-      {
-        "syntax": "@RouteConfig([\n  { path: '/:myParam', component: MyComponent, as: 'MyCmp' },\n  { path: '/staticPath', component: ..., as: ...},\n  { path: '/*wildCardParam', component: ..., as: ...}\n])\nclass MyComponent() {}",
-        "bold": [
-          "@RouteConfig"
-        ],
-        "description": "<p>Configures routes for the decorated component. Supports static, parameterized, and wildcard routes.</p>\n"
-      },
-      {
-        "syntax": "<router-outlet></router-outlet>",
-        "bold": [
-          "router-outlet"
-        ],
-        "description": "<p>Marks the location to load the component of the active route.</p>\n"
-      },
-      {
-        "syntax": "<a [routerLink]=\"[ '/MyCmp', {myParam: 'value' } ]\">",
-        "bold": [
-          "[routerLink]"
-        ],
-        "description": "<p>Creates a link to a different view based on a route instruction consisting of a route name and optional parameters. The route name matches the as property of a configured route. Add the &#39;/&#39; prefix to navigate to a root route; add the &#39;./&#39; prefix for a child route.</p>\n"
-      },
-      {
-        "syntax": "@CanActivate(() => { ... })class MyComponent() {}",
-        "bold": [
-          "@CanActivate"
-        ],
-        "description": "<p>A component decorator defining a function that the router should call first to determine if it should activate this component. Should return a boolean or a promise.</p>\n"
-      },
-      {
-        "syntax": "routerOnActivate(nextInstruction, prevInstruction) { ... }",
-        "bold": [
-          "routerOnActivate"
-        ],
-        "description": "<p>After navigating to a component, the router calls the component&#39;s routerOnActivate method (if defined).</p>\n"
-      },
-      {
-        "syntax": "routerCanReuse(nextInstruction, prevInstruction) { ... }",
-        "bold": [
-          "routerCanReuse"
-        ],
-        "description": "<p>The router calls a component&#39;s routerCanReuse method (if defined) to determine whether to reuse the instance or destroy it and create a new instance. Should return a boolean or a promise.</p>\n"
-      },
-      {
-        "syntax": "routerOnReuse(nextInstruction, prevInstruction) { ... }",
-        "bold": [
-          "routerOnReuse"
-        ],
-        "description": "<p>The router calls the component&#39;s routerOnReuse method (if defined) when it re-uses a component instance.</p>\n"
-      },
-      {
-        "syntax": "routerCanDeactivate(nextInstruction, prevInstruction) { ... }",
-        "bold": [
-          "routerCanDeactivate"
-        ],
-        "description": "<p>The router calls the routerCanDeactivate methods (if defined) of every component that would be removed after a navigation. The navigation proceeds if and only if all such methods return true or a promise that is resolved.</p>\n"
-      },
-      {
-        "syntax": "routerOnDeactivate(nextInstruction, prevInstruction) { ... }",
-        "bold": [
-          "routerOnDeactivate"
-        ],
-        "description": "<p>Called before the directive is removed as the result of a route change. May return a promise that pauses removing the directive until the promise resolves.</p>\n"
-      }
-    ],
-    "index": 10
-  }
-]
\ No newline at end of file
+  "sections": [
+    {
+      "name": "Bootstrapping",
+      "description": "<p><code>import {bootstrap} from &#39;angular2/angular2&#39;;</code>\n\n</p>\n",
+      "items": [
+        {
+          "syntax": "bootstrap​(MyAppComponent, [MyService, provide(...)]);",
+          "bold": [
+            "provide"
+          ],
+          "description": "<p>Bootstraps an application with MyAppComponent as the root component and configures the DI providers. </p>\n"
+        }
+      ],
+      "index": 0
+    },
+    {
+      "name": "Template syntax",
+      "description": "",
+      "items": [
+        {
+          "syntax": "<input [value]=\"firstName\">",
+          "bold": [
+            "[value]"
+          ],
+          "description": "<p>Binds property <code>value</code> to the result of expression <code>firstName</code>.</p>\n"
+        },
+        {
+          "syntax": "<div [attr.role]=\"myAriaRole\">",
+          "bold": [
+            "[attr.role]"
+          ],
+          "description": "<p>Binds attribute <code>role</code> to the result of expression <code>myAriaRole</code>.</p>\n"
+        },
+        {
+          "syntax": "<div [class.extra-sparkle]=\"isDelightful\">",
+          "bold": [
+            "[class.extra-sparkle]"
+          ],
+          "description": "<p>Binds the presence of the CSS class <code>extra-sparkle</code> on the element to the truthiness of the expression <code>isDelightful</code>.</p>\n"
+        },
+        {
+          "syntax": "<div [style.width.px]=\"mySize\">",
+          "bold": [
+            "[style.width.px]"
+          ],
+          "description": "<p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p>\n"
+        },
+        {
+          "syntax": "<button (click)=\"readRainbow($event)\">",
+          "bold": [
+            "(click)"
+          ],
+          "description": "<p>Calls method <code>readRainbow</code> when a click event is triggered on this button element (or its children) and passes in the event object.</p>\n"
+        },
+        {
+          "syntax": "<div title=\"Hello {{ponyName}}\">",
+          "bold": [
+            "{{ponyName}}"
+          ],
+          "description": "<p>Binds a property to an interpolated string, e.g. &quot;Hello Seabiscuit&quot;. Equivalent to:\n<code>&lt;div [title]=&quot;&#39;Hello&#39; + ponyName&quot;&gt;</code></p>\n"
+        },
+        {
+          "syntax": "<p>Hello {{ponyName}}</p>",
+          "bold": [
+            "{{ponyName}}"
+          ],
+          "description": "<p>Binds text content to an interpolated string, e.g. &quot;Hello Seabiscuit&quot;.</p>\n"
+        },
+        {
+          "syntax": "<my-cmp [(title)]=\"name\">",
+          "bold": [
+            "[(title)]"
+          ],
+          "description": "<p>Sets up two-way data binding. Equivalent to: <code>&lt;my-cmp [title]=&quot;name&quot; (titleChange)=&quot;name=$event&quot;&gt;</code></p>\n"
+        },
+        {
+          "syntax": "<video #movieplayer ...>\n  <button (click)=\"movieplayer.play()\">\n</video>",
+          "bold": [
+            "#movieplayer",
+            "(click)"
+          ],
+          "description": "<p>Creates a local variable <code>movieplayer</code> that provides access to the <code>video</code> element instance in data-binding and event-binding expressions in the current template.</p>\n"
+        },
+        {
+          "syntax": "<p *my-unless=\"myExpression\">...</p>",
+          "bold": [
+            "*my-unless"
+          ],
+          "description": "<p>The <code>*</code> symbol means that the current element will be turned into an embedded template. Equivalent to:\n<code>&lt;template [myless]=&quot;myExpression&quot;&gt;&lt;p&gt;...&lt;/p&gt;&lt;/template&gt;</code></p>\n"
+        },
+        {
+          "syntax": "<p>Card No.: {{cardNumber | myCreditCardNumberFormatter}}</p>",
+          "bold": [
+            "{{cardNumber | myCreditCardNumberFormatter}}"
+          ],
+          "description": "<p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>creditCardNumberFormatter</code>.</p>\n"
+        },
+        {
+          "syntax": "<p>Employer: {{employer?.companyName}}</p>",
+          "bold": [
+            "{{employer?.companyName}}"
+          ],
+          "description": "<p>The Elvis operator (<code>?</code>) means that the <code>employer</code> field is optional and if <code>undefined</code>, the rest of the expression should be ignored.</p>\n"
+        }
+      ],
+      "index": 1
+    },
+    {
+      "name": "Built-in directives",
+      "description": "<p><code>import {NgIf, ...} from &#39;angular2/common&#39;;</code>\n\n</p>\n",
+      "items": [
+        {
+          "syntax": "<section *ngIf=\"showSection\">",
+          "bold": [
+            "*ngIf"
+          ],
+          "description": "<p>Removes or recreates a portion of the DOM tree based on the showSection expression.</p>\n"
+        },
+        {
+          "syntax": "<li *ngFor=\"#item of list\">",
+          "bold": [
+            "*ngFor"
+          ],
+          "description": "<p>Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.</p>\n"
+        },
+        {
+          "syntax": "<div [ngSwitch]=\"conditionExpression\">\n  <template [ngSwitchWhen]=\"case1Exp\">...</template>\n  <template ngSwitchWhen=\"case2LiteralString\">...</template>\n  <template ngSwitchDefault>...</template>\n</div>",
+          "bold": [
+            "[ngSwitch]",
+            "[ngSwitchWhen]",
+            "ngSwitchWhen",
+            "ngSwitchDefault"
+          ],
+          "description": "<p>Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.</p>\n"
+        },
+        {
+          "syntax": "<div [ngClass]=\"{active: isActive, disabled: isDisabled}\">",
+          "bold": [
+            "[ngClass]"
+          ],
+          "description": "<p>Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand side expression should return {class-name: true/false} map.</p>\n"
+        }
+      ],
+      "index": 2
+    },
+    {
+      "name": "Forms",
+      "description": "<p><code>import {FORM_DIRECTIVES} from &#39;angular2/common&#39;;</code>\n\n</p>\n",
+      "items": [
+        {
+          "syntax": "<input [(ngModel)]=\"userName\">",
+          "bold": [
+            "[(ngModel)]"
+          ],
+          "description": "<p>Provides two-way data-binding, parsing and validation for form controls.</p>\n"
+        }
+      ],
+      "index": 3
+    },
+    {
+      "name": "Class decorators",
+      "description": "<p><code>import {Directive, ...} from &#39;angular2/core&#39;;</code>\n\n</p>\n",
+      "items": [
+        {
+          "syntax": "@Component({...})\nclass MyComponent() {}",
+          "bold": [
+            "@Component({...})"
+          ],
+          "description": "<p>Declares that a class is a component and provides metadata about the component.</p>\n"
+        },
+        {
+          "syntax": "@Pipe({...})\nclass MyPipe() {}",
+          "bold": [
+            "@Pipe({...})"
+          ],
+          "description": "<p>Declares that a class is a pipe and provides metadata about the pipe.</p>\n"
+        },
+        {
+          "syntax": "@Injectable()\nclass MyService() {}",
+          "bold": [
+            "@Injectable()"
+          ],
+          "description": "<p>Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.\n\n</p>\n"
+        }
+      ],
+      "index": 4
+    },
+    {
+      "name": "Directive configuration",
+      "description": "<p><code>@Directive({ property1: value1, ... })</code>\n\n</p>\n",
+      "items": [
+        {
+          "syntax": "selector: '.cool-button:not(a)'",
+          "bold": [
+            "selector:"
+          ],
+          "description": "<p>Specifies a CSS selector that identifies this directive within a template. Supported selectors include <code>element</code>,\n<code>[attribute]</code>, <code>.class</code>, and <code>:not()</code>.</p>\n<p>Does not support parent-child relationship selectors.</p>\n"
+        },
+        {
+          "syntax": "providers: [MyService, provide(...)]",
+          "bold": [
+            "providers:"
+          ],
+          "description": "<p>Array of dependency injection providers for this directive and its children.</p>\n"
+        }
+      ],
+      "index": 5
+    },
+    {
+      "name": "Component configuration",
+      "description": "<p>\n<code>@Component</code> extends <code>@Directive</code>,\nso the <code>@Directive</code> configuration applies to components as well</p>\n",
+      "items": [
+        {
+          "syntax": "viewProviders: [MyService, provide(...)]",
+          "bold": [
+            "viewProviders:"
+          ],
+          "description": "<p>Array of dependency injection providers scoped to this component&#39;s view.</p>\n"
+        },
+        {
+          "syntax": "template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'",
+          "bold": [
+            "template:",
+            "templateUrl:"
+          ],
+          "description": "<p>Inline template / external template URL of the component&#39;s view.</p>\n"
+        },
+        {
+          "syntax": "styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']",
+          "bold": [
+            "styles:",
+            "styleUrls:"
+          ],
+          "description": "<p>List of inline CSS styles / external stylesheet URLs for styling component’s view.</p>\n"
+        },
+        {
+          "syntax": "directives: [MyDirective, MyComponent]",
+          "bold": [
+            "directives:"
+          ],
+          "description": "<p>List of directives used in the the component’s template.</p>\n"
+        },
+        {
+          "syntax": "pipes: [MyPipe, OtherPipe]",
+          "bold": [
+            "pipes:"
+          ],
+          "description": "<p>List of pipes used in the component&#39;s template.</p>\n"
+        }
+      ],
+      "index": 6
+    },
+    {
+      "name": "Class field decorators for directives and components",
+      "description": "<p><code>import {Input, ...} from &#39;angular2/core&#39;;</code>\n\n</p>\n",
+      "items": [
+        {
+          "syntax": "@Input() myProperty;",
+          "bold": [
+            "@Input()"
+          ],
+          "description": "<p>Declares an input property that we can update via property binding (e.g.\n<code>&lt;my-cmp [my-property]=&quot;someExpression&quot;&gt;</code>).</p>\n"
+        },
+        {
+          "syntax": "@Output() myEvent = new EventEmitter();",
+          "bold": [
+            "@Output()"
+          ],
+          "description": "<p>Declares an output property that fires events to which we can subscribe with an event binding (e.g. <code>&lt;my-cmp (my-event)=&quot;doSomething()&quot;&gt;</code>).</p>\n"
+        },
+        {
+          "syntax": "@HostBinding('[class.valid]') isValid;",
+          "bold": [
+            "@HostBinding('[class.valid]')"
+          ],
+          "description": "<p>Binds a host element property (e.g. CSS class valid) to directive/component property (e.g. isValid).</p>\n"
+        },
+        {
+          "syntax": "@HostListener('click', ['$event']) onClick(e) {...}",
+          "bold": [
+            "@HostListener('click', ['$event'])"
+          ],
+          "description": "<p>Subscribes to a host element event (e.g. click) with a directive/component method (e.g. onClick), optionally passing an argument ($event).</p>\n"
+        },
+        {
+          "syntax": "@ContentChild(myPredicate) myChildComponent;",
+          "bold": [
+            "@ContentChild(myPredicate)"
+          ],
+          "description": "<p>Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.</p>\n"
+        },
+        {
+          "syntax": "@ContentChildren(myPredicate) myChildComponents;",
+          "bold": [
+            "@ContentChildren(myPredicate)"
+          ],
+          "description": "<p>Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.</p>\n"
+        },
+        {
+          "syntax": "@ViewChild(myPredicate) myChildComponent;",
+          "bold": [
+            "@ViewChild(myPredicate)"
+          ],
+          "description": "<p>Binds the first result of the component view query (myPredicate) to the myChildComponent property of the class. Not available for directives.</p>\n"
+        },
+        {
+          "syntax": "@ViewChildren(myPredicate) myChildComponents;",
+          "bold": [
+            "@ViewChildren(myPredicate)"
+          ],
+          "description": "<p>Binds the results of the component view query (myPredicate) to the myChildComponents property of the class. Not available for directives.</p>\n"
+        }
+      ],
+      "index": 7
+    },
+    {
+      "name": "Directive and component change detection and lifecycle hooks",
+      "description": "<p>(implemented as class methods)\n</p>\n",
+      "items": [
+        {
+          "syntax": "constructor(myService: MyService, ...) { ... }",
+          "bold": [
+            "constructor(myService: MyService, ...)"
+          ],
+          "description": "<p>The class constructor is called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.</p>\n"
+        },
+        {
+          "syntax": "ngOnChanges(changeRecord) { ... }",
+          "bold": [
+            "ngOnChanges(changeRecord)"
+          ],
+          "description": "<p>Called after every change to input properties and before processing content or child views.</p>\n"
+        },
+        {
+          "syntax": "ngOnInit() { ... }",
+          "bold": [
+            "ngOnInit()"
+          ],
+          "description": "<p>Called after the constructor, initializing input properties, and the first call to ngOnChanges.</p>\n"
+        },
+        {
+          "syntax": "ngDoCheck() { ... }",
+          "bold": [
+            "ngDoCheck()"
+          ],
+          "description": "<p>Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.</p>\n"
+        },
+        {
+          "syntax": "ngAfterContentInit() { ... }",
+          "bold": [
+            "ngAfterContentInit()"
+          ],
+          "description": "<p>Called after ngOnInit when the component&#39;s or directive&#39;s content has been initialized.</p>\n"
+        },
+        {
+          "syntax": "ngAfterContentChecked() { ... }",
+          "bold": [
+            "ngAfterContentChecked()"
+          ],
+          "description": "<p>Called after every check of the component&#39;s or directive&#39;s content.</p>\n"
+        },
+        {
+          "syntax": "ngAfterViewInit() { ... }",
+          "bold": [
+            "ngAfterViewInit()"
+          ],
+          "description": "<p>Called after ngAfterContentInit when the component&#39;s view has been initialized. Applies to components only.</p>\n"
+        },
+        {
+          "syntax": "ngAfterViewChecked() { ... }",
+          "bold": [
+            "ngAfterViewChecked()"
+          ],
+          "description": "<p>Called after every check of the component&#39;s view. Applies to components only.</p>\n"
+        },
+        {
+          "syntax": "ngOnDestroy() { ... }",
+          "bold": [
+            "ngOnDestroy()"
+          ],
+          "description": "<p>Called once, before the instance is destroyed.</p>\n"
+        }
+      ],
+      "index": 8
+    },
+    {
+      "name": "Dependency injection configuration",
+      "description": "<p><code>import {provide} from &#39;angular2/core&#39;;</code>\n\n</p>\n",
+      "items": [
+        {
+          "syntax": "provide(MyService, {useClass: MyMockService})",
+          "bold": [
+            "provide",
+            "useClass"
+          ],
+          "description": "<p>Sets or overrides the provider for MyService to the MyMockService class.</p>\n"
+        },
+        {
+          "syntax": "provide(MyService, {useFactory: myFactory})",
+          "bold": [
+            "provide",
+            "useFactory"
+          ],
+          "description": "<p>Sets or overrides the provider for MyService to the myFactory factory function.</p>\n"
+        },
+        {
+          "syntax": "provide(MyValue, {useValue: 41})",
+          "bold": [
+            "provide",
+            "useValue"
+          ],
+          "description": "<p>Sets or overrides the provider for MyValue to the value 41.</p>\n"
+        }
+      ],
+      "index": 9
+    },
+    {
+      "name": "Routing and navigation",
+      "description": "<p><code>import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...} from &#39;angular2/router&#39;;</code>\n\n</p>\n",
+      "items": [
+        {
+          "syntax": "@RouteConfig([\n  { path: '/:myParam', component: MyComponent, as: 'MyCmp' },\n  { path: '/staticPath', component: ..., as: ...},\n  { path: '/*wildCardParam', component: ..., as: ...}\n])\nclass MyComponent() {}",
+          "bold": [
+            "@RouteConfig"
+          ],
+          "description": "<p>Configures routes for the decorated component. Supports static, parameterized, and wildcard routes.</p>\n"
+        },
+        {
+          "syntax": "<router-outlet></router-outlet>",
+          "bold": [
+            "router-outlet"
+          ],
+          "description": "<p>Marks the location to load the component of the active route.</p>\n"
+        },
+        {
+          "syntax": "<a [routerLink]=\"[ '/MyCmp', {myParam: 'value' } ]\">",
+          "bold": [
+            "[routerLink]"
+          ],
+          "description": "<p>Creates a link to a different view based on a route instruction consisting of a route name and optional parameters. The route name matches the as property of a configured route. Add the &#39;/&#39; prefix to navigate to a root route; add the &#39;./&#39; prefix for a child route.</p>\n"
+        },
+        {
+          "syntax": "@CanActivate(() => { ... })class MyComponent() {}",
+          "bold": [
+            "@CanActivate"
+          ],
+          "description": "<p>A component decorator defining a function that the router should call first to determine if it should activate this component. Should return a boolean or a promise.</p>\n"
+        },
+        {
+          "syntax": "routerOnActivate(nextInstruction, prevInstruction) { ... }",
+          "bold": [
+            "routerOnActivate"
+          ],
+          "description": "<p>After navigating to a component, the router calls the component&#39;s routerOnActivate method (if defined).</p>\n"
+        },
+        {
+          "syntax": "routerCanReuse(nextInstruction, prevInstruction) { ... }",
+          "bold": [
+            "routerCanReuse"
+          ],
+          "description": "<p>The router calls a component&#39;s routerCanReuse method (if defined) to determine whether to reuse the instance or destroy it and create a new instance. Should return a boolean or a promise.</p>\n"
+        },
+        {
+          "syntax": "routerOnReuse(nextInstruction, prevInstruction) { ... }",
+          "bold": [
+            "routerOnReuse"
+          ],
+          "description": "<p>The router calls the component&#39;s routerOnReuse method (if defined) when it re-uses a component instance.</p>\n"
+        },
+        {
+          "syntax": "routerCanDeactivate(nextInstruction, prevInstruction) { ... }",
+          "bold": [
+            "routerCanDeactivate"
+          ],
+          "description": "<p>The router calls the routerCanDeactivate methods (if defined) of every component that would be removed after a navigation. The navigation proceeds if and only if all such methods return true or a promise that is resolved.</p>\n"
+        },
+        {
+          "syntax": "routerOnDeactivate(nextInstruction, prevInstruction) { ... }",
+          "bold": [
+            "routerOnDeactivate"
+          ],
+          "description": "<p>Called before the directive is removed as the result of a route change. May return a promise that pauses removing the directive until the promise resolves.</p>\n"
+        }
+      ],
+      "index": 10
+    }
+  ]
+}
\ No newline at end of file
diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade
index 419c0325ea..765745dbc1 100644
--- a/public/docs/ts/latest/guide/router.jade
+++ b/public/docs/ts/latest/guide/router.jade
@@ -380,18 +380,21 @@ figure.image-display
   Here are the details for readers inclined to build the sample through this milestone.
   
   Our starter app's structure looks like this:
-code-example(format="").
-  router-sample
-  ├── node_modules/
-  ├── app/
-  |    ├── app.component.ts
-  │    ├── boot.ts
-  │    ├── crisis-list.component.ts
-  │    └── hero-list.component.ts
-  ├── index.html
-  ├── styles.css
-  ├── tsconfig.json
-  └── package.json
+.filetree
+  .file router-sample
+  .children
+    .file node_modules
+  .children
+    .file app
+      .children
+        .file app.component.ts
+        .file boot.ts
+        .file crisis-list.component.ts
+        .file hero-list.component.ts
+    .file index.html
+    .file styles.css
+    .file tsconfig.json
+    .file package.json
 :marked
   Here are the application-specific files
 +makeTabs(
@@ -448,11 +451,12 @@ figure.image-display
   
   When were done organizing, we have three "Hero" files:
   
-code-example(format="").
-  app/heroes/
-        ├── hero-detail.component.ts
-        ├── hero-list.component.ts
-        └── hero.service.ts
+.filetree
+  .file app/heroes
+  .children
+    .file hero-detail.component.ts
+    .file hero-list.component.ts
+    .file hero.service.ts
 :marked
   Here as in the tutorial, we'll provide the `HeroService` during bootstrapping 
   so that is available anywhere in the app (see `boot.ts`) .
@@ -581,21 +585,24 @@ code-example(format="." language="bash").
   * pass information along in route parameters (`RouteParams`)
   
   After these changes, the folder structure looks like this:
-code-example(format="").
-  router-sample
-  ├── node_modules/
-  ├── app/
-  │    ├── heroes/
-  │    │    ├── hero-detail.component.ts
-  │    │    ├── hero-list.component.ts
-  │    │    └── hero.service.ts
-  │    ├── app.component.ts
-  |    ├── boot.ts
-  │    └── crisis-list.component.ts
-  ├── index.html
-  ├── styles.css
-  ├── tsconfig.json
-  └── package.json
+.filetree
+  .file router-sample
+  .children
+    .file node_modules
+    .file app
+    .children
+      .file heroes
+      .children
+        .file hero-detail.component.ts
+        .file hero-list.component.ts
+        .file hero.service.ts
+        .file app.component.ts
+        .file boot.ts
+        .file crisis-list.component.ts
+      .file index.html
+      .file styles.css
+      .file tsconfig.json
+      .file package.json
 :marked
   <a id="heroes-app-code"></a>
   ### The Heroes App code
@@ -895,20 +902,22 @@ code-example(format="").
   We can always try the [live example](../resources/live-examples/router/ts/plnkr.html) and download the source code from there.
   
   Our final project folder structure looks like this:
-code-example(format="").
-  router-sample
-  ├── node_modules/
-  ├── src/
-  ├── app/
-  │    ├── crisis-center/...
-  │    ├── heroes/...
-  │    ├── app.component.ts
-  │    ├── boot.ts
-  │    └── dialog.service.ts
-  ├── index.html
-  ├── styles.css
-  ├── tsconfig.json
-  └── package.json
+.filetree
+  .file router-sample
+  .children
+    .file node_modules
+    .file src
+    .file app
+    .children
+      .file crisis-center/...
+      .file heroes/...
+      .file app.component.ts
+      .file boot.ts
+      .file dialog.service.ts
+    .file index.html
+    .file styles.css
+    .file tsconfig.json
+    .file package.json
 :marked
   The top level application files are
 +makeTabs(
@@ -929,14 +938,16 @@ code-example(format="").
   <a id="crisis-center-structure-and-code"></id>
   ### Crisis Center
   The *Crisis Center* feature area within the `crisis-center` folder follows:
-code-example(format="").
-  app/
-    crisis-center/
-    ├── crisis-center.component.ts
-    ├── crisis-detail.component.ts
-    ├── crisis-list.component.ts
-    ├── crisis.service.ts
-    └── routes.ts
+.filetree
+  .file app
+  .children
+    .file crisis-center
+    .children
+      .file crisis-center.component.ts
+      .file crisis-detail.component.ts
+      .file crisis-list.component.ts
+      .file crisis.service.ts
+      .file routes.ts
 :marked
 +makeTabs(
    `router/ts/app/crisis-center/crisis-center.component.ts,    
@@ -953,12 +964,14 @@ code-example(format="").
 :marked
   ### Heroes
   The *Heroes* feature area within the `heroes` folder is next:
-code-example(format="").
-  app/
-    heroes/
-    ├── hero-detail.component.ts
-    ├── hero-list.component.ts
-    └── hero.service.ts
+.filetree
+  .file app
+  .children
+    .file heroes
+    .children
+      .file hero-detail.component.ts
+      .file hero-list.component.ts
+      .file hero.service.ts
 :marked
 +makeTabs(
    `router/ts/app/heroes/hero-list.component.ts,