#14 routing Tables-Kitchen implemented

Author: Garcia Marin

oasp4js-sample/src/app/app.routes.ts

@@ -1,3 +1,4 @@
+<h2>Tables</h2>
 <div>
   <filter-panel (filterValues) = "searchFilters($event)">
     <label> Number </label>

oasp4js-sample/src/app/components/crud/view/Crud.component.html

@@ -3,10 +3,10 @@
 
   <ul *ngIf="logged" class = "header-tabs">
     <li role = "presentation">
-      <a> Tables </a>
+      <a [routerLink]="['/Tables']"> Tables </a>
     </li>
     <li role = "presentation">
-      <a> Kitchen </a>
+      <a [routerLink]="['/Kitchen']"> Kitchen </a>
     </li>
   </ul>
 

oasp4js-sample/src/app/components/header/view/Header.component.html

@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 import { EventEmitter } from '@angular/core';
 import {languages} from '../../../resources/languages/Languages.resource'
+import {ROUTER_DIRECTIVES} from "@angular/router";
 
 @Component({
     selector: 'header',
     templateUrl: 'app/components/header/view/Header.component.html',
     inputs: ["logged", "username"],
-    outputs: ["logOffEvent"]
+    outputs: ["logOffEvent"],
+    directives: [ROUTER_DIRECTIVES]
 })
 
 export class HeaderComponent {

oasp4js-sample/src/app/components/header/view/Header.component.ts

@@ -0,0 +1 @@
+<h1>KITCHEN</h1>

oasp4js-sample/src/app/components/kitchen/view/Kitchen.component.html

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core'
+
+@Component({
+  selector:'kitchen',
+  templateUrl:'app/components/kitchen/view/Kitchen.component.html'
+})
+
+export class KitchenComponent{
+}

oasp4js-sample/src/app/components/kitchen/view/Kitchen.component.ts

@@ -1,4 +1,4 @@
-<header [logged]="login" [username] ="usuario.username" (logOffEvent)="login = $event"></header>
+<header [logged]="login" [username] ="usuario.username" (logOffEvent)="login = logOut($event)"></header>
 
 <div class = "app-body">
   <!-- LOGIN -->
@@ -7,9 +7,8 @@
   </div>
 
   <!-- APPLICATION -->
-  <div *ngIf="login">
-    <h2>Tables</h2>
-    <crud></crud>
+  <div [hidden]="!login">
+    <router-outlet></router-outlet>
   </div>
 </div>
 

oasp4js-sample/src/app/oasp4js-sample.component.html

@@ -3,12 +3,16 @@ import { Component } from '@angular/core';
 import { HeaderComponent} from './components/header/view/Header.component';
 import { LoginComponent} from './components/login/view/Login.component';
 import { CrudComponent } from './components/crud/view/Crud.component'
+import { KitchenComponent } from './components/kitchen/view/Kitchen.component'
 
 import { User } from './models/user/User.model'
 
 import {ROUTER_DIRECTIVES, Router, Routes} from "@angular/router";
 
 @Routes([
+    { path: '', component: CrudComponent },
+    { path: '/Tables', component: CrudComponent },
+    { path: '/Kitchen', component: KitchenComponent }
 ])
 
 @Component({
@@ -18,16 +22,22 @@ import {ROUTER_DIRECTIVES, Router, Routes} from "@angular/router";
   styleUrls: ['oasp4js-sample.component.css'],
   directives: [LoginComponent, HeaderComponent, CrudComponent, ROUTER_DIRECTIVES]
 })
+
+
 export class Oasp4jsSampleAppComponent{
   title = "oasp4js-sample works!";
   public login:boolean;
   public usuario: User = new User(0,"","");
 
+  constructor(private router: Router){}
+
   enviar(value){
     setTimeout( ()=>{this.login = value;},1);
+    this.router.navigate(['/Tables']);
   }
 
   logOut(){
     this.login = false;
+    this.router.navigate(['']);
   }
 }

oasp4js-sample/src/app/oasp4js-sample.component.ts

@@ -1,15 +1,14 @@
 import { bootstrap } from '@angular/platform-browser-dynamic';
 // import {bootstrap} from 'angular2/platform/browser'
 import { enableProdMode } from '@angular/core';
-import { APP_ROUTER_PROVIDERS } from './app.routes';
+import { ROUTER_PROVIDERS, ROUTER_DIRECTIVES } from '@angular/router';
 import { Oasp4jsSampleAppComponent, environment } from './app/';
 //import {disableDeprecatedForms, provideForms} from "@angular/forms";
 
 if (environment.production) {
   enableProdMode();
 }
 
-bootstrap(Oasp4jsSampleAppComponent/*,[
-  disableDeprecatedForms(),
-  provideForms()
-]*/);
+
+bootstrap(Oasp4jsSampleAppComponent, [ROUTER_PROVIDERS, ROUTER_DIRECTIVES])
+  .catch(err => console.error(err));