repackaging: all the file moves

modules/@angular/docs/cheatsheet/bootstrapping.md

@@ -0,0 +1,18 @@
+@cheatsheetSection
+Bootstrapping
+@cheatsheetIndex 0
+@description
+{@target ts}`import {bootstrap} from 'angular2/platform/browser';`{@endtarget}
+{@target js}Available from the `ng.platform.browser` namespace{@endtarget}
+{@target dart}`import 'package:angular2/platform/browser.dart';`{@endtarget}
+
+@cheatsheetItem
+syntax(ts dart):
+`bootstrap​(MyAppComponent, [MyService, provide(...)]);`|`provide`
+syntax(js):
+`document.addEventListener('DOMContentLoaded', function () {
+  ng.platform.browser.bootstrap(MyAppComponent,
+    [MyService, ng.core.provide(...)]);
+});`|`provide`
+description:
+Bootstraps an application with MyAppComponent as the root component and configures the DI providers. {@target js}Must be wrapped in the event listener to fire when the page loads.{@endtarget}

modules/@angular/docs/cheatsheet/built-in-directives.md

@@ -0,0 +1,35 @@
+@cheatsheetSection
+Built-in directives
+@cheatsheetIndex 2
+@description
+{@target ts}`import {NgIf, ...} from 'angular2/common';`{@endtarget}
+{@target js}Available from the `ng.common` namespace{@endtarget}
+{@target dart}Available using `platform_directives` in pubspec{@endtarget}
+
+@cheatsheetItem
+syntax:
+`<section *ngIf="showSection">`|`*ngIf`
+description:
+Removes or recreates a portion of the DOM tree based on the showSection expression.
+
+@cheatsheetItem
+syntax:
+`<li *ngFor="let item of list">`|`*ngFor`
+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:
+`<div [ngSwitch]="conditionExpression">
+  <template [ngSwitchWhen]="case1Exp">...</template>
+  <template ngSwitchWhen="case2LiteralString">...</template>
+  <template ngSwitchDefault>...</template>
+</div>`|`[ngSwitch]`|`[ngSwitchWhen]`|`ngSwitchWhen`|`ngSwitchDefault`
+description:
+Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.
+
+@cheatsheetItem
+syntax:
+`<div [ngClass]="{active: isActive, disabled: isDisabled}">`|`[ngClass]`
+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.

modules/@angular/docs/cheatsheet/class-decorators.md

@@ -0,0 +1,60 @@
+@cheatsheetSection
+Class decorators
+@cheatsheetIndex 4
+@description
+{@target ts}`import {Directive, ...} from 'angular2/core';`{@endtarget}
+{@target js}Available from the `ng.core` namespace{@endtarget}
+{@target dart}`import 'package:angular2/core.dart';`{@endtarget}
+
+@cheatsheetItem
+syntax(ts):
+`@Component({...})
+class MyComponent() {}`|`@Component({...})`
+syntax(js):
+`var MyComponent = ng.core.Component({...}).Class({...})`|`ng.core.Component({...})`
+syntax(dart):
+`@Component(...)
+class MyComponent() {}`|`@Component(...)`
+description:
+Declares that a class is a component and provides metadata about the component.
+
+@cheatsheetItem
+syntax(ts):
+`@Directive({...})
+class MyDirective() {}`|`@Directive({...})`
+syntax(js):
+`var MyDirective = ng.core.Directive({...}).Class({...})`|`ng.core.Directive({...})`
+syntax(dart):
+`@Directive(...)
+class MyDirective() {}`|`@Directive(...)`
+description:
+Declares that a class is a directive and provides metadata about the directive.
+
+@cheatsheetItem
+syntax(ts):
+`@Pipe({...})
+class MyPipe() {}`|`@Pipe({...})`
+syntax(js):
+`var MyPipe = ng.core.Pipe({...}).Class({...})`|`ng.core.Pipe({...})`
+syntax(dart):
+`@Pipe(...)
+class MyPipe() {}`|`@Pipe(...)`
+description:
+Declares that a class is a pipe and provides metadata about the pipe.
+
+@cheatsheetItem
+syntax(ts):
+`@Injectable()
+class MyService() {}`|`@Injectable()`
+syntax(js):
+`var OtherService = ng.core.Class({constructor: function() { }});
+var MyService = ng.core.Class({constructor: [OtherService, function(otherService) { }]});`|`var MyService = ng.core.Class({constructor: [OtherService, function(otherService) { }]});`
+syntax(dart):
+`@Injectable()
+class MyService() {}`|`@Injectable()`
+description:
+{@target ts dart}Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.
+{@endtarget}
+{@target js}
+Declares a service to inject into a class by providing an array with the services with the final item being the function which will receive the injected services.
+{@endtarget}

