From 74a2657e04f1b85b774fbf2c8a51c725202acd2b Mon Sep 17 00:00:00 2001
From: Zhicheng Wang <zcwang@thoughtworks.com>
Date: Fri, 25 Nov 2016 23:00:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=8A=E5=B0=8F=E6=8A=84=E7=9A=84=E5=8E=86?=
 =?UTF-8?q?=E5=8F=B2=E7=89=88=E6=9C=AC=E5=8A=A0=E5=85=A5=E7=89=88=E6=9C=AC?=
 =?UTF-8?q?=E6=8E=A7=E5=88=B6=E4=B8=AD=EF=BC=8C=E4=BB=A5=E4=BE=BF=E8=AF=86?=
 =?UTF-8?q?=E5=88=AB=E6=94=B9=E5=8A=A8=20=E6=8A=8A=E5=B0=8F=E6=8A=84?=
 =?UTF-8?q?=E5=90=8C=E6=AD=A5=E5=88=B0=E6=9C=80=E6=96=B0=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                    |   2 +-
 public/docs/dart/latest/guide/cheatsheet.json | 527 ++++++++++++++++
 public/docs/js/latest/guide/cheatsheet.json   | 573 ++++++++++++++++++
 .../docs/ts/latest/guide/cheatsheet-cn.json   |  46 +-
 public/docs/ts/latest/guide/cheatsheet.json   | 567 +++++++++++++++++
 5 files changed, 1691 insertions(+), 24 deletions(-)
 create mode 100644 public/docs/dart/latest/guide/cheatsheet.json
 create mode 100644 public/docs/js/latest/guide/cheatsheet.json
 create mode 100644 public/docs/ts/latest/guide/cheatsheet.json

diff --git a/.gitignore b/.gitignore
index df612cd56e..88bd33c2c8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,7 +28,7 @@ plnkr.html
 *.eplnkr.html
 eplnkr.html
 *plnkr.no-link.html
-public/docs/*/latest/guide/cheatsheet.json
+#public/docs/*/latest/guide/cheatsheet.json
 protractor-results.txt
 link-checker-results.txt
 *a2docs.css
diff --git a/public/docs/dart/latest/guide/cheatsheet.json b/public/docs/dart/latest/guide/cheatsheet.json
new file mode 100644
index 0000000000..9042609175
--- /dev/null
+++ b/public/docs/dart/latest/guide/cheatsheet.json
@@ -0,0 +1,527 @@
+{
+  "currentEnvironment": "Dart",
+  "version": {
+    "raw": "2.0.0-rc.4",
+    "major": 2,
+    "minor": 0,
+    "patch": 0,
+    "prerelease": [
+      "local"
+    ],
+    "build": "sha.47eb31d",
+    "version": "2.0.0-local",
+    "codeName": "snapshot",
+    "isSnapshot": true,
+    "full": "2.0.0-local+sha.47eb31d",
+    "branch": "master",
+    "commitSHA": "47eb31ddb21465e0ba65c0c09a1a39d2a5a304c8"
+  },
+  "sections": [
+    {
+      "name": "Bootstrapping",
+      "description": "<p>\n\n<code>import &#39;package:angular2/platform/browser.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 *myUnless=\"myExpression\">...</p>",
+          "bold": [
+            "*myUnless"
+          ],
+          "description": "<p>The <code>*</code> symbol means that the current element will be turned into an embedded template. Equivalent to:\n<code>&lt;template [myUnless]=&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>myCreditCardNumberFormatter</code>.</p>\n"
+        },
+        {
+          "syntax": "<p>Employer: {{employer?.companyName}}</p>",
+          "bold": [
+            "{{employer?.companyName}}"
+          ],
+          "description": "<p>The safe navigation 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"
+        },
+        {
+          "syntax": "<svg:rect x=\"0\" y=\"0\" width=\"100\" height=\"100\"/>",
+          "bold": [
+            "svg:"
+          ],
+          "description": "<p>SVG snippet templates need an <code>svg:</code> prefix on their root element to disambiguate the SVG element from an HTML component.</p>\n"
+        },
+        {
+          "syntax": "<svg>\n  <rect x=\"0\" y=\"0\" width=\"100\" height=\"100\"/>\n</svg>",
+          "bold": [
+            "svg"
+          ],
+          "description": "<p><code>&lt;svg&gt;</code> root elements are detected as SVG element automatically without the prefix</p>\n"
+        }
+      ],
+      "index": 1
+    },
+    {
+      "name": "Built-in directives",
+      "description": "<p>\n\nAvailable using <code>platform_directives</code> in pubspec</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=\"let 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 [ngSwitchCase]=\"case1Exp\">...</template>\n  <template ngSwitchCase=\"case2LiteralString\">...</template>\n  <template ngSwitchDefault>...</template>\n</div>",
+          "bold": [
+            "[ngSwitch]",
+            "[ngSwitchCase]",
+            "ngSwitchCase",
+            "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\nAvailable using <code>platform_directives</code> in pubspec</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": "@Directive(...)\nclass MyDirective() {}",
+          "bold": [
+            "@Directive(...)"
+          ],
+          "description": "<p>Declares that a class is a directive and provides metadata about the directive.</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 [myProperty]=&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 (myEvent)=&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><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
new file mode 100644
index 0000000000..ae2f54f43c
--- /dev/null
+++ b/public/docs/js/latest/guide/cheatsheet.json
@@ -0,0 +1,573 @@
+{
+  "currentEnvironment": "JavaScript",
+  "version": {
+    "raw": "2.2.0-beta.0",
+    "major": 2,
+    "minor": 2,
+    "patch": 0,
+    "prerelease": [
+      "local"
+    ],
+    "build": "sha.f6eeb79",
+    "version": "2.2.0-local",
+    "codeName": "snapshot",
+    "isSnapshot": true,
+    "full": "2.2.0-local+sha.f6eeb79",
+    "branch": "master",
+    "commitSHA": "f6eeb79d28bab55ae6d025f37368c4107bbcb408"
+  },
+  "sections": [
+    {
+      "name": "Bootstrapping",
+      "description": "<p>\nAvailable from the <code>ng.platformBrowserDynamic</code> namespace</p>\n",
+      "items": [
+        {
+          "syntax": "document.addEventListener('DOMContentLoaded', function() {\n  ng.platformBrowserDynamic\n    .platformBrowserDynamic()\n    .bootstrapModule(app.AppModule);\n});",
+          "bold": [
+            "platformBrowserDynamic().bootstrapModule"
+          ],
+          "description": "<p>Bootstraps the app, using the root component from the specified <code>NgModule</code>. Must be wrapped in the event listener to fire when the page loads.</p>\n"
+        }
+      ],
+      "index": 0
+    },
+    {
+      "name": "NgModules",
+      "description": "<p>\nAvailable from the <code>ng.core</code> namespace</p>\n",
+      "items": [
+        {
+          "syntax": "ng.core.NgModule({declarations: ..., imports: ...,\n     exports: ..., providers: ..., bootstrap: ...}).\nClass({ constructor: function() {}})",
+          "bold": [],
+          "description": "<p>Defines a module that contains components, directives, pipes, and providers.</p>\n"
+        },
+        {
+          "syntax": "declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]",
+          "bold": [
+            "declarations:"
+          ],
+          "description": "<p>List of components, directives, and pipes that belong to this module.</p>\n"
+        },
+        {
+          "syntax": "imports: [ng.platformBrowser.BrowserModule, SomeOtherModule]",
+          "bold": [
+            "imports:"
+          ],
+          "description": "<p>List of modules to import into this module. Everything from the imported modules\nis available to <code>declarations</code> of this module.</p>\n"
+        },
+        {
+          "syntax": "exports: [MyRedComponent, MyDatePipe]",
+          "bold": [
+            "exports:"
+          ],
+          "description": "<p>List of components, directives, and pipes visible to modules that import this module.</p>\n"
+        },
+        {
+          "syntax": "providers: [MyService, { provide: ... }]",
+          "bold": [
+            "providers:"
+          ],
+          "description": "<p>List of dependency injection providers visible both to the contents of this module and to importers of this module.</p>\n"
+        },
+        {
+          "syntax": "bootstrap: [MyAppComponent]",
+          "bold": [
+            "bootstrap:"
+          ],
+          "description": "<p>List of components to bootstrap when this module is bootstrapped.</p>\n"
+        }
+      ],
+      "index": 1
+    },
+    {
+      "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, for example, &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, for example, &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 *myUnless=\"myExpression\">...</p>",
+          "bold": [
+            "*myUnless"
+          ],
+          "description": "<p>The <code>*</code> symbol turns the current element into an embedded template. Equivalent to:\n<code>&lt;template [myUnless]=&quot;myExpression&quot;&gt;&lt;p&gt;...&lt;/p&gt;&lt;/template&gt;</code></p>\n"
+        },
+        {
+          "syntax": "<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>",
+          "bold": [
+            "{{cardNumber | myCardNumberFormatter}}"
+          ],
+          "description": "<p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>myCardNumberFormatter</code>.</p>\n"
+        },
+        {
+          "syntax": "<p>Employer: {{employer?.companyName}}</p>",
+          "bold": [
+            "{{employer?.companyName}}"
+          ],
+          "description": "<p>The safe navigation 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"
+        },
+        {
+          "syntax": "<svg:rect x=\"0\" y=\"0\" width=\"100\" height=\"100\"/>",
+          "bold": [
+            "svg:"
+          ],
+          "description": "<p>An SVG snippet template needs an <code>svg:</code> prefix on its root element to disambiguate the SVG element from an HTML component.</p>\n"
+        },
+        {
+          "syntax": "<svg>\n  <rect x=\"0\" y=\"0\" width=\"100\" height=\"100\"/>\n</svg>",
+          "bold": [
+            "svg"
+          ],
+          "description": "<p>An <code>&lt;svg&gt;</code> root element is detected as an SVG element automatically, without the prefix.</p>\n"
+        }
+      ],
+      "index": 2
+    },
+    {
+      "name": "Built-in directives",
+      "description": "<p>\nAvailable using the <code>ng.common.CommonModule</code> module</p>\n",
+      "items": [
+        {
+          "syntax": "<section *ngIf=\"showSection\">",
+          "bold": [
+            "*ngIf"
+          ],
+          "description": "<p>Removes or recreates a portion of the DOM tree based on the <code>showSection</code> expression.</p>\n"
+        },
+        {
+          "syntax": "<li *ngFor=\"let 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 [ngSwitchCase]=\"case1Exp\">...</template>\n  <template ngSwitchCase=\"case2LiteralString\">...</template>\n  <template ngSwitchDefault>...</template>\n</div>",
+          "bold": [
+            "[ngSwitch]",
+            "[ngSwitchCase]",
+            "ngSwitchCase",
+            "ngSwitchDefault"
+          ],
+          "description": "<p>Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of <code>conditionExpression</code>.</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 expression should return {class-name: true/false} map.</p>\n"
+        }
+      ],
+      "index": 3
+    },
+    {
+      "name": "Forms",
+      "description": "<p>\nAvailable using the <code>ng.forms.FormsModule</code> module</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": 4
+    },
+    {
+      "name": "Class decorators",
+      "description": "<p>\nAvailable from the <code>ng.core</code> namespace</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 MyDirective = ng.core.Directive({...}).Class({...})",
+          "bold": [
+            "ng.core.Directive({...})"
+          ],
+          "description": "<p>Declares that a class is a directive and provides metadata about the directive.</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(\n    {constructor: function() { }});\nvar MyService = ng.core.Class(\n    {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 to receive the injected services.\n</p>\n"
+        }
+      ],
+      "index": 5
+    },
+    {
+      "name": "Directive configuration",
+      "description": "<p>\n<code>ng.core.Directive({ property1: value1, ... }).Class({...})</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>List of dependency injection providers for this directive and its children.</p>\n"
+        }
+      ],
+      "index": 6
+    },
+    {
+      "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": "moduleId: module.id",
+          "bold": [
+            "moduleId:"
+          ],
+          "description": "<p>If set, the <code>templateUrl</code> and <code>styleUrl</code> are resolved relative to the component.</p>\n"
+        },
+        {
+          "syntax": "viewProviders: [MyService, { provide: ... }]",
+          "bold": [
+            "viewProviders:"
+          ],
+          "description": "<p>List 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 or 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 or external stylesheet URLs for styling the component’s view.</p>\n"
+        }
+      ],
+      "index": 7
+    },
+    {
+      "name": "Class field decorators for directives and components",
+      "description": "<p>\nAvailable from the <code>ng.core</code> namespace</p>\n",
+      "items": [
+        {
+          "syntax": "ng.core.Input(myProperty, myComponent);",
+          "bold": [
+            "ng.core.Input(",
+            ");"
+          ],
+          "description": "<p>Declares an input property that you can update via property binding (example:\n<code>&lt;my-cmp [myProperty]=&quot;someExpression&quot;&gt;</code>).</p>\n"
+        },
+        {
+          "syntax": "myEvent = new ng.core.EventEmitter();\nng.core.Output(myEvent, myComponent);",
+          "bold": [
+            "ng.core.Output(",
+            ");"
+          ],
+          "description": "<p>Declares an output property that fires events that you can subscribe to with an event binding (example: <code>&lt;my-cmp (myEvent)=&quot;doSomething()&quot;&gt;</code>).</p>\n"
+        },
+        {
+          "syntax": "ng.core.HostBinding('[class.valid]',\n    'isValid', myComponent);",
+          "bold": [
+            "ng.core.HostBinding('[class.valid]', 'isValid'",
+            ");"
+          ],
+          "description": "<p>Binds a host element property (here, the CSS class <code>valid</code>) to a directive/component property (<code>isValid</code>).</p>\n"
+        },
+        {
+          "syntax": "ng.core.HostListener('click',\n    ['$event'], onClick(e) {...}, myComponent);",
+          "bold": [
+            "ng.core.HostListener('click', ['$event'], onClick(e)",
+            ");"
+          ],
+          "description": "<p>Subscribes to a host element event (<code>click</code>) with a directive/component method (<code>onClick</code>), optionally passing an argument (<code>$event</code>).</p>\n"
+        },
+        {
+          "syntax": "ng.core.ContentChild(myPredicate,\n    'myChildComponent', myComponent);",
+          "bold": [
+            "ng.core.ContentChild(myPredicate,",
+            ");"
+          ],
+          "description": "<p>Binds the first result of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponent</code>) of the class.</p>\n"
+        },
+        {
+          "syntax": "ng.core.ContentChildren(myPredicate,\n    'myChildComponents', myComponent);",
+          "bold": [
+            "ng.core.ContentChildren(myPredicate,",
+            ");"
+          ],
+          "description": "<p>Binds the results of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponents</code>) of the class.</p>\n"
+        },
+        {
+          "syntax": "ng.core.ViewChild(myPredicate,\n    'myChildComponent', myComponent);",
+          "bold": [
+            "ng.core.ViewChild(myPredicate,",
+            ");"
+          ],
+          "description": "<p>Binds the first result of the component view query (<code>myPredicate</code>) to a property (<code>myChildComponent</code>) of the class. Not available for directives.</p>\n"
+        },
+        {
+          "syntax": "ng.core.ViewChildren(myPredicate,\n    'myChildComponents', myComponent);",
+          "bold": [
+            "ng.core.ViewChildren(myPredicate,",
+            ");"
+          ],
+          "description": "<p>Binds the results of the component view query (<code>myPredicate</code>) to a property (<code>myChildComponents</code>) of the class. Not available for directives.</p>\n"
+        }
+      ],
+      "index": 8
+    },
+    {
+      "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>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 <code>ngOnChanges</code>.</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 <code>ngOnInit</code> 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 <code>ngAfterContentInit</code> 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": 9
+    },
+    {
+      "name": "Dependency injection configuration",
+      "description": "",
+      "items": [
+        {
+          "syntax": "{ provide: MyService, useClass: MyMockService }",
+          "bold": [
+            "provide",
+            "useClass"
+          ],
+          "description": "<p>Sets or overrides the provider for <code>MyService</code> to the <code>MyMockService</code> class.</p>\n"
+        },
+        {
+          "syntax": "{ provide: MyService, useFactory: myFactory }",
+          "bold": [
+            "provide",
+            "useFactory"
+          ],
+          "description": "<p>Sets or overrides the provider for <code>MyService</code> to the <code>myFactory</code> factory function.</p>\n"
+        },
+        {
+          "syntax": "{ provide: MyValue, useValue: 41 }",
+          "bold": [
+            "provide",
+            "useValue"
+          ],
+          "description": "<p>Sets or overrides the provider for <code>MyValue</code> to the value <code>41</code>.</p>\n"
+        }
+      ],
+      "index": 10
+    },
+    {
+      "name": "Routing and navigation",
+      "description": "<p>\nAvailable from the <code>ng.router</code> namespace</p>\n",
+      "items": [
+        {
+          "syntax": "var routes = [\n  { path: '', component: HomeComponent },\n  { path: ':routeParam', component: MyComponent },\n  { path: 'staticPath', component: ... },\n  { path: '**', component: ... },\n  { path: 'oldPath', redirectTo: '/staticPath' },\n  { path: ..., component: ..., data: { message: 'Custom' } }\n]);\n\nvar routing = ng.router.RouterModule.forRoot(routes);",
+          "bold": [
+            "ng.router.Routes"
+          ],
+          "description": "<p>Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.</p>\n"
+        },
+        {
+          "syntax": "\n<router-outlet></router-outlet>\n<router-outlet name=\"aux\"></router-outlet>\n",
+          "bold": [
+            "router-outlet"
+          ],
+          "description": "<p>Marks the location to load the component of the active route.</p>\n"
+        },
+        {
+          "syntax": "\n<a routerLink=\"/path\">\n<a [routerLink]=\"[ '/path', routeParam ]\">\n<a [routerLink]=\"[ '/path', { matrixParam: 'value' } ]\">\n<a [routerLink]=\"[ '/path' ]\" [queryParams]=\"{ page: 1 }\">\n<a [routerLink]=\"[ '/path' ]\" fragment=\"anchor\">\n",
+          "bold": [
+            "[routerLink]"
+          ],
+          "description": "<p>Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the <code>/</code> prefix; for a child route, use the <code>./</code>prefix; for a sibling or parent, use the <code>../</code> prefix.</p>\n"
+        },
+        {
+          "syntax": "<a [routerLink]=\"[ '/path' ]\" routerLinkActive=\"active\">",
+          "bold": [],
+          "description": "<p>The provided classes are added to the element when the <code>routerLink</code> becomes the current active route.</p>\n"
+        },
+        {
+          "syntax": "var CanActivateGuard = ng.core.Class({\n  canActivate: function(route, state) {\n    // return Observable/Promise boolean or boolean\n  }\n});\n\n{ path: ..., canActivate: [CanActivateGuard] }",
+          "bold": [
+            "CanActivate"
+          ],
+          "description": "<p>An interface for defining a class that the router should call first to determine if it should activate this component. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>\n"
+        },
+        {
+          "syntax": "var CanDeactivateGuard = ng.core.Class({\n  canDeactivate: function(component, route, state) {\n    // return Observable/Promise boolean or boolean\n  }\n});\n\n{ path: ..., canDeactivate: [CanDeactivateGuard] }",
+          "bold": [
+            "CanDeactivate"
+          ],
+          "description": "<p>An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>\n"
+        },
+        {
+          "syntax": "var CanActivateChildGuard = ng.core.Class({\n  canActivateChild: function(route, state) {\n    // return Observable/Promise boolean or boolean\n  }\n});\n\n{ path: ..., canActivateChild: [CanActivateChildGuard],\n    children: ... }",
+          "bold": [
+            "CanActivateChild"
+          ],
+          "description": "<p>An interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>\n"
+        },
+        {
+          "syntax": "var ResolveGuard = ng.core.Class({\n  resolve: function(route, state) {\n    // return Observable/Promise value or value\n  }\n});\n\n{ path: ..., resolve: [ResolveGuard] }",
+          "bold": [
+            "Resolve"
+          ],
+          "description": "<p>An interface for defining a class that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value.</p>\n"
+        },
+        {
+          "syntax": "var CanLoadGuard = ng.core.Class({\n  canLoad: function(route) {\n    // return Observable/Promise boolean or boolean\n  }\n});\n\n{ path: ..., canLoad: [CanLoadGuard], loadChildren: ... }",
+          "bold": [
+            "CanLoad"
+          ],
+          "description": "<p>An interface for defining a class that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>\n"
+        }
+      ],
+      "index": 11
+    }
+  ]
+}
\ No newline at end of file
diff --git a/public/docs/ts/latest/guide/cheatsheet-cn.json b/public/docs/ts/latest/guide/cheatsheet-cn.json
index f1ecfc3bf0..6b50dbb753 100644
--- a/public/docs/ts/latest/guide/cheatsheet-cn.json
+++ b/public/docs/ts/latest/guide/cheatsheet-cn.json
@@ -1,20 +1,20 @@
 {
   "currentEnvironment": "TypeScript",
   "version": {
-    "raw": "2.0.0",
+    "raw": "2.2.0-beta.0",
     "major": 2,
-    "minor": 0,
-    "patch": 1,
+    "minor": 2,
+    "patch": 0,
     "prerelease": [
       "local"
     ],
-    "build": "sha.efc7326",
-    "version": "2.0.1-local",
+    "build": "sha.f6eeb79",
+    "version": "2.2.0-local",
     "codeName": "snapshot",
     "isSnapshot": true,
-    "full": "2.0.1-local+sha.efc7326",
+    "full": "2.2.0-local+sha.f6eeb79",
     "branch": "master",
-    "commitSHA": "efc7326926b826dd33eeb43db391afd7c0b03ab8"
+    "commitSHA": "f6eeb79d28bab55ae6d025f37368c4107bbcb408"
   },
   "sections": [
     {
@@ -26,7 +26,7 @@
           "bold": [
             "platformBrowserDynamic().bootstrapModule"
           ],
-          "description": "<p>使用JIT编译器引导一个AppModule模块定义的应用</p>\n"
+          "description": "<p>从一个指定的<code>NgModule</code>中使用根组件引导应用</p>\n"
         }
       ],
       "index": 0
@@ -167,7 +167,7 @@
           "bold": [
             "{{employer?.companyName}}"
           ],
-          "description": "<p>安全导航运算符(<code>?.</code>)表示<code>employer</code>字段是可选的，如果它是<code>undefined</code>，表达式剩下的部分将被忽略</p>\n"
+          "description": "<p>安全导航运算符(<code>?</code>)表示<code>employer</code>字段是可选的，如果它是<code>undefined</code>，表达式剩下的部分将被忽略</p>\n"
         },
         {
           "syntax": "<svg:rect x=\"0\" y=\"0\" width=\"100\" height=\"100\"/>",
@@ -181,7 +181,7 @@
           "bold": [
             "svg"
           ],
-          "description": "<p><code>&lt;svg&gt;</code>元素在无需前缀的情况下，也能被自动检测为SVG。</p>\n"
+          "description": "<p><code>&lt;svg&gt;</code>根元素在无需前缀的情况下，也能被自动检测为SVG。</p>\n"
         }
       ],
       "index": 2
@@ -354,42 +354,42 @@
           "bold": [
             "@HostBinding('[class.valid]')"
           ],
-          "description": "<p>把宿主元素的属性(比如CSS类：valid)绑定到指令/组件的属性(比如：isValid)。</p>\n"
+          "description": "<p>把宿主元素的属性(比如CSS类：<code>valid</code>)绑定到指令/组件的属性(比如：<code>isValid</code>)。</p>\n"
         },
         {
           "syntax": "@HostListener('click', ['$event']) onClick(e) {...}",
           "bold": [
             "@HostListener('click', ['$event'])"
           ],
-          "description": "<p>通过指令/组件的方法(例如onClick)订阅宿主元素的事件(例如click)，可选传入一个参数($event)。</p>\n"
+          "description": "<p>通过指令/组件的方法(例如<code>onClick</code>)订阅宿主元素的事件(例如<code>click</code>)，可选传入一个参数(<code>$event</code>)。</p>\n"
         },
         {
           "syntax": "@ContentChild(myPredicate) myChildComponent;",
           "bold": [
             "@ContentChild(myPredicate)"
           ],
-          "description": "<p>把组件内容查询(myPredicate)的第一个结果绑定到类的myChildComponent属性。</p>\n"
+          "description": "<p>把组件内容查询(<code>myPredicate</code>)的第一个结果绑定到类的<code>myChildComponent</code>属性。</p>\n"
         },
         {
           "syntax": "@ContentChildren(myPredicate) myChildComponents;",
           "bold": [
             "@ContentChildren(myPredicate)"
           ],
-          "description": "<p>把组件内容查询(myPredicate)的全部结果，绑定到类的myChildComponents属性。</p>\n"
+          "description": "<p>把组件内容查询(<code>myPredicate</code>)的全部结果，绑定到类的<code>myChildComponents</code>属性。</p>\n"
         },
         {
           "syntax": "@ViewChild(myPredicate) myChildComponent;",
           "bold": [
             "@ViewChild(myPredicate)"
           ],
-          "description": "<p>把组件视图查询(myPredicate)的第一个结果绑定到类的myChildComponent属性。对指令无效。</p>\n"
+          "description": "<p>把组件视图查询(<code>myPredicate</code>)的第一个结果绑定到类的<code>myChildComponent</code>属性。对指令无效。</p>\n"
         },
         {
           "syntax": "@ViewChildren(myPredicate) myChildComponents;",
           "bold": [
             "@ViewChildren(myPredicate)"
           ],
-          "description": "<p>把组件视图查询(myPredicate)的全部结果绑定到类的myChildComponents属性。对指令无效。</p>\n"
+          "description": "<p>把组件视图查询(<code>myPredicate</code>)的全部结果绑定到类的<code>myChildComponents</code>属性。对指令无效。</p>\n"
         }
       ],
       "index": 8
