iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

stumped by the router wildcard

This commit is contained in:
Ward Bell 2015-12-14 16:58:32 -08:00 committed by Naomi Black
parent 0c1d7ca3cb
commit d474c9a6cd
6 changed files with 1514 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/docs/_examples/router/ts/app/app.component.ts
View File

@ -22,6 +22,7 @@ import {HeroDetailComponent} from './heroes/hero-detail.component';
// #docregion route-config
@RouteConfig([
/*
// #docregion route-config-cc
{ // Crisis Center child route
path: '/crisis-center/...',
@ -29,11 +30,15 @@ import {HeroDetailComponent} from './heroes/hero-detail.component';
component: CrisisCenterComponent,
useAsDefault: true
},
// #enddocregion route-config-cc
// #enddocregion route-config-cc
*/
{path: '/crisis-center/...', name: 'CrisisCenter', component: CrisisCenterComponent, useAsDefault: true},
{path: '/heroes', name: 'Heroes', component: HeroListComponent},
{path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent},
{path: '/*other', redirectTo: ['Heroes']},
// #docregion other
{path: '/*other', redirectTo: ['CrisisCenter']},
// #enddocregion other
])
// #enddocregion route-config
export class AppComponent { }

1
public/docs/dart/latest/api/api-list.json Normal file
View File

@ -0,0 +1 @@
{}

45
public/docs/dart/latest/api/overview-dump.html Normal file
View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
max-width: 1000px;
}
h2 {
margin-top: 20px;
margin-bottom: 0;
border-bottom: solid 1px black;
}
h3 {
margin-top: 10px;
margin-bottom: 0;
padding-left: 20px;
}
h4 {
padding-left: 30px;
margin: 0;
}
.not-documented::after {
content: "(not documented)";
font-size: small;
font-style: italic;
color: red;
}
a {
color: black;
text-decoration: none;
}
</style>
</head>
<body>
<h1>Module Overview</h1>
</body>
</html>

487
public/docs/dart/latest/guide/cheatsheet.json Normal file
View File