modules/@angular/docs/cheatsheet/component-configuration.md

@@ -0,0 +1,46 @@
+@cheatsheetSection
+Component configuration
+@cheatsheetIndex 6
+@description
+{@target js}`ng.core.Component` extends `ng.core.Directive`,
+so the `ng.core.Directive` configuration applies to components as well{@endtarget}
+{@target ts dart}`@Component` extends `@Directive`,
+so the `@Directive` configuration applies to components as well{@endtarget}
+
+@cheatsheetItem
+syntax(ts dart):
+`viewProviders: [MyService, provide(...)]`|`viewProviders:`
+syntax(js):
+`viewProviders: [MyService, ng.core.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.

modules/@angular/docs/cheatsheet/dependency-injection.md

@@ -0,0 +1,33 @@
+@cheatsheetSection
+Dependency injection configuration
+@cheatsheetIndex 9
+@description
+{@target ts}`import {provide} from 'angular2/core';`{@endtarget}
+{@target js}Available from the `ng.core` namespace{@endtarget}
+{@target dart}`import 'package:angular2/core.dart';`{@endtarget}
+
+@cheatsheetItem
+syntax(ts dart):
+`provide(MyService, {useClass: MyMockService})`|`provide`|`useClass`
+syntax(js):
+`ng.core.provide(MyService, {useClass: MyMockService})`|`provide`|`useClass`
+description:
+Sets or overrides the provider for MyService to the MyMockService class.
+
+
+@cheatsheetItem
+syntax(ts dart):
+`provide(MyService, {useFactory: myFactory})`|`provide`|`useFactory`
+syntax(js):
+`ng.core.provide(MyService, {useFactory: myFactory})`|`provide`|`useFactory`
+description:
+Sets or overrides the provider for MyService to the myFactory factory function.
+
+
+@cheatsheetItem
+syntax(ts dart):
+`provide(MyValue, {useValue: 41})`|`provide`|`useValue`
+syntax(js):
+`provide(MyValue, {useValue: 41})`|`provide`|`useValue`
+description:
+Sets or overrides the provider for MyValue to the value 41.

modules/@angular/docs/cheatsheet/directive-and-component-decorators.md

@@ -0,0 +1,80 @@
+@cheatsheetSection
+Class field decorators for directives and components
+@cheatsheetIndex 7
+@description
+{@target ts}`import {Input, ...} from 'angular2/core';`{@endtarget}
+{@target js}Available from the `ng.core` namespace{@endtarget}
+{@target dart}`import 'package:angular2/core.dart';`{@endtarget}
+
+@cheatsheetItem
+syntax(ts dart):
+`@Input() myProperty;`|`@Input()`
+syntax(js):
+`ng.core.Input(myProperty, myComponent);`|`ng.core.Input(`|`);`
+description:
+Declares an input property that we can update via property binding (e.g.
+`<my-cmp [my-property]="someExpression">`).
+
+
+@cheatsheetItem
+syntax(ts dart):
+`@Output() myEvent = new EventEmitter();`|`@Output()`
+syntax(js):
+`myEvent = new ng.core.EventEmitter(); ng.core.Output(myEvent, myComponent);`|`ng.core.Output(`|`);`
+description:
+Declares an output property that fires events to which we can subscribe with an event binding (e.g. `<my-cmp (my-event)="doSomething()">`).
+
+
+@cheatsheetItem
+syntax(ts dart):
+`@HostBinding('[class.valid]') isValid;`|`@HostBinding('[class.valid]')`
+syntax(js):
+`ng.core.HostBinding('[class.valid]', 'isValid', myComponent);`|`ng.core.HostBinding('[class.valid]', 'isValid'`|`);`
+description:
+Binds a host element property (e.g. CSS class valid) to directive/component property (e.g. isValid).
+
+
+
+@cheatsheetItem
+syntax(ts dart):
+`@HostListener('click', ['$event']) onClick(e) {...}`|`@HostListener('click', ['$event'])`
+syntax(js):
+`ng.core.HostListener('click', ['$event'], onClick(e) {...}, myComponent);`|`ng.core.HostListener('click', ['$event'], onClick(e)`|`);`
+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(ts dart):
+`@ContentChild(myPredicate) myChildComponent;`|`@ContentChild(myPredicate)`
+syntax(js):
+`ng.core.ContentChild(myPredicate, 'myChildComponent', myComponent);`|`ng.core.ContentChild(myPredicate,`|`);`
+description:
+Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.
+
+
+@cheatsheetItem
+syntax(ts dart):
+`@ContentChildren(myPredicate) myChildComponents;`|`@ContentChildren(myPredicate)`
+syntax(js):
+`ng.core.ContentChildren(myPredicate, 'myChildComponents', myComponent);`|`ng.core.ContentChildren(myPredicate,`|`);`
+description:
+Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.
+
+
+@cheatsheetItem
+syntax(ts dart):
+`@ViewChild(myPredicate) myChildComponent;`|`@ViewChild(myPredicate)`
+syntax(js):
+`ng.core.ViewChild(myPredicate, 'myChildComponent', myComponent);`|`ng.core.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(ts dart):
+`@ViewChildren(myPredicate) myChildComponents;`|`@ViewChildren(myPredicate)`
+syntax(js):
+`ng.core.ViewChildren(myPredicate, 'myChildComponents', myComponent);`|`ng.core.ViewChildren(myPredicate,`|`);`
+description:
+Binds the results of the component view query (myPredicate) to the myChildComponents property of the class. Not available for directives.

modules/@angular/docs/cheatsheet/directive-configuration.md

@@ -0,0 +1,24 @@
+@cheatsheetSection
+Directive configuration
+@cheatsheetIndex 5
+@description
+{@target ts}`@Directive({ property1: value1, ... })`{@endtarget}
+{@target js}`ng.core.Directive({ property1: value1, ... }).Class({...})`{@endtarget}
+{@target dart}`@Directive(property1: value1, ...)`{@endtarget}
+
+@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(ts dart):
+`providers: [MyService, provide(...)]`|`providers:`
+syntax(js):
+`providers: [MyService, ng.core.provide(...)]`|`providers:`
+description:
+Array of dependency injection providers for this directive and its children.

modules/@angular/docs/cheatsheet/forms.md

@@ -0,0 +1,13 @@
+@cheatsheetSection
+Forms
+@cheatsheetIndex 3
+@description
+{@target ts}`import {FORM_DIRECTIVES} from 'angular2/common';`{@endtarget}
+{@target js}Available from `ng.common.FORM_DIRECTIVES`{@endtarget}
+{@target dart}Available using `platform_directives` in pubspec{@endtarget}
+
+@cheatsheetItem
+syntax:
+`<input [(ngModel)]="userName">`|`[(ngModel)]`
+description:
+Provides two-way data-binding, parsing and validation for form controls.

modules/@angular/docs/cheatsheet/lifecycle hooks.md

