This repository has been archived by the owner on Feb 2, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 162
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(examples): use router for navigation between examples
- component and index pages implemented. - remove debounce on peekaboo listener as it causes a flicker when switching routes. - add ComponentsService for querying the known component metadata. - add NavigationService for managing global navigation state (like where the next/prev footer buttons navigate to.) - include router.dev.js for ng2 router support.
- Loading branch information
1 parent
3d42aa6
commit 380625e
Showing
11 changed files
with
325 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import {Component} from 'angular2/core'; | ||
| import {RouteConfig, RouterOutlet} from 'angular2/router'; | ||
| import {RouteParams} from "angular2/router"; | ||
| import {Router} from "angular2/router"; | ||
| import {OnInit} from "angular2/core"; | ||
| import {ComponentsService, IComponentMeta} from "../services/components"; | ||
| import {MATERIAL_DIRECTIVES} from "../../ng2-material/all"; | ||
| import Example from "../example"; | ||
| import {ROUTER_DIRECTIVES} from "angular2/router"; | ||
| import {NavigationService} from "../services/navigation"; | ||
|
|
||
| @Component({ | ||
| selector: 'component-page', | ||
| template: ` | ||
| <h1 class="examples-title">{{ value.name }}</h1> | ||
| <p class="examples-intro" *ngIf="value.readme" [innerHtml]="value.readme"></p> | ||
| <example *ngFor="#demo of value.examples" [model]="demo"></example> | ||
| <md-divider></md-divider>`, | ||
| directives: [Example, ROUTER_DIRECTIVES, MATERIAL_DIRECTIVES] | ||
| }) | ||
| export class ComponentPage implements OnInit { | ||
|
|
||
| public id: string; | ||
|
|
||
| public value: IComponentMeta = <IComponentMeta>{}; | ||
|
|
||
| public next: IComponentMeta = null; | ||
| public previous: IComponentMeta = null; | ||
|
|
||
| constructor(private _components: ComponentsService, | ||
| private _navigation: NavigationService, | ||
| private _routeParams: RouteParams) { | ||
| } | ||
|
|
||
| ngOnInit() { | ||
| let id = this._routeParams.get('id'); | ||
| this._components.getComponent(id).then((c: IComponentMeta) => { | ||
| this.value = c; | ||
| this._components.getNext(c).then((next: IComponentMeta) => { | ||
| this._navigation.nextLink = this._navigation.componentLink(next); | ||
| }); | ||
| this._components.getPrevious(c).then((previous: IComponentMeta) => { | ||
| this._navigation.prevLink = this._navigation.componentLink(previous); | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import {Component} from 'angular2/core'; | ||
| import {RouteConfig, RouterOutlet} from 'angular2/router'; | ||
| import {ComponentsService} from "../services/components"; | ||
| import {IComponentMeta} from "../services/components"; | ||
| import {OnInit} from "angular2/core"; | ||
| import {NavigationService} from "../services/navigation"; | ||
| import {MATERIAL_DIRECTIVES} from "ng2-material/all"; | ||
| import {ROUTER_DIRECTIVES} from "angular2/router"; | ||
|
|
||
| @Component({ | ||
| template: ` | ||
| <h1 class="examples-title">Getting Started</h1> | ||
| <p class="examples-intro"> | ||
| There are many examples on this page. Here's the <a href="coverage/" target="_blank">test coverage</a> report, and a | ||
| <a href="http://plnkr.co/edit/CnDUjVufVnevluFOBvdD?p=preview" target="_blank">plunkr template</a> to get you going. | ||
| </p> | ||
| <nav class="examples-toc"> | ||
| <h1>Components</h1> | ||
| <ul> | ||
| <li *ngFor="#value of components"><a [routerLink]="['Component', {id: value.id}]">{{value.name}}</a></li> | ||
| </ul> | ||
| </nav>`, | ||
| directives: [ROUTER_DIRECTIVES, MATERIAL_DIRECTIVES] | ||
| }) | ||
| export class IndexPage implements OnInit { | ||
| public components: IComponentMeta[] = []; | ||
|
|
||
| constructor(private _components: ComponentsService, | ||
| public navigation: NavigationService) { | ||
| } | ||
|
|
||
| ngOnInit(): any { | ||
| this._components.getComponents() | ||
| .then((comps) => { | ||
| this.components = comps; | ||
| this.navigation.prevLink = this.navigation.componentLink(comps[comps.length - 1]); | ||
| this.navigation.nextLink = this.navigation.componentLink(comps[0]); | ||
| }); | ||
| } | ||
|
|
||
| } |
Oops, something went wrong.