build(aio): remove cheatsheet processing and content
This will be replaced by a single file migrated from angular.io
This commit is contained in:
Peter Bacon Darwin
Miško Hevery
parent
4e10faf1eb
commit
b0a7bc77ee
|
|
@ -1,18 +0,0 @@
|
||||||
@cheatsheetSection
|
|
||||||
Bootstrapping
|
|
||||||
@cheatsheetIndex 0
|
|
||||||
@description
|
|
||||||
{@target ts}`import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';`{@endtarget}
|
|
||||||
{@target js}Available from the `ng.platformBrowserDynamic` namespace{@endtarget}
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax(ts):
|
|
||||||
`platformBrowserDynamic().bootstrapModule(AppModule);`|`platformBrowserDynamic().bootstrapModule`
|
|
||||||
syntax(js):
|
|
||||||
`document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
ng.platformBrowserDynamic
|
|
||||||
.platformBrowserDynamic()
|
|
||||||
.bootstrapModule(app.AppModule);
|
|
||||||
});`|`platformBrowserDynamic().bootstrapModule`
|
|
||||||
description:
|
|
||||||
Bootstraps the app, using the root component from the specified `NgModule`. {@target js}Must be wrapped in the event listener to fire when the page loads.{@endtarget}
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
@cheatsheetSection
|
|
||||||
Built-in directives
|
|
||||||
@cheatsheetIndex 3
|
|
||||||
@description
|
|
||||||
{@target ts}`import { CommonModule } from '@angular/common';`{@endtarget}
|
|
||||||
{@target js}Available using the `ng.common.CommonModule` module{@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">
|
|
||||||
<ng-template [ngSwitchCase]="case1Exp">...</ng-template>
|
|
||||||
<ng-template ngSwitchCase="case2LiteralString">...</ng-template>
|
|
||||||
<ng-template ngSwitchDefault>...</ng-template>
|
|
||||||
</div>`|`[ngSwitch]`|`[ngSwitchCase]`|`ngSwitchCase`|`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 expression should return {class-name: true/false} map.
|
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
@cheatsheetSection
|
|
||||||
Class decorators
|
|
||||||
@cheatsheetIndex 5
|
|
||||||
@description
|
|
||||||
{@target ts}`import { Directive, ... } from '@angular/core';`{@endtarget}
|
|
||||||
{@target js}Available from the `ng.core` namespace{@endtarget}
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax(ts):
|
|
||||||
`@Component({...})
|
|
||||||
class MyComponent() {}`|`@Component({...})`
|
|
||||||
syntax(js):
|
|
||||||
`var MyComponent = ng.core.Component({...}).Class({...})`|`ng.core.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({...})`
|
|
||||||
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({...})`
|
|
||||||
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) { }]});`
|
|
||||||
description:
|
|
||||||
{@target ts}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 to receive the injected services.
|
|
||||||
{@endtarget}
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
@cheatsheetSection
|
|
||||||
Component configuration
|
|
||||||
@cheatsheetIndex 7
|
|
||||||
@description
|
|
||||||
{@target js}`ng.core.Component` extends `ng.core.Directive`,
|
|
||||||
so the `ng.core.Directive` configuration applies to components as well{@endtarget}
|
|
||||||
{@target ts}`@Component` extends `@Directive`,
|
|
||||||
so the `@Directive` configuration applies to components as well{@endtarget}
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax:
|
|
||||||
`moduleId: module.id`|`moduleId:`
|
|
||||||
description:
|
|
||||||
If set, the `templateUrl` and `styleUrl` are resolved relative to the component.
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax(ts):
|
|
||||||
`viewProviders: [MyService, { provide: ... }]`|`viewProviders:`
|
|
||||||
syntax(js):
|
|
||||||
`viewProviders: [MyService, { provide: ... }]`|`viewProviders:`
|
|
||||||
description:
|
|
||||||
List of dependency injection providers scoped to this component's view.
|
|
||||||
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax:
|
|
||||||
`template: 'Hello {{name}}'
|
|
||||||
templateUrl: 'my-component.html'`|`template:`|`templateUrl:`
|
|
||||||
description:
|
|
||||||
Inline template or 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 or external stylesheet URLs for styling the component’s view.
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
@cheatsheetSection
|
|
||||||
Dependency injection configuration
|
|
||||||
@cheatsheetIndex 10
|
|
||||||
@description
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax(ts):
|
|
||||||
`{ provide: MyService, useClass: MyMockService }`|`provide`|`useClass`
|
|
||||||
syntax(js):
|
|
||||||
`{ provide: MyService, useClass: MyMockService }`|`provide`|`useClass`
|
|
||||||
description:
|
|
||||||
Sets or overrides the provider for `MyService` to the `MyMockService` class.
|
|
||||||
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax(ts):
|
|
||||||
`{ provide: MyService, useFactory: myFactory }`|`provide`|`useFactory`
|
|
||||||
syntax(js):
|
|
||||||
`{ provide: MyService, useFactory: myFactory }`|`provide`|`useFactory`
|
|
||||||
description:
|
|
||||||
Sets or overrides the provider for `MyService` to the `myFactory` factory function.
|
|
||||||
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax(ts):
|
|
||||||
`{ 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`.
|
|
||||||
|
|
@ -1,86 +0,0 @@
|
||||||
@cheatsheetSection
|
|
||||||
Class field decorators for directives and components
|
|
||||||
@cheatsheetIndex 8
|
|
||||||
@description
|
|
||||||
{@target ts}`import { Input, ... } from '@angular/core';`{@endtarget}
|
|
||||||
{@target js}Available from the `ng.core` namespace{@endtarget}
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax(ts):
|
|
||||||
`@Input() myProperty;`|`@Input()`
|
|
||||||
syntax(js):
|
|
||||||
`ng.core.Input(myProperty, myComponent);`|`ng.core.Input(`|`);`
|
|
||||||
description:
|
|
||||||
Declares an input property that you can update via property binding (example:
|
|
||||||
`<my-cmp [myProperty]="someExpression">`).
|
|
||||||
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax(ts):
|
|
||||||
`@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 that you can subscribe to with an event binding (example: `<my-cmp (myEvent)="doSomething()">`).
|
|
||||||
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax(ts):
|
|
||||||
`@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 (here, the CSS class `valid`) to a directive/component property (`isValid`).
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax(ts):
|
|
||||||
`@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 (`click`) with a directive/component method (`onClick`), optionally passing an argument (`$event`).
|
|
||||||
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax(ts):
|
|
||||||
`@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 a property (`myChildComponent`) of the class.
|
|
||||||
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax(ts):
|
|
||||||
`@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 a property (`myChildComponents`) of the class.
|
|
||||||
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax(ts):
|
|
||||||
`@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 a property (`myChildComponent`) of the class. Not available for directives.
|
|
||||||
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax(ts):
|
|
||||||
`@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 a property (`myChildComponents`) of the class. Not available for directives.
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
@cheatsheetSection
|
|
||||||
Directive configuration
|
|
||||||
@cheatsheetIndex 6
|
|
||||||
@description
|
|
||||||
{@target ts}`@Directive({ property1: value1, ... })`{@endtarget}
|
|
||||||
{@target js}`ng.core.Directive({ property1: value1, ... }).Class({...})`{@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):
|
|
||||||
`providers: [MyService, { provide: ... }]`|`providers:`
|
|
||||||
syntax(js):
|
|
||||||
`providers: [MyService, { provide: ... }]`|`providers:`
|
|
||||||
description:
|
|
||||||
List of dependency injection providers for this directive and its children.
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
@cheatsheetSection
|
|
||||||
Forms
|
|
||||||
@cheatsheetIndex 4
|
|
||||||
@description
|
|
||||||
{@target ts}`import { FormsModule } from '@angular/forms';`{@endtarget}
|
|
||||||
{@target js}Available using the `ng.forms.FormsModule` module{@endtarget}
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax:
|
|
||||||
`<input [(ngModel)]="userName">`|`[(ngModel)]`
|
|
||||||
description:
|
|
||||||
Provides two-way data-binding, parsing, and validation for form controls.
|
|
||||||
|
|
@ -1,86 +0,0 @@
|
||||||
@cheatsheetSection
|
|
||||||
Directive and component change detection and lifecycle hooks
|
|
||||||
@cheatsheetIndex 9
|
|
||||||
@description
|
|
||||||
{@target ts}(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, ...)`
|
|
||||||
description:
|
|
||||||
Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
|
|
||||||
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax(ts):
|
|
||||||
`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):
|
|
||||||
`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):
|
|
||||||
`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):
|
|
||||||
`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):
|
|
||||||
`ngAfterContentChecked() { ... }`|`ngAfterContentChecked()`
|
|
||||||
syntax(js):
|
|
||||||
`ngAfterContentChecked: function() { ... }`|`ngAfterContentChecked: function()`
|
|
||||||
description:
|
|
||||||
Called after every check of the component's or directive's content.
|
|
||||||
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax(ts):
|
|
||||||
`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):
|
|
||||||
`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):
|
|
||||||
`ngOnDestroy() { ... }`|`ngOnDestroy()`
|
|
||||||
syntax(js):
|
|
||||||
`ngOnDestroy: function() { ... }`|`ngOnDestroy: function()`
|
|
||||||
description:
|
|
||||||
Called once, before the instance is destroyed.
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
@cheatsheetSection
|
|
||||||
NgModules
|
|
||||||
@cheatsheetIndex 1
|
|
||||||
@description
|
|
||||||
{@target ts}`import { NgModule } from '@angular/core';`{@endtarget}
|
|
||||||
{@target js}Available from the `ng.core` namespace{@endtarget}
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax(ts):
|
|
||||||
`@NgModule({ declarations: ..., imports: ...,
|
|
||||||
exports: ..., providers: ..., bootstrap: ...})
|
|
||||||
class MyModule {}`|`NgModule`
|
|
||||||
description:
|
|
||||||
Defines a module that contains components, directives, pipes, and providers.
|
|
||||||
|
|
||||||
syntax(js):
|
|
||||||
`ng.core.NgModule({declarations: ..., imports: ...,
|
|
||||||
exports: ..., providers: ..., bootstrap: ...}).
|
|
||||||
Class({ constructor: function() {}})`
|
|
||||||
description:
|
|
||||||
Defines a module that contains components, directives, pipes, and providers.
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax:
|
|
||||||
`declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]`|`declarations:`
|
|
||||||
description:
|
|
||||||
List of components, directives, and pipes that belong to this module.
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax(ts):
|
|
||||||
`imports: [BrowserModule, SomeOtherModule]`|`imports:`
|
|
||||||
description:
|
|
||||||
List of modules to import into this module. Everything from the imported modules
|
|
||||||
is available to `declarations` of this module.
|
|
||||||
|
|
||||||
syntax(js):
|
|
||||||
`imports: [ng.platformBrowser.BrowserModule, SomeOtherModule]`|`imports:`
|
|
||||||
description:
|
|
||||||
List of modules to import into this module. Everything from the imported modules
|
|
||||||
is available to `declarations` of this module.
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax:
|
|
||||||
`exports: [MyRedComponent, MyDatePipe]`|`exports:`
|
|
||||||
description:
|
|
||||||
List of components, directives, and pipes visible to modules that import this module.
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax:
|
|
||||||
`providers: [MyService, { provide: ... }]`|`providers:`
|
|
||||||
description:
|
|
||||||
List of dependency injection providers visible both to the contents of this module and to importers of this module.
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax:
|
|
||||||
`bootstrap: [MyAppComponent]`|`bootstrap:`
|
|
||||||
description:
|
|
||||||
List of components to bootstrap when this module is bootstrapped.
|
|
||||||
|
|
@ -1,170 +0,0 @@
|
||||||
@cheatsheetSection
|
|
||||||
Routing and navigation
|
|
||||||
@cheatsheetIndex 11
|
|
||||||
@description
|
|
||||||
{@target ts}`import { Routes, RouterModule, ... } from '@angular/router';`{@endtarget}
|
|
||||||
{@target js}Available from the `ng.router` namespace{@endtarget}
|
|
||||||
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax(ts):
|
|
||||||
`const routes: Routes = [
|
|
||||||
{ path: '', component: HomeComponent },
|
|
||||||
{ path: 'path/:routeParam', component: MyComponent },
|
|
||||||
{ path: 'staticPath', component: ... },
|
|
||||||
{ path: '**', component: ... },
|
|
||||||
{ path: 'oldPath', redirectTo: '/staticPath' },
|
|
||||||
{ path: ..., component: ..., data: { message: 'Custom' } }
|
|
||||||
]);
|
|
||||||
|
|
||||||
const routing = RouterModule.forRoot(routes);`|`Routes`
|
|
||||||
syntax(js):
|
|
||||||
`var routes = [
|
|
||||||
{ path: '', component: HomeComponent },
|
|
||||||
{ path: ':routeParam', component: MyComponent },
|
|
||||||
{ path: 'staticPath', component: ... },
|
|
||||||
{ path: '**', component: ... },
|
|
||||||
{ path: 'oldPath', redirectTo: '/staticPath' },
|
|
||||||
{ path: ..., component: ..., data: { message: 'Custom' } }
|
|
||||||
]);
|
|
||||||
|
|
||||||
var routing = ng.router.RouterModule.forRoot(routes);`|`ng.router.Routes`
|
|
||||||
description:
|
|
||||||
Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.
|
|
||||||
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax:
|
|
||||||
`
|
|
||||||
<router-outlet></router-outlet>
|
|
||||||
<router-outlet name="aux"></router-outlet>
|
|
||||||
`|`router-outlet`
|
|
||||||
description:
|
|
||||||
Marks the location to load the component of the active route.
|
|
||||||
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax:
|
|
||||||
`
|
|
||||||
<a routerLink="/path">
|
|
||||||
<a [routerLink]="[ '/path', routeParam ]">
|
|
||||||
<a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
|
|
||||||
<a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">
|
|
||||||
<a [routerLink]="[ '/path' ]" fragment="anchor">
|
|
||||||
`|`[routerLink]`
|
|
||||||
description:
|
|
||||||
Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the `/` prefix; for a child route, use the `./`prefix; for a sibling or parent, use the `../` prefix.
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax:
|
|
||||||
`<a [routerLink]="[ '/path' ]" routerLinkActive="active">`
|
|
||||||
description:
|
|
||||||
The provided classes are added to the element when the `routerLink` becomes the current active route.
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax(ts):
|
|
||||||
`class CanActivateGuard implements CanActivate {
|
|
||||||
canActivate(
|
|
||||||
route: ActivatedRouteSnapshot,
|
|
||||||
state: RouterStateSnapshot
|
|
||||||
): Observable<boolean>|Promise<boolean>|boolean { ... }
|
|
||||||
}
|
|
||||||
|
|
||||||
{ path: ..., canActivate: [CanActivateGuard] }`|`CanActivate`
|
|
||||||
syntax(js):
|
|
||||||
`var CanActivateGuard = ng.core.Class({
|
|
||||||
canActivate: function(route, state) {
|
|
||||||
// return Observable/Promise boolean or boolean
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
{ path: ..., canActivate: [CanActivateGuard] }`|`CanActivate`
|
|
||||||
description:
|
|
||||||
An interface for defining a class that the router should call first to determine if it should activate this component. Should return a boolean or an Observable/Promise that resolves to a boolean.
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax(ts):
|
|
||||||
`class CanDeactivateGuard implements CanDeactivate<T> {
|
|
||||||
canDeactivate(
|
|
||||||
component: T,
|
|
||||||
route: ActivatedRouteSnapshot,
|
|
||||||
state: RouterStateSnapshot
|
|
||||||
): Observable<boolean>|Promise<boolean>|boolean { ... }
|
|
||||||
}
|
|
||||||
|
|
||||||
{ path: ..., canDeactivate: [CanDeactivateGuard] }`|`CanDeactivate`
|
|
||||||
syntax(js):
|
|
||||||
`var CanDeactivateGuard = ng.core.Class({
|
|
||||||
canDeactivate: function(component, route, state) {
|
|
||||||
// return Observable/Promise boolean or boolean
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
{ path: ..., canDeactivate: [CanDeactivateGuard] }`|`CanDeactivate`
|
|
||||||
description:
|
|
||||||
An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean or an Observable/Promise that resolves to a boolean.
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax(ts):
|
|
||||||
`class CanActivateChildGuard implements CanActivateChild {
|
|
||||||
canActivateChild(
|
|
||||||
route: ActivatedRouteSnapshot,
|
|
||||||
state: RouterStateSnapshot
|
|
||||||
): Observable<boolean>|Promise<boolean>|boolean { ... }
|
|
||||||
}
|
|
||||||
|
|
||||||
{ path: ..., canActivateChild: [CanActivateGuard],
|
|
||||||
children: ... }`|`CanActivateChild`
|
|
||||||
syntax(js):
|
|
||||||
`var CanActivateChildGuard = ng.core.Class({
|
|
||||||
canActivateChild: function(route, state) {
|
|
||||||
// return Observable/Promise boolean or boolean
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
{ path: ..., canActivateChild: [CanActivateChildGuard],
|
|
||||||
children: ... }`|`CanActivateChild`
|
|
||||||
description:
|
|
||||||
An interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean or an Observable/Promise that resolves to a boolean.
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax(ts):
|
|
||||||
`class ResolveGuard implements Resolve<T> {
|
|
||||||
resolve(
|
|
||||||
route: ActivatedRouteSnapshot,
|
|
||||||
state: RouterStateSnapshot
|
|
||||||
): Observable<any>|Promise<any>|any { ... }
|
|
||||||
}
|
|
||||||
|
|
||||||
{ path: ..., resolve: [ResolveGuard] }`|`Resolve`
|
|
||||||
syntax(js):
|
|
||||||
`var ResolveGuard = ng.core.Class({
|
|
||||||
resolve: function(route, state) {
|
|
||||||
// return Observable/Promise value or value
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
{ path: ..., resolve: [ResolveGuard] }`|`Resolve`
|
|
||||||
description:
|
|
||||||
An interface for defining a class that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value.
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax(ts):
|
|
||||||
`class CanLoadGuard implements CanLoad {
|
|
||||||
canLoad(
|
|
||||||
route: Route
|
|
||||||
): Observable<boolean>|Promise<boolean>|boolean { ... }
|
|
||||||
}
|
|
||||||
|
|
||||||
{ path: ..., canLoad: [CanLoadGuard], loadChildren: ... }`|`CanLoad`
|
|
||||||
syntax(js):
|
|
||||||
`var CanLoadGuard = ng.core.Class({
|
|
||||||
canLoad: function(route) {
|
|
||||||
// return Observable/Promise boolean or boolean
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
{ path: ..., canLoad: [CanLoadGuard], loadChildren: ... }`|`CanLoad`
|
|
||||||
description:
|
|
||||||
An interface for defining a class that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean or an Observable/Promise that resolves to a boolean.
|
|
||||||
|
|
||||||
|
|
@ -1,94 +0,0 @@
|
||||||
@cheatsheetSection
|
|
||||||
Template syntax
|
|
||||||
@cheatsheetIndex 2
|
|
||||||
@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, for example, "Hello Seabiscuit". Equivalent to:
|
|
||||||
`<div [title]="'Hello ' + ponyName">`
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax:
|
|
||||||
`<p>Hello {{ponyName}}</p>`|`{{ponyName}}`
|
|
||||||
description:
|
|
||||||
Binds text content to an interpolated string, for example, "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 turns the current element into an embedded template. Equivalent to:
|
|
||||||
`<ng-template [myUnless]="myExpression"><p>...</p></ng-template>`
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax:
|
|
||||||
`<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>`|`{{cardNumber | myCardNumberFormatter}}`
|
|
||||||
description:
|
|
||||||
Transforms the current value of expression `cardNumber` via the pipe called `myCardNumberFormatter`.
|
|
||||||
|
|
||||||
@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.
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax:
|
|
||||||
`<svg:rect x="0" y="0" width="100" height="100"/>`|`svg:`
|
|
||||||
description:
|
|
||||||
An SVG snippet template needs an `svg:` prefix on its root element to disambiguate the SVG element from an HTML component.
|
|
||||||
|
|
||||||
@cheatsheetItem
|
|
||||||
syntax:
|
|
||||||
`<svg>
|
|
||||||
<rect x="0" y="0" width="100" height="100"/>
|
|
||||||
</svg>`|`svg`
|
|
||||||
description:
|
|
||||||
An `<svg>` root element is detected as an SVG element automatically, without the prefix.
|
|
||||||
|
|
@ -16,7 +16,7 @@ const gitPackage = require('dgeni-packages/git');
|
||||||
const linksPackage = require('../links-package');
|
const linksPackage = require('../links-package');
|
||||||
const examplesPackage = require('../examples-package');
|
const examplesPackage = require('../examples-package');
|
||||||
const targetPackage = require('../target-package');
|
const targetPackage = require('../target-package');
|
||||||
const cheatsheetPackage = require('../cheatsheet-package');
|
const contentPackage = require('../content-package');
|
||||||
const rhoPackage = require('../rho-package');
|
const rhoPackage = require('../rho-package');
|
||||||
|
|
||||||
const PROJECT_ROOT = path.resolve(__dirname, '../../..');
|
const PROJECT_ROOT = path.resolve(__dirname, '../../..');
|
||||||
|
|
@ -31,7 +31,7 @@ module.exports =
|
||||||
'angular.io',
|
'angular.io',
|
||||||
[
|
[
|
||||||
jsdocPackage, nunjucksPackage, typescriptPackage, linksPackage, examplesPackage,
|
jsdocPackage, nunjucksPackage, typescriptPackage, linksPackage, examplesPackage,
|
||||||
gitPackage, targetPackage, cheatsheetPackage, rhoPackage
|
gitPackage, targetPackage, contentPackage, rhoPackage
|
||||||
])
|
])
|
||||||
|
|
||||||
// Register the processors
|
// Register the processors
|
||||||
|
|
@ -110,7 +110,6 @@ module.exports =
|
||||||
include: CONTENTS_PATH + '/file-not-found.md',
|
include: CONTENTS_PATH + '/file-not-found.md',
|
||||||
fileReader: 'contentFileReader'
|
fileReader: 'contentFileReader'
|
||||||
},
|
},
|
||||||
{basePath: CONTENTS_PATH, include: CONTENTS_PATH + '/cheatsheet/*.md'},
|
|
||||||
{
|
{
|
||||||
basePath: API_SOURCE_PATH,
|
basePath: API_SOURCE_PATH,
|
||||||
include: API_SOURCE_PATH + '/examples/**/*',
|
include: API_SOURCE_PATH + '/examples/**/*',
|
||||||
|
|
@ -245,11 +244,6 @@ module.exports =
|
||||||
pathTemplate: '${moduleDoc.moduleFolder}/${name}',
|
pathTemplate: '${moduleDoc.moduleFolder}/${name}',
|
||||||
outputPathTemplate: '${moduleDoc.moduleFolder}/${name}.json',
|
outputPathTemplate: '${moduleDoc.moduleFolder}/${name}.json',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
docTypes: ['cheatsheet-data'],
|
|
||||||
pathTemplate: GUIDE_SEGMENT + '/cheatsheet.json',
|
|
||||||
outputPathTemplate: '${path}'
|
|
||||||
},
|
|
||||||
{docTypes: ['example-region'], getOutputPath: function() {}},
|
{docTypes: ['example-region'], getOutputPath: function() {}},
|
||||||
{docTypes: ['content'], pathTemplate: '${id}', outputPathTemplate: '${path}.json'},
|
{docTypes: ['content'], pathTemplate: '${id}', outputPathTemplate: '${path}.json'},
|
||||||
{docTypes: ['navigation-map'], pathTemplate: '${id}', outputPathTemplate: '../${id}.json'}
|
{docTypes: ['navigation-map'], pathTemplate: '${id}', outputPathTemplate: '../${id}.json'}
|
||||||
|
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
var Package = require('dgeni').Package;
|
|
||||||
|
|
||||||
module.exports = new Package(
|
|
||||||
'cheatsheet',
|
|
||||||
[
|
|
||||||
require('../content-package'), require('../target-package'),
|
|
||||||
require('dgeni-packages/git'), require('dgeni-packages/nunjucks')
|
|
||||||
])
|
|
||||||
|
|
||||||
.factory(require('./services/cheatsheetItemParser'))
|
|
||||||
.processor(require('./processors/createCheatsheetDoc'))
|
|
||||||
|
|
||||||
.config(function(parseTagsProcessor, getInjectables) {
|
|
||||||
parseTagsProcessor.tagDefinitions = parseTagsProcessor.tagDefinitions.concat(
|
|
||||||
getInjectables(require('./tag-defs')));
|
|
||||||
});
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
var _ = require('lodash');
|
|
||||||
|
|
||||||
module.exports = function createCheatsheetDoc(
|
|
||||||
createDocMessage, renderMarkdown, versionInfo, targetEnvironments) {
|
|
||||||
return {
|
|
||||||
$runAfter: ['processing-docs'],
|
|
||||||
$runBefore: ['docs-processed'],
|
|
||||||
$process: function(docs) {
|
|
||||||
|
|
||||||
var currentEnvironment = targetEnvironments.isActive('ts') && 'TypeScript' ||
|
|
||||||
targetEnvironments.isActive('js') && 'JavaScript' ||
|
|
||||||
targetEnvironments.isActive('dart') && 'Dart';
|
|
||||||
|
|
||||||
var cheatsheetDoc = {
|
|
||||||
id: 'cheatsheet',
|
|
||||||
aliases: ['cheatsheet'],
|
|
||||||
docType: 'cheatsheet-data',
|
|
||||||
sections: [],
|
|
||||||
version: versionInfo,
|
|
||||||
currentEnvironment: currentEnvironment
|
|
||||||
};
|
|
||||||
|
|
||||||
docs = docs.filter(function(doc) {
|
|
||||||
if (doc.docType === 'cheatsheet-section') {
|
|
||||||
var section = _.pick(doc, ['name', 'description', 'items', 'index']);
|
|
||||||
|
|
||||||
// Let's make sure that the descriptions are rendered as markdown
|
|
||||||
section.description = renderMarkdown(section.description);
|
|
||||||
section.items.forEach(function(item) {
|
|
||||||
item.description = renderMarkdown(item.description);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
cheatsheetDoc.sections.push(section);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Sort the sections by their index
|
|
||||||
cheatsheetDoc.sections.sort(function(a, b) { return a.index - b.index; });
|
|
||||||
|
|
||||||
docs.push(cheatsheetDoc);
|
|
||||||
|
|
||||||
return docs;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
@ -1,125 +0,0 @@
|
||||||
/**
|
|
||||||
* @dgService
|
|
||||||
* @description
|
|
||||||
* Parse the text from a cheatsheetItem tag into a cheatsheet item object
|
|
||||||
* The text must contain a syntax block followed by zero or more bold matchers and finally a
|
|
||||||
* description
|
|
||||||
* The syntax block and bold matchers must be wrapped in backticks and be separated by pipes.
|
|
||||||
* For example
|
|
||||||
*
|
|
||||||
* ```
|
|
||||||
* `<div [ng-switch]="conditionExpression">
|
|
||||||
* <template [ng-switch-when]="case1Exp">...</template>
|
|
||||||
* <template ng-switch-when="case2LiteralString">...</template>
|
|
||||||
* <template ng-switch-default>...</template>
|
|
||||||
* </div>`|`[ng-switch]`|`[ng-switch-when]`|`ng-switch-when`|`ng-switch-default`
|
|
||||||
* Conditionally swaps the contents of the div by selecting one of the embedded templates based on
|
|
||||||
* the current value of conditionExpression.
|
|
||||||
* ```
|
|
||||||
*
|
|
||||||
* will be parsed into
|
|
||||||
*
|
|
||||||
* ```
|
|
||||||
* {
|
|
||||||
* syntax: '<div [ng-switch]="conditionExpression">\n'+
|
|
||||||
* ' <template [ng-switch-when]="case1Exp">...</template>\n'+
|
|
||||||
* ' <template ng-switch-when="case2LiteralString">...</template>\n'+
|
|
||||||
* ' <template ng-switch-default>...</template>\n'+
|
|
||||||
* '</div>',
|
|
||||||
* bold: ['[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.'
|
|
||||||
* }
|
|
||||||
* ```
|
|
||||||
*/
|
|
||||||
module.exports =
|
|
||||||
function cheatsheetItemParser(targetEnvironments) {
|
|
||||||
return function(text) {
|
|
||||||
var fields = getFields(text, ['syntax', 'description']);
|
|
||||||
|
|
||||||
var item = {syntax: '', bold: [], description: ''};
|
|
||||||
|
|
||||||
fields.forEach(function(field) {
|
|
||||||
if (!field.languages || targetEnvironments.someActive(field.languages)) {
|
|
||||||
switch (field.name) {
|
|
||||||
case 'syntax':
|
|
||||||
parseSyntax(field.value.trim());
|
|
||||||
break;
|
|
||||||
case 'description':
|
|
||||||
item.description = field.value.trim();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return item;
|
|
||||||
|
|
||||||
function parseSyntax(text) {
|
|
||||||
var index = 0;
|
|
||||||
|
|
||||||
if (text.charAt(index) !== '`') throw new Error('item syntax must start with a backtick');
|
|
||||||
|
|
||||||
var start = index + 1;
|
|
||||||
index = text.indexOf('`', start);
|
|
||||||
if (index === -1) throw new Error('item syntax must end with a backtick');
|
|
||||||
item.syntax = text.substring(start, index);
|
|
||||||
start = index + 1;
|
|
||||||
|
|
||||||
// skip to next pipe
|
|
||||||
while (index < text.length && text.charAt(index) !== '|') index += 1;
|
|
||||||
|
|
||||||
while (text.charAt(start) === '|') {
|
|
||||||
start += 1;
|
|
||||||
|
|
||||||
// skip whitespace
|
|
||||||
while (start < text.length && /\s/.test(text.charAt(start))) start++;
|
|
||||||
|
|
||||||
if (text.charAt(start) !== '`') throw new Error('bold matcher must start with a backtick');
|
|
||||||
|
|
||||||
start += 1;
|
|
||||||
index = text.indexOf('`', start);
|
|
||||||
if (index === -1) throw new Error('bold matcher must end with a backtick');
|
|
||||||
item.bold.push(text.substring(start, index));
|
|
||||||
start = index + 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (start !== text.length) {
|
|
||||||
throw new Error(
|
|
||||||
'syntax field must only contain a syntax code block and zero or more bold ' +
|
|
||||||
'matcher code blocks, delimited by pipes.\n' +
|
|
||||||
'Instead it was "' + text + '"');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function getFields(text, fieldNames) {
|
|
||||||
var FIELD_START = /^([^:(]+)\(?([^)]+)?\)?:$/;
|
|
||||||
var lines = text.split('\n');
|
|
||||||
var fields = [];
|
|
||||||
var field, line;
|
|
||||||
while (lines.length) {
|
|
||||||
line = lines.shift();
|
|
||||||
var match = FIELD_START.exec(line);
|
|
||||||
if (match && fieldNames.indexOf(match[1]) !== -1) {
|
|
||||||
// start new field
|
|
||||||
if (field) {
|
|
||||||
fields.push(field);
|
|
||||||
}
|
|
||||||
field = {name: match[1], languages: (match[2] && match[2].split(' ')), value: ''};
|
|
||||||
} else {
|
|
||||||
if (!field)
|
|
||||||
throw new Error(
|
|
||||||
'item must start with one of the following field specifiers:\n' +
|
|
||||||
fieldNames.map(function(field) { return field + ':'; }).join('\n') + '\n' +
|
|
||||||
'but instead it contained: "' + text + '"');
|
|
||||||
field.value += line + '\n';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (field) {
|
|
||||||
fields.push(field);
|
|
||||||
}
|
|
||||||
|
|
||||||
return fields;
|
|
||||||
}
|
|
||||||
|
|
@ -1,75 +0,0 @@
|
||||||
var testPackage = require('../../helpers/test-package');
|
|
||||||
var Dgeni = require('dgeni');
|
|
||||||
|
|
||||||
describe('cheatsheetItemParser', function() {
|
|
||||||
var dgeni, injector, cheatsheetItemParser;
|
|
||||||
|
|
||||||
beforeEach(function() {
|
|
||||||
dgeni = new Dgeni([testPackage('cheatsheet-package')]);
|
|
||||||
injector = dgeni.configureInjector();
|
|
||||||
cheatsheetItemParser = injector.get('cheatsheetItemParser');
|
|
||||||
var targetEnvironments = injector.get('targetEnvironments');
|
|
||||||
targetEnvironments.addAllowed('js');
|
|
||||||
targetEnvironments.addAllowed('ts', true);
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('no language targets', function() {
|
|
||||||
it('should extract the syntax', function() {
|
|
||||||
expect(cheatsheetItemParser('syntax:\n`abc`'))
|
|
||||||
.toEqual({syntax: 'abc', bold: [], description: ''});
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should extract the bolds', function() {
|
|
||||||
expect(cheatsheetItemParser('syntax:\n`abc`|`bold1`|`bold2`'))
|
|
||||||
.toEqual({syntax: 'abc', bold: ['bold1', 'bold2'], description: ''});
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should extract the description', function() {
|
|
||||||
expect(cheatsheetItemParser('syntax:\n`abc`|`bold1`|`bold2`\ndescription:\nsome description'))
|
|
||||||
.toEqual({syntax: 'abc', bold: ['bold1', 'bold2'], description: 'some description'});
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should allow bold to be optional', function() {
|
|
||||||
expect(cheatsheetItemParser('syntax:\n`abc`\ndescription:\nsome description'))
|
|
||||||
.toEqual({syntax: 'abc', bold: [], description: 'some description'});
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should allow whitespace between the parts', function() {
|
|
||||||
expect(cheatsheetItemParser(
|
|
||||||
'syntax:\n`abc`| `bold1`| `bold2`\ndescription:\n\nsome description'))
|
|
||||||
.toEqual({syntax: 'abc', bold: ['bold1', 'bold2'], description: 'some description'});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('with language targets', function() {
|
|
||||||
it('should extract the active language', function() {
|
|
||||||
expect(cheatsheetItemParser(
|
|
||||||
'syntax(ts):\n`abc`|`bold1`|`bold2`\ndescription(ts):\nsome description'))
|
|
||||||
.toEqual({syntax: 'abc', bold: ['bold1', 'bold2'], description: 'some description'});
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should ignore the non-active language', function() {
|
|
||||||
expect(cheatsheetItemParser(
|
|
||||||
'syntax(js):\n`abc`|`bold1`|`bold2`\ndescription(js):\nsome description'))
|
|
||||||
.toEqual({syntax: '', bold: [], description: ''});
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should select the active language and ignore non-active language', function() {
|
|
||||||
expect(cheatsheetItemParser(
|
|
||||||
'syntax(js):\n`JS`|`boldJS``\n' +
|
|
||||||
'syntax(ts):\n`TS`|`boldTS`\n' +
|
|
||||||
'description(js):\nJS description\n' +
|
|
||||||
'description(ts):\nTS description'))
|
|
||||||
.toEqual({syntax: 'TS', bold: ['boldTS'], description: 'TS description'});
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should error if a language target is used that is not allowed', function() {
|
|
||||||
expect(function() {
|
|
||||||
cheatsheetItemParser(
|
|
||||||
'syntax(dart):\n`abc`|`bold1`|`bold2`\ndescription(ts):\nsome description');
|
|
||||||
})
|
|
||||||
.toThrowError(
|
|
||||||
'Error accessing target "dart". It is not in the list of allowed targets: js,ts');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
module.exports = function(createDocMessage) {
|
|
||||||
return {
|
|
||||||
name: 'cheatsheetIndex',
|
|
||||||
docProperty: 'index',
|
|
||||||
transforms: function(doc, tag, value) {
|
|
||||||
try {
|
|
||||||
return parseInt(value, 10);
|
|
||||||
} catch (x) {
|
|
||||||
throw new Error(
|
|
||||||
createDocMessage('"@' + tag.tagName + '" must be followed by a number', doc));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
module.exports = function(createDocMessage, cheatsheetItemParser) {
|
|
||||||
return {
|
|
||||||
name: 'cheatsheetItem',
|
|
||||||
multi: true,
|
|
||||||
docProperty: 'items',
|
|
||||||
transforms: function(doc, tag, value) {
|
|
||||||
try {
|
|
||||||
return cheatsheetItemParser(value);
|
|
||||||
} catch (x) {
|
|
||||||
throw new Error(createDocMessage(
|
|
||||||
'"@' + tag.tagName + '" tag has an invalid format - ' + x.message, doc));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
module.exports = function() {
|
|
||||||
return {
|
|
||||||
name: 'cheatsheetSection',
|
|
||||||
docProperty: 'docType',
|
|
||||||
transforms: function(doc, tag, value) {
|
|
||||||
doc.name = value ? value.trim() : '';
|
|
||||||
return 'cheatsheet-section';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
module.exports =
|
|
||||||
[require('./cheatsheet-section'), require('./cheatsheet-index'), require('./cheatsheet-item')];
|
|
||||||
Loading…
Reference in New Issue