Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.
\n"
+ },
+ {
+ "syntax": "Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.
\n"
+ },
+ {
+ "syntax": "",
+ "bold": [
+ "[ngClass]"
+ ],
+ "description": "
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.
\n"
+ }
+ ],
+ "index": 2
+ },
+ {
+ "name": "Forms",
+ "description": "
import {FORM_DIRECTIVES} from 'angular2/common';\n\n
\n",
+ "items": [
+ {
+ "syntax": "
",
+ "bold": [
+ "[(ngModel)]"
+ ],
+ "description": "
Provides two-way data-binding, parsing and validation for form controls.
\n"
+ }
+ ],
+ "index": 3
+ },
+ {
+ "name": "Class decorators",
+ "description": "
import {Directive, ...} from 'angular2/core';\n\n
\n",
+ "items": [
+ {
+ "syntax": "@Component({...})\nclass MyComponent() {}",
+ "bold": [
+ "@Component({...})"
+ ],
+ "description": "
Declares that a class is a component and provides metadata about the component.
\n"
+ },
+ {
+ "syntax": "@Pipe({...})\nclass MyPipe() {}",
+ "bold": [
+ "@Pipe({...})"
+ ],
+ "description": "
Declares that a class is a pipe and provides metadata about the pipe.
\n"
+ },
+ {
+ "syntax": "@Injectable()\nclass MyService() {}",
+ "bold": [
+ "@Injectable()"
+ ],
+ "description": "
Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.\n\n
\n"
+ }
+ ],
+ "index": 4
+ },
+ {
+ "name": "Directive configuration",
+ "description": "
@Directive({ property1: value1, ... })\n\n
\n",
+ "items": [
+ {
+ "syntax": "selector: '.cool-button:not(a)'",
+ "bold": [
+ "selector:"
+ ],
+ "description": "
Specifies a CSS selector that identifies this directive within a template. Supported selectors include element,\n[attribute], .class, and :not().
\n
Does not support parent-child relationship selectors.
\n"
+ },
+ {
+ "syntax": "providers: [MyService, provide(...)]",
+ "bold": [
+ "providers:"
+ ],
+ "description": "
Array of dependency injection providers for this directive and its children.
\n"
+ }
+ ],
+ "index": 5
+ },
+ {
+ "name": "Component configuration",
+ "description": "
\n@Component extends @Directive,\nso the @Directive configuration applies to components as well
\n",
+ "items": [
+ {
+ "syntax": "viewProviders: [MyService, provide(...)]",
+ "bold": [
+ "viewProviders:"
+ ],
+ "description": "
Array of dependency injection providers scoped to this component's view.
\n"
+ },
+ {
+ "syntax": "template: 'Hello {{name}}'\ntemplateUrl: 'my-component.html'",
+ "bold": [
+ "template:",
+ "templateUrl:"
+ ],
+ "description": "
Inline template / external template URL of the component's view.
\n"
+ },
+ {
+ "syntax": "styles: ['.primary {color: red}']\nstyleUrls: ['my-component.css']",
+ "bold": [
+ "styles:",
+ "styleUrls:"
+ ],
+ "description": "
List of inline CSS styles / external stylesheet URLs for styling component’s view.
\n"
+ },
+ {
+ "syntax": "directives: [MyDirective, MyComponent]",
+ "bold": [
+ "directives:"
+ ],
+ "description": "
List of directives used in the the component’s template.
\n"
+ },
+ {
+ "syntax": "pipes: [MyPipe, OtherPipe]",
+ "bold": [
+ "pipes:"
+ ],
+ "description": "
List of pipes used in the component's template.
\n"
+ }
+ ],
+ "index": 6
+ },
+ {
+ "name": "Class field decorators for directives and components",
+ "description": "
import {Input, ...} from 'angular2/core';\n\n
\n",
+ "items": [
+ {
+ "syntax": "@Input() myProperty;",
+ "bold": [
+ "@Input()"
+ ],
+ "description": "
Declares an input property that we can update via property binding (e.g.\n<my-cmp [my-property]="someExpression">).
\n"
+ },
+ {
+ "syntax": "@Output() myEvent = new EventEmitter();",
+ "bold": [
+ "@Output()"
+ ],
+ "description": "
Declares an output property that fires events to which we can subscribe with an event binding (e.g. <my-cmp (my-event)="doSomething()">).
\n"
+ },
+ {
+ "syntax": "@HostBinding('[class.valid]') isValid;",
+ "bold": [
+ "@HostBinding('[class.valid]')"
+ ],
+ "description": "
Binds a host element property (e.g. CSS class valid) to directive/component property (e.g. isValid).
\n"
+ },
+ {
+ "syntax": "@HostListener('click', ['$event']) onClick(e) {...}",
+ "bold": [
+ "@HostListener('click', ['$event'])"
+ ],
+ "description": "
Subscribes to a host element event (e.g. click) with a directive/component method (e.g. onClick), optionally passing an argument ($event).
\n"
+ },
+ {
+ "syntax": "@ContentChild(myPredicate) myChildComponent;",
+ "bold": [
+ "@ContentChild(myPredicate)"
+ ],
+ "description": "
Binds the first result of the component content query (myPredicate) to the myChildComponent property of the class.
\n"
+ },
+ {
+ "syntax": "@ContentChildren(myPredicate) myChildComponents;",
+ "bold": [
+ "@ContentChildren(myPredicate)"
+ ],
+ "description": "
Binds the results of the component content query (myPredicate) to the myChildComponents property of the class.
\n"
+ },
+ {
+ "syntax": "@ViewChild(myPredicate) myChildComponent;",
+ "bold": [
+ "@ViewChild(myPredicate)"
+ ],
+ "description": "
Binds the first result of the component view query (myPredicate) to the myChildComponent property of the class. Not available for directives.
\n"
+ },
+ {
+ "syntax": "@ViewChildren(myPredicate) myChildComponents;",
+ "bold": [
+ "@ViewChildren(myPredicate)"
+ ],
+ "description": "
Binds the results of the component view query (myPredicate) to the myChildComponents property of the class. Not available for directives.
\n"
+ }
+ ],
+ "index": 7
+ },
+ {
+ "name": "Directive and component change detection and lifecycle hooks",
+ "description": "
(implemented as class methods)\n
\n",
+ "items": [
+ {
+ "syntax": "constructor(myService: MyService, ...) { ... }",
+ "bold": [
+ "constructor(myService: MyService, ...)"
+ ],
+ "description": "
The class constructor is called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
\n"
+ },
+ {
+ "syntax": "ngOnChanges(changeRecord) { ... }",
+ "bold": [
+ "ngOnChanges(changeRecord)"
+ ],
+ "description": "
Called after every change to input properties and before processing content or child views.
\n"
+ },
+ {
+ "syntax": "ngOnInit() { ... }",
+ "bold": [
+ "ngOnInit()"
+ ],
+ "description": "
Called after the constructor, initializing input properties, and the first call to ngOnChanges.
\n"
+ },
+ {
+ "syntax": "ngDoCheck() { ... }",
+ "bold": [
+ "ngDoCheck()"
+ ],
+ "description": "
Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.
\n"
+ },
+ {
+ "syntax": "ngAfterContentInit() { ... }",
+ "bold": [
+ "ngAfterContentInit()"
+ ],
+ "description": "
Called after ngOnInit when the component's or directive's content has been initialized.
\n"
+ },
+ {
+ "syntax": "ngAfterContentChecked() { ... }",
+ "bold": [
+ "ngAfterContentChecked()"
+ ],
+ "description": "
Called after every check of the component's or directive's content.
\n"
+ },
+ {
+ "syntax": "ngAfterViewInit() { ... }",
+ "bold": [
+ "ngAfterViewInit()"
+ ],
+ "description": "
Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
\n"
+ },
+ {
+ "syntax": "ngAfterViewChecked() { ... }",
+ "bold": [
+ "ngAfterViewChecked()"
+ ],
+ "description": "
Called after every check of the component's view. Applies to components only.
\n"
+ },
+ {
+ "syntax": "ngOnDestroy() { ... }",
+ "bold": [
+ "ngOnDestroy()"
+ ],
+ "description": "
Called once, before the instance is destroyed.
\n"
+ }
+ ],
+ "index": 8
+ },
+ {
+ "name": "Dependency injection configuration",
+ "description": "
import {provide} from 'angular2/core';\n\n
\n",
+ "items": [
+ {
+ "syntax": "provide(MyService, {useClass: MyMockService})",
+ "bold": [
+ "provide",
+ "useClass"
+ ],
+ "description": "
Sets or overrides the provider for MyService to the MyMockService class.
\n"
+ },
+ {
+ "syntax": "provide(MyService, {useFactory: myFactory})",
+ "bold": [
+ "provide",
+ "useFactory"
+ ],
+ "description": "
Sets or overrides the provider for MyService to the myFactory factory function.
\n"
+ },
+ {
+ "syntax": "provide(MyValue, {useValue: 41})",
+ "bold": [
+ "provide",
+ "useValue"
+ ],
+ "description": "
Sets or overrides the provider for MyValue to the value 41.
\n"
+ }
+ ],
+ "index": 9
+ },
+ {
+ "name": "Routing and navigation",
+ "description": "
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...} from 'angular2/router';\n\n
\n",
+ "items": [
+ {
+ "syntax": "@RouteConfig([\n { path: '/:myParam', component: MyComponent, as: 'MyCmp' },\n { path: '/staticPath', component: ..., as: ...},\n { path: '/*wildCardParam', component: ..., as: ...}\n])\nclass MyComponent() {}",
+ "bold": [
+ "@RouteConfig"
+ ],
+ "description": "
Configures routes for the decorated component. Supports static, parameterized, and wildcard routes.
\n"
+ },
+ {
+ "syntax": "
",
+ "bold": [
+ "router-outlet"
+ ],
+ "description": "
Marks the location to load the component of the active route.
\n"
+ },
+ {
+ "syntax": "
",
+ "bold": [
+ "[routerLink]"
+ ],
+ "description": "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.
\n"
+ },
+ {
+ "syntax": "@CanActivate(() => { ... })class MyComponent() {}",
+ "bold": [
+ "@CanActivate"
+ ],
+ "description": "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.
\n"
+ },
+ {
+ "syntax": "routerOnActivate(nextInstruction, prevInstruction) { ... }",
+ "bold": [
+ "routerOnActivate"
+ ],
+ "description": "After navigating to a component, the router calls the component's routerOnActivate method (if defined).
\n"
+ },
+ {
+ "syntax": "routerCanReuse(nextInstruction, prevInstruction) { ... }",
+ "bold": [
+ "routerCanReuse"
+ ],
+ "description": "The router calls a component's routerCanReuse method (if defined) to determine whether to reuse the instance or destroy it and create a new instance. Should return a boolean or a promise.
\n"
+ },
+ {
+ "syntax": "routerOnReuse(nextInstruction, prevInstruction) { ... }",
+ "bold": [
+ "routerOnReuse"
+ ],
+ "description": "The router calls the component's routerOnReuse method (if defined) when it re-uses a component instance.
\n"
+ },
+ {
+ "syntax": "routerCanDeactivate(nextInstruction, prevInstruction) { ... }",
+ "bold": [
+ "routerCanDeactivate"
+ ],
+ "description": "The router calls the routerCanDeactivate methods (if defined) of every component that would be removed after a navigation. The navigation proceeds if and only if all such methods return true or a promise that is resolved.
\n"
+ },
+ {
+ "syntax": "routerOnDeactivate(nextInstruction, prevInstruction) { ... }",
+ "bold": [
+ "routerOnDeactivate"
+ ],
+ "description": "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.
\n"
+ }
+ ],
+ "index": 10
+ }
+ ]
+}
\ No newline at end of file
diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade
index 419c0325ea..765745dbc1 100644
--- a/public/docs/ts/latest/guide/router.jade
+++ b/public/docs/ts/latest/guide/router.jade
@@ -380,18 +380,21 @@ figure.image-display
Here are the details for readers inclined to build the sample through this milestone.
Our starter app's structure looks like this:
-code-example(format="").
- router-sample
- ├── node_modules/
- ├── app/
- | ├── app.component.ts
- │ ├── boot.ts
- │ ├── crisis-list.component.ts
- │ └── hero-list.component.ts
- ├── index.html
- ├── styles.css
- ├── tsconfig.json
- └── package.json
+.filetree
+ .file router-sample
+ .children
+ .file node_modules
+ .children
+ .file app
+ .children
+ .file app.component.ts
+ .file boot.ts
+ .file crisis-list.component.ts
+ .file hero-list.component.ts
+ .file index.html
+ .file styles.css
+ .file tsconfig.json
+ .file package.json
:marked
Here are the application-specific files
+makeTabs(
@@ -448,11 +451,12 @@ figure.image-display
When were done organizing, we have three "Hero" files:
-code-example(format="").
- app/heroes/
- ├── hero-detail.component.ts
- ├── hero-list.component.ts
- └── hero.service.ts
+.filetree
+ .file app/heroes
+ .children
+ .file hero-detail.component.ts
+ .file hero-list.component.ts
+ .file hero.service.ts
:marked
Here as in the tutorial, we'll provide the `HeroService` during bootstrapping
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`)
After these changes, the folder structure looks like this:
-code-example(format="").
- router-sample
- ├── node_modules/
- ├── app/
- │ ├── heroes/
- │ │ ├── hero-detail.component.ts
- │ │ ├── hero-list.component.ts
- │ │ └── hero.service.ts
- │ ├── app.component.ts
- | ├── boot.ts
- │ └── crisis-list.component.ts
- ├── index.html
- ├── styles.css
- ├── tsconfig.json
- └── package.json
+.filetree
+ .file router-sample
+ .children
+ .file node_modules
+ .file app
+ .children
+ .file heroes
+ .children
+ .file hero-detail.component.ts
+ .file hero-list.component.ts
+ .file hero.service.ts
+ .file app.component.ts
+ .file boot.ts
+ .file crisis-list.component.ts
+ .file index.html
+ .file styles.css
+ .file tsconfig.json
+ .file package.json
:marked
### 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.
Our final project folder structure looks like this:
-code-example(format="").
- router-sample
- ├── node_modules/
- ├── src/
- ├── app/
- │ ├── crisis-center/...
- │ ├── heroes/...
- │ ├── app.component.ts
- │ ├── boot.ts
- │ └── dialog.service.ts
- ├── index.html
- ├── styles.css
- ├── tsconfig.json
- └── package.json
+.filetree
+ .file router-sample
+ .children
+ .file node_modules
+ .file src
+ .file app
+ .children
+ .file crisis-center/...
+ .file heroes/...
+ .file app.component.ts
+ .file boot.ts
+ .file dialog.service.ts
+ .file index.html
+ .file styles.css
+ .file tsconfig.json
+ .file package.json
:marked
The top level application files are
+makeTabs(
@@ -929,14 +938,16 @@ code-example(format="").
### Crisis Center
The *Crisis Center* feature area within the `crisis-center` folder follows:
-code-example(format="").
- app/
- crisis-center/
- ├── crisis-center.component.ts
- ├── crisis-detail.component.ts
- ├── crisis-list.component.ts
- ├── crisis.service.ts
- └── routes.ts
+.filetree
+ .file app
+ .children
+ .file crisis-center
+ .children
+ .file crisis-center.component.ts
+ .file crisis-detail.component.ts
+ .file crisis-list.component.ts
+ .file crisis.service.ts
+ .file routes.ts
:marked
+makeTabs(
`router/ts/app/crisis-center/crisis-center.component.ts,
@@ -953,12 +964,14 @@ code-example(format="").
:marked
### Heroes
The *Heroes* feature area within the `heroes` folder is next:
-code-example(format="").
- app/
- heroes/
- ├── hero-detail.component.ts
- ├── hero-list.component.ts
- └── hero.service.ts
+.filetree
+ .file app
+ .children
+ .file heroes
+ .children
+ .file hero-detail.component.ts
+ .file hero-list.component.ts
+ .file hero.service.ts
:marked
+makeTabs(
`router/ts/app/heroes/hero-list.component.ts,