@ -0,0 +1,487 @@
[
{
"name": "Bootstrapping",
"description": "<p>\n<code>import &#39;package:angular2/bootstrap.dart&#39;;</code></p>\n",
"items": [
{
"syntax": "bootstrap​(MyAppComponent, [MyService, provide(...)]);",
"bold": [
"provide"
],
"description": "<p>Bootstraps an application with MyAppComponent as the root component, and\nconfigures the app&#39;s dependency injection providers.</p>\n"
}
],
"index": 0
},
{
"name": "Template syntax",
"description": "",
"items": [
{
"syntax": "<input [value]=\"firstName\">",
"bold": [
"[value]"
],
"description": "<p>Binds property <code>value</code> to the result of expression <code>firstName</code>.</p>\n"
},
{
"syntax": "<div [attr.role]=\"myAriaRole\">",
"bold": [
"[attr.role]"
],
"description": "<p>Binds attribute <code>role</code> to the result of expression <code>myAriaRole</code>.</p>\n"
},
{
"syntax": "<div [class.extra-sparkle]=\"isDelightful\">",
"bold": [
"[class.extra-sparkle]"
],
"description": "<p>Binds the presence of the CSS class <code>extra-sparkle</code> on the element to the truthiness of the expression <code>isDelightful</code>.</p>\n"
},
{
"syntax": "<div [style.width.px]=\"mySize\">",
"bold": [
"[style.width.px]"
],
"description": "<p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p>\n"
},
{
"syntax": "<button (click)=\"readRainbow($event)\">",
"bold": [
"(click)"
],
"description": "<p>Calls method <code>readRainbow</code> when a click event is triggered on this button element (or its children) and passes in the event object.</p>\n"
},
{
"syntax": "<div title=\"Hello {{ponyName}}\">",
"bold": [
"{{ponyName}}"
],
"description": "<p>Binds a property to an interpolated string, e.g. &quot;Hello Seabiscuit&quot;. Equivalent to:\n<code>&lt;div [title]=&quot;&#39;Hello&#39; + ponyName&quot;&gt;</code></p>\n"
},
{
"syntax": "<p>Hello {{ponyName}}</p>",
"bold": [
"{{ponyName}}"
],
"description": "<p>Binds text content to an interpolated string, e.g. &quot;Hello Seabiscuit&quot;.</p>\n"
},
{
"syntax": "<my-cmp [(title)]=\"name\">",
"bold": [
"[(title)]"
],
"description": "<p>Sets up two-way data binding. Equivalent to: <code>&lt;my-cmp [title]=&quot;name&quot; (titleChange)=&quot;name=$event&quot;&gt;</code></p>\n"
},
{
"syntax": "<video #movieplayer ...>\n <button (click)=\"movieplayer.play()\">\n</video>",
"bold": [
"#movieplayer",
"(click)"
],
"description": "<p>Creates a local variable <code>movieplayer</code> that provides access to the <code>video</code> element instance in data-binding and event-binding expressions in the current template.</p>\n"
},
{
"syntax": "<p *my-unless=\"myExpression\">...</p>",
"bold": [
"*my-unless"
],
"description": "<p>The <code>*</code> symbol means that the current element will be turned into an embedded template. Equivalent to:\n<code>&lt;template [myless]=&quot;myExpression&quot;&gt;&lt;p&gt;...&lt;/p&gt;&lt;/template&gt;</code></p>\n"
},
{
"syntax": "<p>Card No.: {{cardNumber | myCreditCardNumberFormatter}}</p>",
"bold": [
"{{cardNumber | myCreditCardNumberFormatter}}"
],
"description": "<p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>creditCardNumberFormatter</code>.</p>\n"
},
{
"syntax": "<p>Employer: {{employer?.companyName}}</p>",
"bold": [
"{{employer?.companyName}}"
],
"description": "<p>The Elvis operator (<code>?</code>) means that the <code>employer</code> field is optional and if <code>undefined</code>, the rest of the expression should be ignored.</p>\n"
}
],
"index": 1
},
{
"name": "Built-in directives",
"description": "<p>\n<code>import &#39;package:angular2/common.dart&#39;;</code></p>\n",
"items": [
{
"syntax": "<section *ngIf=\"showSection\">",
"bold": [
"*ngIf"
],
"description": "<p>Removes or recreates a portion of the DOM tree based on the showSection expression.</p>\n"
},
{
"syntax": "<li *ngFor=\"#item of list\">",
"bold": [
"*ngFor"
],
"description": "<p>Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.</p>\n"
},
{
"syntax": "<div [ngSwitch]=\"conditionExpression\">\n <template [ngSwitchWhen]=\"case1Exp\">...</template>\n <template ngSwitchWhen=\"case2LiteralString\">...</template>\n <template ngSwitchDefault>...</template>\n</div>",
"bold": [
"[ngSwitch]",
"[ngSwitchWhen]",
"ngSwitchWhen",
"ngSwitchDefault"
],
"description": "<p>Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.</p>\n"
},
{
"syntax": "<div [ngClass]=\"{active: isActive, disabled: isDisabled}\">",
"bold": [
"[ngClass]"
],
"description": "<p>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.</p>\n"
}
],
"index": 2
},
{
"name": "Forms",
"description": "<p>\n<code>import &#39;package:angular2/common.dart&#39;;</code></p>\n",
"items": [
{
"syntax": "<input [(ngModel)]=\"userName\">",
"bold": [
"[(ngModel)]"
],
"description": "<p>Provides two-way data-binding, parsing and validation for form controls.</p>\n"
}
],
"index": 3
},
{
"name": "Class decorators",
"description": "<p>\n<code>import &#39;package:angular2/core.dart&#39;;</code></p>\n",
"items": [
{
"syntax": "@Component(...)\nclass MyComponent() {}",
"bold": [
"@Component(...)"
],
"description": "<p>Declares that a class is a component and provides metadata about the component.</p>\n"
},
{
"syntax": "@Pipe(...)\nclass MyPipe() {}",
"bold": [
"@Pipe(...)"
],
"description": "<p>Declares that a class is a pipe and provides metadata about the pipe.</p>\n"
},
{
"syntax": "@Injectable()\nclass MyService() {}",
"bold": [
"@Injectable()"
],
"description": "<p>Declares that a class has dependencies that should be injected into the constructor when the dependency\ninjector is creating an instance of this class.</p>\n"
}
],
"index": 4
},
{
"name": "Directive configuration",
"description": "<p>\n<code>@Directive(property1: value1, ...)</code></p>\n",
"items": [
{
"syntax": "selector: '.cool-button:not(a)'",
"bold": [
"selector:"
],
"description": "<p>Specifies a CSS selector that identifies this directive within a template. Supported selectors include <code>element</code>,\n<code>[attribute]</code>, <code>.class</code>, and <code>:not()</code>.</p>\n<p>Does not support parent-child relationship selectors.</p>\n"
},
{
"syntax": "providers: [MyService, provide(...)]",
"bold": [
"providers:"
],
"description": "<p>Array of dependency injection providers for this directive and its children.</p>\n"
}
],
"index": 5
},
{
"name": "Component configuration",
"description": "<p><code>@Component</code> extends <code>@Directive</code>,\nso the <code>@Directive</code> configuration applies to components as well</p>\n",
"items": [
{
"syntax": "viewProviders: [MyService, provide(...)]",
"bold": [
"viewProviders:"
],
"description": "<p>Array of dependency injection providers scoped to this component&#39;s view.</p>\n"
},
{
"syntax": "template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'",
"bold": [
"template:",
"templateUrl:"
],
"description": "<p>Inline template / external template URL of the component&#39;s view.</p>\n"
},
{
"syntax": "styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']",
"bold": [
"styles:",
"styleUrls:"
],
"description": "<p>List of inline CSS styles / external stylesheet URLs for styling component’s view.</p>\n"
},
{
"syntax": "directives: [MyDirective, MyComponent]",
"bold": [
"directives:"
],
"description": "<p>List of directives used in the the component’s template.</p>\n"
},
{
"syntax": "pipes: [MyPipe, OtherPipe]",
"bold": [
"pipes:"
],
"description": "<p>List of pipes used in the component&#39;s template.</p>\n"
}
],
"index": 6
},
{
"name": "Class field decorators for directives and components",
"description": "<p>\n<code>import &#39;package:angular2/core.dart&#39;;</code></p>\n",
"items": [
{
"syntax": "@Input() myProperty;",
"bold": [
"@Input()"
],
"description": "<p>Declares an input property that we can update via property binding (e.g.\n<code>&lt;my-cmp [my-property]=&quot;someExpression&quot;&gt;</code>).</p>\n"
},
{
"syntax": "@Output() myEvent = new EventEmitter();",
"bold": [
"@Output()"
],
"description": "<p>Declares an output property that fires events to which we can subscribe with an event binding (e.g. <code>&lt;my-cmp (my-event)=&quot;doSomething()&quot;&gt;</code>).</p>\n"
},
{
"syntax": "@HostBinding('[class.valid]') isValid;",
"bold": [
"@HostBinding('[class.valid]')"
],
"description": "<p>Binds a host element property (e.g. CSS class valid) to directive/component property (e.g. isValid).</p>\n"
},
{
"syntax": "@HostListener('click', ['$event']) onClick(e) {...}",
"bold": [
"@HostListener('click', ['$event'])"
],
"description": "<p>Subscribes to a host element event (e.g. click) with a directive/component method (e.g. onClick), optionally passing an argument ($event).</p>\n"
},
{
"syntax": "@ContentChild(myPredicate) myChildComponent;",
"bold": [
"@ContentChild(myPredicate)"
],
"description": "<p>Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.</p>\n"
},
{
"syntax": "@ContentChildren(myPredicate) myChildComponents;",
"bold": [
"@ContentChildren(myPredicate)"
],
"description": "<p>Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.</p>\n"
},
{
"syntax": "@ViewChild(myPredicate) myChildComponent;",
"bold": [
"@ViewChild(myPredicate)"
],
"description": "<p>Binds the first result of the component view query (myPredicate) to the myChildComponent property of the class. Not available for directives.</p>\n"
},
{
"syntax": "@ViewChildren(myPredicate) myChildComponents;",
"bold": [
"@ViewChildren(myPredicate)"
],
"description": "<p>Binds the results of the component view query (myPredicate) to the myChildComponents property of the class. Not available for directives.</p>\n"
}
],
"index": 7
},
{
"name": "Directive and component change detection and lifecycle hooks",
"description": "<p>(implemented as class methods)</p>\n",
"items": [
{
"syntax": "MyAppComponent(MyService myService, ...) { ... }",
"bold": [
"MyAppComponent(MyService myService, ...)"
],
"description": "<p>The class constructor is called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.</p>\n"
},
{
"syntax": "ngOnChanges(changeRecord) { ... }",
"bold": [
"ngOnChanges(changeRecord)"
],
"description": "<p>Called after every change to input properties and before processing content or child views.</p>\n"
},
{
"syntax": "ngOnInit() { ... }",
"bold": [
"ngOnInit()"
],
"description": "<p>Called after the constructor, initializing input properties, and the first call to ngOnChanges.</p>\n"
},
{
"syntax": "ngDoCheck() { ... }",
"bold": [
"ngDoCheck()"
],
"description": "<p>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.</p>\n"
},
{
"syntax": "ngAfterContentInit() { ... }",
"bold": [
"ngAfterContentInit()"
],
"description": "<p>Called after ngOnInit when the component&#39;s or directive&#39;s content has been initialized.</p>\n"
},
{
"syntax": "ngAfterContentChecked() { ... }",
"bold": [
"ngAfterContentChecked()"
],
"description": "<p>Called after every check of the component&#39;s or directive&#39;s content.</p>\n"
},
{
"syntax": "ngAfterViewInit() { ... }",
"bold": [
"ngAfterViewInit()"
],
"description": "<p>Called after ngAfterContentInit when the component&#39;s view has been initialized. Applies to components only.</p>\n"
},
{
"syntax": "ngAfterViewChecked() { ... }",
"bold": [
"ngAfterViewChecked()"
],
"description": "<p>Called after every check of the component&#39;s view. Applies to components only.</p>\n"
},
{
"syntax": "ngOnDestroy() { ... }",
"bold": [
"ngOnDestroy()"
],
"description": "<p>Called once, before the instance is destroyed.</p>\n"
}
],
"index": 8
},
{
"name": "Dependency injection configuration",
"description": "<p>\n<code>import &#39;package:angular2/core.dart&#39;;</code></p>\n",
"items": [
{
"syntax": "provide(MyService, {useClass: MyMockService})",
"bold": [
"provide",
"useClass"
],
"description": "<p>Sets or overrides the provider for MyService to the MyMockService class.</p>\n"
},
{
"syntax": "provide(MyService, {useFactory: myFactory})",
"bold": [
"provide",
"useFactory"
],
"description": "<p>Sets or overrides the provider for MyService to the myFactory factory function.</p>\n"
},
{
"syntax": "provide(MyValue, {useValue: 41})",
"bold": [
"provide",
"useValue"
],
"description": "<p>Sets or overrides the provider for MyValue to the value 41.</p>\n"
}
],
"index": 9
},
{
"name": "Routing and navigation",
"description": "<p>\n<code>import &#39;package:angular2/router.dart&#39;;</code></p>\n",
"items": [
{
"syntax": "@RouteConfig(const [\n const Route(path: '/:myParam', component: MyComponent, name: 'MyCmp' ),\n])",
"bold": [
"@RouteConfig"
],
"description": "<p>Configures routes for the decorated component. Supports static, parameterized, and wildcard routes.</p>\n"
},
{
"syntax": "<router-outlet></router-outlet>",
"bold": [
"router-outlet"
],
"description": "<p>Marks the location to load the component of the active route.</p>\n"
},
{
"syntax": "<a [routerLink]=\"[ '/MyCmp', {myParam: 'value' } ]\">",
"bold": [
"[routerLink]"
],
"description": "<p>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 &#39;/&#39; prefix to navigate to a root route; add the &#39;./&#39; prefix for a child route.</p>\n"
},
{
"syntax": "@CanActivate(() => ...)class MyComponent() {}",
"bold": [
"@CanActivate"
],
"description": "<p>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 future.</p>\n"
},
{
"syntax": "routerOnActivate(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerOnActivate"
],
"description": "<p>After navigating to a component, the router calls the component&#39;s routerOnActivate method (if defined).</p>\n"
},
{
"syntax": "routerCanReuse(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerCanReuse"
],
"description": "<p>The router calls a component&#39;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 future.</p>\n"
},
{
"syntax": "routerOnReuse(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerOnReuse"
],
"description": "<p>The router calls the component&#39;s routerOnReuse method (if defined) when it re-uses a component instance.</p>\n"
},
{
"syntax": "routerCanDeactivate(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerCanDeactivate"
],
"description": "<p>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 future that completes successfully.</p>\n"
},
{
"syntax": "routerOnDeactivate(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerOnDeactivate"
],
"description": "<p>Called before the directive is removed as the result of a route change. May return a future that pauses removing the directive until the future completes.</p>\n"
}
],
"index": 10
}
]

487
public/docs/js/latest/guide/cheatsheet.json Normal file
View File

@ -0,0 +1,487 @@
[
{
"name": "Bootstrapping",
"description": "<p><code>import {bootstrap} from &#39;angular2/platform/browser&#39;;</code>\n</p>\n",
"items": [
{
"syntax": "bootstrap​(MyAppComponent, [MyService, provide(...)]);",
"bold": [
"provide"
],
"description": "<p>Bootstraps an application with MyAppComponent as the root component, and\nconfigures the app&#39;s dependency injection providers.</p>\n"
}
],
"index": 0
},
{
"name": "Template syntax",
"description": "",
"items": [
{
"syntax": "<input [value]=\"firstName\">",
"bold": [
"[value]"
],
"description": "<p>Binds property <code>value</code> to the result of expression <code>firstName</code>.</p>\n"
},
{
"syntax": "<div [attr.role]=\"myAriaRole\">",
"bold": [
"[attr.role]"
],
"description": "<p>Binds attribute <code>role</code> to the result of expression <code>myAriaRole</code>.</p>\n"
},
{
"syntax": "<div [class.extra-sparkle]=\"isDelightful\">",
"bold": [
"[class.extra-sparkle]"
],
"description": "<p>Binds the presence of the CSS class <code>extra-sparkle</code> on the element to the truthiness of the expression <code>isDelightful</code>.</p>\n"
},
{
"syntax": "<div [style.width.px]=\"mySize\">",
"bold": [
"[style.width.px]"
],
"description": "<p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p>\n"
},
{
"syntax": "<button (click)=\"readRainbow($event)\">",
"bold": [
"(click)"
],
"description": "<p>Calls method <code>readRainbow</code> when a click event is triggered on this button element (or its children) and passes in the event object.</p>\n"
},
{
"syntax": "<div title=\"Hello {{ponyName}}\">",
"bold": [
"{{ponyName}}"
],
"description": "<p>Binds a property to an interpolated string, e.g. &quot;Hello Seabiscuit&quot;. Equivalent to:\n<code>&lt;div [title]=&quot;&#39;Hello&#39; + ponyName&quot;&gt;</code></p>\n"
},
{
"syntax": "<p>Hello {{ponyName}}</p>",
"bold": [
"{{ponyName}}"
],
"description": "<p>Binds text content to an interpolated string, e.g. &quot;Hello Seabiscuit&quot;.</p>\n"
},
{
"syntax": "<my-cmp [(title)]=\"name\">",
"bold": [
"[(title)]"
],
"description": "<p>Sets up two-way data binding. Equivalent to: <code>&lt;my-cmp [title]=&quot;name&quot; (titleChange)=&quot;name=$event&quot;&gt;</code></p>\n"
},
{
"syntax": "<video #movieplayer ...>\n <button (click)=\"movieplayer.play()\">\n</video>",
"bold": [
"#movieplayer",
"(click)"
],
"description": "<p>Creates a local variable <code>movieplayer</code> that provides access to the <code>video</code> element instance in data-binding and event-binding expressions in the current template.</p>\n"
},
{
"syntax": "<p *my-unless=\"myExpression\">...</p>",
"bold": [
"*my-unless"
],
"description": "<p>The <code>*</code> symbol means that the current element will be turned into an embedded template. Equivalent to:\n<code>&lt;template [myless]=&quot;myExpression&quot;&gt;&lt;p&gt;...&lt;/p&gt;&lt;/template&gt;</code></p>\n"
},
{
"syntax": "<p>Card No.: {{cardNumber | myCreditCardNumberFormatter}}</p>",
"bold": [
"{{cardNumber | myCreditCardNumberFormatter}}"
],
"description": "<p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>creditCardNumberFormatter</code>.</p>\n"
},
{
"syntax": "<p>Employer: {{employer?.companyName}}</p>",
"bold": [
"{{employer?.companyName}}"
],
"description": "<p>The Elvis operator (<code>?</code>) means that the <code>employer</code> field is optional and if <code>undefined</code>, the rest of the expression should be ignored.</p>\n"
}
],
"index": 1
},
{
"name": "Built-in directives",
"description": "<p><code>import {NgIf, ...} from &#39;angular2/common&#39;;</code>\n</p>\n",
"items": [
{
"syntax": "<section *ngIf=\"showSection\">",
"bold": [
"*ngIf"
],
"description": "<p>Removes or recreates a portion of the DOM tree based on the showSection expression.</p>\n"
},
{
"syntax": "<li *ngFor=\"#item of list\">",
"bold": [
"*ngFor"
],
"description": "<p>Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.</p>\n"
},
{
"syntax": "<div [ngSwitch]=\"conditionExpression\">\n <template [ngSwitchWhen]=\"case1Exp\">...</template>\n <template ngSwitchWhen=\"case2LiteralString\">...</template>\n <template ngSwitchDefault>...</template>\n</div>",
"bold": [
"[ngSwitch]",
"[ngSwitchWhen]",
"ngSwitchWhen",
"ngSwitchDefault"
],
"description": "<p>Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.</p>\n"
},
{
"syntax": "<div [ngClass]=\"{active: isActive, disabled: isDisabled}\">",
"bold": [
"[ngClass]"
],
"description": "<p>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.</p>\n"
}
],
"index": 2
},
{
"name": "Forms",
"description": "<p><code>import {FORM_DIRECTIVES} from &#39;angular2/common&#39;;</code>\n</p>\n",
"items": [
{
"syntax": "<input [(ngModel)]=\"userName\">",
"bold": [
"[(ngModel)]"
],
"description": "<p>Provides two-way data-binding, parsing and validation for form controls.</p>\n"
}
],
"index": 3
},
{
"name": "Class decorators",
"description": "<p><code>import {Directive, ...} from &#39;angular2/core&#39;;</code>\n</p>\n",
"items": [
{
"syntax": "@Component({...})\nclass MyComponent() {}",
"bold": [
"@Component({...})"
],
"description": "<p>Declares that a class is a component and provides metadata about the component.</p>\n"
},
{
"syntax": "@Pipe({...})\nclass MyPipe() {}",
"bold": [
"@Pipe({...})"
],
"description": "<p>Declares that a class is a pipe and provides metadata about the pipe.</p>\n"
},
{
"syntax": "@Injectable()\nclass MyService() {}",
"bold": [
"@Injectable()"
],
"description": "<p>Declares that a class has dependencies that should be injected into the constructor when the dependency\ninjector is creating an instance of this class.</p>\n"
}
],
"index": 4
},
{
"name": "Directive configuration",
"description": "<p><code>@Directive({ property1: value1, ... })</code>\n</p>\n",
"items": [
{
"syntax": "selector: '.cool-button:not(a)'",
"bold": [
"selector:"
],
"description": "<p>Specifies a CSS selector that identifies this directive within a template. Supported selectors include <code>element</code>,\n<code>[attribute]</code>, <code>.class</code>, and <code>:not()</code>.</p>\n<p>Does not support parent-child relationship selectors.</p>\n"
},
{
"syntax": "providers: [MyService, provide(...)]",
"bold": [
"providers:"
],
"description": "<p>Array of dependency injection providers for this directive and its children.</p>\n"
}
],
"index": 5
},
{
"name": "Component configuration",
"description": "<p><code>@Component</code> extends <code>@Directive</code>,\nso the <code>@Directive</code> configuration applies to components as well</p>\n",
"items": [
{
"syntax": "viewProviders: [MyService, provide(...)]",
"bold": [
"viewProviders:"
],
"description": "<p>Array of dependency injection providers scoped to this component&#39;s view.</p>\n"
},
{
"syntax": "template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'",
"bold": [
"template:",
"templateUrl:"
],
"description": "<p>Inline template / external template URL of the component&#39;s view.</p>\n"
},
{
"syntax": "styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']",
"bold": [
"styles:",
"styleUrls:"
],
"description": "<p>List of inline CSS styles / external stylesheet URLs for styling component’s view.</p>\n"
},
{
"syntax": "directives: [MyDirective, MyComponent]",
"bold": [
"directives:"
],
"description": "<p>List of directives used in the the component’s template.</p>\n"
},
{
"syntax": "pipes: [MyPipe, OtherPipe]",
"bold": [
"pipes:"
],
"description": "<p>List of pipes used in the component&#39;s template.</p>\n"
}
],
"index": 6
},
{
"name": "Class field decorators for directives and components",
"description": "<p><code>import {Input, ...} from &#39;angular2/core&#39;;</code>\n</p>\n",
"items": [
{
"syntax": "@Input() myProperty;",
"bold": [
"@Input()"
],
"description": "<p>Declares an input property that we can update via property binding (e.g.\n<code>&lt;my-cmp [my-property]=&quot;someExpression&quot;&gt;</code>).</p>\n"
},
{
"syntax": "@Output() myEvent = new EventEmitter();",
"bold": [
"@Output()"
],
"description": "<p>Declares an output property that fires events to which we can subscribe with an event binding (e.g. <code>&lt;my-cmp (my-event)=&quot;doSomething()&quot;&gt;</code>).</p>\n"
},
{
"syntax": "@HostBinding('[class.valid]') isValid;",
"bold": [
"@HostBinding('[class.valid]')"
],
"description": "<p>Binds a host element property (e.g. CSS class valid) to directive/component property (e.g. isValid).</p>\n"
},
{
"syntax": "@HostListener('click', ['$event']) onClick(e) {...}",
"bold": [
"@HostListener('click', ['$event'])"
],
"description": "<p>Subscribes to a host element event (e.g. click) with a directive/component method (e.g. onClick), optionally passing an argument ($event).</p>\n"
},
{
"syntax": "@ContentChild(myPredicate) myChildComponent;",
"bold": [
"@ContentChild(myPredicate)"
],
"description": "<p>Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.</p>\n"
},
{
"syntax": "@ContentChildren(myPredicate) myChildComponents;",
"bold": [
"@ContentChildren(myPredicate)"
],
"description": "<p>Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.</p>\n"
},
{
"syntax": "@ViewChild(myPredicate) myChildComponent;",
"bold": [
"@ViewChild(myPredicate)"
],
"description": "<p>Binds the first result of the component view query (myPredicate) to the myChildComponent property of the class. Not available for directives.</p>\n"
},
{
"syntax": "@ViewChildren(myPredicate) myChildComponents;",
"bold": [
"@ViewChildren(myPredicate)"
],
"description": "<p>Binds the results of the component view query (myPredicate) to the myChildComponents property of the class. Not available for directives.</p>\n"
}
],
"index": 7
},
{
"name": "Directive and component change detection and lifecycle hooks",
"description": "<p>(implemented as class methods)</p>\n",
"items": [
{
"syntax": "constructor(myService: MyService, ...) { ... }",
"bold": [
"constructor(myService: MyService, ...)"
],
"description": "<p>The class constructor is called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.</p>\n"
},
{
"syntax": "ngOnChanges(changeRecord) { ... }",
"bold": [
"ngOnChanges(changeRecord)"
],
"description": "<p>Called after every change to input properties and before processing content or child views.</p>\n"
},
{
"syntax": "ngOnInit() { ... }",
"bold": [
"ngOnInit()"
],
"description": "<p>Called after the constructor, initializing input properties, and the first call to ngOnChanges.</p>\n"
},
{
"syntax": "ngDoCheck() { ... }",
"bold": [
"ngDoCheck()"
],
"description": "<p>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.</p>\n"
},
{
"syntax": "ngAfterContentInit() { ... }",
"bold": [
"ngAfterContentInit()"
],
"description": "<p>Called after ngOnInit when the component&#39;s or directive&#39;s content has been initialized.</p>\n"
},
{
"syntax": "ngAfterContentChecked() { ... }",
"bold": [
"ngAfterContentChecked()"
],
"description": "<p>Called after every check of the component&#39;s or directive&#39;s content.</p>\n"
},
{
"syntax": "ngAfterViewInit() { ... }",
"bold": [
"ngAfterViewInit()"
],
"description": "<p>Called after ngAfterContentInit when the component&#39;s view has been initialized. Applies to components only.</p>\n"
},
{
"syntax": "ngAfterViewChecked() { ... }",
"bold": [
"ngAfterViewChecked()"
],
"description": "<p>Called after every check of the component&#39;s view. Applies to components only.</p>\n"
},
{
"syntax": "ngOnDestroy() { ... }",
"bold": [
"ngOnDestroy()"
],
"description": "<p>Called once, before the instance is destroyed.</p>\n"
}
],
"index": 8
},
{
"name": "Dependency injection configuration",
"description": "<p><code>import {provide} from &#39;angular2/core&#39;;</code>\n</p>\n",
"items": [
{
"syntax": "provide(MyService, {useClass: MyMockService})",
"bold": [
"provide",
"useClass"
],
"description": "<p>Sets or overrides the provider for MyService to the MyMockService class.</p>\n"
},
{
"syntax": "provide(MyService, {useFactory: myFactory})",
"bold": [
"provide",
"useFactory"
],
"description": "<p>Sets or overrides the provider for MyService to the myFactory factory function.</p>\n"
},
{
"syntax": "provide(MyValue, {useValue: 41})",
"bold": [
"provide",
"useValue"
],
"description": "<p>Sets or overrides the provider for MyValue to the value 41.</p>\n"
}
],
"index": 9
},
{
"name": "Routing and navigation",
"description": "<p><code>import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...} from &#39;angular2/router&#39;;</code>\n</p>\n",
"items": [
{
"syntax": "@RouteConfig([\n { path: '/:myParam', component: MyComponent, as: 'MyCmp' },\n { path: '/staticPath', component: ..., as: ...},\n { path: '/*wildCardParam', component: ..., as: ...}\n])\nclass MyComponent() {}",
"bold": [
"@RouteConfig"
],
"description": "<p>Configures routes for the decorated component. Supports static, parameterized, and wildcard routes.</p>\n"
},
{
"syntax": "<router-outlet></router-outlet>",
"bold": [
"router-outlet"
],
"description": "<p>Marks the location to load the component of the active route.</p>\n"
},
{
"syntax": "<a [routerLink]=\"[ '/MyCmp', {myParam: 'value' } ]\">",
"bold": [
"[routerLink]"
],
"description": "<p>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 &#39;/&#39; prefix to navigate to a root route; add the &#39;./&#39; prefix for a child route.</p>\n"
},
{
"syntax": "@CanActivate(() => { ... })class MyComponent() {}",
"bold": [
"@CanActivate"
],
"description": "<p>A component decorator defining a function that the router should call first to determine if it should activate this component. Should return a boolean or a promise.</p>\n"
},
{
"syntax": "routerOnActivate(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerOnActivate"
],
"description": "<p>After navigating to a component, the router calls the component&#39;s routerOnActivate method (if defined).</p>\n"
},
{
"syntax": "routerCanReuse(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerCanReuse"
],
"description": "<p>The router calls a component&#39;s routerCanReuse method (if defined) to determine whether to reuse the instance or destroy it and create a new instance. Should return a boolean or a promise.</p>\n"
},
{
"syntax": "routerOnReuse(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerOnReuse"
],
"description": "<p>The router calls the component&#39;s routerOnReuse method (if defined) when it re-uses a component instance.</p>\n"
},
{
"syntax": "routerCanDeactivate(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerCanDeactivate"
],
"description": "<p>The router calls the routerCanDeactivate methods (if defined) of every component that would be removed after a navigation. The navigation proceeds if and only if all such methods return true or a promise that is resolved.</p>\n"
},
{
"syntax": "routerOnDeactivate(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerOnDeactivate"
],
"description": "<p>Called before the directive is removed as the result of a route change. May return a promise that pauses removing the directive until the promise resolves.</p>\n"
}
],
"index": 10
}
]