@@ -0,0 +1,88 @@
+@cheatsheetSection
+Directive and component change detection and lifecycle hooks
+@cheatsheetIndex 8
+@description
+{@target ts dart}(implemented as class methods){@endtarget}
+{@target js}(implemented as component properties){@endtarget}
+
+@cheatsheetItem
+syntax(ts):
+`constructor(myService: MyService, ...) { ... }`|`constructor(myService: MyService, ...)`
+syntax(js):
+`constructor: function(MyService, ...) { ... }`|`constructor: function(MyService, ...)`
+syntax(dart):
+`MyAppComponent(MyService myService, ...) { ... }`|`MyAppComponent(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(ts dart):
+`ngOnChanges(changeRecord) { ... }`|`ngOnChanges(changeRecord)`
+syntax(js):
+`ngOnChanges: function(changeRecord) { ... }`|`ngOnChanges: function(changeRecord)`
+description:
+Called after every change to input properties and before processing content or child views.
+
+
+@cheatsheetItem
+syntax(ts dart):
+`ngOnInit() { ... }`|`ngOnInit()`
+syntax(js):
+`ngOnInit: function() { ... }`|`ngOnInit: function()`
+description:
+Called after the constructor, initializing input properties, and the first call to ngOnChanges.
+
+
+@cheatsheetItem
+syntax(ts dart):
+`ngDoCheck() { ... }`|`ngDoCheck()`
+syntax(js):
+`ngDoCheck: function() { ... }`|`ngDoCheck: function()`
+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(ts dart):
+`ngAfterContentInit() { ... }`|`ngAfterContentInit()`
+syntax(js):
+`ngAfterContentInit: function() { ... }`|`ngAfterContentInit: function()`
+description:
+Called after ngOnInit when the component's or directive's content has been initialized.
+
+
+@cheatsheetItem
+syntax(ts dart):
+`ngAfterContentChecked() { ... }`|`ngAfterContentChecked()`
+syntax(js):
+`ngAfterContentChecked: function() { ... }`|`ngAfterContentChecked: function()`
+description:
+Called after every check of the component's or directive's content.
+
+
+@cheatsheetItem
+syntax(ts dart):
+`ngAfterViewInit() { ... }`|`ngAfterViewInit()`
+syntax(js):
+`ngAfterViewInit: function() { ... }`|`ngAfterViewInit: function()`
+description:
+Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
+
+
+@cheatsheetItem
+syntax(ts dart):
+`ngAfterViewChecked() { ... }`|`ngAfterViewChecked()`
+syntax(js):
+`ngAfterViewChecked: function() { ... }`|`ngAfterViewChecked: function()`
+description:
+Called after every check of the component's view. Applies to components only.
+
+
+@cheatsheetItem
+syntax(ts dart):
+`ngOnDestroy() { ... }`|`ngOnDestroy()`
+syntax(js):
+`ngOnDestroy: function() { ... }`|`ngOnDestroy: function()`
+description:
+Called once, before the instance is destroyed.

modules/@angular/docs/cheatsheet/routing.md

@@ -0,0 +1,101 @@
+@cheatsheetSection
+Routing and navigation
+@cheatsheetIndex 10
+@description
+{@target ts}`import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...} from 'angular2/router';`{@endtarget}
+{@target js}Available from the `ng.router` namespace{@endtarget}
+{@target dart}`import 'package:angular2/router.dart';`{@endtarget}
+
+
+@cheatsheetItem
+syntax(ts):
+`@RouteConfig([
+  { path: '/:myParam', component: MyComponent, name: 'MyCmp' },
+  { path: '/staticPath', component: ..., name: ...},
+  { path: '/*wildCardParam', component: ..., name: ...}
+])
+class MyComponent() {}`|`@RouteConfig`
+syntax(js):
+`var MyComponent = ng.router.RouteConfig([
+  { path: '/:myParam', component: MyComponent, name: 'MyCmp' },
+  { path: '/staticPath', component: ..., name: ...},
+  { path: '/*wildCardParam', component: ..., name: ...}
+]).Class({
+  constructor: function() {}
+});`|`ng.router.RouteConfig`
+syntax(dart):
+`@RouteConfig(const [
+  const Route(path: '/:myParam', component: MyComponent, name: 'MyCmp' ),
+])`|`@RouteConfig`
+description:
+Configures routes for the decorated component. Supports static, parameterized, and wildcard routes.
+
+
+@cheatsheetItem
+syntax:
+`<router-outlet></router-outlet>`|`router-outlet`
+description:
+Marks the location to load the component of the active route.
+
+
+@cheatsheetItem
+syntax:
+`<a [routerLink]="[ '/MyCmp', {myParam: 'value' } ]">`|`[routerLink]`
+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(ts):
+`@CanActivate(() => { ... })class MyComponent() {}`|`@CanActivate`
+syntax(js):
+`var MyComponent = ng.router.CanActivate(function() { ... }).Component({...}).Class({constructor: ...});`|`ng.router.CanActivate(function() { ... })`
+syntax(dart):
+`@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 {@target js ts}promise{@endtarget}{@target dart}future{@endtarget}.
+
+
+@cheatsheetItem
+syntax(ts dart):
+`routerOnActivate(nextInstruction, prevInstruction) { ... }`|`routerOnActivate`
+syntax(js):
+`routerOnActivate: function(nextInstruction, prevInstruction) { ... }`|`routerOnActivate`
+description:
+After navigating to a component, the router calls the component's routerOnActivate method (if defined).
+
+
+@cheatsheetItem
+syntax(ts dart):
+`routerCanReuse(nextInstruction, prevInstruction) { ... }`|`routerCanReuse`
+syntax(js):
+`routerCanReuse: function(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 {@target js ts}promise{@endtarget}{@target dart}future{@endtarget}.
+
+
+@cheatsheetItem
+syntax(ts dart):
+`routerOnReuse(nextInstruction, prevInstruction) { ... }`|`routerOnReuse`
+syntax(js):
+`routerOnReuse: function(nextInstruction, prevInstruction) { ... }`|`routerOnReuse`
+description:
+The router calls the component's routerOnReuse method (if defined) when it re-uses a component instance.
+
+
+@cheatsheetItem
+syntax(ts dart):
+`routerCanDeactivate(nextInstruction, prevInstruction) { ... }`|`routerCanDeactivate`
+syntax(js):
+`routerCanDeactivate: function(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 {@target js ts}promise that is resolved{@endtarget}{@target dart}future that completes successfully{@endtarget}.
+
+
+@cheatsheetItem
+syntax(ts dart):
+`routerOnDeactivate(nextInstruction, prevInstruction) { ... }`|`routerOnDeactivate`
+syntax(js):
+`routerOnDeactivate: function(nextInstruction, prevInstruction) { ... }`|`routerOnDeactivate`
+description:
+Called before the directive is removed as the result of a route change. May return a {@target js ts}promise{@endtarget}{@target dart}future{@endtarget} that pauses removing the directive until the {@target js ts}promise resolves{@endtarget}{@target dart}future completes{@endtarget}.

modules/@angular/docs/cheatsheet/template-syntax.md

@@ -0,0 +1,80 @@
+@cheatsheetSection
+Template syntax
+@cheatsheetIndex 1
+@description
+
+@cheatsheetItem
+syntax:
+`<input [value]="firstName">`|`[value]`
+description:
+Binds property `value` to the result of expression `firstName`.
+
+@cheatsheetItem
+syntax:
+`<div [attr.role]="myAriaRole">`|`[attr.role]`
+description:
+Binds attribute `role` to the result of expression `myAriaRole`.
+
+@cheatsheetItem
+syntax:
+`<div [class.extra-sparkle]="isDelightful">`|`[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:
+`<div [style.width.px]="mySize">`|`[style.width.px]`
+description:
+Binds style property `width` to the result of expression `mySize` in pixels. Units are optional.
+
+@cheatsheetItem
+syntax:
+`<button (click)="readRainbow($event)">`|`(click)`
+description:
+Calls method `readRainbow` when a click event is triggered on this button element (or its children) and passes in the event object.
+
+@cheatsheetItem
+syntax:
+`<div title="Hello {{ponyName}}">`|`{{ponyName}}`
+description:
+Binds a property to an interpolated string, e.g. "Hello Seabiscuit". Equivalent to:
+`<div [title]="'Hello' + ponyName">`
+
+@cheatsheetItem
+syntax:
+`<p>Hello {{ponyName}}</p>`|`{{ponyName}}`
+description:
+Binds text content to an interpolated string, e.g. "Hello Seabiscuit".
+
+@cheatsheetItem
+syntax:
+`<my-cmp [(title)]="name">`|`[(title)]`
+description:
+Sets up two-way data binding. Equivalent to: `<my-cmp [title]="name" (titleChange)="name=$event">`
+
+@cheatsheetItem
+syntax:
+`<video #movieplayer ...>
+  <button (click)="movieplayer.play()">
+</video>`|`#movieplayer`|`(click)`
+description:
+Creates a local variable `movieplayer` that provides access to the `video` element instance in data-binding and event-binding expressions in the current template.
+
+@cheatsheetItem
+syntax:
+`<p *myUnless="myExpression">...</p>`|`*myUnless`
+description:
+The `*` symbol means that the current element will be turned into an embedded template. Equivalent to:
+`<template [myUnless]="myExpression"><p>...</p></template>`
+
+@cheatsheetItem
+syntax:
+`<p>Card No.: {{cardNumber | myCreditCardNumberFormatter}}</p>`|`{{cardNumber | myCreditCardNumberFormatter}}`
+description:
+Transforms the current value of expression `cardNumber` via the pipe called `myCreditCardNumberFormatter`.
+
+@cheatsheetItem
+syntax:
+`<p>Employer: {{employer?.companyName}}</p>`|`{{employer?.companyName}}`
+description:
+The safe navigation operator (`?`) means that the `employer` field is optional and if `undefined`, the rest of the expression should be ignored.