docs(router): fix filetree styles
This commit is contained in:
Naomi Black
parent
728659ba71
commit
ab90d68240
|
|
@ -1,487 +1,506 @@
|
||||||
[
|
{
|
||||||
{
|
"currentEnvironment": "Dart",
|
||||||
"name": "Bootstrapping",
|
"version": {
|
||||||
"description": "<p>\n<code>import 'package:angular2/bootstrap.dart';</code></p>\n",
|
"raw": "2.0.0-beta.0",
|
||||||
"items": [
|
"major": 2,
|
||||||
{
|
"minor": 0,
|
||||||
"syntax": "bootstrap(MyAppComponent, [MyService, provide(...)]);",
|
"patch": 0,
|
||||||
"bold": [
|
"prerelease": [
|
||||||
"provide"
|
"local"
|
||||||
],
|
|
||||||
"description": "<p>Bootstraps an application with MyAppComponent as the root component, and\nconfigures the app's dependency injection providers.</p>\n"
|
|
||||||
}
|
|
||||||
],
|
],
|
||||||
"index": 0
|
"build": "sha.323393a",
|
||||||
|
"version": "2.0.0-local",
|
||||||
|
"codeName": "snapshot",
|
||||||
|
"isSnapshot": true,
|
||||||
|
"full": "2.0.0-local+sha.323393a",
|
||||||
|
"branch": "master",
|
||||||
|
"commitSHA": "323393a86201db871c2fbc6dc7bd12229b498d9a"
|
||||||
},
|
},
|
||||||
{
|
"sections": [
|
||||||
"name": "Template syntax",
|
{
|
||||||
"description": "",
|
"name": "Bootstrapping",
|
||||||
"items": [
|
"description": "<p>\n\n<code>import 'package:angular2/bootstrap.dart';</code></p>\n",
|
||||||
{
|
"items": [
|
||||||
"syntax": "<input [value]=\"firstName\">",
|
{
|
||||||
"bold": [
|
"syntax": "bootstrap(MyAppComponent, [MyService, provide(...)]);",
|
||||||
"[value]"
|
"bold": [
|
||||||
],
|
"provide"
|
||||||
"description": "<p>Binds property <code>value</code> to the result of expression <code>firstName</code>.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Bootstraps an application with MyAppComponent as the root component and configures the DI providers. </p>\n"
|
||||||
{
|
}
|
||||||
"syntax": "<div [attr.role]=\"myAriaRole\">",
|
],
|
||||||
"bold": [
|
"index": 0
|
||||||
"[attr.role]"
|
},
|
||||||
],
|
{
|
||||||
"description": "<p>Binds attribute <code>role</code> to the result of expression <code>myAriaRole</code>.</p>\n"
|
"name": "Template syntax",
|
||||||
},
|
"description": "",
|
||||||
{
|
"items": [
|
||||||
"syntax": "<div [class.extra-sparkle]=\"isDelightful\">",
|
{
|
||||||
"bold": [
|
"syntax": "<input [value]=\"firstName\">",
|
||||||
"[class.extra-sparkle]"
|
"bold": [
|
||||||
],
|
"[value]"
|
||||||
"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"
|
],
|
||||||
},
|
"description": "<p>Binds property <code>value</code> to the result of expression <code>firstName</code>.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "<div [style.width.px]=\"mySize\">",
|
{
|
||||||
"bold": [
|
"syntax": "<div [attr.role]=\"myAriaRole\">",
|
||||||
"[style.width.px]"
|
"bold": [
|
||||||
],
|
"[attr.role]"
|
||||||
"description": "<p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Binds attribute <code>role</code> to the result of expression <code>myAriaRole</code>.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "<button (click)=\"readRainbow($event)\">",
|
{
|
||||||
"bold": [
|
"syntax": "<div [class.extra-sparkle]=\"isDelightful\">",
|
||||||
"(click)"
|
"bold": [
|
||||||
],
|
"[class.extra-sparkle]"
|
||||||
"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"
|
],
|
||||||
},
|
"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 title=\"Hello {{ponyName}}\">",
|
{
|
||||||
"bold": [
|
"syntax": "<div [style.width.px]=\"mySize\">",
|
||||||
"{{ponyName}}"
|
"bold": [
|
||||||
],
|
"[style.width.px]"
|
||||||
"description": "<p>Binds a property to an interpolated string, e.g. "Hello Seabiscuit". Equivalent to:\n<code><div [title]="'Hello' + ponyName"></code></p>\n"
|
],
|
||||||
},
|
"description": "<p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "<p>Hello {{ponyName}}</p>",
|
{
|
||||||
"bold": [
|
"syntax": "<button (click)=\"readRainbow($event)\">",
|
||||||
"{{ponyName}}"
|
"bold": [
|
||||||
],
|
"(click)"
|
||||||
"description": "<p>Binds text content to an interpolated string, e.g. "Hello Seabiscuit".</p>\n"
|
],
|
||||||
},
|
"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": "<my-cmp [(title)]=\"name\">",
|
{
|
||||||
"bold": [
|
"syntax": "<div title=\"Hello {{ponyName}}\">",
|
||||||
"[(title)]"
|
"bold": [
|
||||||
],
|
"{{ponyName}}"
|
||||||
"description": "<p>Sets up two-way data binding. Equivalent to: <code><my-cmp [title]="name" (titleChange)="name=$event"></code></p>\n"
|
],
|
||||||
},
|
"description": "<p>Binds a property to an interpolated string, e.g. "Hello Seabiscuit". Equivalent to:\n<code><div [title]="'Hello' + ponyName"></code></p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "<video #movieplayer ...>\n <button (click)=\"movieplayer.play()\">\n</video>",
|
{
|
||||||
"bold": [
|
"syntax": "<p>Hello {{ponyName}}</p>",
|
||||||
"#movieplayer",
|
"bold": [
|
||||||
"(click)"
|
"{{ponyName}}"
|
||||||
],
|
],
|
||||||
"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"
|
"description": "<p>Binds text content to an interpolated string, e.g. "Hello Seabiscuit".</p>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"syntax": "<p *my-unless=\"myExpression\">...</p>",
|
"syntax": "<my-cmp [(title)]=\"name\">",
|
||||||
"bold": [
|
"bold": [
|
||||||
"*my-unless"
|
"[(title)]"
|
||||||
],
|
],
|
||||||
"description": "<p>The <code>*</code> symbol means that the current element will be turned into an embedded template. Equivalent to:\n<code><template [myless]="myExpression"><p>...</p></template></code></p>\n"
|
"description": "<p>Sets up two-way data binding. Equivalent to: <code><my-cmp [title]="name" (titleChange)="name=$event"></code></p>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"syntax": "<p>Card No.: {{cardNumber | myCreditCardNumberFormatter}}</p>",
|
"syntax": "<video #movieplayer ...>\n <button (click)=\"movieplayer.play()\">\n</video>",
|
||||||
"bold": [
|
"bold": [
|
||||||
"{{cardNumber | myCreditCardNumberFormatter}}"
|
"#movieplayer",
|
||||||
],
|
"(click)"
|
||||||
"description": "<p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>creditCardNumberFormatter</code>.</p>\n"
|
],
|
||||||
},
|
"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>Employer: {{employer?.companyName}}</p>",
|
{
|
||||||
"bold": [
|
"syntax": "<p *my-unless=\"myExpression\">...</p>",
|
||||||
"{{employer?.companyName}}"
|
"bold": [
|
||||||
],
|
"*my-unless"
|
||||||
"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"
|
],
|
||||||
}
|
"description": "<p>The <code>*</code> symbol means that the current element will be turned into an embedded template. Equivalent to:\n<code><template [myless]="myExpression"><p>...</p></template></code></p>\n"
|
||||||
],
|
},
|
||||||
"index": 1
|
{
|
||||||
},
|
"syntax": "<p>Card No.: {{cardNumber | myCreditCardNumberFormatter}}</p>",
|
||||||
{
|
"bold": [
|
||||||
"name": "Built-in directives",
|
"{{cardNumber | myCreditCardNumberFormatter}}"
|
||||||
"description": "<p>\n<code>import 'package:angular2/common.dart';</code></p>\n",
|
],
|
||||||
"items": [
|
"description": "<p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>creditCardNumberFormatter</code>.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "<section *ngIf=\"showSection\">",
|
{
|
||||||
"bold": [
|
"syntax": "<p>Employer: {{employer?.companyName}}</p>",
|
||||||
"*ngIf"
|
"bold": [
|
||||||
],
|
"{{employer?.companyName}}"
|
||||||
"description": "<p>Removes or recreates a portion of the DOM tree based on the showSection expression.</p>\n"
|
],
|
||||||
},
|
"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"
|
||||||
{
|
}
|
||||||
"syntax": "<li *ngFor=\"#item of list\">",
|
],
|
||||||
"bold": [
|
"index": 1
|
||||||
"*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"
|
"name": "Built-in directives",
|
||||||
},
|
"description": "<p>\n\n<code>import 'package:angular2/common.dart';</code></p>\n",
|
||||||
{
|
"items": [
|
||||||
"syntax": "<div [ngSwitch]=\"conditionExpression\">\n <template [ngSwitchWhen]=\"case1Exp\">...</template>\n <template ngSwitchWhen=\"case2LiteralString\">...</template>\n <template ngSwitchDefault>...</template>\n</div>",
|
{
|
||||||
"bold": [
|
"syntax": "<section *ngIf=\"showSection\">",
|
||||||
"[ngSwitch]",
|
"bold": [
|
||||||
"[ngSwitchWhen]",
|
"*ngIf"
|
||||||
"ngSwitchWhen",
|
],
|
||||||
"ngSwitchDefault"
|
"description": "<p>Removes or recreates a portion of the DOM tree based on the showSection expression.</p>\n"
|
||||||
],
|
},
|
||||||
"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": "<li *ngFor=\"#item of list\">",
|
||||||
{
|
"bold": [
|
||||||
"syntax": "<div [ngClass]=\"{active: isActive, disabled: isDisabled}\">",
|
"*ngFor"
|
||||||
"bold": [
|
],
|
||||||
"[ngClass]"
|
"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"
|
||||||
],
|
},
|
||||||
"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"
|
{
|
||||||
}
|
"syntax": "<div [ngSwitch]=\"conditionExpression\">\n <template [ngSwitchWhen]=\"case1Exp\">...</template>\n <template ngSwitchWhen=\"case2LiteralString\">...</template>\n <template ngSwitchDefault>...</template>\n</div>",
|
||||||
],
|
"bold": [
|
||||||
"index": 2
|
"[ngSwitch]",
|
||||||
},
|
"[ngSwitchWhen]",
|
||||||
{
|
"ngSwitchWhen",
|
||||||
"name": "Forms",
|
"ngSwitchDefault"
|
||||||
"description": "<p>\n<code>import 'package:angular2/common.dart';</code></p>\n",
|
],
|
||||||
"items": [
|
"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": "<input [(ngModel)]=\"userName\">",
|
{
|
||||||
"bold": [
|
"syntax": "<div [ngClass]=\"{active: isActive, disabled: isDisabled}\">",
|
||||||
"[(ngModel)]"
|
"bold": [
|
||||||
],
|
"[ngClass]"
|
||||||
"description": "<p>Provides two-way data-binding, parsing and validation for form controls.</p>\n"
|
],
|
||||||
}
|
"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": 3
|
],
|
||||||
},
|
"index": 2
|
||||||
{
|
},
|
||||||
"name": "Class decorators",
|
{
|
||||||
"description": "<p>\n<code>import 'package:angular2/core.dart';</code></p>\n",
|
"name": "Forms",
|
||||||
"items": [
|
"description": "<p>\n\n<code>import 'package:angular2/common.dart';</code></p>\n",
|
||||||
{
|
"items": [
|
||||||
"syntax": "@Component(...)\nclass MyComponent() {}",
|
{
|
||||||
"bold": [
|
"syntax": "<input [(ngModel)]=\"userName\">",
|
||||||
"@Component(...)"
|
"bold": [
|
||||||
],
|
"[(ngModel)]"
|
||||||
"description": "<p>Declares that a class is a component and provides metadata about the component.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Provides two-way data-binding, parsing and validation for form controls.</p>\n"
|
||||||
{
|
}
|
||||||
"syntax": "@Pipe(...)\nclass MyPipe() {}",
|
],
|
||||||
"bold": [
|
"index": 3
|
||||||
"@Pipe(...)"
|
},
|
||||||
],
|
{
|
||||||
"description": "<p>Declares that a class is a pipe and provides metadata about the pipe.</p>\n"
|
"name": "Class decorators",
|
||||||
},
|
"description": "<p>\n\n<code>import 'package:angular2/core.dart';</code></p>\n",
|
||||||
{
|
"items": [
|
||||||
"syntax": "@Injectable()\nclass MyService() {}",
|
{
|
||||||
"bold": [
|
"syntax": "@Component(...)\nclass MyComponent() {}",
|
||||||
"@Injectable()"
|
"bold": [
|
||||||
],
|
"@Component(...)"
|
||||||
"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"
|
],
|
||||||
}
|
"description": "<p>Declares that a class is a component and provides metadata about the component.</p>\n"
|
||||||
],
|
},
|
||||||
"index": 4
|
{
|
||||||
},
|
"syntax": "@Pipe(...)\nclass MyPipe() {}",
|
||||||
{
|
"bold": [
|
||||||
"name": "Directive configuration",
|
"@Pipe(...)"
|
||||||
"description": "<p>\n<code>@Directive(property1: value1, ...)</code></p>\n",
|
],
|
||||||
"items": [
|
"description": "<p>Declares that a class is a pipe and provides metadata about the pipe.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "selector: '.cool-button:not(a)'",
|
{
|
||||||
"bold": [
|
"syntax": "@Injectable()\nclass MyService() {}",
|
||||||
"selector:"
|
"bold": [
|
||||||
],
|
"@Injectable()"
|
||||||
"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"
|
],
|
||||||
},
|
"description": "<p>Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.\n\n</p>\n"
|
||||||
{
|
}
|
||||||
"syntax": "providers: [MyService, provide(...)]",
|
],
|
||||||
"bold": [
|
"index": 4
|
||||||
"providers:"
|
},
|
||||||
],
|
{
|
||||||
"description": "<p>Array of dependency injection providers for this directive and its children.</p>\n"
|
"name": "Directive configuration",
|
||||||
}
|
"description": "<p>\n\n<code>@Directive(property1: value1, ...)</code></p>\n",
|
||||||
],
|
"items": [
|
||||||
"index": 5
|
{
|
||||||
},
|
"syntax": "selector: '.cool-button:not(a)'",
|
||||||
{
|
"bold": [
|
||||||
"name": "Component configuration",
|
"selector:"
|
||||||
"description": "<p><code>@Component</code> extends <code>@Directive</code>,\nso the <code>@Directive</code> configuration applies to components as well</p>\n",
|
],
|
||||||
"items": [
|
"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": "viewProviders: [MyService, provide(...)]",
|
{
|
||||||
"bold": [
|
"syntax": "providers: [MyService, provide(...)]",
|
||||||
"viewProviders:"
|
"bold": [
|
||||||
],
|
"providers:"
|
||||||
"description": "<p>Array of dependency injection providers scoped to this component's view.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Array of dependency injection providers for this directive and its children.</p>\n"
|
||||||
{
|
}
|
||||||
"syntax": "template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'",
|
],
|
||||||
"bold": [
|
"index": 5
|
||||||
"template:",
|
},
|
||||||
"templateUrl:"
|
{
|
||||||
],
|
"name": "Component configuration",
|
||||||
"description": "<p>Inline template / external template URL of the component's view.</p>\n"
|
"description": "<p>\n<code>@Component</code> extends <code>@Directive</code>,\nso the <code>@Directive</code> configuration applies to components as well</p>\n",
|
||||||
},
|
"items": [
|
||||||
{
|
{
|
||||||
"syntax": "styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']",
|
"syntax": "viewProviders: [MyService, provide(...)]",
|
||||||
"bold": [
|
"bold": [
|
||||||
"styles:",
|
"viewProviders:"
|
||||||
"styleUrls:"
|
],
|
||||||
],
|
"description": "<p>Array of dependency injection providers scoped to this component's view.</p>\n"
|
||||||
"description": "<p>List of inline CSS styles / external stylesheet URLs for styling component’s view.</p>\n"
|
},
|
||||||
},
|
{
|
||||||
{
|
"syntax": "template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'",
|
||||||
"syntax": "directives: [MyDirective, MyComponent]",
|
"bold": [
|
||||||
"bold": [
|
"template:",
|
||||||
"directives:"
|
"templateUrl:"
|
||||||
],
|
],
|
||||||
"description": "<p>List of directives used in the the component’s template.</p>\n"
|
"description": "<p>Inline template / external template URL of the component's view.</p>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"syntax": "pipes: [MyPipe, OtherPipe]",
|
"syntax": "styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']",
|
||||||
"bold": [
|
"bold": [
|
||||||
"pipes:"
|
"styles:",
|
||||||
],
|
"styleUrls:"
|
||||||
"description": "<p>List of pipes used in the component's template.</p>\n"
|
],
|
||||||
}
|
"description": "<p>List of inline CSS styles / external stylesheet URLs for styling component’s view.</p>\n"
|
||||||
],
|
},
|
||||||
"index": 6
|
{
|
||||||
},
|
"syntax": "directives: [MyDirective, MyComponent]",
|
||||||
{
|
"bold": [
|
||||||
"name": "Class field decorators for directives and components",
|
"directives:"
|
||||||
"description": "<p>\n<code>import 'package:angular2/core.dart';</code></p>\n",
|
],
|
||||||
"items": [
|
"description": "<p>List of directives used in the the component’s template.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "@Input() myProperty;",
|
{
|
||||||
"bold": [
|
"syntax": "pipes: [MyPipe, OtherPipe]",
|
||||||
"@Input()"
|
"bold": [
|
||||||
],
|
"pipes:"
|
||||||
"description": "<p>Declares an input property that we can update via property binding (e.g.\n<code><my-cmp [my-property]="someExpression"></code>).</p>\n"
|
],
|
||||||
},
|
"description": "<p>List of pipes used in the component's template.</p>\n"
|
||||||
{
|
}
|
||||||
"syntax": "@Output() myEvent = new EventEmitter();",
|
],
|
||||||
"bold": [
|
"index": 6
|
||||||
"@Output()"
|
},
|
||||||
],
|
{
|
||||||
"description": "<p>Declares an output property that fires events to which we can subscribe with an event binding (e.g. <code><my-cmp (my-event)="doSomething()"></code>).</p>\n"
|
"name": "Class field decorators for directives and components",
|
||||||
},
|
"description": "<p>\n\n<code>import 'package:angular2/core.dart';</code></p>\n",
|
||||||
{
|
"items": [
|
||||||
"syntax": "@HostBinding('[class.valid]') isValid;",
|
{
|
||||||
"bold": [
|
"syntax": "@Input() myProperty;",
|
||||||
"@HostBinding('[class.valid]')"
|
"bold": [
|
||||||
],
|
"@Input()"
|
||||||
"description": "<p>Binds a host element property (e.g. CSS class valid) to directive/component property (e.g. isValid).</p>\n"
|
],
|
||||||
},
|
"description": "<p>Declares an input property that we can update via property binding (e.g.\n<code><my-cmp [my-property]="someExpression"></code>).</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "@HostListener('click', ['$event']) onClick(e) {...}",
|
{
|
||||||
"bold": [
|
"syntax": "@Output() myEvent = new EventEmitter();",
|
||||||
"@HostListener('click', ['$event'])"
|
"bold": [
|
||||||
],
|
"@Output()"
|
||||||
"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"
|
],
|
||||||
},
|
"description": "<p>Declares an output property that fires events to which we can subscribe with an event binding (e.g. <code><my-cmp (my-event)="doSomething()"></code>).</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "@ContentChild(myPredicate) myChildComponent;",
|
{
|
||||||
"bold": [
|
"syntax": "@HostBinding('[class.valid]') isValid;",
|
||||||
"@ContentChild(myPredicate)"
|
"bold": [
|
||||||
],
|
"@HostBinding('[class.valid]')"
|
||||||
"description": "<p>Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Binds a host element property (e.g. CSS class valid) to directive/component property (e.g. isValid).</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "@ContentChildren(myPredicate) myChildComponents;",
|
{
|
||||||
"bold": [
|
"syntax": "@HostListener('click', ['$event']) onClick(e) {...}",
|
||||||
"@ContentChildren(myPredicate)"
|
"bold": [
|
||||||
],
|
"@HostListener('click', ['$event'])"
|
||||||
"description": "<p>Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.</p>\n"
|
],
|
||||||
},
|
"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": "@ViewChild(myPredicate) myChildComponent;",
|
{
|
||||||
"bold": [
|
"syntax": "@ContentChild(myPredicate) myChildComponent;",
|
||||||
"@ViewChild(myPredicate)"
|
"bold": [
|
||||||
],
|
"@ContentChild(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"
|
],
|
||||||
},
|
"description": "<p>Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "@ViewChildren(myPredicate) myChildComponents;",
|
{
|
||||||
"bold": [
|
"syntax": "@ContentChildren(myPredicate) myChildComponents;",
|
||||||
"@ViewChildren(myPredicate)"
|
"bold": [
|
||||||
],
|
"@ContentChildren(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"
|
],
|
||||||
}
|
"description": "<p>Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.</p>\n"
|
||||||
],
|
},
|
||||||
"index": 7
|
{
|
||||||
},
|
"syntax": "@ViewChild(myPredicate) myChildComponent;",
|
||||||
{
|
"bold": [
|
||||||
"name": "Directive and component change detection and lifecycle hooks",
|
"@ViewChild(myPredicate)"
|
||||||
"description": "<p>(implemented as class methods)</p>\n",
|
],
|
||||||
"items": [
|
"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": "MyAppComponent(MyService myService, ...) { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "@ViewChildren(myPredicate) myChildComponents;",
|
||||||
"MyAppComponent(MyService myService, ...)"
|
"bold": [
|
||||||
],
|
"@ViewChildren(myPredicate)"
|
||||||
"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"
|
],
|
||||||
},
|
"description": "<p>Binds the results of the component view query (myPredicate) to the myChildComponents property of the class. Not available for directives.</p>\n"
|
||||||
{
|
}
|
||||||
"syntax": "ngOnChanges(changeRecord) { ... }",
|
],
|
||||||
"bold": [
|
"index": 7
|
||||||
"ngOnChanges(changeRecord)"
|
},
|
||||||
],
|
{
|
||||||
"description": "<p>Called after every change to input properties and before processing content or child views.</p>\n"
|
"name": "Directive and component change detection and lifecycle hooks",
|
||||||
},
|
"description": "<p>(implemented as class methods)\n</p>\n",
|
||||||
{
|
"items": [
|
||||||
"syntax": "ngOnInit() { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "MyAppComponent(MyService myService, ...) { ... }",
|
||||||
"ngOnInit()"
|
"bold": [
|
||||||
],
|
"MyAppComponent(MyService myService, ...)"
|
||||||
"description": "<p>Called after the constructor, initializing input properties, and the first call to ngOnChanges.</p>\n"
|
],
|
||||||
},
|
"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": "ngDoCheck() { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "ngOnChanges(changeRecord) { ... }",
|
||||||
"ngDoCheck()"
|
"bold": [
|
||||||
],
|
"ngOnChanges(changeRecord)"
|
||||||
"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"
|
],
|
||||||
},
|
"description": "<p>Called after every change to input properties and before processing content or child views.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "ngAfterContentInit() { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "ngOnInit() { ... }",
|
||||||
"ngAfterContentInit()"
|
"bold": [
|
||||||
],
|
"ngOnInit()"
|
||||||
"description": "<p>Called after ngOnInit when the component's or directive's content has been initialized.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Called after the constructor, initializing input properties, and the first call to ngOnChanges.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "ngAfterContentChecked() { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "ngDoCheck() { ... }",
|
||||||
"ngAfterContentChecked()"
|
"bold": [
|
||||||
],
|
"ngDoCheck()"
|
||||||
"description": "<p>Called after every check of the component's or directive's content.</p>\n"
|
],
|
||||||
},
|
"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": "ngAfterViewInit() { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "ngAfterContentInit() { ... }",
|
||||||
"ngAfterViewInit()"
|
"bold": [
|
||||||
],
|
"ngAfterContentInit()"
|
||||||
"description": "<p>Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Called after ngOnInit when the component's or directive's content has been initialized.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "ngAfterViewChecked() { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "ngAfterContentChecked() { ... }",
|
||||||
"ngAfterViewChecked()"
|
"bold": [
|
||||||
],
|
"ngAfterContentChecked()"
|
||||||
"description": "<p>Called after every check of the component's view. Applies to components only.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Called after every check of the component's or directive's content.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "ngOnDestroy() { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "ngAfterViewInit() { ... }",
|
||||||
"ngOnDestroy()"
|
"bold": [
|
||||||
],
|
"ngAfterViewInit()"
|
||||||
"description": "<p>Called once, before the instance is destroyed.</p>\n"
|
],
|
||||||
}
|
"description": "<p>Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.</p>\n"
|
||||||
],
|
},
|
||||||
"index": 8
|
{
|
||||||
},
|
"syntax": "ngAfterViewChecked() { ... }",
|
||||||
{
|
"bold": [
|
||||||
"name": "Dependency injection configuration",
|
"ngAfterViewChecked()"
|
||||||
"description": "<p>\n<code>import 'package:angular2/core.dart';</code></p>\n",
|
],
|
||||||
"items": [
|
"description": "<p>Called after every check of the component's view. Applies to components only.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "provide(MyService, {useClass: MyMockService})",
|
{
|
||||||
"bold": [
|
"syntax": "ngOnDestroy() { ... }",
|
||||||
"provide",
|
"bold": [
|
||||||
"useClass"
|
"ngOnDestroy()"
|
||||||
],
|
],
|
||||||
"description": "<p>Sets or overrides the provider for MyService to the MyMockService class.</p>\n"
|
"description": "<p>Called once, before the instance is destroyed.</p>\n"
|
||||||
},
|
}
|
||||||
{
|
],
|
||||||
"syntax": "provide(MyService, {useFactory: myFactory})",
|
"index": 8
|
||||||
"bold": [
|
},
|
||||||
"provide",
|
{
|
||||||
"useFactory"
|
"name": "Dependency injection configuration",
|
||||||
],
|
"description": "<p>\n\n<code>import 'package:angular2/core.dart';</code></p>\n",
|
||||||
"description": "<p>Sets or overrides the provider for MyService to the myFactory factory function.</p>\n"
|
"items": [
|
||||||
},
|
{
|
||||||
{
|
"syntax": "provide(MyService, {useClass: MyMockService})",
|
||||||
"syntax": "provide(MyValue, {useValue: 41})",
|
"bold": [
|
||||||
"bold": [
|
"provide",
|
||||||
"provide",
|
"useClass"
|
||||||
"useValue"
|
],
|
||||||
],
|
"description": "<p>Sets or overrides the provider for MyService to the MyMockService class.</p>\n"
|
||||||
"description": "<p>Sets or overrides the provider for MyValue to the value 41.</p>\n"
|
},
|
||||||
}
|
{
|
||||||
],
|
"syntax": "provide(MyService, {useFactory: myFactory})",
|
||||||
"index": 9
|
"bold": [
|
||||||
},
|
"provide",
|
||||||
{
|
"useFactory"
|
||||||
"name": "Routing and navigation",
|
],
|
||||||
"description": "<p>\n<code>import 'package:angular2/router.dart';</code></p>\n",
|
"description": "<p>Sets or overrides the provider for MyService to the myFactory factory function.</p>\n"
|
||||||
"items": [
|
},
|
||||||
{
|
{
|
||||||
"syntax": "@RouteConfig(const [\n const Route(path: '/:myParam', component: MyComponent, name: 'MyCmp' ),\n])",
|
"syntax": "provide(MyValue, {useValue: 41})",
|
||||||
"bold": [
|
"bold": [
|
||||||
"@RouteConfig"
|
"provide",
|
||||||
],
|
"useValue"
|
||||||
"description": "<p>Configures routes for the decorated component. Supports static, parameterized, and wildcard routes.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Sets or overrides the provider for MyValue to the value 41.</p>\n"
|
||||||
{
|
}
|
||||||
"syntax": "<router-outlet></router-outlet>",
|
],
|
||||||
"bold": [
|
"index": 9
|
||||||
"router-outlet"
|
},
|
||||||
],
|
{
|
||||||
"description": "<p>Marks the location to load the component of the active route.</p>\n"
|
"name": "Routing and navigation",
|
||||||
},
|
"description": "<p>\n\n<code>import 'package:angular2/router.dart';</code></p>\n",
|
||||||
{
|
"items": [
|
||||||
"syntax": "<a [routerLink]=\"[ '/MyCmp', {myParam: 'value' } ]\">",
|
{
|
||||||
"bold": [
|
"syntax": "@RouteConfig(const [\n const Route(path: '/:myParam', component: MyComponent, name: 'MyCmp' ),\n])",
|
||||||
"[routerLink]"
|
"bold": [
|
||||||
],
|
"@RouteConfig"
|
||||||
"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 '/' prefix to navigate to a root route; add the './' prefix for a child route.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Configures routes for the decorated component. Supports static, parameterized, and wildcard routes.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "@CanActivate(() => ...)class MyComponent() {}",
|
{
|
||||||
"bold": [
|
"syntax": "<router-outlet></router-outlet>",
|
||||||
"@CanActivate"
|
"bold": [
|
||||||
],
|
"router-outlet"
|
||||||
"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"
|
],
|
||||||
},
|
"description": "<p>Marks the location to load the component of the active route.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "routerOnActivate(nextInstruction, prevInstruction) { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "<a [routerLink]=\"[ '/MyCmp', {myParam: 'value' } ]\">",
|
||||||
"routerOnActivate"
|
"bold": [
|
||||||
],
|
"[routerLink]"
|
||||||
"description": "<p>After navigating to a component, the router calls the component's routerOnActivate method (if defined).</p>\n"
|
],
|
||||||
},
|
"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 '/' prefix to navigate to a root route; add the './' prefix for a child route.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "routerCanReuse(nextInstruction, prevInstruction) { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "@CanActivate(() => ...)class MyComponent() {}",
|
||||||
"routerCanReuse"
|
"bold": [
|
||||||
],
|
"@CanActivate"
|
||||||
"description": "<p>The router calls a component's routerCanReuse method (if defined) to determine whether to reuse the instance or destroy it and create a new instance. Should return a boolean or a future.</p>\n"
|
],
|
||||||
},
|
"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": "routerOnReuse(nextInstruction, prevInstruction) { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "routerOnActivate(nextInstruction, prevInstruction) { ... }",
|
||||||
"routerOnReuse"
|
"bold": [
|
||||||
],
|
"routerOnActivate"
|
||||||
"description": "<p>The router calls the component's routerOnReuse method (if defined) when it re-uses a component instance.</p>\n"
|
],
|
||||||
},
|
"description": "<p>After navigating to a component, the router calls the component's routerOnActivate method (if defined).</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "routerCanDeactivate(nextInstruction, prevInstruction) { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "routerCanReuse(nextInstruction, prevInstruction) { ... }",
|
||||||
"routerCanDeactivate"
|
"bold": [
|
||||||
],
|
"routerCanReuse"
|
||||||
"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"
|
],
|
||||||
},
|
"description": "<p>The router calls a component's routerCanReuse method (if defined) to determine whether to reuse the instance or destroy it and create a new instance. Should return a boolean or a future.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "routerOnDeactivate(nextInstruction, prevInstruction) { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "routerOnReuse(nextInstruction, prevInstruction) { ... }",
|
||||||
"routerOnDeactivate"
|
"bold": [
|
||||||
],
|
"routerOnReuse"
|
||||||
"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"
|
],
|
||||||
}
|
"description": "<p>The router calls the component's routerOnReuse method (if defined) when it re-uses a component instance.</p>\n"
|
||||||
],
|
},
|
||||||
"index": 10
|
{
|
||||||
}
|
"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
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -1,487 +1,514 @@
|
||||||
[
|
{
|
||||||
{
|
"currentEnvironment": "JavaScript",
|
||||||
"name": "Bootstrapping",
|
"version": {
|
||||||
"description": "<p><code>import {bootstrap} from 'angular2/platform/browser';</code>\n</p>\n",
|
"raw": "2.0.0-beta.0",
|
||||||
"items": [
|
"major": 2,
|
||||||
{
|
"minor": 0,
|
||||||
"syntax": "bootstrap(MyAppComponent, [MyService, provide(...)]);",
|
"patch": 0,
|
||||||
"bold": [
|
"prerelease": [
|
||||||
"provide"
|
"local"
|
||||||
],
|
|
||||||
"description": "<p>Bootstraps an application with MyAppComponent as the root component, and\nconfigures the app's dependency injection providers.</p>\n"
|
|
||||||
}
|
|
||||||
],
|
],
|
||||||
"index": 0
|
"build": "sha.323393a",
|
||||||
|
"version": "2.0.0-local",
|
||||||
|
"codeName": "snapshot",
|
||||||
|
"isSnapshot": true,
|
||||||
|
"full": "2.0.0-local+sha.323393a",
|
||||||
|
"branch": "master",
|
||||||
|
"commitSHA": "323393a86201db871c2fbc6dc7bd12229b498d9a"
|
||||||
},
|
},
|
||||||
{
|
"sections": [
|
||||||
"name": "Template syntax",
|
{
|
||||||
"description": "",
|
"name": "Bootstrapping",
|
||||||
"items": [
|
"description": "<p>\nAvailable from the <code>ng.platform.browser</code> namespace.\n</p>\n",
|
||||||
{
|
"items": [
|
||||||
"syntax": "<input [value]=\"firstName\">",
|
{
|
||||||
"bold": [
|
"syntax": "document.addEventListener('DOMContentLoaded', function () {\n ng.platform.browser.bootstrap(MyAppComponent,\n [MyService, ng.core.provide(...)]);\n});",
|
||||||
"[value]"
|
"bold": [
|
||||||
],
|
"provide"
|
||||||
"description": "<p>Binds property <code>value</code> to the result of expression <code>firstName</code>.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Bootstraps an application with MyAppComponent as the root component and configures the DI providers. Must be wrapped in the event listener to fire when the page loads.</p>\n"
|
||||||
{
|
}
|
||||||
"syntax": "<div [attr.role]=\"myAriaRole\">",
|
],
|
||||||
"bold": [
|
"index": 0
|
||||||
"[attr.role]"
|
},
|
||||||
],
|
{
|
||||||
"description": "<p>Binds attribute <code>role</code> to the result of expression <code>myAriaRole</code>.</p>\n"
|
"name": "Template syntax",
|
||||||
},
|
"description": "",
|
||||||
{
|
"items": [
|
||||||
"syntax": "<div [class.extra-sparkle]=\"isDelightful\">",
|
{
|
||||||
"bold": [
|
"syntax": "<input [value]=\"firstName\">",
|
||||||
"[class.extra-sparkle]"
|
"bold": [
|
||||||
],
|
"[value]"
|
||||||
"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"
|
],
|
||||||
},
|
"description": "<p>Binds property <code>value</code> to the result of expression <code>firstName</code>.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "<div [style.width.px]=\"mySize\">",
|
{
|
||||||
"bold": [
|
"syntax": "<div [attr.role]=\"myAriaRole\">",
|
||||||
"[style.width.px]"
|
"bold": [
|
||||||
],
|
"[attr.role]"
|
||||||
"description": "<p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Binds attribute <code>role</code> to the result of expression <code>myAriaRole</code>.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "<button (click)=\"readRainbow($event)\">",
|
{
|
||||||
"bold": [
|
"syntax": "<div [class.extra-sparkle]=\"isDelightful\">",
|
||||||
"(click)"
|
"bold": [
|
||||||
],
|
"[class.extra-sparkle]"
|
||||||
"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"
|
],
|
||||||
},
|
"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 title=\"Hello {{ponyName}}\">",
|
{
|
||||||
"bold": [
|
"syntax": "<div [style.width.px]=\"mySize\">",
|
||||||
"{{ponyName}}"
|
"bold": [
|
||||||
],
|
"[style.width.px]"
|
||||||
"description": "<p>Binds a property to an interpolated string, e.g. "Hello Seabiscuit". Equivalent to:\n<code><div [title]="'Hello' + ponyName"></code></p>\n"
|
],
|
||||||
},
|
"description": "<p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "<p>Hello {{ponyName}}</p>",
|
{
|
||||||
"bold": [
|
"syntax": "<button (click)=\"readRainbow($event)\">",
|
||||||
"{{ponyName}}"
|
"bold": [
|
||||||
],
|
"(click)"
|
||||||
"description": "<p>Binds text content to an interpolated string, e.g. "Hello Seabiscuit".</p>\n"
|
],
|
||||||
},
|
"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": "<my-cmp [(title)]=\"name\">",
|
{
|
||||||
"bold": [
|
"syntax": "<div title=\"Hello {{ponyName}}\">",
|
||||||
"[(title)]"
|
"bold": [
|
||||||
],
|
"{{ponyName}}"
|
||||||
"description": "<p>Sets up two-way data binding. Equivalent to: <code><my-cmp [title]="name" (titleChange)="name=$event"></code></p>\n"
|
],
|
||||||
},
|
"description": "<p>Binds a property to an interpolated string, e.g. "Hello Seabiscuit". Equivalent to:\n<code><div [title]="'Hello' + ponyName"></code></p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "<video #movieplayer ...>\n <button (click)=\"movieplayer.play()\">\n</video>",
|
{
|
||||||
"bold": [
|
"syntax": "<p>Hello {{ponyName}}</p>",
|
||||||
"#movieplayer",
|
"bold": [
|
||||||
"(click)"
|
"{{ponyName}}"
|
||||||
],
|
],
|
||||||
"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"
|
"description": "<p>Binds text content to an interpolated string, e.g. "Hello Seabiscuit".</p>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"syntax": "<p *my-unless=\"myExpression\">...</p>",
|
"syntax": "<my-cmp [(title)]=\"name\">",
|
||||||
"bold": [
|
"bold": [
|
||||||
"*my-unless"
|
"[(title)]"
|
||||||
],
|
],
|
||||||
"description": "<p>The <code>*</code> symbol means that the current element will be turned into an embedded template. Equivalent to:\n<code><template [myless]="myExpression"><p>...</p></template></code></p>\n"
|
"description": "<p>Sets up two-way data binding. Equivalent to: <code><my-cmp [title]="name" (titleChange)="name=$event"></code></p>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"syntax": "<p>Card No.: {{cardNumber | myCreditCardNumberFormatter}}</p>",
|
"syntax": "<video #movieplayer ...>\n <button (click)=\"movieplayer.play()\">\n</video>",
|
||||||
"bold": [
|
"bold": [
|
||||||
"{{cardNumber | myCreditCardNumberFormatter}}"
|
"#movieplayer",
|
||||||
],
|
"(click)"
|
||||||
"description": "<p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>creditCardNumberFormatter</code>.</p>\n"
|
],
|
||||||
},
|
"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>Employer: {{employer?.companyName}}</p>",
|
{
|
||||||
"bold": [
|
"syntax": "<p *my-unless=\"myExpression\">...</p>",
|
||||||
"{{employer?.companyName}}"
|
"bold": [
|
||||||
],
|
"*my-unless"
|
||||||
"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"
|
],
|
||||||
}
|
"description": "<p>The <code>*</code> symbol means that the current element will be turned into an embedded template. Equivalent to:\n<code><template [myless]="myExpression"><p>...</p></template></code></p>\n"
|
||||||
],
|
},
|
||||||
"index": 1
|
{
|
||||||
},
|
"syntax": "<p>Card No.: {{cardNumber | myCreditCardNumberFormatter}}</p>",
|
||||||
{
|
"bold": [
|
||||||
"name": "Built-in directives",
|
"{{cardNumber | myCreditCardNumberFormatter}}"
|
||||||
"description": "<p><code>import {NgIf, ...} from 'angular2/common';</code>\n</p>\n",
|
],
|
||||||
"items": [
|
"description": "<p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>creditCardNumberFormatter</code>.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "<section *ngIf=\"showSection\">",
|
{
|
||||||
"bold": [
|
"syntax": "<p>Employer: {{employer?.companyName}}</p>",
|
||||||
"*ngIf"
|
"bold": [
|
||||||
],
|
"{{employer?.companyName}}"
|
||||||
"description": "<p>Removes or recreates a portion of the DOM tree based on the showSection expression.</p>\n"
|
],
|
||||||
},
|
"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"
|
||||||
{
|
}
|
||||||
"syntax": "<li *ngFor=\"#item of list\">",
|
],
|
||||||
"bold": [
|
"index": 1
|
||||||
"*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"
|
"name": "Built-in directives",
|
||||||
},
|
"description": "<p>\nAvailable from the <code>ng.common</code> namespace\n</p>\n",
|
||||||
{
|
"items": [
|
||||||
"syntax": "<div [ngSwitch]=\"conditionExpression\">\n <template [ngSwitchWhen]=\"case1Exp\">...</template>\n <template ngSwitchWhen=\"case2LiteralString\">...</template>\n <template ngSwitchDefault>...</template>\n</div>",
|
{
|
||||||
"bold": [
|
"syntax": "<section *ngIf=\"showSection\">",
|
||||||
"[ngSwitch]",
|
"bold": [
|
||||||
"[ngSwitchWhen]",
|
"*ngIf"
|
||||||
"ngSwitchWhen",
|
],
|
||||||
"ngSwitchDefault"
|
"description": "<p>Removes or recreates a portion of the DOM tree based on the showSection expression.</p>\n"
|
||||||
],
|
},
|
||||||
"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": "<li *ngFor=\"#item of list\">",
|
||||||
{
|
"bold": [
|
||||||
"syntax": "<div [ngClass]=\"{active: isActive, disabled: isDisabled}\">",
|
"*ngFor"
|
||||||
"bold": [
|
],
|
||||||
"[ngClass]"
|
"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"
|
||||||
],
|
},
|
||||||
"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"
|
{
|
||||||
}
|
"syntax": "<div [ngSwitch]=\"conditionExpression\">\n <template [ngSwitchWhen]=\"case1Exp\">...</template>\n <template ngSwitchWhen=\"case2LiteralString\">...</template>\n <template ngSwitchDefault>...</template>\n</div>",
|
||||||
],
|
"bold": [
|
||||||
"index": 2
|
"[ngSwitch]",
|
||||||
},
|
"[ngSwitchWhen]",
|
||||||
{
|
"ngSwitchWhen",
|
||||||
"name": "Forms",
|
"ngSwitchDefault"
|
||||||
"description": "<p><code>import {FORM_DIRECTIVES} from 'angular2/common';</code>\n</p>\n",
|
],
|
||||||
"items": [
|
"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": "<input [(ngModel)]=\"userName\">",
|
{
|
||||||
"bold": [
|
"syntax": "<div [ngClass]=\"{active: isActive, disabled: isDisabled}\">",
|
||||||
"[(ngModel)]"
|
"bold": [
|
||||||
],
|
"[ngClass]"
|
||||||
"description": "<p>Provides two-way data-binding, parsing and validation for form controls.</p>\n"
|
],
|
||||||
}
|
"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": 3
|
],
|
||||||
},
|
"index": 2
|
||||||
{
|
},
|
||||||
"name": "Class decorators",
|
{
|
||||||
"description": "<p><code>import {Directive, ...} from 'angular2/core';</code>\n</p>\n",
|
"name": "Forms",
|
||||||
"items": [
|
"description": "<p>\nAvailable from <code>ng.common.FORM_DIRECTIVES</code>\n</p>\n",
|
||||||
{
|
"items": [
|
||||||
"syntax": "@Component({...})\nclass MyComponent() {}",
|
{
|
||||||
"bold": [
|
"syntax": "<input [(ngModel)]=\"userName\">",
|
||||||
"@Component({...})"
|
"bold": [
|
||||||
],
|
"[(ngModel)]"
|
||||||
"description": "<p>Declares that a class is a component and provides metadata about the component.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Provides two-way data-binding, parsing and validation for form controls.</p>\n"
|
||||||
{
|
}
|
||||||
"syntax": "@Pipe({...})\nclass MyPipe() {}",
|
],
|
||||||
"bold": [
|
"index": 3
|
||||||
"@Pipe({...})"
|
},
|
||||||
],
|
{
|
||||||
"description": "<p>Declares that a class is a pipe and provides metadata about the pipe.</p>\n"
|
"name": "Class decorators",
|
||||||
},
|
"description": "<p>\nAvailable from the <code>ng.core</code> namespace\n</p>\n",
|
||||||
{
|
"items": [
|
||||||
"syntax": "@Injectable()\nclass MyService() {}",
|
{
|
||||||
"bold": [
|
"syntax": "var MyComponent = ng.core.Component({...}).Class({...})",
|
||||||
"@Injectable()"
|
"bold": [
|
||||||
],
|
"ng.core.Component({...})"
|
||||||
"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"
|
],
|
||||||
}
|
"description": "<p>Declares that a class is a component and provides metadata about the component.</p>\n"
|
||||||
],
|
},
|
||||||
"index": 4
|
{
|
||||||
},
|
"syntax": "var MyPipe = ng.core.Pipe({...}).Class({...})",
|
||||||
{
|
"bold": [
|
||||||
"name": "Directive configuration",
|
"ng.core.Pipe({...})"
|
||||||
"description": "<p><code>@Directive({ property1: value1, ... })</code>\n</p>\n",
|
],
|
||||||
"items": [
|
"description": "<p>Declares that a class is a pipe and provides metadata about the pipe.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "selector: '.cool-button:not(a)'",
|
{
|
||||||
"bold": [
|
"syntax": "var OtherService = ng.core.Class({constructor: function() { }});\nvar MyService = ng.core.Class({constructor: [OtherService, function(otherService) { }]});",
|
||||||
"selector:"
|
"bold": [
|
||||||
],
|
"var MyService = ng.core.Class({constructor: [OtherService, function(otherService) { }]});"
|
||||||
"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"
|
],
|
||||||
},
|
"description": "<p>\n\nDeclares a service to inject into a class by providing an array with the services with the final item being the function which will receive the injected services.\n</p>\n"
|
||||||
{
|
}
|
||||||
"syntax": "providers: [MyService, provide(...)]",
|
],
|
||||||
"bold": [
|
"index": 4
|
||||||
"providers:"
|
},
|
||||||
],
|
{
|
||||||
"description": "<p>Array of dependency injection providers for this directive and its children.</p>\n"
|
"name": "Directive configuration",
|
||||||
}
|
"description": "<p>\n<code>ng.core.Directive({ property1: value1, ... }).Class({...})</code>\n</p>\n",
|
||||||
],
|
"items": [
|
||||||
"index": 5
|
{
|
||||||
},
|
"syntax": "selector: '.cool-button:not(a)'",
|
||||||
{
|
"bold": [
|
||||||
"name": "Component configuration",
|
"selector:"
|
||||||
"description": "<p><code>@Component</code> extends <code>@Directive</code>,\nso the <code>@Directive</code> configuration applies to components as well</p>\n",
|
],
|
||||||
"items": [
|
"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": "viewProviders: [MyService, provide(...)]",
|
{
|
||||||
"bold": [
|
"syntax": "providers: [MyService, ng.core.provide(...)]",
|
||||||
"viewProviders:"
|
"bold": [
|
||||||
],
|
"providers:"
|
||||||
"description": "<p>Array of dependency injection providers scoped to this component's view.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Array of dependency injection providers for this directive and its children.</p>\n"
|
||||||
{
|
}
|
||||||
"syntax": "template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'",
|
],
|
||||||
"bold": [
|
"index": 5
|
||||||
"template:",
|
},
|
||||||
"templateUrl:"
|
{
|
||||||
],
|
"name": "Component configuration",
|
||||||
"description": "<p>Inline template / external template URL of the component's view.</p>\n"
|
"description": "<p><code>ng.core.Component</code> extends <code>ng.core.Directive</code>,\nso the <code>ng.core.Directive</code> configuration applies to components as well\n</p>\n",
|
||||||
},
|
"items": [
|
||||||
{
|
{
|
||||||
"syntax": "styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']",
|
"syntax": "viewProviders: [MyService, ng.core.provide(...)]",
|
||||||
"bold": [
|
"bold": [
|
||||||
"styles:",
|
"viewProviders:"
|
||||||
"styleUrls:"
|
],
|
||||||
],
|
"description": "<p>Array of dependency injection providers scoped to this component's view.</p>\n"
|
||||||
"description": "<p>List of inline CSS styles / external stylesheet URLs for styling component’s view.</p>\n"
|
},
|
||||||
},
|
{
|
||||||
{
|
"syntax": "template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'",
|
||||||
"syntax": "directives: [MyDirective, MyComponent]",
|
"bold": [
|
||||||
"bold": [
|
"template:",
|
||||||
"directives:"
|
"templateUrl:"
|
||||||
],
|
],
|
||||||
"description": "<p>List of directives used in the the component’s template.</p>\n"
|
"description": "<p>Inline template / external template URL of the component's view.</p>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"syntax": "pipes: [MyPipe, OtherPipe]",
|
"syntax": "styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']",
|
||||||
"bold": [
|
"bold": [
|
||||||
"pipes:"
|
"styles:",
|
||||||
],
|
"styleUrls:"
|
||||||
"description": "<p>List of pipes used in the component's template.</p>\n"
|
],
|
||||||
}
|
"description": "<p>List of inline CSS styles / external stylesheet URLs for styling component’s view.</p>\n"
|
||||||
],
|
},
|
||||||
"index": 6
|
{
|
||||||
},
|
"syntax": "directives: [MyDirective, MyComponent]",
|
||||||
{
|
"bold": [
|
||||||
"name": "Class field decorators for directives and components",
|
"directives:"
|
||||||
"description": "<p><code>import {Input, ...} from 'angular2/core';</code>\n</p>\n",
|
],
|
||||||
"items": [
|
"description": "<p>List of directives used in the the component’s template.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "@Input() myProperty;",
|
{
|
||||||
"bold": [
|
"syntax": "pipes: [MyPipe, OtherPipe]",
|
||||||
"@Input()"
|
"bold": [
|
||||||
],
|
"pipes:"
|
||||||
"description": "<p>Declares an input property that we can update via property binding (e.g.\n<code><my-cmp [my-property]="someExpression"></code>).</p>\n"
|
],
|
||||||
},
|
"description": "<p>List of pipes used in the component's template.</p>\n"
|
||||||
{
|
}
|
||||||
"syntax": "@Output() myEvent = new EventEmitter();",
|
],
|
||||||
"bold": [
|
"index": 6
|
||||||
"@Output()"
|
},
|
||||||
],
|
{
|
||||||
"description": "<p>Declares an output property that fires events to which we can subscribe with an event binding (e.g. <code><my-cmp (my-event)="doSomething()"></code>).</p>\n"
|
"name": "Class field decorators for directives and components",
|
||||||
},
|
"description": "<p>\nAvailable from the <code>ng.core</code> namespace\n</p>\n",
|
||||||
{
|
"items": [
|
||||||
"syntax": "@HostBinding('[class.valid]') isValid;",
|
{
|
||||||
"bold": [
|
"syntax": "ng.core.Input(myProperty, myComponent);",
|
||||||
"@HostBinding('[class.valid]')"
|
"bold": [
|
||||||
],
|
"ng.core.Input(",
|
||||||
"description": "<p>Binds a host element property (e.g. CSS class valid) to directive/component property (e.g. isValid).</p>\n"
|
");"
|
||||||
},
|
],
|
||||||
{
|
"description": "<p>Declares an input property that we can update via property binding (e.g.\n<code><my-cmp [my-property]="someExpression"></code>).</p>\n"
|
||||||
"syntax": "@HostListener('click', ['$event']) onClick(e) {...}",
|
},
|
||||||
"bold": [
|
{
|
||||||
"@HostListener('click', ['$event'])"
|
"syntax": "myEvent = new ng.core.EventEmitter(); ng.core.Output(myEvent, myComponent);",
|
||||||
],
|
"bold": [
|
||||||
"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"
|
"ng.core.Output(",
|
||||||
},
|
");"
|
||||||
{
|
],
|
||||||
"syntax": "@ContentChild(myPredicate) myChildComponent;",
|
"description": "<p>Declares an output property that fires events to which we can subscribe with an event binding (e.g. <code><my-cmp (my-event)="doSomething()"></code>).</p>\n"
|
||||||
"bold": [
|
},
|
||||||
"@ContentChild(myPredicate)"
|
{
|
||||||
],
|
"syntax": "ng.core.HostBinding('[class.valid]', 'isValid', myComponent);",
|
||||||
"description": "<p>Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.</p>\n"
|
"bold": [
|
||||||
},
|
"ng.core.HostBinding('[class.valid]', 'isValid'",
|
||||||
{
|
");"
|
||||||
"syntax": "@ContentChildren(myPredicate) myChildComponents;",
|
],
|
||||||
"bold": [
|
"description": "<p>Binds a host element property (e.g. CSS class valid) to directive/component property (e.g. isValid).</p>\n"
|
||||||
"@ContentChildren(myPredicate)"
|
},
|
||||||
],
|
{
|
||||||
"description": "<p>Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.</p>\n"
|
"syntax": "ng.core.HostListener('click', ['$event'], onClick(e) {...}, myComponent);",
|
||||||
},
|
"bold": [
|
||||||
{
|
"ng.core.HostListener('click', ['$event'], onClick(e)",
|
||||||
"syntax": "@ViewChild(myPredicate) myChildComponent;",
|
");"
|
||||||
"bold": [
|
],
|
||||||
"@ViewChild(myPredicate)"
|
"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"
|
||||||
],
|
},
|
||||||
"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": "ng.core.ContentChild(myPredicate, 'myChildComponent', myComponent);",
|
||||||
{
|
"bold": [
|
||||||
"syntax": "@ViewChildren(myPredicate) myChildComponents;",
|
"ng.core.ContentChild(myPredicate,",
|
||||||
"bold": [
|
");"
|
||||||
"@ViewChildren(myPredicate)"
|
],
|
||||||
],
|
"description": "<p>Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.</p>\n"
|
||||||
"description": "<p>Binds the results of the component view query (myPredicate) to the myChildComponents property of the class. Not available for directives.</p>\n"
|
},
|
||||||
}
|
{
|
||||||
],
|
"syntax": "ng.core.ContentChildren(myPredicate, 'myChildComponents', myComponent);",
|
||||||
"index": 7
|
"bold": [
|
||||||
},
|
"ng.core.ContentChildren(myPredicate,",
|
||||||
{
|
");"
|
||||||
"name": "Directive and component change detection and lifecycle hooks",
|
],
|
||||||
"description": "<p>(implemented as class methods)</p>\n",
|
"description": "<p>Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.</p>\n"
|
||||||
"items": [
|
},
|
||||||
{
|
{
|
||||||
"syntax": "constructor(myService: MyService, ...) { ... }",
|
"syntax": "ng.core.ViewChild(myPredicate, 'myChildComponent', myComponent);",
|
||||||
"bold": [
|
"bold": [
|
||||||
"constructor(myService: MyService, ...)"
|
"ng.core.ViewChild(myPredicate,",
|
||||||
],
|
");"
|
||||||
"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"
|
],
|
||||||
},
|
"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": "ngOnChanges(changeRecord) { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "ng.core.ViewChildren(myPredicate, 'myChildComponents', myComponent);",
|
||||||
"ngOnChanges(changeRecord)"
|
"bold": [
|
||||||
],
|
"ng.core.ViewChildren(myPredicate,",
|
||||||
"description": "<p>Called after every change to input properties and before processing content or child views.</p>\n"
|
");"
|
||||||
},
|
],
|
||||||
{
|
"description": "<p>Binds the results of the component view query (myPredicate) to the myChildComponents property of the class. Not available for directives.</p>\n"
|
||||||
"syntax": "ngOnInit() { ... }",
|
}
|
||||||
"bold": [
|
],
|
||||||
"ngOnInit()"
|
"index": 7
|
||||||
],
|
},
|
||||||
"description": "<p>Called after the constructor, initializing input properties, and the first call to ngOnChanges.</p>\n"
|
{
|
||||||
},
|
"name": "Directive and component change detection and lifecycle hooks",
|
||||||
{
|
"description": "<p>\n(implemented as component properties)</p>\n",
|
||||||
"syntax": "ngDoCheck() { ... }",
|
"items": [
|
||||||
"bold": [
|
{
|
||||||
"ngDoCheck()"
|
"syntax": "constructor: function(MyService, ...) { ... }",
|
||||||
],
|
"bold": [
|
||||||
"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"
|
"constructor: function(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": "ngAfterContentInit() { ... }",
|
},
|
||||||
"bold": [
|
{
|
||||||
"ngAfterContentInit()"
|
"syntax": "ngOnChanges: function(changeRecord) { ... }",
|
||||||
],
|
"bold": [
|
||||||
"description": "<p>Called after ngOnInit when the component's or directive's content has been initialized.</p>\n"
|
"ngOnChanges: function(changeRecord)"
|
||||||
},
|
],
|
||||||
{
|
"description": "<p>Called after every change to input properties and before processing content or child views.</p>\n"
|
||||||
"syntax": "ngAfterContentChecked() { ... }",
|
},
|
||||||
"bold": [
|
{
|
||||||
"ngAfterContentChecked()"
|
"syntax": "ngOnInit: function() { ... }",
|
||||||
],
|
"bold": [
|
||||||
"description": "<p>Called after every check of the component's or directive's content.</p>\n"
|
"ngOnInit: function()"
|
||||||
},
|
],
|
||||||
{
|
"description": "<p>Called after the constructor, initializing input properties, and the first call to ngOnChanges.</p>\n"
|
||||||
"syntax": "ngAfterViewInit() { ... }",
|
},
|
||||||
"bold": [
|
{
|
||||||
"ngAfterViewInit()"
|
"syntax": "ngDoCheck: function() { ... }",
|
||||||
],
|
"bold": [
|
||||||
"description": "<p>Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.</p>\n"
|
"ngDoCheck: function()"
|
||||||
},
|
],
|
||||||
{
|
"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": "ngAfterViewChecked() { ... }",
|
},
|
||||||
"bold": [
|
{
|
||||||
"ngAfterViewChecked()"
|
"syntax": "ngAfterContentInit: function() { ... }",
|
||||||
],
|
"bold": [
|
||||||
"description": "<p>Called after every check of the component's view. Applies to components only.</p>\n"
|
"ngAfterContentInit: function()"
|
||||||
},
|
],
|
||||||
{
|
"description": "<p>Called after ngOnInit when the component's or directive's content has been initialized.</p>\n"
|
||||||
"syntax": "ngOnDestroy() { ... }",
|
},
|
||||||
"bold": [
|
{
|
||||||
"ngOnDestroy()"
|
"syntax": "ngAfterContentChecked: function() { ... }",
|
||||||
],
|
"bold": [
|
||||||
"description": "<p>Called once, before the instance is destroyed.</p>\n"
|
"ngAfterContentChecked: function()"
|
||||||
}
|
],
|
||||||
],
|
"description": "<p>Called after every check of the component's or directive's content.</p>\n"
|
||||||
"index": 8
|
},
|
||||||
},
|
{
|
||||||
{
|
"syntax": "ngAfterViewInit: function() { ... }",
|
||||||
"name": "Dependency injection configuration",
|
"bold": [
|
||||||
"description": "<p><code>import {provide} from 'angular2/core';</code>\n</p>\n",
|
"ngAfterViewInit: function()"
|
||||||
"items": [
|
],
|
||||||
{
|
"description": "<p>Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.</p>\n"
|
||||||
"syntax": "provide(MyService, {useClass: MyMockService})",
|
},
|
||||||
"bold": [
|
{
|
||||||
"provide",
|
"syntax": "ngAfterViewChecked: function() { ... }",
|
||||||
"useClass"
|
"bold": [
|
||||||
],
|
"ngAfterViewChecked: function()"
|
||||||
"description": "<p>Sets or overrides the provider for MyService to the MyMockService class.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Called after every check of the component's view. Applies to components only.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "provide(MyService, {useFactory: myFactory})",
|
{
|
||||||
"bold": [
|
"syntax": "ngOnDestroy: function() { ... }",
|
||||||
"provide",
|
"bold": [
|
||||||
"useFactory"
|
"ngOnDestroy: function()"
|
||||||
],
|
],
|
||||||
"description": "<p>Sets or overrides the provider for MyService to the myFactory factory function.</p>\n"
|
"description": "<p>Called once, before the instance is destroyed.</p>\n"
|
||||||
},
|
}
|
||||||
{
|
],
|
||||||
"syntax": "provide(MyValue, {useValue: 41})",
|
"index": 8
|
||||||
"bold": [
|
},
|
||||||
"provide",
|
{
|
||||||
"useValue"
|
"name": "Dependency injection configuration",
|
||||||
],
|
"description": "<p>\nAvailable from the <code>ng.core</code> namespace\n</p>\n",
|
||||||
"description": "<p>Sets or overrides the provider for MyValue to the value 41.</p>\n"
|
"items": [
|
||||||
}
|
{
|
||||||
],
|
"syntax": "ng.core.provide(MyService, {useClass: MyMockService})",
|
||||||
"index": 9
|
"bold": [
|
||||||
},
|
"provide",
|
||||||
{
|
"useClass"
|
||||||
"name": "Routing and navigation",
|
],
|
||||||
"description": "<p><code>import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...} from 'angular2/router';</code>\n</p>\n",
|
"description": "<p>Sets or overrides the provider for MyService to the MyMockService class.</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() {}",
|
"syntax": "ng.core.provide(MyService, {useFactory: myFactory})",
|
||||||
"bold": [
|
"bold": [
|
||||||
"@RouteConfig"
|
"provide",
|
||||||
],
|
"useFactory"
|
||||||
"description": "<p>Configures routes for the decorated component. Supports static, parameterized, and wildcard routes.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Sets or overrides the provider for MyService to the myFactory factory function.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "<router-outlet></router-outlet>",
|
{
|
||||||
"bold": [
|
"syntax": "provide(MyValue, {useValue: 41})",
|
||||||
"router-outlet"
|
"bold": [
|
||||||
],
|
"provide",
|
||||||
"description": "<p>Marks the location to load the component of the active route.</p>\n"
|
"useValue"
|
||||||
},
|
],
|
||||||
{
|
"description": "<p>Sets or overrides the provider for MyValue to the value 41.</p>\n"
|
||||||
"syntax": "<a [routerLink]=\"[ '/MyCmp', {myParam: 'value' } ]\">",
|
}
|
||||||
"bold": [
|
],
|
||||||
"[routerLink]"
|
"index": 9
|
||||||
],
|
},
|
||||||
"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 '/' prefix to navigate to a root route; add the './' prefix for a child route.</p>\n"
|
{
|
||||||
},
|
"name": "Routing and navigation",
|
||||||
{
|
"description": "<p>\nAvailable from the <code>ng.router</code> namespace\n</p>\n",
|
||||||
"syntax": "@CanActivate(() => { ... })class MyComponent() {}",
|
"items": [
|
||||||
"bold": [
|
{
|
||||||
"@CanActivate"
|
"syntax": "var MyComponent = ng.router.RouteConfig([\n { path: '/:myParam', component: MyComponent, as: 'MyCmp' },\n { path: '/staticPath', component: ..., as: ...},\n { path: '/*wildCardParam', component: ..., as: ...}\n]).Class({\n constructor: function() {}\n});",
|
||||||
],
|
"bold": [
|
||||||
"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"
|
"ng.router.RouteConfig"
|
||||||
},
|
],
|
||||||
{
|
"description": "<p>Configures routes for the decorated component. Supports static, parameterized, and wildcard routes.</p>\n"
|
||||||
"syntax": "routerOnActivate(nextInstruction, prevInstruction) { ... }",
|
},
|
||||||
"bold": [
|
{
|
||||||
"routerOnActivate"
|
"syntax": "<router-outlet></router-outlet>",
|
||||||
],
|
"bold": [
|
||||||
"description": "<p>After navigating to a component, the router calls the component's routerOnActivate method (if defined).</p>\n"
|
"router-outlet"
|
||||||
},
|
],
|
||||||
{
|
"description": "<p>Marks the location to load the component of the active route.</p>\n"
|
||||||
"syntax": "routerCanReuse(nextInstruction, prevInstruction) { ... }",
|
},
|
||||||
"bold": [
|
{
|
||||||
"routerCanReuse"
|
"syntax": "<a [routerLink]=\"[ '/MyCmp', {myParam: 'value' } ]\">",
|
||||||
],
|
"bold": [
|
||||||
"description": "<p>The router calls a component's routerCanReuse method (if defined) to determine whether to reuse the instance or destroy it and create a new instance. Should return a boolean or a promise.</p>\n"
|
"[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 '/' prefix to navigate to a root route; add the './' prefix for a child route.</p>\n"
|
||||||
"syntax": "routerOnReuse(nextInstruction, prevInstruction) { ... }",
|
},
|
||||||
"bold": [
|
{
|
||||||
"routerOnReuse"
|
"syntax": "var MyComponent = ng.router.CanActivate(function() { ... }).Component({...}).Class({constructor: ...});",
|
||||||
],
|
"bold": [
|
||||||
"description": "<p>The router calls the component's routerOnReuse method (if defined) when it re-uses a component instance.</p>\n"
|
"ng.router.CanActivate(function() { ... })"
|
||||||
},
|
],
|
||||||
{
|
"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": "routerCanDeactivate(nextInstruction, prevInstruction) { ... }",
|
},
|
||||||
"bold": [
|
{
|
||||||
"routerCanDeactivate"
|
"syntax": "routerOnActivate: function(nextInstruction, prevInstruction) { ... }",
|
||||||
],
|
"bold": [
|
||||||
"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"
|
"routerOnActivate"
|
||||||
},
|
],
|
||||||
{
|
"description": "<p>After navigating to a component, the router calls the component's routerOnActivate method (if defined).</p>\n"
|
||||||
"syntax": "routerOnDeactivate(nextInstruction, prevInstruction) { ... }",
|
},
|
||||||
"bold": [
|
{
|
||||||
"routerOnDeactivate"
|
"syntax": "routerCanReuse: function(nextInstruction, prevInstruction) { ... }",
|
||||||
],
|
"bold": [
|
||||||
"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"
|
"routerCanReuse"
|
||||||
}
|
],
|
||||||
],
|
"description": "<p>The router calls a component's routerCanReuse method (if defined) to determine whether to reuse the instance or destroy it and create a new instance. Should return a boolean or a promise.</p>\n"
|
||||||
"index": 10
|
},
|
||||||
}
|
{
|
||||||
]
|
"syntax": "routerOnReuse: function(nextInstruction, prevInstruction) { ... }",
|
||||||
|
"bold": [
|
||||||
|
"routerOnReuse"
|
||||||
|
],
|
||||||
|
"description": "<p>The router calls the component's routerOnReuse method (if defined) when it re-uses a component instance.</p>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"syntax": "routerCanDeactivate: function(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: function(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
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -1,487 +1,506 @@
|
||||||
[
|
{
|
||||||
{
|
"currentEnvironment": "TypeScript",
|
||||||
"name": "Bootstrapping",
|
"version": {
|
||||||
"description": "<p><code>import {bootstrap} from 'angular2/platform/browser';</code>\n</p>\n",
|
"raw": "2.0.0-beta.0",
|
||||||
"items": [
|
"major": 2,
|
||||||
{
|
"minor": 0,
|
||||||
"syntax": "bootstrap(MyAppComponent, [MyService, provide(...)]);",
|
"patch": 0,
|
||||||
"bold": [
|
"prerelease": [
|
||||||
"provide"
|
"local"
|
||||||
],
|
|
||||||
"description": "<p>Bootstraps an application with MyAppComponent as the root component, and\nconfigures the app's dependency injection providers.</p>\n"
|
|
||||||
}
|
|
||||||
],
|
],
|
||||||
"index": 0
|
"build": "sha.323393a",
|
||||||
|
"version": "2.0.0-local",
|
||||||
|
"codeName": "snapshot",
|
||||||
|
"isSnapshot": true,
|
||||||
|
"full": "2.0.0-local+sha.323393a",
|
||||||
|
"branch": "master",
|
||||||
|
"commitSHA": "323393a86201db871c2fbc6dc7bd12229b498d9a"
|
||||||
},
|
},
|
||||||
{
|
"sections": [
|
||||||
"name": "Template syntax",
|
{
|
||||||
"description": "",
|
"name": "Bootstrapping",
|
||||||
"items": [
|
"description": "<p><code>import {bootstrap} from 'angular2/angular2';</code>\n\n</p>\n",
|
||||||
{
|
"items": [
|
||||||
"syntax": "<input [value]=\"firstName\">",
|
{
|
||||||
"bold": [
|
"syntax": "bootstrap(MyAppComponent, [MyService, provide(...)]);",
|
||||||
"[value]"
|
"bold": [
|
||||||
],
|
"provide"
|
||||||
"description": "<p>Binds property <code>value</code> to the result of expression <code>firstName</code>.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Bootstraps an application with MyAppComponent as the root component and configures the DI providers. </p>\n"
|
||||||
{
|
}
|
||||||
"syntax": "<div [attr.role]=\"myAriaRole\">",
|
],
|
||||||
"bold": [
|
"index": 0
|
||||||
"[attr.role]"
|
},
|
||||||
],
|
{
|
||||||
"description": "<p>Binds attribute <code>role</code> to the result of expression <code>myAriaRole</code>.</p>\n"
|
"name": "Template syntax",
|
||||||
},
|
"description": "",
|
||||||
{
|
"items": [
|
||||||
"syntax": "<div [class.extra-sparkle]=\"isDelightful\">",
|
{
|
||||||
"bold": [
|
"syntax": "<input [value]=\"firstName\">",
|
||||||
"[class.extra-sparkle]"
|
"bold": [
|
||||||
],
|
"[value]"
|
||||||
"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"
|
],
|
||||||
},
|
"description": "<p>Binds property <code>value</code> to the result of expression <code>firstName</code>.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "<div [style.width.px]=\"mySize\">",
|
{
|
||||||
"bold": [
|
"syntax": "<div [attr.role]=\"myAriaRole\">",
|
||||||
"[style.width.px]"
|
"bold": [
|
||||||
],
|
"[attr.role]"
|
||||||
"description": "<p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Binds attribute <code>role</code> to the result of expression <code>myAriaRole</code>.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "<button (click)=\"readRainbow($event)\">",
|
{
|
||||||
"bold": [
|
"syntax": "<div [class.extra-sparkle]=\"isDelightful\">",
|
||||||
"(click)"
|
"bold": [
|
||||||
],
|
"[class.extra-sparkle]"
|
||||||
"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"
|
],
|
||||||
},
|
"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 title=\"Hello {{ponyName}}\">",
|
{
|
||||||
"bold": [
|
"syntax": "<div [style.width.px]=\"mySize\">",
|
||||||
"{{ponyName}}"
|
"bold": [
|
||||||
],
|
"[style.width.px]"
|
||||||
"description": "<p>Binds a property to an interpolated string, e.g. "Hello Seabiscuit". Equivalent to:\n<code><div [title]="'Hello' + ponyName"></code></p>\n"
|
],
|
||||||
},
|
"description": "<p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "<p>Hello {{ponyName}}</p>",
|
{
|
||||||
"bold": [
|
"syntax": "<button (click)=\"readRainbow($event)\">",
|
||||||
"{{ponyName}}"
|
"bold": [
|
||||||
],
|
"(click)"
|
||||||
"description": "<p>Binds text content to an interpolated string, e.g. "Hello Seabiscuit".</p>\n"
|
],
|
||||||
},
|
"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": "<my-cmp [(title)]=\"name\">",
|
{
|
||||||
"bold": [
|
"syntax": "<div title=\"Hello {{ponyName}}\">",
|
||||||
"[(title)]"
|
"bold": [
|
||||||
],
|
"{{ponyName}}"
|
||||||
"description": "<p>Sets up two-way data binding. Equivalent to: <code><my-cmp [title]="name" (titleChange)="name=$event"></code></p>\n"
|
],
|
||||||
},
|
"description": "<p>Binds a property to an interpolated string, e.g. "Hello Seabiscuit". Equivalent to:\n<code><div [title]="'Hello' + ponyName"></code></p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "<video #movieplayer ...>\n <button (click)=\"movieplayer.play()\">\n</video>",
|
{
|
||||||
"bold": [
|
"syntax": "<p>Hello {{ponyName}}</p>",
|
||||||
"#movieplayer",
|
"bold": [
|
||||||
"(click)"
|
"{{ponyName}}"
|
||||||
],
|
],
|
||||||
"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"
|
"description": "<p>Binds text content to an interpolated string, e.g. "Hello Seabiscuit".</p>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"syntax": "<p *my-unless=\"myExpression\">...</p>",
|
"syntax": "<my-cmp [(title)]=\"name\">",
|
||||||
"bold": [
|
"bold": [
|
||||||
"*my-unless"
|
"[(title)]"
|
||||||
],
|
],
|
||||||
"description": "<p>The <code>*</code> symbol means that the current element will be turned into an embedded template. Equivalent to:\n<code><template [myless]="myExpression"><p>...</p></template></code></p>\n"
|
"description": "<p>Sets up two-way data binding. Equivalent to: <code><my-cmp [title]="name" (titleChange)="name=$event"></code></p>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"syntax": "<p>Card No.: {{cardNumber | myCreditCardNumberFormatter}}</p>",
|
"syntax": "<video #movieplayer ...>\n <button (click)=\"movieplayer.play()\">\n</video>",
|
||||||
"bold": [
|
"bold": [
|
||||||
"{{cardNumber | myCreditCardNumberFormatter}}"
|
"#movieplayer",
|
||||||
],
|
"(click)"
|
||||||
"description": "<p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>creditCardNumberFormatter</code>.</p>\n"
|
],
|
||||||
},
|
"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>Employer: {{employer?.companyName}}</p>",
|
{
|
||||||
"bold": [
|
"syntax": "<p *my-unless=\"myExpression\">...</p>",
|
||||||
"{{employer?.companyName}}"
|
"bold": [
|
||||||
],
|
"*my-unless"
|
||||||
"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"
|
],
|
||||||
}
|
"description": "<p>The <code>*</code> symbol means that the current element will be turned into an embedded template. Equivalent to:\n<code><template [myless]="myExpression"><p>...</p></template></code></p>\n"
|
||||||
],
|
},
|
||||||
"index": 1
|
{
|
||||||
},
|
"syntax": "<p>Card No.: {{cardNumber | myCreditCardNumberFormatter}}</p>",
|
||||||
{
|
"bold": [
|
||||||
"name": "Built-in directives",
|
"{{cardNumber | myCreditCardNumberFormatter}}"
|
||||||
"description": "<p><code>import {NgIf, ...} from 'angular2/common';</code>\n</p>\n",
|
],
|
||||||
"items": [
|
"description": "<p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>creditCardNumberFormatter</code>.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "<section *ngIf=\"showSection\">",
|
{
|
||||||
"bold": [
|
"syntax": "<p>Employer: {{employer?.companyName}}</p>",
|
||||||
"*ngIf"
|
"bold": [
|
||||||
],
|
"{{employer?.companyName}}"
|
||||||
"description": "<p>Removes or recreates a portion of the DOM tree based on the showSection expression.</p>\n"
|
],
|
||||||
},
|
"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"
|
||||||
{
|
}
|
||||||
"syntax": "<li *ngFor=\"#item of list\">",
|
],
|
||||||
"bold": [
|
"index": 1
|
||||||
"*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"
|
"name": "Built-in directives",
|
||||||
},
|
"description": "<p><code>import {NgIf, ...} from 'angular2/common';</code>\n\n</p>\n",
|
||||||
{
|
"items": [
|
||||||
"syntax": "<div [ngSwitch]=\"conditionExpression\">\n <template [ngSwitchWhen]=\"case1Exp\">...</template>\n <template ngSwitchWhen=\"case2LiteralString\">...</template>\n <template ngSwitchDefault>...</template>\n</div>",
|
{
|
||||||
"bold": [
|
"syntax": "<section *ngIf=\"showSection\">",
|
||||||
"[ngSwitch]",
|
"bold": [
|
||||||
"[ngSwitchWhen]",
|
"*ngIf"
|
||||||
"ngSwitchWhen",
|
],
|
||||||
"ngSwitchDefault"
|
"description": "<p>Removes or recreates a portion of the DOM tree based on the showSection expression.</p>\n"
|
||||||
],
|
},
|
||||||
"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": "<li *ngFor=\"#item of list\">",
|
||||||
{
|
"bold": [
|
||||||
"syntax": "<div [ngClass]=\"{active: isActive, disabled: isDisabled}\">",
|
"*ngFor"
|
||||||
"bold": [
|
],
|
||||||
"[ngClass]"
|
"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"
|
||||||
],
|
},
|
||||||
"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"
|
{
|
||||||
}
|
"syntax": "<div [ngSwitch]=\"conditionExpression\">\n <template [ngSwitchWhen]=\"case1Exp\">...</template>\n <template ngSwitchWhen=\"case2LiteralString\">...</template>\n <template ngSwitchDefault>...</template>\n</div>",
|
||||||
],
|
"bold": [
|
||||||
"index": 2
|
"[ngSwitch]",
|
||||||
},
|
"[ngSwitchWhen]",
|
||||||
{
|
"ngSwitchWhen",
|
||||||
"name": "Forms",
|
"ngSwitchDefault"
|
||||||
"description": "<p><code>import {FORM_DIRECTIVES} from 'angular2/common';</code>\n</p>\n",
|
],
|
||||||
"items": [
|
"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": "<input [(ngModel)]=\"userName\">",
|
{
|
||||||
"bold": [
|
"syntax": "<div [ngClass]=\"{active: isActive, disabled: isDisabled}\">",
|
||||||
"[(ngModel)]"
|
"bold": [
|
||||||
],
|
"[ngClass]"
|
||||||
"description": "<p>Provides two-way data-binding, parsing and validation for form controls.</p>\n"
|
],
|
||||||
}
|
"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": 3
|
],
|
||||||
},
|
"index": 2
|
||||||
{
|
},
|
||||||
"name": "Class decorators",
|
{
|
||||||
"description": "<p><code>import {Directive, ...} from 'angular2/core';</code>\n</p>\n",
|
"name": "Forms",
|
||||||
"items": [
|
"description": "<p><code>import {FORM_DIRECTIVES} from 'angular2/common';</code>\n\n</p>\n",
|
||||||
{
|
"items": [
|
||||||
"syntax": "@Component({...})\nclass MyComponent() {}",
|
{
|
||||||
"bold": [
|
"syntax": "<input [(ngModel)]=\"userName\">",
|
||||||
"@Component({...})"
|
"bold": [
|
||||||
],
|
"[(ngModel)]"
|
||||||
"description": "<p>Declares that a class is a component and provides metadata about the component.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Provides two-way data-binding, parsing and validation for form controls.</p>\n"
|
||||||
{
|
}
|
||||||
"syntax": "@Pipe({...})\nclass MyPipe() {}",
|
],
|
||||||
"bold": [
|
"index": 3
|
||||||
"@Pipe({...})"
|
},
|
||||||
],
|
{
|
||||||
"description": "<p>Declares that a class is a pipe and provides metadata about the pipe.</p>\n"
|
"name": "Class decorators",
|
||||||
},
|
"description": "<p><code>import {Directive, ...} from 'angular2/core';</code>\n\n</p>\n",
|
||||||
{
|
"items": [
|
||||||
"syntax": "@Injectable()\nclass MyService() {}",
|
{
|
||||||
"bold": [
|
"syntax": "@Component({...})\nclass MyComponent() {}",
|
||||||
"@Injectable()"
|
"bold": [
|
||||||
],
|
"@Component({...})"
|
||||||
"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"
|
],
|
||||||
}
|
"description": "<p>Declares that a class is a component and provides metadata about the component.</p>\n"
|
||||||
],
|
},
|
||||||
"index": 4
|
{
|
||||||
},
|
"syntax": "@Pipe({...})\nclass MyPipe() {}",
|
||||||
{
|
"bold": [
|
||||||
"name": "Directive configuration",
|
"@Pipe({...})"
|
||||||
"description": "<p><code>@Directive({ property1: value1, ... })</code>\n</p>\n",
|
],
|
||||||
"items": [
|
"description": "<p>Declares that a class is a pipe and provides metadata about the pipe.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "selector: '.cool-button:not(a)'",
|
{
|
||||||
"bold": [
|
"syntax": "@Injectable()\nclass MyService() {}",
|
||||||
"selector:"
|
"bold": [
|
||||||
],
|
"@Injectable()"
|
||||||
"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"
|
],
|
||||||
},
|
"description": "<p>Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.\n\n</p>\n"
|
||||||
{
|
}
|
||||||
"syntax": "providers: [MyService, provide(...)]",
|
],
|
||||||
"bold": [
|
"index": 4
|
||||||
"providers:"
|
},
|
||||||
],
|
{
|
||||||
"description": "<p>Array of dependency injection providers for this directive and its children.</p>\n"
|
"name": "Directive configuration",
|
||||||
}
|
"description": "<p><code>@Directive({ property1: value1, ... })</code>\n\n</p>\n",
|
||||||
],
|
"items": [
|
||||||
"index": 5
|
{
|
||||||
},
|
"syntax": "selector: '.cool-button:not(a)'",
|
||||||
{
|
"bold": [
|
||||||
"name": "Component configuration",
|
"selector:"
|
||||||
"description": "<p><code>@Component</code> extends <code>@Directive</code>,\nso the <code>@Directive</code> configuration applies to components as well</p>\n",
|
],
|
||||||
"items": [
|
"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": "viewProviders: [MyService, provide(...)]",
|
{
|
||||||
"bold": [
|
"syntax": "providers: [MyService, provide(...)]",
|
||||||
"viewProviders:"
|
"bold": [
|
||||||
],
|
"providers:"
|
||||||
"description": "<p>Array of dependency injection providers scoped to this component's view.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Array of dependency injection providers for this directive and its children.</p>\n"
|
||||||
{
|
}
|
||||||
"syntax": "template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'",
|
],
|
||||||
"bold": [
|
"index": 5
|
||||||
"template:",
|
},
|
||||||
"templateUrl:"
|
{
|
||||||
],
|
"name": "Component configuration",
|
||||||
"description": "<p>Inline template / external template URL of the component's view.</p>\n"
|
"description": "<p>\n<code>@Component</code> extends <code>@Directive</code>,\nso the <code>@Directive</code> configuration applies to components as well</p>\n",
|
||||||
},
|
"items": [
|
||||||
{
|
{
|
||||||
"syntax": "styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']",
|
"syntax": "viewProviders: [MyService, provide(...)]",
|
||||||
"bold": [
|
"bold": [
|
||||||
"styles:",
|
"viewProviders:"
|
||||||
"styleUrls:"
|
],
|
||||||
],
|
"description": "<p>Array of dependency injection providers scoped to this component's view.</p>\n"
|
||||||
"description": "<p>List of inline CSS styles / external stylesheet URLs for styling component’s view.</p>\n"
|
},
|
||||||
},
|
{
|
||||||
{
|
"syntax": "template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'",
|
||||||
"syntax": "directives: [MyDirective, MyComponent]",
|
"bold": [
|
||||||
"bold": [
|
"template:",
|
||||||
"directives:"
|
"templateUrl:"
|
||||||
],
|
],
|
||||||
"description": "<p>List of directives used in the the component’s template.</p>\n"
|
"description": "<p>Inline template / external template URL of the component's view.</p>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"syntax": "pipes: [MyPipe, OtherPipe]",
|
"syntax": "styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']",
|
||||||
"bold": [
|
"bold": [
|
||||||
"pipes:"
|
"styles:",
|
||||||
],
|
"styleUrls:"
|
||||||
"description": "<p>List of pipes used in the component's template.</p>\n"
|
],
|
||||||
}
|
"description": "<p>List of inline CSS styles / external stylesheet URLs for styling component’s view.</p>\n"
|
||||||
],
|
},
|
||||||
"index": 6
|
{
|
||||||
},
|
"syntax": "directives: [MyDirective, MyComponent]",
|
||||||
{
|
"bold": [
|
||||||
"name": "Class field decorators for directives and components",
|
"directives:"
|
||||||
"description": "<p><code>import {Input, ...} from 'angular2/core';</code>\n</p>\n",
|
],
|
||||||
"items": [
|
"description": "<p>List of directives used in the the component’s template.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "@Input() myProperty;",
|
{
|
||||||
"bold": [
|
"syntax": "pipes: [MyPipe, OtherPipe]",
|
||||||
"@Input()"
|
"bold": [
|
||||||
],
|
"pipes:"
|
||||||
"description": "<p>Declares an input property that we can update via property binding (e.g.\n<code><my-cmp [my-property]="someExpression"></code>).</p>\n"
|
],
|
||||||
},
|
"description": "<p>List of pipes used in the component's template.</p>\n"
|
||||||
{
|
}
|
||||||
"syntax": "@Output() myEvent = new EventEmitter();",
|
],
|
||||||
"bold": [
|
"index": 6
|
||||||
"@Output()"
|
},
|
||||||
],
|
{
|
||||||
"description": "<p>Declares an output property that fires events to which we can subscribe with an event binding (e.g. <code><my-cmp (my-event)="doSomething()"></code>).</p>\n"
|
"name": "Class field decorators for directives and components",
|
||||||
},
|
"description": "<p><code>import {Input, ...} from 'angular2/core';</code>\n\n</p>\n",
|
||||||
{
|
"items": [
|
||||||
"syntax": "@HostBinding('[class.valid]') isValid;",
|
{
|
||||||
"bold": [
|
"syntax": "@Input() myProperty;",
|
||||||
"@HostBinding('[class.valid]')"
|
"bold": [
|
||||||
],
|
"@Input()"
|
||||||
"description": "<p>Binds a host element property (e.g. CSS class valid) to directive/component property (e.g. isValid).</p>\n"
|
],
|
||||||
},
|
"description": "<p>Declares an input property that we can update via property binding (e.g.\n<code><my-cmp [my-property]="someExpression"></code>).</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "@HostListener('click', ['$event']) onClick(e) {...}",
|
{
|
||||||
"bold": [
|
"syntax": "@Output() myEvent = new EventEmitter();",
|
||||||
"@HostListener('click', ['$event'])"
|
"bold": [
|
||||||
],
|
"@Output()"
|
||||||
"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"
|
],
|
||||||
},
|
"description": "<p>Declares an output property that fires events to which we can subscribe with an event binding (e.g. <code><my-cmp (my-event)="doSomething()"></code>).</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "@ContentChild(myPredicate) myChildComponent;",
|
{
|
||||||
"bold": [
|
"syntax": "@HostBinding('[class.valid]') isValid;",
|
||||||
"@ContentChild(myPredicate)"
|
"bold": [
|
||||||
],
|
"@HostBinding('[class.valid]')"
|
||||||
"description": "<p>Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Binds a host element property (e.g. CSS class valid) to directive/component property (e.g. isValid).</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "@ContentChildren(myPredicate) myChildComponents;",
|
{
|
||||||
"bold": [
|
"syntax": "@HostListener('click', ['$event']) onClick(e) {...}",
|
||||||
"@ContentChildren(myPredicate)"
|
"bold": [
|
||||||
],
|
"@HostListener('click', ['$event'])"
|
||||||
"description": "<p>Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.</p>\n"
|
],
|
||||||
},
|
"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": "@ViewChild(myPredicate) myChildComponent;",
|
{
|
||||||
"bold": [
|
"syntax": "@ContentChild(myPredicate) myChildComponent;",
|
||||||
"@ViewChild(myPredicate)"
|
"bold": [
|
||||||
],
|
"@ContentChild(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"
|
],
|
||||||
},
|
"description": "<p>Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "@ViewChildren(myPredicate) myChildComponents;",
|
{
|
||||||
"bold": [
|
"syntax": "@ContentChildren(myPredicate) myChildComponents;",
|
||||||
"@ViewChildren(myPredicate)"
|
"bold": [
|
||||||
],
|
"@ContentChildren(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"
|
],
|
||||||
}
|
"description": "<p>Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.</p>\n"
|
||||||
],
|
},
|
||||||
"index": 7
|
{
|
||||||
},
|
"syntax": "@ViewChild(myPredicate) myChildComponent;",
|
||||||
{
|
"bold": [
|
||||||
"name": "Directive and component change detection and lifecycle hooks",
|
"@ViewChild(myPredicate)"
|
||||||
"description": "<p>(implemented as class methods)</p>\n",
|
],
|
||||||
"items": [
|
"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": "constructor(myService: MyService, ...) { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "@ViewChildren(myPredicate) myChildComponents;",
|
||||||
"constructor(myService: MyService, ...)"
|
"bold": [
|
||||||
],
|
"@ViewChildren(myPredicate)"
|
||||||
"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"
|
],
|
||||||
},
|
"description": "<p>Binds the results of the component view query (myPredicate) to the myChildComponents property of the class. Not available for directives.</p>\n"
|
||||||
{
|
}
|
||||||
"syntax": "ngOnChanges(changeRecord) { ... }",
|
],
|
||||||
"bold": [
|
"index": 7
|
||||||
"ngOnChanges(changeRecord)"
|
},
|
||||||
],
|
{
|
||||||
"description": "<p>Called after every change to input properties and before processing content or child views.</p>\n"
|
"name": "Directive and component change detection and lifecycle hooks",
|
||||||
},
|
"description": "<p>(implemented as class methods)\n</p>\n",
|
||||||
{
|
"items": [
|
||||||
"syntax": "ngOnInit() { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "constructor(myService: MyService, ...) { ... }",
|
||||||
"ngOnInit()"
|
"bold": [
|
||||||
],
|
"constructor(myService: MyService, ...)"
|
||||||
"description": "<p>Called after the constructor, initializing input properties, and the first call to ngOnChanges.</p>\n"
|
],
|
||||||
},
|
"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": "ngDoCheck() { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "ngOnChanges(changeRecord) { ... }",
|
||||||
"ngDoCheck()"
|
"bold": [
|
||||||
],
|
"ngOnChanges(changeRecord)"
|
||||||
"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"
|
],
|
||||||
},
|
"description": "<p>Called after every change to input properties and before processing content or child views.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "ngAfterContentInit() { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "ngOnInit() { ... }",
|
||||||
"ngAfterContentInit()"
|
"bold": [
|
||||||
],
|
"ngOnInit()"
|
||||||
"description": "<p>Called after ngOnInit when the component's or directive's content has been initialized.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Called after the constructor, initializing input properties, and the first call to ngOnChanges.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "ngAfterContentChecked() { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "ngDoCheck() { ... }",
|
||||||
"ngAfterContentChecked()"
|
"bold": [
|
||||||
],
|
"ngDoCheck()"
|
||||||
"description": "<p>Called after every check of the component's or directive's content.</p>\n"
|
],
|
||||||
},
|
"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": "ngAfterViewInit() { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "ngAfterContentInit() { ... }",
|
||||||
"ngAfterViewInit()"
|
"bold": [
|
||||||
],
|
"ngAfterContentInit()"
|
||||||
"description": "<p>Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Called after ngOnInit when the component's or directive's content has been initialized.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "ngAfterViewChecked() { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "ngAfterContentChecked() { ... }",
|
||||||
"ngAfterViewChecked()"
|
"bold": [
|
||||||
],
|
"ngAfterContentChecked()"
|
||||||
"description": "<p>Called after every check of the component's view. Applies to components only.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Called after every check of the component's or directive's content.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "ngOnDestroy() { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "ngAfterViewInit() { ... }",
|
||||||
"ngOnDestroy()"
|
"bold": [
|
||||||
],
|
"ngAfterViewInit()"
|
||||||
"description": "<p>Called once, before the instance is destroyed.</p>\n"
|
],
|
||||||
}
|
"description": "<p>Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.</p>\n"
|
||||||
],
|
},
|
||||||
"index": 8
|
{
|
||||||
},
|
"syntax": "ngAfterViewChecked() { ... }",
|
||||||
{
|
"bold": [
|
||||||
"name": "Dependency injection configuration",
|
"ngAfterViewChecked()"
|
||||||
"description": "<p><code>import {provide} from 'angular2/core';</code>\n</p>\n",
|
],
|
||||||
"items": [
|
"description": "<p>Called after every check of the component's view. Applies to components only.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "provide(MyService, {useClass: MyMockService})",
|
{
|
||||||
"bold": [
|
"syntax": "ngOnDestroy() { ... }",
|
||||||
"provide",
|
"bold": [
|
||||||
"useClass"
|
"ngOnDestroy()"
|
||||||
],
|
],
|
||||||
"description": "<p>Sets or overrides the provider for MyService to the MyMockService class.</p>\n"
|
"description": "<p>Called once, before the instance is destroyed.</p>\n"
|
||||||
},
|
}
|
||||||
{
|
],
|
||||||
"syntax": "provide(MyService, {useFactory: myFactory})",
|
"index": 8
|
||||||
"bold": [
|
},
|
||||||
"provide",
|
{
|
||||||
"useFactory"
|
"name": "Dependency injection configuration",
|
||||||
],
|
"description": "<p><code>import {provide} from 'angular2/core';</code>\n\n</p>\n",
|
||||||
"description": "<p>Sets or overrides the provider for MyService to the myFactory factory function.</p>\n"
|
"items": [
|
||||||
},
|
{
|
||||||
{
|
"syntax": "provide(MyService, {useClass: MyMockService})",
|
||||||
"syntax": "provide(MyValue, {useValue: 41})",
|
"bold": [
|
||||||
"bold": [
|
"provide",
|
||||||
"provide",
|
"useClass"
|
||||||
"useValue"
|
],
|
||||||
],
|
"description": "<p>Sets or overrides the provider for MyService to the MyMockService class.</p>\n"
|
||||||
"description": "<p>Sets or overrides the provider for MyValue to the value 41.</p>\n"
|
},
|
||||||
}
|
{
|
||||||
],
|
"syntax": "provide(MyService, {useFactory: myFactory})",
|
||||||
"index": 9
|
"bold": [
|
||||||
},
|
"provide",
|
||||||
{
|
"useFactory"
|
||||||
"name": "Routing and navigation",
|
],
|
||||||
"description": "<p><code>import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...} from 'angular2/router';</code>\n</p>\n",
|
"description": "<p>Sets or overrides the provider for MyService to the myFactory factory function.</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() {}",
|
"syntax": "provide(MyValue, {useValue: 41})",
|
||||||
"bold": [
|
"bold": [
|
||||||
"@RouteConfig"
|
"provide",
|
||||||
],
|
"useValue"
|
||||||
"description": "<p>Configures routes for the decorated component. Supports static, parameterized, and wildcard routes.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Sets or overrides the provider for MyValue to the value 41.</p>\n"
|
||||||
{
|
}
|
||||||
"syntax": "<router-outlet></router-outlet>",
|
],
|
||||||
"bold": [
|
"index": 9
|
||||||
"router-outlet"
|
},
|
||||||
],
|
{
|
||||||
"description": "<p>Marks the location to load the component of the active route.</p>\n"
|
"name": "Routing and navigation",
|
||||||
},
|
"description": "<p><code>import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...} from 'angular2/router';</code>\n\n</p>\n",
|
||||||
{
|
"items": [
|
||||||
"syntax": "<a [routerLink]=\"[ '/MyCmp', {myParam: 'value' } ]\">",
|
{
|
||||||
"bold": [
|
"syntax": "@RouteConfig([\n { path: '/:myParam', component: MyComponent, as: 'MyCmp' },\n { path: '/staticPath', component: ..., as: ...},\n { path: '/*wildCardParam', component: ..., as: ...}\n])\nclass MyComponent() {}",
|
||||||
"[routerLink]"
|
"bold": [
|
||||||
],
|
"@RouteConfig"
|
||||||
"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 '/' prefix to navigate to a root route; add the './' prefix for a child route.</p>\n"
|
],
|
||||||
},
|
"description": "<p>Configures routes for the decorated component. Supports static, parameterized, and wildcard routes.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "@CanActivate(() => { ... })class MyComponent() {}",
|
{
|
||||||
"bold": [
|
"syntax": "<router-outlet></router-outlet>",
|
||||||
"@CanActivate"
|
"bold": [
|
||||||
],
|
"router-outlet"
|
||||||
"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"
|
],
|
||||||
},
|
"description": "<p>Marks the location to load the component of the active route.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "routerOnActivate(nextInstruction, prevInstruction) { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "<a [routerLink]=\"[ '/MyCmp', {myParam: 'value' } ]\">",
|
||||||
"routerOnActivate"
|
"bold": [
|
||||||
],
|
"[routerLink]"
|
||||||
"description": "<p>After navigating to a component, the router calls the component's routerOnActivate method (if defined).</p>\n"
|
],
|
||||||
},
|
"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 '/' prefix to navigate to a root route; add the './' prefix for a child route.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "routerCanReuse(nextInstruction, prevInstruction) { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "@CanActivate(() => { ... })class MyComponent() {}",
|
||||||
"routerCanReuse"
|
"bold": [
|
||||||
],
|
"@CanActivate"
|
||||||
"description": "<p>The router calls a component's routerCanReuse method (if defined) to determine whether to reuse the instance or destroy it and create a new instance. Should return a boolean or a promise.</p>\n"
|
],
|
||||||
},
|
"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": "routerOnReuse(nextInstruction, prevInstruction) { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "routerOnActivate(nextInstruction, prevInstruction) { ... }",
|
||||||
"routerOnReuse"
|
"bold": [
|
||||||
],
|
"routerOnActivate"
|
||||||
"description": "<p>The router calls the component's routerOnReuse method (if defined) when it re-uses a component instance.</p>\n"
|
],
|
||||||
},
|
"description": "<p>After navigating to a component, the router calls the component's routerOnActivate method (if defined).</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "routerCanDeactivate(nextInstruction, prevInstruction) { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "routerCanReuse(nextInstruction, prevInstruction) { ... }",
|
||||||
"routerCanDeactivate"
|
"bold": [
|
||||||
],
|
"routerCanReuse"
|
||||||
"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"
|
],
|
||||||
},
|
"description": "<p>The router calls a component's routerCanReuse method (if defined) to determine whether to reuse the instance or destroy it and create a new instance. Should return a boolean or a promise.</p>\n"
|
||||||
{
|
},
|
||||||
"syntax": "routerOnDeactivate(nextInstruction, prevInstruction) { ... }",
|
{
|
||||||
"bold": [
|
"syntax": "routerOnReuse(nextInstruction, prevInstruction) { ... }",
|
||||||
"routerOnDeactivate"
|
"bold": [
|
||||||
],
|
"routerOnReuse"
|
||||||
"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"
|
],
|
||||||
}
|
"description": "<p>The router calls the component's routerOnReuse method (if defined) when it re-uses a component instance.</p>\n"
|
||||||
],
|
},
|
||||||
"index": 10
|
{
|
||||||
}
|
"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
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -380,18 +380,21 @@ figure.image-display
|
||||||
Here are the details for readers inclined to build the sample through this milestone.
|
Here are the details for readers inclined to build the sample through this milestone.
|
||||||
|
|
||||||
Our starter app's structure looks like this:
|
Our starter app's structure looks like this:
|
||||||
code-example(format="").
|
.filetree
|
||||||
router-sample
|
.file router-sample
|
||||||
├── node_modules/
|
.children
|
||||||
├── app/
|
.file node_modules
|
||||||
| ├── app.component.ts
|
.children
|
||||||
│ ├── boot.ts
|
.file app
|
||||||
│ ├── crisis-list.component.ts
|
.children
|
||||||
│ └── hero-list.component.ts
|
.file app.component.ts
|
||||||
├── index.html
|
.file boot.ts
|
||||||
├── styles.css
|
.file crisis-list.component.ts
|
||||||
├── tsconfig.json
|
.file hero-list.component.ts
|
||||||
└── package.json
|
.file index.html
|
||||||
|
.file styles.css
|
||||||
|
.file tsconfig.json
|
||||||
|
.file package.json
|
||||||
:marked
|
:marked
|
||||||
Here are the application-specific files
|
Here are the application-specific files
|
||||||
+makeTabs(
|
+makeTabs(
|
||||||
|
|
@ -448,11 +451,12 @@ figure.image-display
|
||||||
|
|
||||||
When were done organizing, we have three "Hero" files:
|
When were done organizing, we have three "Hero" files:
|
||||||
|
|
||||||
code-example(format="").
|
.filetree
|
||||||
app/heroes/
|
.file app/heroes
|
||||||
├── hero-detail.component.ts
|
.children
|
||||||
├── hero-list.component.ts
|
.file hero-detail.component.ts
|
||||||
└── hero.service.ts
|
.file hero-list.component.ts
|
||||||
|
.file hero.service.ts
|
||||||
:marked
|
:marked
|
||||||
Here as in the tutorial, we'll provide the `HeroService` during bootstrapping
|
Here as in the tutorial, we'll provide the `HeroService` during bootstrapping
|
||||||
so that is available anywhere in the app (see `boot.ts`) .
|
so that is available anywhere in the app (see `boot.ts`) .
|
||||||
|
|
@ -581,21 +585,24 @@ code-example(format="." language="bash").
|
||||||
* pass information along in route parameters (`RouteParams`)
|
* pass information along in route parameters (`RouteParams`)
|
||||||
|
|
||||||
After these changes, the folder structure looks like this:
|
After these changes, the folder structure looks like this:
|
||||||
code-example(format="").
|
.filetree
|
||||||
router-sample
|
.file router-sample
|
||||||
├── node_modules/
|
.children
|
||||||
├── app/
|
.file node_modules
|
||||||
│ ├── heroes/
|
.file app
|
||||||
│ │ ├── hero-detail.component.ts
|
.children
|
||||||
│ │ ├── hero-list.component.ts
|
.file heroes
|
||||||
│ │ └── hero.service.ts
|
.children
|
||||||
│ ├── app.component.ts
|
.file hero-detail.component.ts
|
||||||
| ├── boot.ts
|
.file hero-list.component.ts
|
||||||
│ └── crisis-list.component.ts
|
.file hero.service.ts
|
||||||
├── index.html
|
.file app.component.ts
|
||||||
├── styles.css
|
.file boot.ts
|
||||||
├── tsconfig.json
|
.file crisis-list.component.ts
|
||||||
└── package.json
|
.file index.html
|
||||||
|
.file styles.css
|
||||||
|
.file tsconfig.json
|
||||||
|
.file package.json
|
||||||
:marked
|
:marked
|
||||||
<a id="heroes-app-code"></a>
|
<a id="heroes-app-code"></a>
|
||||||
### The Heroes App code
|
### The Heroes App code
|
||||||
|
|
@ -895,20 +902,22 @@ code-example(format="").
|
||||||
We can always try the [live example](../resources/live-examples/router/ts/plnkr.html) and download the source code from there.
|
We can always try the [live example](../resources/live-examples/router/ts/plnkr.html) and download the source code from there.
|
||||||
|
|
||||||
Our final project folder structure looks like this:
|
Our final project folder structure looks like this:
|
||||||
code-example(format="").
|
.filetree
|
||||||
router-sample
|
.file router-sample
|
||||||
├── node_modules/
|
.children
|
||||||
├── src/
|
.file node_modules
|
||||||
├── app/
|
.file src
|
||||||
│ ├── crisis-center/...
|
.file app
|
||||||
│ ├── heroes/...
|
.children
|
||||||
│ ├── app.component.ts
|
.file crisis-center/...
|
||||||
│ ├── boot.ts
|
.file heroes/...
|
||||||
│ └── dialog.service.ts
|
.file app.component.ts
|
||||||
├── index.html
|
.file boot.ts
|
||||||
├── styles.css
|
.file dialog.service.ts
|
||||||
├── tsconfig.json
|
.file index.html
|
||||||
└── package.json
|
.file styles.css
|
||||||
|
.file tsconfig.json
|
||||||
|
.file package.json
|
||||||
:marked
|
:marked
|
||||||
The top level application files are
|
The top level application files are
|
||||||
+makeTabs(
|
+makeTabs(
|
||||||
|
|
@ -929,14 +938,16 @@ code-example(format="").
|
||||||
<a id="crisis-center-structure-and-code"></id>
|
<a id="crisis-center-structure-and-code"></id>
|
||||||
### Crisis Center
|
### Crisis Center
|
||||||
The *Crisis Center* feature area within the `crisis-center` folder follows:
|
The *Crisis Center* feature area within the `crisis-center` folder follows:
|
||||||
code-example(format="").
|
.filetree
|
||||||
app/
|
.file app
|
||||||
crisis-center/
|
.children
|
||||||
├── crisis-center.component.ts
|
.file crisis-center
|
||||||
├── crisis-detail.component.ts
|
.children
|
||||||
├── crisis-list.component.ts
|
.file crisis-center.component.ts
|
||||||
├── crisis.service.ts
|
.file crisis-detail.component.ts
|
||||||
└── routes.ts
|
.file crisis-list.component.ts
|
||||||
|
.file crisis.service.ts
|
||||||
|
.file routes.ts
|
||||||
:marked
|
:marked
|
||||||
+makeTabs(
|
+makeTabs(
|
||||||
`router/ts/app/crisis-center/crisis-center.component.ts,
|
`router/ts/app/crisis-center/crisis-center.component.ts,
|
||||||
|
|
@ -953,12 +964,14 @@ code-example(format="").
|
||||||
:marked
|
:marked
|
||||||
### Heroes
|
### Heroes
|
||||||
The *Heroes* feature area within the `heroes` folder is next:
|
The *Heroes* feature area within the `heroes` folder is next:
|
||||||
code-example(format="").
|
.filetree
|
||||||
app/
|
.file app
|
||||||
heroes/
|
.children
|
||||||
├── hero-detail.component.ts
|
.file heroes
|
||||||
├── hero-list.component.ts
|
.children
|
||||||
└── hero.service.ts
|
.file hero-detail.component.ts
|
||||||
|
.file hero-list.component.ts
|
||||||
|
.file hero.service.ts
|
||||||
:marked
|
:marked
|
||||||
+makeTabs(
|
+makeTabs(
|
||||||
`router/ts/app/heroes/hero-list.component.ts,
|
`router/ts/app/heroes/hero-list.component.ts,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue