docs(cheatsheet): add NgModules docs to the cheatsheet

This commit is contained in:
Igor Minar 2016-08-08 17:18:50 -07:00
parent d21331e902
commit d1f4222c83
13 changed files with 63 additions and 34 deletions

View File

@ -95,7 +95,7 @@ export function createPlatform(injector: Injector): PlatformRef {
export type PlatformFactory = (extraProviders?: any[]) => PlatformRef;
/**
* Creates a fatory for a platform
* Creates a factory for a platform
*
* @experimental APIs related to application bootstrap are currently under review.
*/

View File

@ -2,17 +2,15 @@
Bootstrapping
@cheatsheetIndex 0
@description
{@target ts}`import { bootstrap } from '@angular/platform-browser-dynamic';`{@endtarget}
{@target js}Available from the `ng.platform.browser` namespace{@endtarget}
{@target ts}`import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';`{@endtarget}
{@target js}Available from the `ng.platformBrowser` namespace{@endtarget}
{@target dart}`import 'package:angular2/platform/browser.dart';`{@endtarget}
@cheatsheetItem
syntax(ts dart):
`bootstrap(MyAppComponent, [MyService, { provide: ... }]);`|`provide`
`platformBrowserDynamic().bootstrapModule(MyAppModule);`|`platformBrowserDynamic().bootstrapModule`
syntax(js):
`document.addEventListener('DOMContentLoaded', function () {
ng.platform.browser.bootstrap(MyAppComponent,
[MyService, { provide: ... }]);
});`|`provide`
ng.platformBrowser.platformBrowserDynamic().bootstrapModuleDynamic(MyAppModule);`|`platformBrowserDynamic().bootstrapModule`
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}
Bootstraps an application defined as MyAppModule ng module using the Just in Time compiler.{@target js}Must be wrapped in the event listener to fire when the page loads.{@endtarget}

View File

@ -1,6 +1,6 @@
@cheatsheetSection
Built-in directives
@cheatsheetIndex 2
@cheatsheetIndex 3
@description
{@target ts}`import {NgIf, ...} from '@angular/common';`{@endtarget}
{@target js}Available from the `ng.common` namespace{@endtarget}

View File

@ -1,6 +1,6 @@
@cheatsheetSection
Class decorators
@cheatsheetIndex 4
@cheatsheetIndex 5
@description
{@target ts}`import {Directive, ...} from '@angular/core';`{@endtarget}
{@target js}Available from the `ng.core` namespace{@endtarget}

View File

@ -1,6 +1,6 @@
@cheatsheetSection
Component configuration
@cheatsheetIndex 6
@cheatsheetIndex 7
@description
{@target js}`ng.core.Component` extends `ng.core.Directive`,
so the `ng.core.Directive` configuration applies to components as well{@endtarget}
@ -36,17 +36,3 @@ syntax:
styleUrls: ['my-component.css']`|`styles:`|`styleUrls:`
description:
List of inline CSS styles / external stylesheet URLs for styling components view.
@cheatsheetItem
syntax:
`directives: [MyDirective, MyComponent]`|`directives:`
description:
List of directives used in the the components template.
@cheatsheetItem
syntax:
`pipes: [MyPipe, OtherPipe]`|`pipes:`
description:
List of pipes used in the component's template.

View File

@ -1,6 +1,6 @@
@cheatsheetSection
Dependency injection configuration
@cheatsheetIndex 9
@cheatsheetIndex 10
@description
{@target dart}`import 'package:angular2/core.dart';`{@endtarget}

View File

@ -1,6 +1,6 @@
@cheatsheetSection
Class field decorators for directives and components
@cheatsheetIndex 7
@cheatsheetIndex 8
@description
{@target ts}`import {Input, ...} from '@angular/core';`{@endtarget}
{@target js}Available from the `ng.core` namespace{@endtarget}

View File

@ -1,6 +1,6 @@
@cheatsheetSection
Directive configuration
@cheatsheetIndex 5
@cheatsheetIndex 6
@description
{@target ts}`@Directive({ property1: value1, ... })`{@endtarget}
{@target js}`ng.core.Directive({ property1: value1, ... }).Class({...})`{@endtarget}

View File

@ -1,9 +1,9 @@
@cheatsheetSection
Forms
@cheatsheetIndex 3
@cheatsheetIndex 4
@description
{@target ts}`import {FORM_DIRECTIVES} from '@angular/common';`{@endtarget}
{@target js}Available from `ng.common.FORM_DIRECTIVES`{@endtarget}
{@target ts}`import {FormsModule} from '@angular/forms';`{@endtarget}
{@target js}Available from `ng.forms.FormsModule`{@endtarget}
{@target dart}Available using `platform_directives` in pubspec{@endtarget}
@cheatsheetItem

View File

@ -1,6 +1,6 @@
@cheatsheetSection
Directive and component change detection and lifecycle hooks
@cheatsheetIndex 8
@cheatsheetIndex 9
@description
{@target ts dart}(implemented as class methods){@endtarget}
{@target js}(implemented as component properties){@endtarget}

View File

@ -0,0 +1,45 @@
@cheatsheetSection
NgModules
@cheatsheetIndex 1
@description
{@target ts js}`import { NgModule } from '@angular/core';`{@endtarget}
@cheatsheetItem
syntax(ts js):
`@NgModule({ declarations: ... , imports: ..., exports: ..., bootstrap: ...})
class MyModule {}`|`NgModule`
description:
Defines a module that contains components, directives, pipes and providers.
@cheatsheetItem
syntax(ts js):
`declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]`|`declarations:`
description:
List of components, directives and pipes that belong to this module.
@cheatsheetItem
syntax(ts js):
`imports: [BrowserModule, SomeOtherModule]`|`imports:`
description:
List of modules that are being imported into this module. Everything from the imported modules will
be available to `declarations` of this module.
@cheatsheetItem
syntax(ts js):
`exports: [MyRedComponent, MyDatePipe]`|`exports:`
description:
List of components, directives and pipes that will be visible to modules that import this module.
@cheatsheetItem
syntax(ts js):
`providers: [MyService, { provide: ... }]`|`providers:`
description:
Array of dependency injection providers visible to contents of this module as well as everyone
importing this module.
@cheatsheetItem
syntax(ts js):
`bootstrap: [MyAppComponent]`|`bootstrap:`
description:
Array of components to bootstrap when this module is bootstrapped.

View File

@ -1,6 +1,6 @@
@cheatsheetSection
Routing and navigation
@cheatsheetIndex 10
@cheatsheetIndex 11
@description
{@target ts}`import {provideRouter, RouteConfig, ROUTER_DIRECTIVES, ...} from '@angular/router';`{@endtarget}
{@target js}Available from the `ng.router` namespace{@endtarget}

View File

@ -1,6 +1,6 @@
@cheatsheetSection
Template syntax
@cheatsheetIndex 1
@cheatsheetIndex 2
@description
@cheatsheetItem