base page scaffolding and expense service

src/app/app.html

@@ -1,5 +1,14 @@
-<main>
-  <h1>Hello, {{ title() }}</h1>
-</main>
+<div class="app-container">
+  <header class="app-header">
+    <h1>Common Cents</h1>
+    <h2>The common sense expense tracker.</h2>
+  </header>
 
-<router-outlet />
+  <main class="app-content">
+    <router-outlet />
+  </main>
+
+  <footer class="app-footer">
+
+  </footer>
+</div>

src/app/app.routes.ts

@@ -1,3 +1,14 @@
 import { Routes } from '@angular/router';
+import { Expenses } from './pages/expenses/expenses';
+import { Home } from './pages/home/home';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  {
+    path: '',
+    component: Home
+  },
+  {
+    path: 'expenses',
+    component: Expenses
+  }
+];

src/app/app.scss

@@ -6,3 +6,12 @@ h1 {
   margin: 0;
   font-family: sans-serif;
 }
+
+h2 {
+  font-size: 1.2rem;
+  line-height: 100%;
+  font-weight: 500;
+  margin: 0;
+  font-family: sans-serif;
+  font-style: italic;
+}

src/app/app.ts

@@ -1,4 +1,4 @@
-import { Component, signal } from '@angular/core';
+import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 @Component({
@@ -7,6 +7,4 @@ import { RouterOutlet } from '@angular/router';
   templateUrl: './app.html',
   styleUrl: './app.scss'
 })
-export class App {
-  protected readonly title = signal('common-cents');
-}
+export class App { }

src/app/components/expense-list/expense-list.html

@@ -0,0 +1,3 @@
+<div class="expense-list-container">
+  <p>expense-list works!</p>
+</div>

src/app/components/expense-list/expense-list.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { Expenses } from '../../services/expenses';
+
+@Component({
+  selector: 'app-expense-list',
+  imports: [],
+  templateUrl: './expense-list.html',
+  styleUrl: './expense-list.scss',
+})
+export class ExpenseList implements OnInit {
+  public constructor(private readonly expenses: Expenses) { }
+
+  public ngOnInit() {
+    void this.expenses.getExpenses();
+  }
+}

src/app/pages/expenses/expenses.html

@@ -0,0 +1,3 @@
+<div class="expenses-container">
+  <app-expense-list />
+</div>

src/app/pages/expenses/expenses.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { ExpenseList } from '../../components/expense-list/expense-list';
+
+@Component({
+  selector: 'app-expenses',
+  imports: [
+    ExpenseList
+  ],
+  templateUrl: './expenses.html',
+  styleUrl: './expenses.scss'
+})
+export class Expenses { }

src/app/pages/home/home.html

@@ -0,0 +1,7 @@
+<div class="home-container">
+  <ul>
+    <li>
+      <a routerLink="expenses">Expenses</a>
+    </li>
+  </ul>
+</div>

src/app/pages/home/home.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-home',
+  imports: [
+    RouterLink
+  ],
+  templateUrl: './home.html',
+  styleUrl: './home.scss',
+})
+export class Home { }

src/app/services/expenses.ts

@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class Expenses {
+  public static readonly BASE_URL = 'http://localhost:3000/common-cents/expenses';
+
+  public async getExpenses(): Promise<void> {
+    console.log('getExpenses called');
+  }
+}