<!DOCTYPE html>
<html>
<head>
<title>GO</title>
<base href=".">
<script src="https://npmcdn.com/zone.js@0.6.12/dist/zone.js"></script>
<script src="https://npmcdn.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://npmcdn.com/systemjs@0.19.31/dist/system.js"></script>
<script src="https://npmcdn.com/typescript@1.8.10/lib/typescript.js"></script>
<script src="config.js"></script>
<script>
System.import('app').catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
//map tells the System loader where to look for things
map: {
app: "./src",
'@angular': 'https://npmcdn.com/@angular',
'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
'@angular/core': {
main: 'bundles/core.umd.js',
defaultExtension: 'js'
},
'@angular/compiler': {
main: 'bundles/compiler.umd.js',
defaultExtension: 'js'
},
'@angular/common': {
main: 'bundles/common.umd.js',
defaultExtension: 'js'
},
'@angular/platform-browser-dynamic': {
main: 'bundles/platform-browser-dynamic.umd.js',
defaultExtension: 'js'
},
'@angular/platform-browser': {
main: 'bundles/platform-browser.umd.js',
defaultExtension: 'js'
},
'@angular/router': {
main: 'bundles/router.umd.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
//main entry point
import { bootstrap } from '@angular/platform-browser-dynamic';
import { App } from './app';
import { APP_ROUTER_PROVIDERS } from './app.routes';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/first';
bootstrap(App, [
APP_ROUTER_PROVIDERS
]).catch(err => console.error(err));
//our root app component
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
selector: 'my-app',
template: `<router-outlet></router-outlet>`,
directives: [
ROUTER_DIRECTIVES
]
})
export class App {}
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
selector: 'goto-fail',
template: `
<a [routerLink]="['/fail']">
Give it a shot!!
</a>
`,
directives: [
ROUTER_DIRECTIVES
]
})
export class GoToFailComponent {}
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
selector: 'win',
directives: [
ROUTER_DIRECTIVES
],
template: `
<small>
jk, you win!
<a [routerLink]="['/']">
Play again?
</a>
</small>
`
})
export class WinComponent {}
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
selector: 'fail',
directives: [
ROUTER_DIRECTIVES
],
template: `
<b>Fail!</b>
<router-outlet></router-outlet>
`
})
export class FailComponent {}
import { provideRouter, RouterConfig } from '@angular/router';
import { GoToFailComponent } from './goto-fail.component';
import { FailComponent } from './fail.component';
import { WinComponent } from './win.component';
import { TrueService } from './true.service';
import { BehaviorGuard } from './behavior.guard';
export const routes: RouterConfig = [
{
component: GoToFailComponent,
path: '',
pathMatch: 'full'
},
{
component: FailComponent,
path: 'fail',
canActivate: [BehaviorGuard],
children: [
{
component: WinComponent,
path: '',
pathMatch: 'full'
}
]
}
];
export const APP_ROUTER_PROVIDERS = [
TrueService,
BehaviorGuard,
provideRouter(routes)
];
import { Injectable } from '@angular/core';
import {
CanActivate,
ActivatedRouteSnapshot,
RouterStateSnapshot
} from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { TrueService } from './true.service';
@Injectable()
export class BehaviorGuard implements CanActivate {
constructor(private is: TrueService) {}
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observer<boolean> | boolean {
return this.is.ok;
}
}
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class TrueService {
private okSource = new BehaviorSubject<boolean>(true);
get ok(): Observer<boolean> {
return this.okSource.asObservable().first();
}
}