必須要件分（API呼び出し以外）の実装

angular.json

@@ -53,7 +53,13 @@
             "development": {
               "optimization": false,
               "extractLicenses": false,
-              "sourceMap": true
+              "sourceMap": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.development.ts"
+                }
+              ]
             }
           },
           "defaultConfiguration": "production"

src/app/app.component.ts

@@ -9,5 +9,4 @@ import { RouterOutlet } from '@angular/router';
   styleUrl: './app.component.scss'
 })
 export class AppComponent {
-  title = 'todo-app-angular';
 }

src/app/app.config.ts

@@ -1,8 +1,8 @@
-import { ApplicationConfig } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { ApplicationConfig } from '@angular/core'
+import { provideRouter, withComponentInputBinding } from '@angular/router'
 
-import { routes } from './app.routes';
+import { routes } from './app.routes'
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)]
-};
+  providers: [provideRouter(routes, withComponentInputBinding())],
+}

src/app/app.routes.ts

@@ -1,3 +1,39 @@
-import { Routes } from '@angular/router';
+import { Routes } from '@angular/router'
+import { HomeComponent } from './pages/home/home.component'
+import { TodoPageComponent } from './pages/todo-page/todo-page.component'
+import { TodoCreateComponent } from './pages/todo-create/todo-create.component'
+import { TodoEditComponent } from './pages/todo-edit/todo-edit.component'
+import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.component'
+import { TodoDetailComponent } from './pages/todo-detail/todo-detail.component'
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  {
+    path: '',
+    component: HomeComponent,
+    title: 'Home',
+  },
+  {
+    path: 'list',
+    component: TodoPageComponent,
+    title: 'TODO',
+  },
+  {
+    path: 'todo/:id',
+    component: TodoDetailComponent,
+    title: 'TODO Detail',
+  },
+  {
+    path: 'create',
+    component: TodoCreateComponent,
+    title: 'Add TODO',
+  },
+  {
+    path: 'edit/:id',
+    component: TodoEditComponent,
+    title: 'Edit TODO',
+  },
+  {
+    path: '**',
+    component: PageNotFoundComponent,
+  },
+]

src/app/components/todo/todo-item/todo-item.component.html

@@ -0,0 +1,3 @@
+<li>
+  <a [routerLink]="['/todo', todo.id]">{{ todo.title }}</a>
+</li>

src/app/components/todo/todo-item/todo-item.component.spec.ts

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

src/app/components/todo/todo-item/todo-item.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core'
+import { Todo } from '../../../models'
+import { RouterLink } from '@angular/router'
+
+@Component({
+  selector: 'app-todo-item',
+  standalone: true,
+  imports: [RouterLink],
+  templateUrl: './todo-item.component.html',
+  styleUrl: './todo-item.component.scss',
+})
+export class TodoItemComponent {
+  @Input()
+  todo!: Todo
+}

src/app/components/todo/todo-list/todo-list.component.html

@@ -0,0 +1,3 @@
+<ul>
+  <app-todo-item *ngFor="let todo of todoList" [todo]="todo" />
+</ul>

src/app/components/todo/todo-list/todo-list.component.spec.ts

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

src/app/components/todo/todo-list/todo-list.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core'
+import { Todo } from '../../../models'
+import { TodoItemComponent } from '../todo-item/todo-item.component'
+import { CommonModule } from '@angular/common'
+
+@Component({
+  selector: 'app-todo-list',
+  standalone: true,
+  imports: [TodoItemComponent, CommonModule],
+  templateUrl: './todo-list.component.html',
+  styleUrl: './todo-list.component.scss',
+})
+export class TodoListComponent {
+  @Input()
+  todoList!: Todo[]
+}

src/app/models.ts

@@ -0,0 +1,29 @@
+export type TodoState = 0 | 1 | 2
+
+export type Todo = {
+  id: number
+  category: TodoCategory | null
+  title: string
+  body: string
+  state: TodoState
+}
+
+export type TodoCreate = {
+  categoryId: number
+  title: string
+  body: string
+}
+
+export type TodoUpdate = {
+  id: number
+  categoryId: number
+  title: string
+  body: string
+  state: TodoState
+}
+
+export type TodoCategory = {
+  id: number
+  name: string
+  color: string
+}

src/app/pages/home/home.component.html

@@ -0,0 +1,3 @@
+<ul>
+  <li><a href="/list">TODO</a></li>
+</ul>

src/app/pages/home/home.component.spec.ts

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

src/app/pages/home/home.component.ts

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

src/app/pages/page-not-found/page-not-found.component.html

@@ -0,0 +1 @@
+<h2>Page Not Found.</h2>

src/app/pages/page-not-found/page-not-found.component.spec.ts

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

src/app/pages/page-not-found/page-not-found.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page-not-found',
+  standalone: true,
+  imports: [],
+  templateUrl: './page-not-found.component.html',
+  styleUrl: './page-not-found.component.scss'
+})
+export class PageNotFoundComponent {
+
+}

src/app/pages/todo-create/todo-create.component.html

@@ -0,0 +1,27 @@
+<form [formGroup]="formGroup">
+  <label for="title">タイトル</label>
+  <input id="title" type="text" formControlName="title" />
+  <div *ngIf="titleForm.invalid && (titleForm.dirty || titleForm.touched)">
+    <p *ngIf="titleForm.errors && titleForm.errors['required']">
+      title is required.
+    </p>
+  </div>
+
+  <label for="body">TODO</label>
+  <textarea id="body" formControlName="body"></textarea>
+  <div *ngIf="bodyForm.invalid && (bodyForm.dirty || bodyForm.touched)">
+    <p *ngIf="bodyForm.errors && bodyForm.errors['required']">
+      TODO body is required.
+    </p>
+  </div>
+
+  <ng-container *ngIf="categoryListPromise | async as categories">
+    <select formControlName="category">
+      <option *ngFor="let category of categories" [value]="category.id">
+        {{ category.name }}
+      </option>
+    </select>
+  </ng-container>
+
+  <button type="button" (click)="onCreateClicked()">追加</button>
+</form>

src/app/pages/todo-create/todo-create.component.spec.ts

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