import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
+import { UserComponent } from "./user/user.component";
+import { ChatroomsComponent } from "./chatrooms/chatrooms.component";
-const routes: Routes = [];
+const routes: Routes = [
+ { path: 'user', component: UserComponent },
+ { path: 'chatrooms', component: ChatroomsComponent },
+ { path: '', redirectTo: '/user', pathMatch: 'full' },
+];
@NgModule({
imports: [RouterModule.forRoot(routes)],
<h1>{{title}}</h1>
-<app-chatrooms></app-chatrooms>
+<router-outlet></router-outlet>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from "@angular/forms";
+import { ReactiveFormsModule } from "@angular/forms";
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ChatroomsComponent } from './chatrooms/chatrooms.component';
+import { UserComponent } from './user/user.component';
@NgModule({
declarations: [
AppComponent,
- ChatroomsComponent
+ ChatroomsComponent,
+ UserComponent
],
imports: [
BrowserModule,
- FormsModule,
+ ReactiveFormsModule,
HttpClientModule,
AppRoutingModule
],
import { Component, OnInit } from '@angular/core';
-import { FormsModule } from '@angular/forms';
import { Chatroom } from '../chatroom';
+import { UserService } from "../user.service";
import { ChatroomService } from "../chatroom.service";
@Component({
{
chatrooms: Chatroom[] = [];
- constructor(private chatroomsService: ChatroomService) { }
+ constructor(
+ private chatroomsService: ChatroomService,
+ private userService: UserService) {}
ngOnInit(): void
{
- this.getChatrooms();
+ this.userService.assertUserisKnown(() => this.getChatrooms());
}
getChatrooms(): void {
--- /dev/null
+import { TestBed } from '@angular/core/testing';
+
+import { UserService } from './user.service';
+
+describe('UserService', () => {
+ let service: UserService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(UserService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
--- /dev/null
+import { Injectable } from '@angular/core';
+import { Router } from "@angular/router";
+
+@Injectable({
+ providedIn: 'root'
+})
+export class UserService {
+
+ private unknown: boolean = true;
+ private name = '';
+
+ constructor(private router: Router) { }
+
+ assertUserisKnown(callback: Function): void {
+ if(this.unknown) {
+ this.router.navigate(['user']);
+ }
+ else {
+ callback();
+ }
+ }
+
+ setUser(name: string): void {
+ console.log("New user: " + name);
+ this.name = name;
+ this.unknown = false;
+ }
+
+ getUser(): string {
+ return this.name;
+ }
+}
--- /dev/null
+<div>
+ <label for="name">Name: </label>
+ <input id="name" type="text" [formControl]="name">
+ <button type="button" (click)="updateName()">Update Name</button>
+</div>
+<p>Value: {{ name.value }}</p>
--- /dev/null
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserComponent } from './user.component';
+
+describe('UserComponent', () => {
+ let component: UserComponent;
+ let fixture: ComponentFixture<UserComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ UserComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(UserComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Router } from "@angular/router";
+import { UserService } from "../user.service";
+
+@Component({
+ selector: 'app-user',
+ templateUrl: './user.component.html',
+ styleUrls: ['./user.component.less']
+})
+export class UserComponent {
+
+ name = new FormControl('');
+
+ updateName(): void {
+ var input = this.name.getRawValue();
+ if (input !== null) {
+ this.userService.setUser(input);
+ this.router.navigate(['chatrooms'])
+ }
+ }
+
+ constructor(
+ private userService: UserService,
+ private router: Router) {}
+}