Skip to content

Instantly share code, notes, and snippets.

@ysyun

ysyun/app\about.component.ts

Last active July 28, 2016 08:10
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ysyun/e71c34451220af8e773d40844a0bcdef to your computer and use it in GitHub Desktop.
Save ysyun/e71c34451220af8e773d40844a0bcdef to your computer and use it in GitHub Desktop.
Download ZIP
New Router Configuration with Nested Child Router - https://coryrylan.com/blog/introduction-to-angular-2-routing
Raw
app\about.component.ts
import { Component } from '@angular/core';
import { ActivatedRoute, ROUTER_DIRECTIVES } from '@angular/router';
@Component({
selector: 'about-home',
template: `<h3>About Home</h3>`
})
export class AboutHomeComponent { }
@Component({
selector: 'about-item',
template: `<h3>About Item Id: {{id}}</h3>`
})
export class AboutItemComponent {
id: any;
paramsSub: any;
constructor(private activatedRoute: ActivatedRoute) { }
ngOnInit() {
this.paramsSub = this.activatedRoute.params.subscribe(params => this.id = +params['id']);
}
ngOnDestroy() {
this.paramsSub.unsubscribe();
}
}
@Component({
selector: 'app-about',
template: `
<h2>About</h2>
<a [routerLink]="['/about']">Home</a>
<a [routerLink]="['/about/item', 1]">Item 1</a>
<a [routerLink]="['/about/item', 2]">Item 2</a>
<div class="inner-outlet">
<router-outlet></router-outlet>
</div>
`,
directives: [ROUTER_DIRECTIVES]
})
export class AboutComponent { }
Raw
app\app.component.ts
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
selector: 'demo-app',
template: `
<a [routerLink]="['/']">Home</a>
<a [routerLink]="['/about']">About</a>
<div class="outer-outlet">
<router-outlet></router-outlet>
</div>
`,
// add our router directives we will be using
directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }
Raw
app\app.routes.ts
import { provideRouter, RouterConfig } from '@angular/router';
import { AboutComponent, AboutHomeComponent, AboutItemComponent } from 'app/about.component';
import { HomeComponent } from 'app/home.component';
export const routes: RouterConfig = [
{ path: '', component: HomeComponent }
{
path: 'about',
component: AboutComponent,
children: [
{ path: '', component: AboutHomeComponent },
{ path: 'item/:id', component: AboutItemComponent }
]
}
];
export const APP_ROUTER_PROVIDERS = [
provideRouter(routes)
];
Raw
app\home.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
template: `<h2>Home</h2> `
})
export class HomeComponent { }
Raw
app\main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { APP_ROUTER_PROVIDERS } from './app.routes';
import { AppComponent } from './app.component';
bootstrap(AppComponent, [
APP_ROUTER_PROVIDERS
]);
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular 2</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
<script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.js"></script>
<script src="https://npmcdn.com/typescript@1.8.10/lib/typescript.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<demo-app>Loading...</demo-app>
</body>
</html>
Raw
styles.css
/* Styles go here */
.outer-outlet {
padding: 8px;
border: 1px solid red;
height: 170px;
width: 360px;
}
.inner-outlet {
padding: 8px;
border: 1px solid blue;
}
Raw
systemjs.config.js
/**
* PLUNKER VERSION (based on systemjs.config.js in angular.io)
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
* Override at the last minute with global.filterSystemConfig (as plunkers do)
*/
(function(global) {
//map tells the System loader where to look for things
var map = {
'app': 'app',
'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
'@angular/common': 'https://npmcdn.com/@angular/common@2.0.0-rc.4',
'@angular/compiler': 'https://npmcdn.com/@angular/compiler@2.0.0-rc.4',
'@angular/core': 'https://npmcdn.com/@angular/core@2.0.0-rc.4',
'@angular/http': 'https://npmcdn.com/@angular/http@2.0.0-rc.4',
'@angular/platform-browser': 'https://npmcdn.com/@angular/platform-browser@2.0.0-rc.4',
'@angular/platform-browser-dynamic': 'https://npmcdn.com/@angular/platform-browser-dynamic@2.0.0-rc.4',
'@angular/router': 'https://npmcdn.com/@angular/router@3.0.0-beta.2',
'@angular/forms': 'https://npmcdn.com/@angular/forms@0.2.0'
};
//packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.ts', defaultExtension: 'ts' },
'rxjs': { defaultExtension: 'js' },
'@angular/common': { main: 'index.js', defaultExtension: 'js' },
'@angular/compiler': { main: 'index.js', defaultExtension: 'js' },
'@angular/core': { main: 'index.js', defaultExtension: 'js' },
'@angular/http': { main: 'index.js', defaultExtension: 'js' },
'@angular/platform-browser': { main: 'index.js', defaultExtension: 'js' },
'@angular/platform-browser-dynamic': { main: 'index.js', defaultExtension: 'js' },
'@angular/router': { main: 'index.js', defaultExtension: 'js' },
'@angular/router-deprecated': { main: 'index.js', defaultExtension: 'js' },
'@angular/upgrade': { main: 'index.js', defaultExtension: 'js' }
};
var config = {
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment