ROUTING TOCOMPONENTS

/ Chris Caplinger @unicode_snowman

COMPONENT OVERVIEWComponents Vs. Directives ?

Directive + Template === Component

class Component extends Directive { ... }

import { ComponentAnnotation as Component, ViewAnnotation as View, bootstrap } from 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)="onClickItem(thing)" {{thing}} </li> </ul> </div>̀,

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

</things>

APP ARCHITECTURE / ROUTING

$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 ... } } }

COMPONENT ROUTER

AppController.$routeConfig = [ { path: '/report', components: { filters: 'filters', tableData: 'tableData']...<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 { }

ANGULAR 1 => ANGULAR 2 MIGRATION

QUESTIONS?