some routing

src/app/app.routes.ts

@@ -1,12 +1,24 @@
 import { Routes } from '@angular/router';
-import { Home } from './home/home';
 import { Login } from './login/login';
 import { Register } from './register/register';
+import { Dashboard } from './dashboard/dashboard';
+import { DashboardUsers } from './dashboard/dashboard-users/dashboard-users';
 
 export const routes: Routes = [
   {
     path: '',
-    component: Home,
+    loadComponent: () =>
+      import('./dashboard/container/container').then((c) => c.Container),
+    children: [
+      {
+        path: 'dashboard',
+        component: Dashboard,
+      },
+      {
+        path: 'users',
+        component: DashboardUsers,
+      },
+    ],
   },
   {
     path: 'login',

src/app/dashboard/container/container.html

@@ -0,0 +1,2 @@
+<app-dashboard-navbar></app-dashboard-navbar>
+<router-outlet></router-outlet>

src/app/dashboard/container/container.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Container } from './container';
+
+describe('Container', () => {
+  let component: Container;
+  let fixture: ComponentFixture<Container>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Container]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Container);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dashboard/container/container.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { DashboardNavbar } from '../dashboard-navbar/dashboard-navbar';
+
+@Component({
+  selector: 'app-container',
+  imports: [RouterOutlet, DashboardNavbar],
+  templateUrl: './container.html',
+  styleUrl: './container.css',
+})
+export class Container {}

src/app/dashboard/dashboard-navbar/dashboard-navbar.html

@@ -0,0 +1,7 @@
+<nav>
+  <p>dashboard-navbar works!</p>
+
+  <button routerLink="dashboard">Home</button>
+  <button routerLink="users">Users</button>
+  <button routerLink="/login">Logout</button>
+</nav>

src/app/dashboard/dashboard-navbar/dashboard-navbar.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardNavbar } from './dashboard-navbar';
+
+describe('DashboardNavbar', () => {
+  let component: DashboardNavbar;
+  let fixture: ComponentFixture<DashboardNavbar>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DashboardNavbar]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DashboardNavbar);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dashboard/dashboard-navbar/dashboard-navbar.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-dashboard-navbar',
+  imports: [RouterLink],
+  templateUrl: './dashboard-navbar.html',
+  styleUrl: './dashboard-navbar.css',
+})
+export class DashboardNavbar {}

src/app/dashboard/dashboard-users/dashboard-users.html

@@ -0,0 +1,3 @@
+<p>dashboard-users works!</p>
+
+<img src="/Untitled.jpeg" />

src/app/dashboard/dashboard-users/dashboard-users.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardUsers } from './dashboard-users';
+
+describe('DashboardUsers', () => {
+  let component: DashboardUsers;
+  let fixture: ComponentFixture<DashboardUsers>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DashboardUsers]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DashboardUsers);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dashboard/dashboard-users/dashboard-users.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-dashboard-users',
+  imports: [],
+  templateUrl: './dashboard-users.html',
+  styleUrl: './dashboard-users.css',
+})
+export class DashboardUsers {}

src/app/dashboard/dashboard.html

@@ -0,0 +1 @@
+<h1>Dashboard Home</h1>

src/app/dashboard/dashboard.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Dashboard } from './dashboard';
+
+describe('Dashboard', () => {
+  let component: Dashboard;
+  let fixture: ComponentFixture<Dashboard>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Dashboard]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Dashboard);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/dashboard/dashboard.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterOutlet } from '@angular/router';
+import { DashboardNavbar } from './dashboard-navbar/dashboard-navbar';
+
+@Component({
+  selector: 'app-dashboard',
+  imports: [RouterLink, RouterOutlet, DashboardNavbar],
+  templateUrl: './dashboard.html',
+  styleUrl: './dashboard.css',
+})
+export class Dashboard {}

src/app/login/login.html

@@ -1 +1,3 @@
 <p>login works!</p>
+
+<button routerLink="/dashboard">Login</button>

src/app/login/login.ts

@@ -1,11 +1,10 @@
 import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-login',
-  imports: [],
+  imports: [RouterLink],
   templateUrl: './login.html',
-  styleUrl: './login.css'
+  styleUrl: './login.css',
 })
-export class Login {
+export class Login {}
-
-}

src/app/register/register.html

@@ -1 +1,42 @@
-<p>register works!</p>
+<form [formGroup]="registrationForm">
+  <label>
+    Email
+    <input type="username" formControlName="email" />
+  </label>
+  <label>
+    Username
+    <input type="username" formControlName="username" />
+  </label>
+  <label>
+    Password
+    <input type="password" formControlName="password" />
+  </label>
+  <p>Address</p>
+  <div formGroupName="address">
+    <label>
+      Street1
+      <input type="text" formControlName="street1" />
+    </label>
+    <label>
+      Street2 (Optional)
+      <input type="text" formControlName="street2" />
+    </label>
+    <label>
+      City
+      <input type="text" formControlName="city" />
+    </label>
+    <label>
+      State
+      <input type="text" formControlName="state" />
+    </label>
+    <label>
+      ZIP
+      <input type="text" formControlName="zip" />
+    </label>
+    <label>
+      Country
+      <input type="text" formControlName="country" />
+    </label>
+  </div>
+  <button type="submit" (click)="submit()">Register</button>
+</form>

src/app/register/register.ts

@@ -1,9 +1,14 @@
 import { Component } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import {
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
 
 @Component({
   selector: 'app-register',
-  imports: [],
+  imports: [ReactiveFormsModule],
   templateUrl: './register.html',
   styleUrl: './register.css',
 })
@@ -12,17 +17,26 @@ export class Register {
 
   ngOnInit() {
     this.registrationForm = new FormGroup({
-      email: new FormControl('', Validators.required),
+      email: new FormControl('', [Validators.required, Validators.email]),
       username: new FormControl('', Validators.required),
       password: new FormControl('', Validators.required),
       address: new FormGroup({
-        street1: new FormControl(''),
+        street1: new FormControl('', Validators.required),
         street2: new FormControl(''),
-        city: new FormControl(''),
+        city: new FormControl('', Validators.required),
-        state: new FormControl(''),
+        state: new FormControl('', Validators.required),
-        zip: new FormControl(''),
+        zip: new FormControl('', [Validators.required]),
-        country: new FormControl(''),
+        country: new FormControl('', Validators.required),
       }),
     });
   }
+
+  submit() {
+    if (!this.registrationForm.valid) {
+      for (const control in this.registrationForm.controls) {
+        console.log(this.registrationForm.controls[control].errors);
+      }
+      return;
+    }
+  }
 }