Download as PDF, PPTX
![AppController.$routeConfig = [
{ path: '/report', components: { filters: 'filters', tableData: 'tableDat
]
...
<div class="container">
<div ng-outlet="filters"></div>
<div ng-outlet="tableData"></div>
<div ng-outlet="graph"></div>
</div>
@Component({ selector: 'app' })
@View({
template: `
<div class="container">
<router-outlet name="filters"></router-outlet>
<router-outlet name="tableData"></router-outlet>
<router-outlet name="graph"></router-outlet>
</div> `,
directives: [RouterOutlet]
})
@RouteConfig([
{ path: '/report', components: { filters: Filters, tableData: TableData
])
class App { }](https://image.slidesharecdn.com/routingtocomponents-150605184938-lva1-app6892/85/Routing-to-components-11-320.jpg)
![AppController.$routeConfig = [
{ path: '/report', components: { filters: 'filters', tableData: 'tableDat
]
...
<div class="container">
<div ng-outlet="filters"></div>
<div ng-outlet="tableData"></div>
<div ng-outlet="graph"></div>
</div>
@Component({ selector: 'app' })
@View({
template: `
<div class="container">
<router-outlet name="filters"></router-outlet>
<router-outlet name="tableData"></router-outlet>
<router-outlet name="graph"></router-outlet>
</div> `,
directives: [RouterOutlet]
})
@RouteConfig([
{ path: '/report', components: { filters: Filters, tableData: TableData
])
class App { }](/p?url=https%3A%2F%2Fimage.slidesharecdn.com%2Froutingtocomponents-150605184938-lva1-app6892%2F85%2FRouting-to-components-11-320.jpg&__src=https%3A%2F%2Fwww.slideshare.net%2Fslideshow%2Frouting-to-components%2F49046975%232&__type=image)
CC
Uploaded byChristopher Caplinger
PDF, PPTX427 views
Routing to components
Components in Angular 2 are similar to directives in Angular 1 but provide a more robust structure. Components can define templates, styles, and logic for a custom element. The document then discusses using component routing to load different views into named outlets, similar to Angular 1's ui-router. It provides an example of defining a route configuration that specifies which component to load into each outlet for a report page. Finally, it mentions migrating from Angular 1 to Angular 2.