@@ -417,7 +417,7 @@
           "bold": [
             "ngOnInit()"
           ],
-          "description": "<p>在执行构造函数、初始化输入属性、第一次调用完ngOnChanges之后调用。</p>\n"
+          "description": "<p>在执行构造函数、初始化输入属性、第一次调用完<code>ngOnChanges</code>之后调用。</p>\n"
         },
         {
           "syntax": "ngDoCheck() { ... }",
@@ -431,7 +431,7 @@
           "bold": [
             "ngAfterContentInit()"
           ],
-          "description": "<p>当组件或指令的内容已经初始化、ngOnInit完成之后调用。</p>\n"
+          "description": "<p>当组件或指令的内容已经初始化、<code>ngOnInit</code>完成之后调用。</p>\n"
         },
         {
           "syntax": "ngAfterContentChecked() { ... }",
@@ -445,7 +445,7 @@
           "bold": [
             "ngAfterViewInit()"
           ],
-          "description": "<p>当组件的视图已经初始化完毕，每次ngAfterContentInit之后被调用。只适用于组件。</p>\n"
+          "description": "<p>当组件的视图已经初始化完毕，每次<code>ngAfterContentInit</code>之后被调用。只适用于组件。</p>\n"
         },
         {
           "syntax": "ngAfterViewChecked() { ... }",
@@ -474,7 +474,7 @@
             "provide",
             "useClass"
           ],
-          "description": "<p>把MyService类的提供商设置或改写为MyMockService。</p>\n"
+          "description": "<p>把<code>MyService</code>类的提供商设置或改写为<code>MyMockService</code>。</p>\n"
         },
         {
           "syntax": "{ provide: MyService, useFactory: myFactory }",
@@ -482,7 +482,7 @@
             "provide",
             "useFactory"
           ],
-          "description": "<p>把MyService的提供商设置或改写为myFactory工厂函数。</p>\n"
+          "description": "<p>把<code>MyService</code>的提供商设置或改写为<code>myFactory</code>工厂函数。</p>\n"
         },
         {
           "syntax": "{ provide: MyValue, useValue: 41 }",
@@ -490,7 +490,7 @@
             "provide",
             "useValue"
           ],
-          "description": "<p>把MyValue的提供商设置或改写为值41。</p>\n"
+          "description": "<p>把<code>MyValue</code>的提供商设置或改写为值<code>41</code>。</p>\n"
         }
       ],
       "index": 10
@@ -518,7 +518,7 @@
           "bold": [
             "[routerLink]"
           ],
-          "description": "<p>基于路由指令创建指向不同视图的链接，由路由路径、必选参数、可选参数、查询参数和片段（fragment）组成。添加“/”前缀可以导航到根路由。添加“./”前缀可以导航到子路由。添加“../sibling”前缀可以导航到兄弟路由或父路由。</p>\n"
+          "description": "<p>基于路由指令创建指向不同视图的链接，由路由路径、必选参数、可选参数、查询参数和片段（fragment）组成。添加“<code>/</code>”前缀可以导航到根路由。添加“<code>./</code>”前缀可以导航到子路由。添加“<code>../</code>”前缀可以导航到兄弟路由或父路由。</p>\n"
         },
         {
           "syntax": "<a [routerLink]=\"[ '/path' ]\" routerLinkActive=\"active\">",
diff --git a/public/docs/ts/latest/guide/cheatsheet.json b/public/docs/ts/latest/guide/cheatsheet.json
new file mode 100644
index 0000000000..d724c4ab28
--- /dev/null
+++ b/public/docs/ts/latest/guide/cheatsheet.json
@@ -0,0 +1,567 @@
+{
+  "currentEnvironment": "TypeScript",
+  "version": {
+    "raw": "2.2.0-beta.0",
+    "major": 2,
+    "minor": 2,
+    "patch": 0,
+    "prerelease": [
+      "local"
+    ],
+    "build": "sha.f6eeb79",
+    "version": "2.2.0-local",
+    "codeName": "snapshot",
+    "isSnapshot": true,
+    "full": "2.2.0-local+sha.f6eeb79",
+    "branch": "master",
+    "commitSHA": "f6eeb79d28bab55ae6d025f37368c4107bbcb408"
+  },
+  "sections": [
+    {
+      "name": "Bootstrapping",
+      "description": "<p><code>import { platformBrowserDynamic } from &#39;@angular/platform-browser-dynamic&#39;;</code>\n</p>\n",
+      "items": [
+        {
+          "syntax": "platformBrowserDynamic().bootstrapModule(AppModule);",
+          "bold": [
+            "platformBrowserDynamic().bootstrapModule"
+          ],
+          "description": "<p>Bootstraps the app, using the root component from the specified <code>NgModule</code>. </p>\n"
+        }
+      ],
+      "index": 0
+    },
+    {
+      "name": "NgModules",
+      "description": "<p><code>import { NgModule } from &#39;@angular/core&#39;;</code>\n</p>\n",
+      "items": [
+        {
+          "syntax": "@NgModule({ declarations: ..., imports: ...,\n     exports: ..., providers: ..., bootstrap: ...})\nclass MyModule {}",
+          "bold": [
+            "NgModule"
+          ],
+          "description": "<p>Defines a module that contains components, directives, pipes, and providers.</p>\n"
+        },
+        {
+          "syntax": "declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]",
+          "bold": [
+            "declarations:"
+          ],
+          "description": "<p>List of components, directives, and pipes that belong to this module.</p>\n"
+        },
+        {
+          "syntax": "imports: [BrowserModule, SomeOtherModule]",
+          "bold": [
+            "imports:"
+          ],
+          "description": "<p>List of modules to import into this module. Everything from the imported modules\nis available to <code>declarations</code> of this module.</p>\n"
+        },
+        {
+          "syntax": "exports: [MyRedComponent, MyDatePipe]",
+          "bold": [
+            "exports:"
+          ],
+          "description": "<p>List of components, directives, and pipes visible to modules that import this module.</p>\n"
+        },
+        {
+          "syntax": "providers: [MyService, { provide: ... }]",
+          "bold": [
+            "providers:"
+          ],
+          "description": "<p>List of dependency injection providers visible both to the contents of this module and to importers of this module.</p>\n"
+        },
+        {
+          "syntax": "bootstrap: [MyAppComponent]",
+          "bold": [
+            "bootstrap:"
+          ],
+          "description": "<p>List of components to bootstrap when this module is bootstrapped.</p>\n"
+        }
+      ],
+      "index": 1
+    },
+    {
+      "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, for example, &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, for example, &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 *myUnless=\"myExpression\">...</p>",
+          "bold": [
+            "*myUnless"
+          ],
+          "description": "<p>The <code>*</code> symbol turns the current element into an embedded template. Equivalent to:\n<code>&lt;template [myUnless]=&quot;myExpression&quot;&gt;&lt;p&gt;...&lt;/p&gt;&lt;/template&gt;</code></p>\n"
+        },
+        {
+          "syntax": "<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>",
+          "bold": [
+            "{{cardNumber | myCardNumberFormatter}}"
+          ],
+          "description": "<p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>myCardNumberFormatter</code>.</p>\n"
+        },
+        {
+          "syntax": "<p>Employer: {{employer?.companyName}}</p>",
+          "bold": [
+            "{{employer?.companyName}}"
+          ],
+          "description": "<p>The safe navigation 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"
+        },
+        {
+          "syntax": "<svg:rect x=\"0\" y=\"0\" width=\"100\" height=\"100\"/>",
+          "bold": [
+            "svg:"
+          ],
+          "description": "<p>An SVG snippet template needs an <code>svg:</code> prefix on its root element to disambiguate the SVG element from an HTML component.</p>\n"
+        },
+        {
+          "syntax": "<svg>\n  <rect x=\"0\" y=\"0\" width=\"100\" height=\"100\"/>\n</svg>",
+          "bold": [
+            "svg"
+          ],
+          "description": "<p>An <code>&lt;svg&gt;</code> root element is detected as an SVG element automatically, without the prefix.</p>\n"
+        }
+      ],
+      "index": 2
+    },
+    {
+      "name": "Built-in directives",
+      "description": "<p><code>import { CommonModule } from &#39;@angular/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 <code>showSection</code> expression.</p>\n"
+        },
+        {
+          "syntax": "<li *ngFor=\"let 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 [ngSwitchCase]=\"case1Exp\">...</template>\n  <template ngSwitchCase=\"case2LiteralString\">...</template>\n  <template ngSwitchDefault>...</template>\n</div>",
+          "bold": [
+            "[ngSwitch]",
+            "[ngSwitchCase]",
+            "ngSwitchCase",
+            "ngSwitchDefault"
+          ],
+          "description": "<p>Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of <code>conditionExpression</code>.</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 expression should return {class-name: true/false} map.</p>\n"
+        }
+      ],
+      "index": 3
+    },
+    {
+      "name": "Forms",
+      "description": "<p><code>import { FormsModule } from &#39;@angular/forms&#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": 4
+    },
+    {
+      "name": "Class decorators",
+      "description": "<p><code>import { Directive, ... } from &#39;@angular/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": "@Directive({...})\nclass MyDirective() {}",
+          "bold": [
+            "@Directive({...})"
+          ],
+          "description": "<p>Declares that a class is a directive and provides metadata about the directive.</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": 5
+    },
+    {
+      "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>List of dependency injection providers for this directive and its children.</p>\n"
+        }
+      ],
+      "index": 6
+    },
+    {
+      "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": "moduleId: module.id",
+          "bold": [
+            "moduleId:"
+          ],
+          "description": "<p>If set, the <code>templateUrl</code> and <code>styleUrl</code> are resolved relative to the component.</p>\n"
+        },
+        {
+          "syntax": "viewProviders: [MyService, { provide: ... }]",
+          "bold": [
+            "viewProviders:"
+          ],
+          "description": "<p>List 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 or 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 or external stylesheet URLs for styling the component’s view.</p>\n"
+        }
+      ],
+      "index": 7
+    },
+    {
+      "name": "Class field decorators for directives and components",
+      "description": "<p><code>import { Input, ... } from &#39;@angular/core&#39;;</code>\n</p>\n",
+      "items": [
+        {
+          "syntax": "@Input() myProperty;",
+          "bold": [
+            "@Input()"
+          ],
+          "description": "<p>Declares an input property that you can update via property binding (example:\n<code>&lt;my-cmp [myProperty]=&quot;someExpression&quot;&gt;</code>).</p>\n"
+        },
+        {
+          "syntax": "@Output() myEvent = new EventEmitter();",
+          "bold": [
+            "@Output()"
+          ],
+          "description": "<p>Declares an output property that fires events that you can subscribe to with an event binding (example: <code>&lt;my-cmp (myEvent)=&quot;doSomething()&quot;&gt;</code>).</p>\n"
+        },
+        {
+          "syntax": "@HostBinding('[class.valid]') isValid;",
+          "bold": [
+            "@HostBinding('[class.valid]')"
+          ],
+          "description": "<p>Binds a host element property (here, the CSS class <code>valid</code>) to a directive/component property (<code>isValid</code>).</p>\n"
+        },
+        {
+          "syntax": "@HostListener('click', ['$event']) onClick(e) {...}",
+          "bold": [
+            "@HostListener('click', ['$event'])"
+          ],
+          "description": "<p>Subscribes to a host element event (<code>click</code>) with a directive/component method (<code>onClick</code>), optionally passing an argument (<code>$event</code>).</p>\n"
+        },
+        {
+          "syntax": "@ContentChild(myPredicate) myChildComponent;",
+          "bold": [
+            "@ContentChild(myPredicate)"
+          ],
+          "description": "<p>Binds the first result of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponent</code>) of the class.</p>\n"
+        },
+        {
+          "syntax": "@ContentChildren(myPredicate) myChildComponents;",
+          "bold": [
+            "@ContentChildren(myPredicate)"
+          ],
+          "description": "<p>Binds the results of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponents</code>) of the class.</p>\n"
+        },
+        {
+          "syntax": "@ViewChild(myPredicate) myChildComponent;",
+          "bold": [
+            "@ViewChild(myPredicate)"
+          ],
+          "description": "<p>Binds the first result of the component view query (<code>myPredicate</code>) to a property (<code>myChildComponent</code>) 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 (<code>myPredicate</code>) to a property (<code>myChildComponents</code>) of the class. Not available for directives.</p>\n"
+        }
+      ],
+      "index": 8
+    },
+    {
+      "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>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 <code>ngOnChanges</code>.</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 <code>ngOnInit</code> 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 <code>ngAfterContentInit</code> 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": 9
+    },
+    {
+      "name": "Dependency injection configuration",
+      "description": "",
+      "items": [
+        {
+          "syntax": "{ provide: MyService, useClass: MyMockService }",
+          "bold": [
+            "provide",
+            "useClass"
+          ],
+          "description": "<p>Sets or overrides the provider for <code>MyService</code> to the <code>MyMockService</code> class.</p>\n"
+        },
+        {
+          "syntax": "{ provide: MyService, useFactory: myFactory }",
+          "bold": [
+            "provide",
+            "useFactory"
+          ],
+          "description": "<p>Sets or overrides the provider for <code>MyService</code> to the <code>myFactory</code> factory function.</p>\n"
+        },
+        {
+          "syntax": "{ provide: MyValue, useValue: 41 }",
+          "bold": [
+            "provide",
+            "useValue"
+          ],
+          "description": "<p>Sets or overrides the provider for <code>MyValue</code> to the value <code>41</code>.</p>\n"
+        }
+      ],
+      "index": 10
+    },
+    {
+      "name": "Routing and navigation",
+      "description": "<p><code>import { Routes, RouterModule, ... } from &#39;@angular/router&#39;;</code>\n</p>\n",
+      "items": [
+        {
+          "syntax": "const routes: Routes = [\n  { path: '', component: HomeComponent },\n  { path: 'path/:routeParam', component: MyComponent },\n  { path: 'staticPath', component: ... },\n  { path: '**', component: ... },\n  { path: 'oldPath', redirectTo: '/staticPath' },\n  { path: ..., component: ..., data: { message: 'Custom' } }\n]);\n\nconst routing = RouterModule.forRoot(routes);",
+          "bold": [
+            "Routes"
+          ],
+          "description": "<p>Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.</p>\n"
+        },
+        {
+          "syntax": "\n<router-outlet></router-outlet>\n<router-outlet name=\"aux\"></router-outlet>\n",
+          "bold": [
+            "router-outlet"
+          ],
+          "description": "<p>Marks the location to load the component of the active route.</p>\n"
+        },
+        {
+          "syntax": "\n<a routerLink=\"/path\">\n<a [routerLink]=\"[ '/path', routeParam ]\">\n<a [routerLink]=\"[ '/path', { matrixParam: 'value' } ]\">\n<a [routerLink]=\"[ '/path' ]\" [queryParams]=\"{ page: 1 }\">\n<a [routerLink]=\"[ '/path' ]\" fragment=\"anchor\">\n",
+          "bold": [
+            "[routerLink]"
+          ],
+          "description": "<p>Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the <code>/</code> prefix; for a child route, use the <code>./</code>prefix; for a sibling or parent, use the <code>../</code> prefix.</p>\n"
+        },
+        {
+          "syntax": "<a [routerLink]=\"[ '/path' ]\" routerLinkActive=\"active\">",
+          "bold": [],
+          "description": "<p>The provided classes are added to the element when the <code>routerLink</code> becomes the current active route.</p>\n"
+        },
+        {
+          "syntax": "class CanActivateGuard implements CanActivate {\n    canActivate(\n      route: ActivatedRouteSnapshot,\n      state: RouterStateSnapshot\n    ): Observable<boolean>|Promise<boolean>|boolean { ... }\n}\n\n{ path: ..., canActivate: [CanActivateGuard] }",
+          "bold": [
+            "CanActivate"
+          ],
+          "description": "<p>An interface for defining a class that the router should call first to determine if it should activate this component. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>\n"
+        },
+        {
+          "syntax": "class CanDeactivateGuard implements CanDeactivate<T> {\n    canDeactivate(\n      component: T,\n      route: ActivatedRouteSnapshot,\n      state: RouterStateSnapshot\n    ): Observable<boolean>|Promise<boolean>|boolean { ... }\n}\n\n{ path: ..., canDeactivate: [CanDeactivateGuard] }",
+          "bold": [
+            "CanDeactivate"
+          ],
+          "description": "<p>An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>\n"
+        },
+        {
+          "syntax": "class CanActivateChildGuard implements CanActivateChild {\n    canActivateChild(\n      route: ActivatedRouteSnapshot,\n      state: RouterStateSnapshot\n    ): Observable<boolean>|Promise<boolean>|boolean { ... }\n}\n\n{ path: ..., canActivateChild: [CanActivateGuard],\n    children: ... }",
+          "bold": [
+            "CanActivateChild"
+          ],
+          "description": "<p>An interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>\n"
+        },
+        {
+          "syntax": "class ResolveGuard implements Resolve<T> {\n    resolve(\n      route: ActivatedRouteSnapshot,\n      state: RouterStateSnapshot\n    ): Observable<any>|Promise<any>|any { ... }\n}\n\n{ path: ..., resolve: [ResolveGuard] }",
+          "bold": [
+            "Resolve"
+          ],
+          "description": "<p>An interface for defining a class that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value.</p>\n"
+        },
+        {
+          "syntax": "class CanLoadGuard implements CanLoad {\n    canLoad(\n      route: Route\n    ): Observable<boolean>|Promise<boolean>|boolean { ... }\n}\n\n{ path: ..., canLoad: [CanLoadGuard], loadChildren: ... }",
+          "bold": [
+            "CanLoad"
+          ],
+          "description": "<p>An interface for defining a class that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>\n"
+        }
+      ],
+      "index": 11
+    }
+  ]
+}
\ No newline at end of file