diff --git a/modules/angular2/docs/cheatsheet/bootstrapping.md b/modules/angular2/docs/cheatsheet/bootstrapping.md index 1dbf6e059b..6e46bd352b 100644 --- a/modules/angular2/docs/cheatsheet/bootstrapping.md +++ b/modules/angular2/docs/cheatsheet/bootstrapping.md @@ -2,8 +2,11 @@ Bootstrapping @cheatsheetIndex 0 @description -`import {bootstrap} from 'angular2/angular2';` +{@target js ts}`import {bootstrap} from 'angular2/angular2';`{@endtarget} +{@target dart}`import 'package:angular2/bootstrap.dart';`{@endtarget} @cheatsheetItem -`bootstrap​(MyAppComponent, [MyService, provide(...)]);` +syntax: +`bootstrap​(MyAppComponent, [MyService, provide(...)]);`|`provide` +description: Bootstraps an application with MyAppComponent as the root component and configures the DI providers. diff --git a/modules/angular2/docs/cheatsheet/built-in-directives.md b/modules/angular2/docs/cheatsheet/built-in-directives.md index 6632fa81cc..e9dd167a3a 100644 --- a/modules/angular2/docs/cheatsheet/built-in-directives.md +++ b/modules/angular2/docs/cheatsheet/built-in-directives.md @@ -5,21 +5,29 @@ Built-in directives `import {NgIf, ...} from 'angular2/angular2';` @cheatsheetItem +syntax: `
`|`*ng-if` +description: Removes or recreates a portion of the DOM tree based on the showSection expression. @cheatsheetItem +syntax: `
  • `|`*ng-for` +description: Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list. @cheatsheetItem +syntax: `
    `|`[ng-switch]`|`[ng-switch-when]`|`ng-switch-when`|`ng-switch-default` +description: Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression. @cheatsheetItem +syntax: `
    `|`[ng-class]` +description: 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. \ No newline at end of file diff --git a/modules/angular2/docs/cheatsheet/class-decorators.md b/modules/angular2/docs/cheatsheet/class-decorators.md index ae327b918c..c12da5e51e 100644 --- a/modules/angular2/docs/cheatsheet/class-decorators.md +++ b/modules/angular2/docs/cheatsheet/class-decorators.md @@ -5,17 +5,23 @@ Class decorators `import {Directive, ...} from 'angular2/angular2';` @cheatsheetItem +syntax: `@Component({...}) class MyComponent() {}`|`@Component({...})` +description: Declares that a class is a component and provides metadata about the component. @cheatsheetItem +syntax: `@Pipe({...}) class MyPipe() {}`|`@Pipe({...})` +description: Declares that a class is a pipe and provides metadata about the pipe. @cheatsheetItem +syntax: `@Injectable() class MyService() {}`|`@Injectable()` +description: Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class. \ No newline at end of file diff --git a/modules/angular2/docs/cheatsheet/component-configuration.md b/modules/angular2/docs/cheatsheet/component-configuration.md index 6b75ed669b..487d744fae 100644 --- a/modules/angular2/docs/cheatsheet/component-configuration.md +++ b/modules/angular2/docs/cheatsheet/component-configuration.md @@ -6,27 +6,37 @@ Component configuration so the `@Directive` configuration applies to components as well @cheatsheetItem +syntax: `viewProviders: [MyService, provide(...)]`|`viewProviders:` +description: Array of dependency injection providers scoped to this component's view. @cheatsheetItem +syntax: `template: 'Hello {{name}}' templateUrl: 'my-component.html'`|`template:`|`templateUrl:` +description: Inline template / external template url of the component's view. @cheatsheetItem +syntax: `styles: ['.primary {color: red}'] styleUrls: ['my-component.css']`|`styles:`|`styleUrls:` +description: List of inline css styles / external stylesheet urls for styling component’s view. @cheatsheetItem +syntax: `directives: [MyDirective, MyComponent]`|`directives:` +description: List of directives used in the the component’s template. @cheatsheetItem +syntax: `pipes: [MyPipe, OtherPipe]`|`pipes:` +description: List of pipes used in the component's template. \ No newline at end of file diff --git a/modules/angular2/docs/cheatsheet/dependency-injection.md b/modules/angular2/docs/cheatsheet/dependency-injection.md index 477618c15e..f16d9434c4 100644 --- a/modules/angular2/docs/cheatsheet/dependency-injection.md +++ b/modules/angular2/docs/cheatsheet/dependency-injection.md @@ -5,16 +5,22 @@ Dependency injection configuration `import {provide} from 'angular2/angular2';` @cheatsheetItem -`provide(MyService, {useClass: MyMockService})``provide`|`useClass` +syntax: +`provide(MyService, {useClass: MyMockService})`|`provide`|`useClass` +description: Sets or overrides the provider for MyService to the MyMockService class. @cheatsheetItem -`provide(MyService, {useFactory: myFactory})``provide`|`useFactory` +syntax: +`provide(MyService, {useFactory: myFactory})`|`provide`|`useFactory` +description: Sets or overrides the provider for MyService to the myFactory factory function. @cheatsheetItem -`provide(MyValue, {useValue: 41})``provide`|`useValue` +syntax: +`provide(MyValue, {useValue: 41})`|`provide`|`useValue` +description: 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 6425eb1de0..fb2aaf1de2 100644 --- a/modules/angular2/docs/cheatsheet/directive-and-component-decorators.md +++ b/modules/angular2/docs/cheatsheet/directive-and-component-decorators.md @@ -5,42 +5,58 @@ Class field decorators for directives and components `import {Input, ...} from 'angular2/angular2';` @cheatsheetItem +syntax: `@Input() myProperty;`|`@Input()` +description: Declares an input property that we can update via property binding, e.g. `` @cheatsheetItem +syntax: `@Output() myEvent = new EventEmitter();`|`@Output()` +description: Declares an output property that fires events to which we can subscribe with an event binding, e.g. `` @cheatsheetItem +syntax: `@HostBinding('[class.valid]') isValid;`|`@HostBinding('[class.valid]')` +description: Binds a host element property (e.g. css class valid) to directive/component property (e.g. isValid) @cheatsheetItem +syntax: `@HostListener('click', ['$event']) onClick(e) {...}`|`@HostListener('click', ['$event'])` +description: Subscribes to a host element event (e.g. click) with a directive/component method (e.g., onClick), optionally passing an argument ($event) @cheatsheetItem +syntax: `@ContentChild(myPredicate) myChildComponent;`|`@ContentChild(myPredicate)` +description: Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class. @cheatsheetItem +syntax: `@ContentChildren(myPredicate) myChildComponents;`|`@ContentChildren(myPredicate)` +description: Binds the results of the component content query (myPredicate) to the myChildComponents property of the class. @cheatsheetItem +syntax: `@ViewChild(myPredicate) myChildComponent;`|`@ViewChild(myPredicate)` +description: Binds the first result of the component view query (myPredicate) to the myChildComponent property of the class. Not available for directives. @cheatsheetItem +syntax: `@ViewChildren(myPredicate) myChildComponents;`|`@ViewChildren(myPredicate)` +description: 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 50747c45ea..f4bb5d1ff7 100644 --- a/modules/angular2/docs/cheatsheet/directive-configuration.md +++ b/modules/angular2/docs/cheatsheet/directive-configuration.md @@ -5,12 +5,16 @@ Directive configuration `@Directive({ property1: value1, ... }) )` @cheatsheetItem +syntax: `selector: '.cool-button:not(a)'`|`selector:` +description: Specifies a css selector that identifies this directive within a template. Supported selectors include: `element`, `[attribute]`, `.class`, and `:not()`. Does not support parent-child relationship selectors. @cheatsheetItem +syntax: `providers: [MyService, provide(...)]`|`providers:` +description: Array of dependency injection providers for this directive and its children. \ No newline at end of file diff --git a/modules/angular2/docs/cheatsheet/forms.md b/modules/angular2/docs/cheatsheet/forms.md index 730d65b277..160766a48b 100644 --- a/modules/angular2/docs/cheatsheet/forms.md +++ b/modules/angular2/docs/cheatsheet/forms.md @@ -5,5 +5,7 @@ Forms `import {FORM_DIRECTIVES} from 'angular2/angular2';` @cheatsheetItem +syntax: ``|`[(ng-model)]` +description: 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 index efbc7700fb..534c7721ad 100644 --- a/modules/angular2/docs/cheatsheet/lifecycle hooks.md +++ b/modules/angular2/docs/cheatsheet/lifecycle hooks.md @@ -5,45 +5,63 @@ Directive and component change detection and lifecycle hooks (implemented as class methods) @cheatsheetItem +syntax: `constructor(myService: MyService, ...) { ... }`|`constructor(myService: MyService, ...)` +description: The class constructor is called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here. @cheatsheetItem +syntax: `ngOnChanges(changeRecord) { ... }`|`ngOnChanges(changeRecord)` +description: Called after every change to input properties and before processing content or child views. @cheatsheetItem +syntax: `ngOnInit() { ... }`|`ngOnInit()` +description: Called after the constructor, initializing input properties, and the first call to ngOnChanges. @cheatsheetItem +syntax: `ngDoCheck() { ... }`|`ngDoCheck()` +description: 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 +syntax: `ngAfterContentInit() { ... }`|`ngAfterContentInit()` +description: Called after ngOnInit when the component's or directive's content has been initialized. @cheatsheetItem +syntax: `ngAfterContentChecked() { ... }`|`ngAfterContentChecked()` +description: Called after every check of the component's or directive's content. @cheatsheetItem +syntax: `ngAfterViewInit() { ... }`|`ngAfterViewInit()` +description: Called after ngAfterContentInit when the component's view has been initialized. Applies to components only. @cheatsheetItem +syntax: `ngAfterViewChecked() { ... }`|`ngAfterViewChecked()` +description: Called after every check of the component's view. Applies to components only. @cheatsheetItem +syntax: `ngOnDestroy() { ... }`|`ngOnDestroy()` +description: 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 index 75e8d03875..5ef09d3bab 100644 --- a/modules/angular2/docs/cheatsheet/routing.md +++ b/modules/angular2/docs/cheatsheet/routing.md @@ -6,50 +6,68 @@ Routing and navigation @cheatsheetItem +syntax: `@RouteConfig([ { path: '/:myParam', component: MyComponent, as: 'MyCmp' }, { path: '/staticPath', component: ..., as: ...}, { path: '/*wildCardParam', component: ..., as: ...} ]) class MyComponent() {}`|`@RouteConfig` +description: Configures routes for the decorated component. Supports static, parameterized and wildcard routes. @cheatsheetItem +syntax: ``|`router-outlet` +description: Marks the location to load the component of the active route. @cheatsheetItem +syntax: ``|`[router-link]` +description: 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 +syntax: `@CanActivate(() => { ... })class MyComponent() {}`|`@CanActivate` +description: 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 +syntax: `routerOnActivate(nextInstruction, prevInstruction) { ... }`|`routerOnActivate` +description: After navigating to a component, the router calls component's routerOnActivate method (if defined). @cheatsheetItem +syntax: `routerCanReuse(nextInstruction, prevInstruction) { ... }`|`routerCanReuse` +description: The router calls a component's routerCanReuse method (if defined) to determine whether to reuse the instance or destroy it and create a new instance. Should return a boolean or a promise. @cheatsheetItem +syntax: `routerOnReuse(nextInstruction, prevInstruction) { ... }`|`routerOnReuse` +description: The router calls the component's routerOnReuse method (if defined) when it re-uses a component instance. @cheatsheetItem +syntax: `routerCanDeactivate(nextInstruction, prevInstruction) { ... }`|`routerCanDeactivate` +description: The router calls the routerCanDeactivate methods (if defined) of every component that would be removed after a navigation. The navigation proceeds if and only if all such methods return true or a promise that is resolved. @cheatsheetItem +syntax: `routerOnDeactivate(nextInstruction, prevInstruction) { ... }`|`routerOnDeactivate` +description: 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 diff --git a/modules/angular2/docs/cheatsheet/template-syntax.md b/modules/angular2/docs/cheatsheet/template-syntax.md index 2690806496..7d6c8f654e 100644 --- a/modules/angular2/docs/cheatsheet/template-syntax.md +++ b/modules/angular2/docs/cheatsheet/template-syntax.md @@ -4,53 +4,77 @@ Template syntax @description @cheatsheetItem +syntax: ``|`[value]` +description: Binds property `value` to the result of expression `firstName`. @cheatsheetItem +syntax: `
    `|`[attr.role]` +description: Binds attribute `role` to the result of expression `myAriaRole`. @cheatsheetItem +syntax: `
    `|`[class.extra-sparkle]` +description: Binds the presence of the css class `extra-sparkle` on the element to the truthiness of the expression `isDelightful`. @cheatsheetItem +syntax: `
    `|`[style.width.px]` +description: Binds style property `width` to the result of expression `mySize` in pixels. Units are optional. @cheatsheetItem +syntax: `