Angular 2 Routing in plain Javascript (No Typescript)

Question

So I have been battling to get the router working in Angular2 without using Typescript. I can\'t seem to find any examples, other than some typescript compiled javascript th

Answer 1

Another example inspired of the Angular2 "Tour of Heroes" tutorial (you can find the full tutorial in plain javascript here: https://programming.sereale.fr/2016/03/22/rails-and-angular2-react-the-tour-of-heroes/):

//= require directives/dashboard-component
//= require directives/heroes-component
//= require directives/hero-detail-component
//= require services/heroes-service

var MyApp = ng.core.Component({
    selector: 'my-app',
    directives: [ng.router.ROUTER_DIRECTIVES],
    providers: [ng.router.ROUTER_PROVIDERS, ng.http.HTTP_PROVIDERS, HeroService], // ng.http.HTTP_PROVIDERS enables to use http and get the list from the server
    template: "
{{title}}
 \
                
 \
                  Heroes \
                  Dashboard \
                
 \
                "
}).Class({
    constructor: [ ng.router.Router, function(router) {
            router.config([
                { path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true },
                { path: '/heroes-list', name: 'Heroes', component: HeroesComponent },                
                { path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent }
            ]);

            this.title = 'Tour of Heroes';
    }]
});