Skip to content

Instantly share code, notes, and snippets.

@Zyzle

Zyzle/app.ts

Created July 17, 2015 07:58
Show Gist options
  • Save Zyzle/7413efdf86e6fc7c0bfe to your computer and use it in GitHub Desktop.
Save Zyzle/7413efdf86e6fc7c0bfe to your computer and use it in GitHub Desktop.
Download ZIP
Simple routing example
Raw
app.ts
import {NgFor, Component, View, bootstrap, bind, Injectable} from 'angular2/angular2';
import {Router, RouteConfig, RouterLink, RouterOutlet, routerInjectables} from 'angular2/router';
@Component({
selector: 'other-pageb'
})
@View({
template: `<p>yet another page </p>`
})
class OtherPageB {
}
@Component({
selector: 'other-page'
})
@View({
template: `<p>other page</p>`
})
class OtherPage {
}
@Component({
selector: 'home-page'
})
@View({
template: `<p>home page</p>`
})
class HomePage {
}
@RouteConfig([
{ path: "/", as: "home", component: HomePage },
{ path: "/other", as: "other", component: OtherPage },
{ path: "/otherb", as: "otherb", component: OtherPageB }
])
@Component({
selector: 'app'
})
@View({
directives: [RouterOutlet, RouterLink],
template: `<nav>
<a [router-link]="['/home']">page 1</a>
<a [router-link]="['/other']">page 2</a>
<a [router-link]="['/otherb']">page 3</a>
</nav>
<main>
<router-outlet></router-outlet>
</main>`
})
class BaseApp{
}
bootstrap(BaseApp, [routerInjectables])
.then(
success => console.log(success),
error => console.log(error)
);
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
<script src="https://jspm.io/system@0.16.js" charset="utf-8"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.31/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.31/router.dev.js"></script>
<script src="app.js"></script>
</head>
<body>
<app></app>
<script>
System.import('app');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment