diff --git a/modules/angular2/docs/cheatsheet/bootstrapping.md b/modules/angular2/docs/cheatsheet/bootstrapping.md index b863e09470..cbf61c78e4 100644 --- a/modules/angular2/docs/cheatsheet/bootstrapping.md +++ b/modules/angular2/docs/cheatsheet/bootstrapping.md @@ -1,5 +1,6 @@ @cheatsheetSection -@name Bootstrapping +Bootstrapping +@cheatsheetIndex 0 @description `import {bootstrap} from 'angular2/angular2';` diff --git a/modules/angular2/docs/cheatsheet/built-in-directives.md b/modules/angular2/docs/cheatsheet/built-in-directives.md index d669bd88e6..4ceba19649 100644 --- a/modules/angular2/docs/cheatsheet/built-in-directives.md +++ b/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';` diff --git a/modules/angular2/docs/cheatsheet/class-decorators.md b/modules/angular2/docs/cheatsheet/class-decorators.md index fce211feb2..c2cce602af 100644 --- a/modules/angular2/docs/cheatsheet/class-decorators.md +++ b/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';` diff --git a/modules/angular2/docs/cheatsheet/component-configuration.md b/modules/angular2/docs/cheatsheet/component-configuration.md index ce06c71bca..b687ec555c 100644 --- a/modules/angular2/docs/cheatsheet/component-configuration.md +++ b/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. diff --git a/modules/angular2/docs/cheatsheet/dependency-injection.md b/modules/angular2/docs/cheatsheet/dependency-injection.md new file mode 100644 index 0000000000..10aaf0908e --- /dev/null +++ b/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. + diff --git a/modules/angular2/docs/cheatsheet/directive-and-component-decorators.md b/modules/angular2/docs/cheatsheet/directive-and-component-decorators.md index 18dde328fb..d1ebda6edc 100644 --- a/modules/angular2/docs/cheatsheet/directive-and-component-decorators.md +++ b/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. `` - @cheatsheetItem `@Output() myEvent = new EventEmitter();`|`@Output()` - Declares an output property that fires events to which we can subscribe with an event binding, e.g. `` - @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. \ No newline at end of file diff --git a/modules/angular2/docs/cheatsheet/directive-configuration.md b/modules/angular2/docs/cheatsheet/directive-configuration.md index b7af71ad59..535bef37b6 100644 --- a/modules/angular2/docs/cheatsheet/directive-configuration.md +++ b/modules/angular2/docs/cheatsheet/directive-configuration.md @@ -1,5 +1,7 @@ -@cheatsheetSection @Directive configuration -@descripton +@cheatsheetSection +Directive configuration +@cheatsheetIndex 4 +@description `@Directive({ property1: value1, ... }) )` @cheatsheetItem diff --git a/modules/angular2/docs/cheatsheet/forms.md b/modules/angular2/docs/cheatsheet/forms.md index 76d0917984..d42cb417c2 100644 --- a/modules/angular2/docs/cheatsheet/forms.md +++ b/modules/angular2/docs/cheatsheet/forms.md @@ -1,8 +1,9 @@ @cheatsheetSection -@name Forms +Forms +@cheatsheetIndex 2 @description `import {FORM_DIRECTIVES} from 'angular2/angular2';` @cheatsheetItem -``|`[(ng-model)]` +``|`[(ng-model)]` Provides two-way data-binding, parsing and validation for form controls. \ No newline at end of file diff --git a/modules/angular2/docs/cheatsheet/lifecycle hooks.md b/modules/angular2/docs/cheatsheet/lifecycle hooks.md new file mode 100644 index 0000000000..a403ffa195 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/modules/angular2/docs/cheatsheet/routing.md b/modules/angular2/docs/cheatsheet/routing.md new file mode 100644 index 0000000000..b2d5ef71f7 --- /dev/null +++ b/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` +Marks the location to load the component of the active route. + + +@cheatsheetItem +``|`[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. \ No newline at end of file