From 283526591685cc2662d797dccffc578aa93b9efa Mon Sep 17 00:00:00 2001 From: Jeremy Wilken Date: Sat, 12 Dec 2015 21:17:26 -0600 Subject: [PATCH] docs(cheatsheet) adding JS specific syntax to cheatsheet Closes #5861 --- .../angular2/docs/cheatsheet/bootstrapping.md | 13 +++++-- .../docs/cheatsheet/built-in-directives.md | 3 +- .../docs/cheatsheet/class-decorators.md | 24 +++++++++--- .../cheatsheet/component-configuration.md | 10 +++-- .../docs/cheatsheet/dependency-injection.md | 16 +++++--- .../directive-and-component-decorators.md | 35 ++++++++++++----- .../cheatsheet/directive-configuration.md | 7 +++- modules/angular2/docs/cheatsheet/forms.md | 3 +- .../docs/cheatsheet/lifecycle hooks.md | 39 ++++++++++++++----- modules/angular2/docs/cheatsheet/routing.md | 37 ++++++++++++++---- 10 files changed, 138 insertions(+), 49 deletions(-) diff --git a/modules/angular2/docs/cheatsheet/bootstrapping.md b/modules/angular2/docs/cheatsheet/bootstrapping.md index 5859e9b5f8..99fba2b5c0 100644 --- a/modules/angular2/docs/cheatsheet/bootstrapping.md +++ b/modules/angular2/docs/cheatsheet/bootstrapping.md @@ -2,12 +2,17 @@ Bootstrapping @cheatsheetIndex 0 @description -{@target js ts}`import {bootstrap} from 'angular2/platform/browser';`{@endtarget} +{@target ts}`import {bootstrap} from 'angular2/angular2';`{@endtarget} +{@target js}Available from the `ng.platform.browser` namespace.{@endtarget} {@target dart}`import 'package:angular2/bootstrap.dart';`{@endtarget} @cheatsheetItem -syntax: +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 app's dependency injection providers. +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} diff --git a/modules/angular2/docs/cheatsheet/built-in-directives.md b/modules/angular2/docs/cheatsheet/built-in-directives.md index 126578e55c..9e5ebee575 100644 --- a/modules/angular2/docs/cheatsheet/built-in-directives.md +++ b/modules/angular2/docs/cheatsheet/built-in-directives.md @@ -2,7 +2,8 @@ Built-in directives @cheatsheetIndex 2 @description -{@target js ts}`import {NgIf, ...} from 'angular2/common';`{@endtarget} +{@target ts}`import {NgIf, ...} from 'angular2/common';`{@endtarget} +{@target js}Available from the `ng.common` namespace{@endtarget} {@target dart}`import 'package:angular2/common.dart';`{@endtarget} @cheatsheetItem diff --git a/modules/angular2/docs/cheatsheet/class-decorators.md b/modules/angular2/docs/cheatsheet/class-decorators.md index af449c8b80..b1d0a768e9 100644 --- a/modules/angular2/docs/cheatsheet/class-decorators.md +++ b/modules/angular2/docs/cheatsheet/class-decorators.md @@ -2,13 +2,16 @@ Class decorators @cheatsheetIndex 4 @description -{@target js ts}`import {Directive, ...} from 'angular2/core';`{@endtarget} +{@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(js ts): +syntax(ts): `@Component({...}) class MyComponent() {}`|`@Component({...})` +syntax(js): +`var MyComponent = ng.core.Component({...}).Class({...})`|`ng.core.Component({...})` syntax(dart): `@Component(...) class MyComponent() {}`|`@Component(...)` @@ -16,9 +19,11 @@ description: Declares that a class is a component and provides metadata about the component. @cheatsheetItem -syntax(js ts): +syntax(ts): `@Pipe({...}) class MyPipe() {}`|`@Pipe({...})` +syntax(js): +`var MyPipe = ng.core.Pipe({...}).Class({...})`|`ng.core.Pipe({...})` syntax(dart): `@Pipe(...) class MyPipe() {}`|`@Pipe(...)` @@ -26,12 +31,19 @@ description: Declares that a class is a pipe and provides metadata about the pipe. @cheatsheetItem -syntax(js ts): +syntax(ts): `@Injectable() class MyService() {}`|`@Injectable()` +syntax(js): +`var MyService = ng.core.Class({constructor: [OtherService, function(otherService) { }]}); +var OtherService = ng.core.Class({constructor: function() { }});` +var MyService = ng.core.Injectable({...})`|`ng.core.Injectable({...})` syntax(dart): `@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. +{@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} diff --git a/modules/angular2/docs/cheatsheet/component-configuration.md b/modules/angular2/docs/cheatsheet/component-configuration.md index 8176566109..64d48c0f4e 100644 --- a/modules/angular2/docs/cheatsheet/component-configuration.md +++ b/modules/angular2/docs/cheatsheet/component-configuration.md @@ -2,12 +2,16 @@ Component configuration @cheatsheetIndex 6 @description -`@Component` extends `@Directive`, -so the `@Directive` configuration applies to components as well +{@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: +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. diff --git a/modules/angular2/docs/cheatsheet/dependency-injection.md b/modules/angular2/docs/cheatsheet/dependency-injection.md index ed6426d94f..83c1c0d291 100644 --- a/modules/angular2/docs/cheatsheet/dependency-injection.md +++ b/modules/angular2/docs/cheatsheet/dependency-injection.md @@ -2,26 +2,32 @@ Dependency injection configuration @cheatsheetIndex 9 @description -{@target js ts}`import {provide} from 'angular2/core';`{@endtarget} +{@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: +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: +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: +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. - diff --git a/modules/angular2/docs/cheatsheet/directive-and-component-decorators.md b/modules/angular2/docs/cheatsheet/directive-and-component-decorators.md index 4de517b3d3..dcfe62e755 100644 --- a/modules/angular2/docs/cheatsheet/directive-and-component-decorators.md +++ b/modules/angular2/docs/cheatsheet/directive-and-component-decorators.md @@ -2,62 +2,79 @@ Class field decorators for directives and components @cheatsheetIndex 7 @description -{@target js ts}`import {Input, ...} from 'angular2/core';`{@endtarget} +{@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: +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. ``). @cheatsheetItem -syntax: +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. ``). @cheatsheetItem -syntax: +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: +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: +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: +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: +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: +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. diff --git a/modules/angular2/docs/cheatsheet/directive-configuration.md b/modules/angular2/docs/cheatsheet/directive-configuration.md index 27f90eb0d5..afe11a671c 100644 --- a/modules/angular2/docs/cheatsheet/directive-configuration.md +++ b/modules/angular2/docs/cheatsheet/directive-configuration.md @@ -2,7 +2,8 @@ Directive configuration @cheatsheetIndex 5 @description -{@target js ts}`@Directive({ property1: value1, ... })`{@endtarget} +{@target ts}`@Directive({ property1: value1, ... })`{@endtarget} +{@target js}`ng.core.Directive({ property1: value1, ... }).Class({...})`{@endtarget} {@target dart}`@Directive(property1: value1, ...)`{@endtarget} @cheatsheetItem @@ -15,7 +16,9 @@ Specifies a CSS selector that identifies this directive within a template. Suppo Does not support parent-child relationship selectors. @cheatsheetItem -syntax: +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. diff --git a/modules/angular2/docs/cheatsheet/forms.md b/modules/angular2/docs/cheatsheet/forms.md index 30cc0c1c52..250cd333d9 100644 --- a/modules/angular2/docs/cheatsheet/forms.md +++ b/modules/angular2/docs/cheatsheet/forms.md @@ -2,7 +2,8 @@ Forms @cheatsheetIndex 3 @description -{@target js ts}`import {FORM_DIRECTIVES} from 'angular2/common';`{@endtarget} +{@target ts}`import {FORM_DIRECTIVES} from 'angular2/common';`{@endtarget} +{@target js}Available from `ng.common.FORM_DIRECTIVES`{@endtarget} {@target dart}`import 'package:angular2/common.dart';`{@endtarget} @cheatsheetItem diff --git a/modules/angular2/docs/cheatsheet/lifecycle hooks.md b/modules/angular2/docs/cheatsheet/lifecycle hooks.md index 1ace79efe6..23e31fcf3e 100644 --- a/modules/angular2/docs/cheatsheet/lifecycle hooks.md +++ b/modules/angular2/docs/cheatsheet/lifecycle hooks.md @@ -2,11 +2,14 @@ Directive and component change detection and lifecycle hooks @cheatsheetIndex 8 @description -(implemented as class methods) +{@target ts dart}(implemented as class methods){@endtarget} +{@target js}(implemented as component properties){@endtarget} @cheatsheetItem -syntax(js ts): +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: @@ -14,56 +17,72 @@ The class constructor is called before any other lifecycle hook. Use it to injec @cheatsheetItem -syntax: +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: +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: +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: +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: +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: +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: +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: +syntax(ts dart): `ngOnDestroy() { ... }`|`ngOnDestroy()` +syntax(js): +`ngOnDestroy: function() { ... }`|`ngOnDestroy: function()` description: Called once, before the instance is destroyed. diff --git a/modules/angular2/docs/cheatsheet/routing.md b/modules/angular2/docs/cheatsheet/routing.md index 7787e5243c..4a265897ee 100644 --- a/modules/angular2/docs/cheatsheet/routing.md +++ b/modules/angular2/docs/cheatsheet/routing.md @@ -2,18 +2,27 @@ Routing and navigation @cheatsheetIndex 10 @description -{@target js ts}`import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...} from 'angular2/router';`{@endtarget} +{@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(js ts): +syntax(ts): `@RouteConfig([ { path: '/:myParam', component: MyComponent, as: 'MyCmp' }, { path: '/staticPath', component: ..., as: ...}, { path: '/*wildCardParam', component: ..., as: ...} ]) class MyComponent() {}`|`@RouteConfig` +syntax(js): +`var MyComponent = ng.router.RouteConfig([ + { path: '/:myParam', component: MyComponent, as: 'MyCmp' }, + { path: '/staticPath', component: ..., as: ...}, + { path: '/*wildCardParam', component: ..., as: ...} +]).Class({ + constructor: function() {} +});`|`ng.router.RouteConfig` syntax(dart): `@RouteConfig(const [ const Route(path: '/:myParam', component: MyComponent, name: 'MyCmp' ), @@ -37,8 +46,10 @@ Creates a link to a different view based on a route instruction consisting of a @cheatsheetItem -syntax(js ts): +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: @@ -46,35 +57,45 @@ A component decorator defining a function that the router should call first to d @cheatsheetItem -syntax: +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: +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: +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: +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: +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}.