Fin sección 5

Author: alesyt0h

src/app/app-routing.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { LoginComponent } from './pages/login/login.component';
+import { MensajesComponent } from './pages/mensajes/mensajes.component';
+import { UsuarioGuard } from './guards/usuario.guard';
+
+const appRoutes: Routes = [
+    { path: '', component: LoginComponent},
+    { path: 'mensajes', component: MensajesComponent, canActivate: [UsuarioGuard]},
+    { path: '**', component: LoginComponent}
+];
+
+@NgModule({
+  imports: [ RouterModule.forRoot(appRoutes) ],
+  exports: [ RouterModule ]
+})
+export class AppRoutingModule { }

src/app/app.component.html

@@ -1,3 +1,5 @@
-<app-chat></app-chat>
+<!-- <app-chat></app-chat> -->
+<router-outlet></router-outlet>
 
 <app-footer></app-footer>
+

src/app/app.component.ts

@@ -1,14 +1,22 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { WebsocketService } from './services/websocket.service';
+import { ChatService } from './services/chat.service';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.css']
 })
-export class AppComponent{
+export class AppComponent implements OnInit{
 
-  constructor(public wsService: WebsocketService){}
+    constructor(public wsService: WebsocketService,
+                public chatService: ChatService) { }
+
+    ngOnInit(): void {
+        this.chatService.getMessagesPrivate().subscribe( msg => {
+            console.log(msg)
+        });
+    }
 
 
 }

src/app/app.module.ts

@@ -2,26 +2,35 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { environment } from '../environments/environment'
 
+import { FormsModule } from '@angular/forms';
+import { AppRoutingModule } from './app-routing.module';
+
 // Sockets
 import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
 const config: SocketIoConfig = { url: environment.socketURL, options: {} };
 
 import { AppComponent } from './app.component';
 import { FooterComponent } from './components/footer/footer.component';
 import { ChatComponent } from './components/chat/chat.component';
-import { FormsModule } from '@angular/forms';
+import { ListaUsuariosComponent } from './components/lista-usuarios/lista-usuarios.component';
+import { LoginComponent } from './pages/login/login.component';
+import { MensajesComponent } from './pages/mensajes/mensajes.component';
 
 
 @NgModule({
   declarations: [
     AppComponent,
     FooterComponent,
     ChatComponent,
+    ListaUsuariosComponent,
+    LoginComponent,
+    MensajesComponent,
   ],
   imports: [
     BrowserModule,
+    FormsModule,
     SocketIoModule.forRoot(config),
-    FormsModule
+    AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/classes/usuario.ts

@@ -0,0 +1,14 @@
+export class Usuario {
+
+    public nombre: string;
+
+    constructor(nombre: string){
+        this.nombre = nombre;
+    }
+
+}
+
+export interface Mensaje {
+    de: string;
+    cuerpo: string;
+}

src/app/components/chat/chat.component.ts

@@ -37,7 +37,7 @@ export class ChatComponent implements OnInit, OnDestroy {
             setTimeout(() => {
                 this.elemento.scrollTop = this.elemento.scrollHeight;
             }, 50);
-        })
+        });
     }
 
     enviar(){

src/app/components/lista-usuarios/lista-usuarios.component.css

@@ -0,0 +1 @@
+<p>lista-usuarios works!</p>

src/app/components/lista-usuarios/lista-usuarios.component.html

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-lista-usuarios',
+  templateUrl: './lista-usuarios.component.html',
+  styleUrls: ['./lista-usuarios.component.css']
+})
+export class ListaUsuariosComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/components/lista-usuarios/lista-usuarios.component.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UsuarioGuard } from './usuario.guard';
+
+describe('UsuarioGuardGuard', () => {
+  let guard: UsuarioGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(UsuarioGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});