docs(*): more cheatsheet docs

modules/angular2/docs/cheatsheet/bootstrapping.md

@@ -1,5 +1,6 @@
 @cheatsheetSection
-@name Bootstrapping
+Bootstrapping
+@cheatsheetIndex 0
 @description
 `import {bootstrap} from 'angular2/angular2';`
 

modules/angular2/docs/cheatsheet/built-in-directives.md

@@ -1,5 +1,6 @@
 @cheatsheetSection
-@name Built-in directives
+Built-in directives
+@cheatsheetIndex 1
 @description
 `import {NgIf, ...} from 'angular2/angular2';`
 

modules/angular2/docs/cheatsheet/class-decorators.md

@@ -1,4 +1,6 @@
-@cheatsheetSection Class decorators
+@cheatsheetSection
+Class decorators
+@cheatsheetIndex 3
 @description
 `import {Directive, ...} from 'angular2/angular2';`
 

modules/angular2/docs/cheatsheet/component-configuration.md

@@ -1,6 +1,9 @@
-@cheatsheetSection Component configuration
+@cheatsheetSection
+Component configuration
+@cheatsheetIndex 5
 @description
-`@Component extends @Directive`, so the @Directive configuration applies to components as well)
+`@Component` extends `@Directive`,
+so the `@Directive` configuration applies to components as well
 
 @cheatsheetItem
 `viewProviders: [MyService, provide(...)]`|`viewProviders:`
@@ -8,12 +11,14 @@ Array of dependency injection providers scoped to this component's view.
 
 
 @cheatsheetItem
-`template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'`|`template:`|`templateUrl:`
+`template: 'Hello {{name}}'
+templateUrl: 'my-component.html'`|`template:`|`templateUrl:`
 Inline template / external template url of the component's view.
 
 
 @cheatsheetItem
-`styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']`|`styles:`|`styleUrls:`
+`styles: ['.primary {color: red}']
+styleUrls: ['my-component.css']`|`styles:`|`styleUrls:`
 List of inline css styles / external stylesheet urls for styling component’s view.
 
 

modules/angular2/docs/cheatsheet/dependency-injection.md

@@ -0,0 +1,20 @@
+@cheatsheetSection
+Dependency injection configuration
+@cheatsheetIndex 7
+@description
+`import {provide} from 'angular2/angular2';`
+
+@cheatsheetItem
+`provide(MyService, {useClass: MyMockService})``provide`|`useClass`
+Sets or overrides the provider for MyService to the MyMockService class.
+
+
+@cheatsheetItem
+`provide(MyService, {useFactory: myFactory})``provide`|`useFactory`
+Sets or overrides the provider for MyService to the myFactory factory function.
+
+
+@cheatsheetItem
+`provide(MyValue, {useValue: 41})``provide`|`useValue`
+Sets or overrides the provider for MyValue to the value 41.
+

modules/angular2/docs/cheatsheet/directive-and-component-decorators.md

@@ -1,55 +1,46 @@
-@cheatsheetSection Class field decorators for directives and components
+@cheatsheetSection
+Class field decorators for directives and components
+@cheatsheetIndex 6
 @description
 `import {Input, ...} from 'angular2/angular2';`
 
 @cheatsheetItem
 `@Input() myProperty;`|`@Input()`
-
 Declares an input property that we can update via property binding, e.g.
 `<my-cmp [my-property]="someExpression">`
 
 
-
 @cheatsheetItem
 `@Output() myEvent = new EventEmitter();`|`@Output()`
-
 Declares an output property that fires events to which we can subscribe with an event binding, e.g. `<my-cmp (my-event)="doSomething()">`
 
 
-
 @cheatsheetItem
-`@HostBinding('[class.valid]') isValid;`|`@HostBinding(\'[class.valid]\')`
+`@HostBinding('[class.valid]') isValid;`|`@HostBinding('[class.valid]')`
-
 Binds a host element property (e.g. css class valid) to directive/component property (e.g. isValid)
 
 
 
 @cheatsheetItem
 `@HostListener('click', ['$event']) onClick(e) {...}`|`@HostListener('click', ['$event'])`
-
 Subscribes to a host element event (e.g. click) with a directive/component method (e.g., onClick), optionally passing an argument ($event)
 
 
 @cheatsheetItem
 `@ContentChild(myPredicate) myChildComponent;`|`@ContentChild(myPredicate)`
-
 Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.
 
 
-
 @cheatsheetItem
 `@ContentChildren(myPredicate) myChildComponents;`|`@ContentChildren(myPredicate)`
-
 Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.
 
 
 @cheatsheetItem
 `@ViewChild(myPredicate) myChildComponent;`|`@ViewChild(myPredicate)`
