Add a guide list and a guide viewer to show guides (#42)

* Add a guide list and a guide viewer to show guides

* Use a tag with md-list-item

* .

Author: tinayuangao

src/app/app-module.ts

@@ -9,6 +9,8 @@ import {Homepage} from './pages/homepage/homepage';
 import {routing} from './routes';
 import {ComponentList} from './pages/component-list/component-list';
 import {ComponentViewer} from './pages/component-viewer/component-viewer';
+import {GuideList} from './pages/guide-list';
+import {GuideViewer} from './pages/guide-viewer';
 import {ExampleModule} from './examples/example-module';
 import {SharedModule} from './shared/shared-module';
 import {ComponentCategoryList} from './pages/component-category-list/component-category-list';
@@ -22,6 +24,8 @@ import {ComponentSidenav} from './pages/component-sidenav/component-sidenav';
     ComponentList,
     ComponentSidenav,
     ComponentViewer,
+    GuideList,
+    GuideViewer,
     Homepage,
   ],
   imports: [

src/app/pages/component-category-list/component-category-list.ts

@@ -1,7 +1,6 @@
 import {Component} from '@angular/core';
 import {
-  DocumentationItems,
-  DocCategory
+  DocumentationItems
 } from '../../shared/documentation-items/documentation-items';
 
 

src/app/pages/component-sidenav/component-sidenav.ts

@@ -1,6 +1,5 @@
 import {Component, ViewEncapsulation} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
-import {DocumentationItems, DocItem} from '../../shared/documentation-items/documentation-items';
+import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
 
 
 @Component({

src/app/pages/guide-list/guide-list.html

@@ -0,0 +1,7 @@
+<md-list class="docs-guide-list-item">
+  <a md-list-item
+     *ngFor="let guide of guideItems.getAllItems()"
+     [routerLink]="['/guide/', guide.id]">
+      {{guide.name}}
+  </a>
+</md-list>

src/app/pages/guide-list/guide-list.scss

@@ -0,0 +1,3 @@
+.docs-guide-list-item {
+  margin: 50px;
+}

src/app/pages/guide-list/guide-list.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {GuideItems} from '../../shared/guide-items/guide-items';
+
+@Component({
+  selector: 'app-guides',
+  templateUrl: './guide-list.html',
+  styleUrls: ['./guide-list.scss']
+})
+export class GuideList {
+  constructor(public guideItems: GuideItems) {}
+}

src/app/pages/guide-list/index.ts

@@ -0,0 +1 @@
+export * from './guide-list';

src/app/pages/guide-viewer/guide-viewer.html

@@ -0,0 +1 @@
+<doc-viewer [documentUrl]="documentUrl"></doc-viewer>

src/app/pages/guide-viewer/guide-viewer.scss

@@ -0,0 +1,20 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {GuideItems} from '../../shared/guide-items/guide-items';
+
+
+@Component({
+  selector: 'guide-viewer',
+  templateUrl: './guide-viewer.html',
+  styleUrls: ['./guide-viewer.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class GuideViewer {
+  documentUrl: string;
+
+  constructor(private _route: ActivatedRoute, public guideItems: GuideItems) {
+    _route.params.subscribe(p => {
+      this.documentUrl = guideItems.getItemById(p['id']).document;
+    });
+  }
+}