docs(demo): various navigation changes

closes ng-bootstrap#297

Author: pkozlowski-opensource

demo/src/app/app.component.html

@@ -4,10 +4,10 @@
       <a class="navbar-brand" href="https://ng-bootstrap.io">ng-bootstrap</a>
       <ul class="nav navbar-nav">
         <li class="nav-item">
-          <a class="nav-link" [routerLink]="['getting-started']">Getting Started</a>
+          <a class="nav-link" [routerLink]="['/getting-started']">Getting Started</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" [routerLink]="['components/accordion']">Components</a>
+          <a class="nav-link" [routerLink]="['/components']">Components</a>
         </li>
       </ul>
       <p class="github-buttons pull-lg-right">

demo/src/app/app.routes.ts

@@ -19,9 +19,10 @@ import {
 } from './components';
 
 const routes: RouterConfig = [
-  {path: '', redirectTo: 'default'},
-  {path: 'default', component: DefaultComponent},
+  {path: '', redirectTo: 'home'},
+  {path: 'home', component: DefaultComponent},
   {path: 'getting-started', component: GettingStarted},
+  {path: 'components', redirectTo: 'components/accordion'},
   {path: 'components/accordion', component: NgbdAccordion},
   {path: 'components/alert', component: NgbdAlert},
   {path: 'components/buttons', component: NgbdButtons},

demo/src/app/default/default.component.html

@@ -2,12 +2,25 @@
   <div class="container">
     <div class="pull-lg-left">
       <h1 class="display-3">ng-bootstrap</h1>
-      <p class="lead">Angular 2, powered by Bootstrap</p>
       <hr class="m-y-2 header">
-      <p>Bootstrap 4 components written in pure Angular 2 by the ng-bootstrap Team</p>
-      <p class="lead">
-        <a type="button" [routerLink]="['/getting-started']" class="btn btn-md btn-secondary-outline header-button">Get Started</a>
-      </p>
+      <p>Angular 2, powered by Bootstrap 4 written by the angular-ui Team</p>
     </div>
   </div>
 </div>
+
+<section class="container">
+  <p class="lead">
+    Welcome to the Angular 2 version of the <a target="_blank" href="https://github.com/angular-ui/bootstrap">Angular UI Bootstrap</a>
+    library. This library is being built from scratch in Typescript using the Bootstrap 4 CSS framework.
+  </p>
+  <p class="lead">
+    As with Bootstrap 4 and Angular 2, this library is a work in progress.
+    Please check out our <a href="https://github.com/ng-bootstrap/core/wiki/Roadmap" target="_blank">roadmap</a> and
+    <a href="https://github.com/ng-bootstrap/core/issues" target="_blank">list of issues</a> to see all the things we are implementing.
+    Feel free to make comments there.
+  </p>
+
+  <p class="lead">
+    To get started quickly you can follow <a [routerLink]="['/getting-started']">installation instructions</a> or just browse <a [routerLink]="['/components']">demos</a> for the existing components.
+  </p>
+</section>

demo/src/app/default/default.component.ts

@@ -3,7 +3,7 @@ import {ROUTER_DIRECTIVES} from '@angular/router';
 
 @Component({
   selector: 'ngbd-default',
-  directives: [...ROUTER_DIRECTIVES],
+  directives: [ROUTER_DIRECTIVES],
   template: require('./default.component.html')
 })
 export class DefaultComponent {}

demo/src/app/getting-started/getting-started.component.html

@@ -1,26 +1,17 @@
 <ngbd-content-wrapper component="Getting Started">
-  <section class="container">
-    <p class="lead">
-      Welcome to the Angular 2 version of the <a target="_blank" href="https://github.com/angular-ui/bootstrap">Angular UI Bootstrap</a>
-      library. This library is being built from scratch in Typescript using the Bootstrap 4 CSS framework.
-    </p>
-    <p class="lead">
-      As with Bootstrap 4 and Angular 2, this library is a work in progress. Please check out our list of issues to see all the things we are implementing. Feel free to make comments there.
-    </p>
-    <h3>
-      Dependencies
-    </h3>
-    <p>
-      This repository contains a set of native Angular 2 directives based on Bootstrap's markup and CSS.
-      As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:
-    </p>
-    <ul>
-      <li>
-        <a href="https://angular.io">Angular</a> (<em>requires</em> Angular version 2 or higher)
-      </li>
-      <li>
-        <a href="http://v4-alpha.getbootstrap.com">Bootstrap CSS</a> (tested with version 4.0aV2)
-      </li>
-    </ul>
-  </section>
+  <h3>
+    Dependencies
+  </h3>
+  <p>
+    This repository contains a set of native Angular 2 directives based on Bootstrap's markup and CSS.
+    As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:
+  </p>
+  <ul>
+    <li>
+      <a href="https://angular.io" target="_blank">Angular</a> (<em>requires</em> Angular version 2 or higher)
+    </li>
+    <li>
+      <a href="http://v4-alpha.getbootstrap.com" target="_blank">Bootstrap CSS</a> (tested with version 4.0aV2)
+    </li>
+  </ul>
 </ngbd-content-wrapper>

demo/src/app/shared/side-nav/side-nav.component.html

@@ -12,7 +12,7 @@ <h4>Home</h4>
         </ul>
       </div>
       <div class="bd-toc-item">
-        <a class="bd-toc-link" [routerLink]="['/components/accordion']">
+        <a class="bd-toc-link" [routerLink]="['/components']">
           <h4>Components</h4>
         </a>
         <ul class="nav bd-sidenav">