487
public/docs/ts/latest/guide/cheatsheet.json Normal file
View File

@ -0,0 +1,487 @@
[
{
"name": "Bootstrapping",
"description": "<p><code>import {bootstrap} from &#39;angular2/platform/browser&#39;;</code>\n</p>\n",
"items": [
{
"syntax": "bootstrap​(MyAppComponent, [MyService, provide(...)]);",
"bold": [
"provide"
],
"description": "<p>Bootstraps an application with MyAppComponent as the root component, and\nconfigures the app&#39;s dependency injection providers.</p>\n"
}
],
"index": 0
},
{
"name": "Template syntax",
"description": "",
"items": [
{
"syntax": "<input [value]=\"firstName\">",
"bold": [
"[value]"
],
"description": "<p>Binds property <code>value</code> to the result of expression <code>firstName</code>.</p>\n"
},
{
"syntax": "<div [attr.role]=\"myAriaRole\">",
"bold": [
"[attr.role]"
],
"description": "<p>Binds attribute <code>role</code> to the result of expression <code>myAriaRole</code>.</p>\n"
},
{
"syntax": "<div [class.extra-sparkle]=\"isDelightful\">",
"bold": [
"[class.extra-sparkle]"
],
"description": "<p>Binds the presence of the CSS class <code>extra-sparkle</code> on the element to the truthiness of the expression <code>isDelightful</code>.</p>\n"
},
{
"syntax": "<div [style.width.px]=\"mySize\">",
"bold": [
"[style.width.px]"
],
"description": "<p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p>\n"
},
{
"syntax": "<button (click)=\"readRainbow($event)\">",
"bold": [
"(click)"
],
"description": "<p>Calls method <code>readRainbow</code> when a click event is triggered on this button element (or its children) and passes in the event object.</p>\n"
},
{
"syntax": "<div title=\"Hello {{ponyName}}\">",
"bold": [
"{{ponyName}}"
],
"description": "<p>Binds a property to an interpolated string, e.g. &quot;Hello Seabiscuit&quot;. Equivalent to:\n<code>&lt;div [title]=&quot;&#39;Hello&#39; + ponyName&quot;&gt;</code></p>\n"
},
{
"syntax": "<p>Hello {{ponyName}}</p>",
"bold": [
"{{ponyName}}"
],
"description": "<p>Binds text content to an interpolated string, e.g. &quot;Hello Seabiscuit&quot;.</p>\n"
},
{
"syntax": "<my-cmp [(title)]=\"name\">",
"bold": [
"[(title)]"
],
"description": "<p>Sets up two-way data binding. Equivalent to: <code>&lt;my-cmp [title]=&quot;name&quot; (titleChange)=&quot;name=$event&quot;&gt;</code></p>\n"
},
{
"syntax": "<video #movieplayer ...>\n <button (click)=\"movieplayer.play()\">\n</video>",
"bold": [
"#movieplayer",
"(click)"
],
"description": "<p>Creates a local variable <code>movieplayer</code> that provides access to the <code>video</code> element instance in data-binding and event-binding expressions in the current template.</p>\n"
},
{
"syntax": "<p *my-unless=\"myExpression\">...</p>",
"bold": [
"*my-unless"
],
"description": "<p>The <code>*</code> symbol means that the current element will be turned into an embedded template. Equivalent to:\n<code>&lt;template [myless]=&quot;myExpression&quot;&gt;&lt;p&gt;...&lt;/p&gt;&lt;/template&gt;</code></p>\n"
},
{
"syntax": "<p>Card No.: {{cardNumber | myCreditCardNumberFormatter}}</p>",
"bold": [
"{{cardNumber | myCreditCardNumberFormatter}}"
],
"description": "<p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>creditCardNumberFormatter</code>.</p>\n"
},
{
"syntax": "<p>Employer: {{employer?.companyName}}</p>",
"bold": [
"{{employer?.companyName}}"
],
"description": "<p>The Elvis operator (<code>?</code>) means that the <code>employer</code> field is optional and if <code>undefined</code>, the rest of the expression should be ignored.</p>\n"
}
],
"index": 1
},
{
"name": "Built-in directives",
"description": "<p><code>import {NgIf, ...} from &#39;angular2/common&#39;;</code>\n</p>\n",
"items": [
{
"syntax": "<section *ngIf=\"showSection\">",
"bold": [
"*ngIf"
],
"description": "<p>Removes or recreates a portion of the DOM tree based on the showSection expression.</p>\n"
},
{
"syntax": "<li *ngFor=\"#item of list\">",
"bold": [
"*ngFor"
],
"description": "<p>Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.</p>\n"
},
{
"syntax": "<div [ngSwitch]=\"conditionExpression\">\n <template [ngSwitchWhen]=\"case1Exp\">...</template>\n <template ngSwitchWhen=\"case2LiteralString\">...</template>\n <template ngSwitchDefault>...</template>\n</div>",
"bold": [
"[ngSwitch]",
"[ngSwitchWhen]",
"ngSwitchWhen",
"ngSwitchDefault"
],
"description": "<p>Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.</p>\n"
},
{
"syntax": "<div [ngClass]=\"{active: isActive, disabled: isDisabled}\">",
"bold": [
"[ngClass]"
],
"description": "<p>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.</p>\n"
}
],
"index": 2
},
{
"name": "Forms",
"description": "<p><code>import {FORM_DIRECTIVES} from &#39;angular2/common&#39;;</code>\n</p>\n",
"items": [
{
"syntax": "<input [(ngModel)]=\"userName\">",
"bold": [
"[(ngModel)]"
],
"description": "<p>Provides two-way data-binding, parsing and validation for form controls.</p>\n"
}
],
"index": 3
},
{
"name": "Class decorators",
"description": "<p><code>import {Directive, ...} from &#39;angular2/core&#39;;</code>\n</p>\n",
"items": [
{
"syntax": "@Component({...})\nclass MyComponent() {}",
"bold": [
"@Component({...})"
],
"description": "<p>Declares that a class is a component and provides metadata about the component.</p>\n"
},
{
"syntax": "@Pipe({...})\nclass MyPipe() {}",
"bold": [
"@Pipe({...})"
],
"description": "<p>Declares that a class is a pipe and provides metadata about the pipe.</p>\n"
},
{
"syntax": "@Injectable()\nclass MyService() {}",
"bold": [
"@Injectable()"
],
"description": "<p>Declares that a class has dependencies that should be injected into the constructor when the dependency\ninjector is creating an instance of this class.</p>\n"
}
],
"index": 4
},
{
"name": "Directive configuration",
"description": "<p><code>@Directive({ property1: value1, ... })</code>\n</p>\n",
"items": [
{
"syntax": "selector: '.cool-button:not(a)'",
"bold": [
"selector:"
],
"description": "<p>Specifies a CSS selector that identifies this directive within a template. Supported selectors include <code>element</code>,\n<code>[attribute]</code>, <code>.class</code>, and <code>:not()</code>.</p>\n<p>Does not support parent-child relationship selectors.</p>\n"
},
{
"syntax": "providers: [MyService, provide(...)]",
"bold": [
"providers:"
],
"description": "<p>Array of dependency injection providers for this directive and its children.</p>\n"
}
],
"index": 5
},
{
"name": "Component configuration",
"description": "<p><code>@Component</code> extends <code>@Directive</code>,\nso the <code>@Directive</code> configuration applies to components as well</p>\n",
"items": [
{
"syntax": "viewProviders: [MyService, provide(...)]",
"bold": [
"viewProviders:"
],
"description": "<p>Array of dependency injection providers scoped to this component&#39;s view.</p>\n"
},
{
"syntax": "template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'",
"bold": [
"template:",
"templateUrl:"
],
"description": "<p>Inline template / external template URL of the component&#39;s view.</p>\n"
},
{
"syntax": "styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']",
"bold": [
"styles:",
"styleUrls:"
],
"description": "<p>List of inline CSS styles / external stylesheet URLs for styling component’s view.</p>\n"
},
{
"syntax": "directives: [MyDirective, MyComponent]",
"bold": [
"directives:"
],
"description": "<p>List of directives used in the the component’s template.</p>\n"
},
{
"syntax": "pipes: [MyPipe, OtherPipe]",
"bold": [
"pipes:"
],
"description": "<p>List of pipes used in the component&#39;s template.</p>\n"
}
],
"index": 6
},
{
"name": "Class field decorators for directives and components",
"description": "<p><code>import {Input, ...} from &#39;angular2/core&#39;;</code>\n</p>\n",
"items": [
{
"syntax": "@Input() myProperty;",
"bold": [
"@Input()"
],
"description": "<p>Declares an input property that we can update via property binding (e.g.\n<code>&lt;my-cmp [my-property]=&quot;someExpression&quot;&gt;</code>).</p>\n"
},
{
"syntax": "@Output() myEvent = new EventEmitter();",
"bold": [
"@Output()"
],
"description": "<p>Declares an output property that fires events to which we can subscribe with an event binding (e.g. <code>&lt;my-cmp (my-event)=&quot;doSomething()&quot;&gt;</code>).</p>\n"
},
{
"syntax": "@HostBinding('[class.valid]') isValid;",
"bold": [
"@HostBinding('[class.valid]')"
],
"description": "<p>Binds a host element property (e.g. CSS class valid) to directive/component property (e.g. isValid).</p>\n"
},
{
"syntax": "@HostListener('click', ['$event']) onClick(e) {...}",
"bold": [
"@HostListener('click', ['$event'])"
],
"description": "<p>Subscribes to a host element event (e.g. click) with a directive/component method (e.g. onClick), optionally passing an argument ($event).</p>\n"
},
{
"syntax": "@ContentChild(myPredicate) myChildComponent;",
"bold": [
"@ContentChild(myPredicate)"
],
"description": "<p>Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.</p>\n"
},
{
"syntax": "@ContentChildren(myPredicate) myChildComponents;",
"bold": [
"@ContentChildren(myPredicate)"
],
"description": "<p>Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.</p>\n"
},
{
"syntax": "@ViewChild(myPredicate) myChildComponent;",
"bold": [
"@ViewChild(myPredicate)"
],
"description": "<p>Binds the first result of the component view query (myPredicate) to the myChildComponent property of the class. Not available for directives.</p>\n"
},
{
"syntax": "@ViewChildren(myPredicate) myChildComponents;",
"bold": [
"@ViewChildren(myPredicate)"
],
"description": "<p>Binds the results of the component view query (myPredicate) to the myChildComponents property of the class. Not available for directives.</p>\n"
}
],
"index": 7
},
{
"name": "Directive and component change detection and lifecycle hooks",
"description": "<p>(implemented as class methods)</p>\n",
"items": [
{
"syntax": "constructor(myService: MyService, ...) { ... }",
"bold": [
"constructor(myService: MyService, ...)"
],
"description": "<p>The class constructor is called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.</p>\n"
},
{
"syntax": "ngOnChanges(changeRecord) { ... }",
"bold": [
"ngOnChanges(changeRecord)"
],
"description": "<p>Called after every change to input properties and before processing content or child views.</p>\n"
},
{
"syntax": "ngOnInit() { ... }",
"bold": [
"ngOnInit()"
],
"description": "<p>Called after the constructor, initializing input properties, and the first call to ngOnChanges.</p>\n"
},
{
"syntax": "ngDoCheck() { ... }",
"bold": [
"ngDoCheck()"
],
"description": "<p>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.</p>\n"
},
{
"syntax": "ngAfterContentInit() { ... }",
"bold": [
"ngAfterContentInit()"
],
"description": "<p>Called after ngOnInit when the component&#39;s or directive&#39;s content has been initialized.</p>\n"
},
{
"syntax": "ngAfterContentChecked() { ... }",
"bold": [
"ngAfterContentChecked()"
],
"description": "<p>Called after every check of the component&#39;s or directive&#39;s content.</p>\n"
},
{
"syntax": "ngAfterViewInit() { ... }",
"bold": [
"ngAfterViewInit()"
],
"description": "<p>Called after ngAfterContentInit when the component&#39;s view has been initialized. Applies to components only.</p>\n"
},
{
"syntax": "ngAfterViewChecked() { ... }",
"bold": [
"ngAfterViewChecked()"
],
"description": "<p>Called after every check of the component&#39;s view. Applies to components only.</p>\n"
},
{
"syntax": "ngOnDestroy() { ... }",
"bold": [
"ngOnDestroy()"
],
"description": "<p>Called once, before the instance is destroyed.</p>\n"
}
],
"index": 8
},
{
"name": "Dependency injection configuration",
"description": "<p><code>import {provide} from &#39;angular2/core&#39;;</code>\n</p>\n",
"items": [
{
"syntax": "provide(MyService, {useClass: MyMockService})",
"bold": [
"provide",
"useClass"
],
"description": "<p>Sets or overrides the provider for MyService to the MyMockService class.</p>\n"
},
{
"syntax": "provide(MyService, {useFactory: myFactory})",
"bold": [
"provide",
"useFactory"
],
"description": "<p>Sets or overrides the provider for MyService to the myFactory factory function.</p>\n"
},
{
"syntax": "provide(MyValue, {useValue: 41})",
"bold": [
"provide",
"useValue"
],
"description": "<p>Sets or overrides the provider for MyValue to the value 41.</p>\n"
}
],
"index": 9
},
{
"name": "Routing and navigation",
"description": "<p><code>import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...} from &#39;angular2/router&#39;;</code>\n</p>\n",
"items": [
{
"syntax": "@RouteConfig([\n { path: '/:myParam', component: MyComponent, as: 'MyCmp' },\n { path: '/staticPath', component: ..., as: ...},\n { path: '/*wildCardParam', component: ..., as: ...}\n])\nclass MyComponent() {}",
"bold": [
"@RouteConfig"
],
"description": "<p>Configures routes for the decorated component. Supports static, parameterized, and wildcard routes.</p>\n"
},
{
"syntax": "<router-outlet></router-outlet>",
"bold": [
"router-outlet"
],
"description": "<p>Marks the location to load the component of the active route.</p>\n"
},
{
"syntax": "<a [routerLink]=\"[ '/MyCmp', {myParam: 'value' } ]\">",
"bold": [
"[routerLink]"
],
"description": "<p>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 &#39;/&#39; prefix to navigate to a root route; add the &#39;./&#39; prefix for a child route.</p>\n"
},
{
"syntax": "@CanActivate(() => { ... })class MyComponent() {}",
"bold": [
"@CanActivate"
],
"description": "<p>A component decorator defining a function that the router should call first to determine if it should activate this component. Should return a boolean or a promise.</p>\n"
},
{
"syntax": "routerOnActivate(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerOnActivate"
],
"description": "<p>After navigating to a component, the router calls the component&#39;s routerOnActivate method (if defined).</p>\n"
},
{
"syntax": "routerCanReuse(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerCanReuse"
],
"description": "<p>The router calls a component&#39;s routerCanReuse method (if defined) to determine whether to reuse the instance or destroy it and create a new instance. Should return a boolean or a promise.</p>\n"
},
{
"syntax": "routerOnReuse(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerOnReuse"
],
"description": "<p>The router calls the component&#39;s routerOnReuse method (if defined) when it re-uses a component instance.</p>\n"
},
{
"syntax": "routerCanDeactivate(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerCanDeactivate"
],
"description": "<p>The router calls the routerCanDeactivate methods (if defined) of every component that would be removed after a navigation. The navigation proceeds if and only if all such methods return true or a promise that is resolved.</p>\n"
},
{
"syntax": "routerOnDeactivate(nextInstruction, prevInstruction) { ... }",
"bold": [
"routerOnDeactivate"
],
"description": "<p>Called before the directive is removed as the result of a route change. May return a promise that pauses removing the directive until the promise resolves.</p>\n"
}
],
"index": 10
}
]