docs(cb-a11y): Building examples - Form controls

AlmeroSteyn · AlmeroSteyn · commit 45459bf82743 · 2016-04-03T18:05:41.000+02:00
diff --git a/public/docs/_examples/cb-a11y/ts/app/a11y-index.component.html b/public/docs/_examples/cb-a11y/ts/app/a11y-index.component.html
@@ -0,0 +1,7 @@
+<nav role="navigation">
+    <ol>
+        <li>
+            <a href="" [routerLink]="['FormControls']"><h2>Accessible form control labels</h2></a>
+        </li>
+    </ol>
+</nav>
diff --git a/public/docs/_examples/cb-a11y/ts/app/a11y-index.component.ts b/public/docs/_examples/cb-a11y/ts/app/a11y-index.component.ts
@@ -0,0 +1,11 @@
+import {Component} from "angular2/core";
+import {ROUTER_DIRECTIVES} from "angular2/router";
+
+@Component({
+    selector: 'a11y-index',
+    templateUrl: './app/a11y-index.component.html',
+    directives: [ROUTER_DIRECTIVES]
+})
+export class A11yIndex{
+    
+}
diff --git a/public/docs/_examples/cb-a11y/ts/app/app.component.html b/public/docs/_examples/cb-a11y/ts/app/app.component.html
@@ -2,5 +2,7 @@
     <h1 id="top">Angular 2 A11y Cookbook</h1>
 </header>
 <main role="main" class="container">
-<a11y-form-controls></a11y-form-controls>
+    <router-outlet></router-outlet>
+    <!--<a11y-index></a11y-index>-->
+    <!--<a11y-form-controls></a11y-form-controls>-->
 </main>
diff --git a/public/docs/_examples/cb-a11y/ts/app/app.component.ts b/public/docs/_examples/cb-a11y/ts/app/app.component.ts
@@ -1,13 +1,19 @@
 import {Component} from 'angular2/core';
 import {A11yFormControls} from "./a11y-form-controls.component";
 import {A11yHelper} from "./services/a11y-helper.service";
+import {ROUTER_DIRECTIVES, RouteConfig, ROUTER_PROVIDERS} from "angular2/router";
+import {A11yIndex} from "./a11y-index.component";
 
 @Component({
   selector: 'app',
   templateUrl: 'app/app.component.html',
-  directives:[A11yFormControls],
-  providers: [A11yHelper]
+  directives:[ROUTER_DIRECTIVES, A11yFormControls, A11yIndex],
+  providers: [ROUTER_PROVIDERS, A11yHelper]
 })
+@RouteConfig([
+  {path:'/', name: 'Index', component: A11yIndex},
+  {path:'/formcontrols', name: 'FormControls', component: A11yFormControls}
+])
 export class AppComponent { 
   
 }
diff --git a/public/docs/_examples/cb-a11y/ts/index.html b/public/docs/_examples/cb-a11y/ts/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <base href="/">
     <title>A11y demonstration</title>
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -19,6 +20,7 @@
     <script src="node_modules/systemjs/dist/system.src.js"></script>
     <script src="node_modules/rxjs/bundles/Rx.js"></script>
     <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
+    <script src="node_modules/angular2/bundles/router.dev.js"></script>
     <script>
         System.config({
             packages: {

-Original file line number
+Diff line change
@@ @@ -0,0 +1,7 @@ @@
 +<nav role="navigation">
 +    <ol>
 +        <li>
 +            <a href="" [routerLink]="['FormControls']"><h2>Accessible form control labels</h2></a>
 +        </li>
 +    </ol>
 +</nav>