-
 Binds the first result of the component view query (myPredicate) to the myChildComponent property of the class. Not available for directives.
 
 
 @cheatsheetItem
 `@ViewChildren(myPredicate) myChildComponents;`|`@ViewChildren(myPredicate)`
-
 Binds the results of the component view query (myPredicate) to the myChildComponents property of the class. Not available for directives.

modules/angular2/docs/cheatsheet/directive-configuration.md

@@ -1,5 +1,7 @@
-@cheatsheetSection @Directive configuration
+@cheatsheetSection
-@descripton
+Directive configuration
+@cheatsheetIndex 4
+@description
 `@Directive({ property1: value1, ... }) )`
 
 @cheatsheetItem

modules/angular2/docs/cheatsheet/forms.md

@@ -1,8 +1,9 @@
 @cheatsheetSection
-@name Forms
+Forms
+@cheatsheetIndex 2
 @description
 `import {FORM_DIRECTIVES} from 'angular2/angular2';`
 
 @cheatsheetItem
-`<input [(ng-model)]=\"userName\">`|`[(ng-model)]`
+`<input [(ng-model)]="userName">`|`[(ng-model)]`
 Provides two-way data-binding, parsing and validation for form controls.

modules/angular2/docs/cheatsheet/lifecycle hooks.md

@@ -0,0 +1,49 @@
+@cheatsheetSection
+Directive and component change detection and lifecycle hooks
+@cheatsheetIndex 6
+@description
+(implemented as class methods)
+
+@cheatsheetItem
+`constructor(myService: MyService, ...) { ... }`|`constructor(myService: MyService, ...)`
+The class constructor is called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
+
+
+@cheatsheetItem
+`onChanges(changeRecord) { ... }`|`onChanges(changeRecord)`
+Called after every change to input properties and before processing content or child views.
+
+
+@cheatsheetItem
+`onInit() { ... }`|`onInit()`
+Called after the constructor, initializing input properties, and the first call to onChanges.
+
+
+@cheatsheetItem
+`doCheck() { ... }`|`doCheck()`
+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.
+
+
+@cheatsheetItem
+`afterContentInit() { ... }`|`afterContentInit()`
+Called after onInit when the component's or directive's content has been initialized.
+
+
+@cheatsheetItem
+`afterContentChecked() { ... }`|`afterContentChecked()`
+Called after every check of the component's or directive's content.
+
+
+@cheatsheetItem
+`afterViewInit() { ... }`|`afterViewInit()`
+Called after onContentInit when the component's view has been initialized. Applies to components only.
+
+
+@cheatsheetItem
+`afterViewChecked() { ... }`|`afterViewChecked()`
+Called after every check of the component's view. Applies to components only.
+
+
+@cheatsheetItem
+`onDestroy() { ... }`|`onDestroy()`
+Called once, before the instance is destroyed.

modules/angular2/docs/cheatsheet/routing.md

@@ -0,0 +1,55 @@
+@cheatsheetSection
+Routing and navigation
+@cheatsheetIndex 8
+@description
+`import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...} from 'angular2/router';`
+
+
+@cheatsheetItem
+`@RouteConfig([
+  { path: '/:myParam', component: MyComponent, as: 'MyCmp' },
+  { path: '/staticPath', component: ..., as: ...},
+  { path: '/*wildCardParam', component: ..., as: ...}
+])
+class MyComponent() {}`|`@RouteConfig`
+Configures routes for the decorated component. Supports static, parameterized and wildcard routes.
+
+
+@cheatsheetItem
+`<router-outlet></router-outlet>`|`router-outlet`
+Marks the location to load the component of the active route.
+
+
+@cheatsheetItem
+`<a [router-link]="[ '/MyCmp', {myParam: 'value' } ]">`|`[router-link]`
+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 '/' prefix to navigate to a root route; add the './' prefix for a child route.
+
+
+@cheatsheetItem
+`@CanActivate(() => { ... })class MyComponent() {}`|`@CanActivate`
+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.
+
+
+@cheatsheetItem
+`onActivate(nextInstruction, prevInstruction) { ... }`|`onActivate`
+After navigating to a component, the router calls component's onActivate method (if defined).
+
+
+@cheatsheetItem
+`canReuse(nextInstruction, prevInstruction) { ... }`|`canReuse`
+The router calls a component's canReuse 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.
+
+
+@cheatsheetItem
+`onReuse(nextInstruction, prevInstruction) { ... }`|`onReuse`
+The router calls the component's onReuse method (if defined) when it re-uses a component instance.
+
+
+@cheatsheetItem
+`canDeactivate(nextInstruction, prevInstruction) { ... }`|`canDeactivate`
+The router calls the canDeactivate 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.
+
+
+@cheatsheetItem
+`onDeactivate(nextInstruction, prevInstruction) { ... }`|`onDeactivate`
+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.