<!DOCTYPE html>
<html>
<head>
<title>ng2-breadcrumb example</title>
<link rel="stylesheet" href="style.css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/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>
/* Styles go here */
### Angular2 Starter Plunker - Typescript - RC.0
A simple plunker demonstrating Angular2 usage:
- Uses SystemJS + TypeScript to compile on the fly
- Includes binding, directives, http, pipes, and DI usage.
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: 'core.umd.js',
defaultExtension: 'js'
},
'@angular/router': {
main: 'router.umd.js',
defaultExtension: 'js'
},
'@angular/compiler': {
main: 'compiler.umd.js',
defaultExtension: 'js'
},
'@angular/common': {
main: 'common.umd.js',
defaultExtension: 'js'
},
'@angular/platform-browser-dynamic': {
main: 'platform-browser-dynamic.umd.js',
defaultExtension: 'js'
},
'@angular/platform-browser': {
main: 'platform-browser.umd.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
//main entry point
import {bootstrap} from '@angular/platform-browser-dynamic';
import {provide} from '@angular/core';
import {LocationStrategy,HashLocationStrategy} from '@angular/common';
import {ROUTER_PROVIDERS} from '@angular/router';
import {HTTP_PROVIDERS} from '@angular/http';
import {App} from './app';
import {BreadcrumbService} from './breadcrumbService';
bootstrap(App, [
ROUTER_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy}),
BreadcrumbService
]).catch(err => console.error(err));
//our root app component
import {Component} from '@angular/core'
import {FORM_DIRECTIVES, Location} from '@angular/common';
import {ROUTER_DIRECTIVES, Router, Routes} from '@angular/router';
import {Component1} from './component1';
import {Component2} from './component2';
import {Component3} from './component3';
import {BreadcrumbComponent} from './ng2-breadcrumb';
import {BreadcrumbService} from './breadcrumbService';
@Component({
selector: 'my-app',
providers: [],
directives: [ROUTER_DIRECTIVES, BreadcrumbComponent],
template: `
<div class="container">
<h1>Breadcrumb Example</h1>
<breadcrumb></breadcrumb>
<router-outlet></router-outlet>
</div>
`
})
@Routes([
{ path: '/comp1', component: Component1/*, as: 'Comp 1', useAsDefault: true*/},
{ path: '/comp1%comp2', component: Component2/*, as: 'Comp 2'*/},
{ path: '/comp1%comp2%comp3', component: Component3/*, as: 'Comp 3'*/}
])
export class App {
constructor(private router: Router, private breadcrumbService: BreadcrumbService) {
breadcrumbService.addFriendlyNameForRoute('/comp1', 'Comp 1');
breadcrumbService.addFriendlyNameForRoute('/comp1%comp2', 'Comp 2');
breadcrumbService.addFriendlyNameForRoute('/comp1%comp2%comp3', 'Comp 3');
}
ngOnInit() {
this.router.navigate(['/comp1']);
}
}
import {Component} from '@angular/core';
import {FORM_DIRECTIVES, Location, NgClass} from '@angular/common';
import {ROUTER_DIRECTIVES, Router} from '@angular/router';
import {BreadcrumbService} from './breadcrumbService';
/**
* This component shows a breadcrumb trail as you navigate to different routes in your app.
* It subscribes to the router in order to update the breadcrumb trail as you navigate to a component.
*/
@Component({
selector: 'breadcrumb',
directives: [FORM_DIRECTIVES, ROUTER_DIRECTIVES, NgClass],
template: `
<div>
<ul class="breadcrumb">
<li *ngFor="let url of urls; let last = last" [ngClass]="{'active': last}"> <!-- disable link of last item -->
<a role="button" *ngIf="!last" (click)="navigateTo(url)">{{friendlyName(url)}}</a>
<span *ngIf="last">{{friendlyName(url)}}</span>
</li>
</ul>
</div>
`,
styles: [`
.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: transparent;
border-radius: 3px;
}
.breadcrumb > li {
display: inline-block;
}
.breadcrumb > li + li:before {
content: "/";
padding: 0 5px;
color: #999999;
}
.breadcrumb > .active {
color: #555555;
}
`]
})
export class BreadcrumbComponent {
private _urls: String[];
private _activeUrl: String;
constructor(private router: Router, private location: Location, private breadcrumbService: BreadcrumbService) {
this._urls = new Array();
this.router.changes.subscribe(() => {
this._urls.length = 0; //Fastest way to clear out array
this._activeUrl = this.location.platformStrategy.path();
this.generateBreadcrumbTrail(this.location.platformStrategy.path());
});
}
generateBreadcrumbTrail(url: string): void {
this._urls.unshift(url); //Add url to beginning of array (since the url is being recursively broken down from full url to its parent)
if (url.lastIndexOf('/') > url.lastIndexOf('%') && url.lastIndexOf('/') > 0) {
this.generateBreadcrumbTrail(url.substr(0, url.lastIndexOf('/'))); //Find last '/' and add everything before it as a parent route
} else if (url.lastIndexOf('%') > url.lastIndexOf('/') && url.lastIndexOf('%') > 0) {
this.generateBreadcrumbTrail(url.substr(0, url.lastIndexOf('%'))); //Find last '%' and add everything before it as a parent route
}
}
navigateTo(url: String): void {
this.router.navigateByUrl(url);
}
friendlyName(url: String): String {
return !url ? '' : this.breadcrumbService.getFriendlyNameForRoute(url);
}
get urls() {
return this._urls;
}
set urls(value) {
this._urls = value;
}
get activeUrl() {
return this._activeUrl;
}
set activeUrl(value) {
this._activeUrl = value;
}
}
export class BreadcrumbService {
private routeFriendlyNames = {};
/**
* Specify a friendly name for the corresponding route. Please note this should be the full url of the route,
* as in the same url you will use to call router.navigate().
*
* @param route
* @param name
*/
addFriendlyNameForRoute(route: String, name: String): void {
this.routeFriendlyNames[route] = name;
}
/**
* Show the friendly name for a given url. If no match is found the url (without the leading '/') is shown.
*
* @param route
* @returns {*}
*/
getFriendlyNameForRoute(route: String): String {
var val = this.routeFriendlyNames[route];
if (!val) {
val = route.substr(1, route.length);
}
return val;
}
}
import {Component} from '@angular/core';
import {Router} from '@angular/router';
@Component({
selector: 'comp1',
template: `
<h3>This is Component 1</h3>
<button (click)="goTo()">Next</button>
`
})
export class Component1 {
constructor(private router: Router) {
}
goTo(): void {
this.router.navigate(['/comp1%comp2']);
}
}
import {Component} from '@angular/core';
import {Router} from '@angular/router';
@Component({
selector: 'comp2',
template: `
<h3>This is Component 2</h3>
<button (click)="goTo()">Next</button>
`
})
export class Component2 {
constructor(private router: Router) {
}
goTo(): void {
this.router.navigate(['/comp1%comp2%comp3']);
}
}
import {Component} from '@angular/core';
@Component({
selector: 'comp3',
template: `
<h3>This is Component 3</h3>
`
})
export class Component3 {
constructor() {
}
}