ngNYC meetup talk from 6/4/15 on Angular 2 components + routing.

1. ROUTING TO
COMPONENTS
/Chris Caplinger @unicode_snowman

2. COMPONENT OVERVIEW
Components Vs. Directives ?

3. Directive + Template === Component

4. class Component extends Directive { ... }

5. import { ComponentAnnotation as Component, ViewAnnotation as View, bootstrap
import { NgFor } from 'angular2/directives'
@Component({
selector: 'things'
})
@View({
template:
`<div>
<h5>A LIST OF THINGS!!!</h5>
<ul>
<li *ng-for="#thing of things; #i = index" (click)="onClickIt
{{thing}}
</li>
</ul>
</div>`,

6. import { bootstrap } from 'angular2/angular2';
...
bootstrap(Things)
...
<things></things>

7. APP ARCHITECTURE / ROUTING

9. $stateProvider
.state('report',{
views: {
'filters': {
templateUrl: 'report-filters.html',
controller: function(){ ... filters view controller ... }
},
'tabledata': {
templateUrl: 'report-table.html',
controller: function(){ ... tabledata view controller ... }
},
'graph': {
templateUrl: 'report-graph.html',
controller: function(){ ... graph view controller ... }
}
}

10. COMPONENT ROUTER

11. 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 { }

13. ANGULAR 1 => ANGULAR 2 MIGRATION

14. QUESTIONS?