Renaming and moving.

src/app/app.routes.ts

@@ -1,5 +1,5 @@
 import { Routes } from '@angular/router';
-import { RecipeView } from './recipe-view/recipe-view.component';
+import { RecipeView } from './recipe-view/recipe-view';
 import { RecipesPage } from './recipes-page/recipes-page';
 
 export const routes: Routes = [

src/app/model/ImageView.model.ts

@@ -0,0 +1,10 @@
+import { ResourceOwner } from "./ResourceOwner.model";
+
+export interface ImageView {
+    alt: string;
+    filename: string;
+    height: number | null;
+    owner: ResourceOwner;
+    url: string;
+    width: number | null;
+}

src/app/model/Recipe.model.ts

@@ -1,3 +1,6 @@
+import { ResourceOwner } from './ResourceOwner.model';
+import { ImageView } from './ImageView.model';
+
 export interface RecipeInfoViews {
     slice: {
         number: number;
@@ -21,16 +24,3 @@ export interface Recipe {
     title: string;
 }
 
-export interface ResourceOwner {
-    id: number;
-    username: string;
-}
-
-export interface ImageView {
-    alt: string;
-    filename: string;
-    height: number | null;
-    owner: ResourceOwner;
-    url: string;
-    width: number | null;
-}

src/app/model/ResourceOwner.model.ts

@@ -0,0 +1,4 @@
+export interface ResourceOwner {
+    id: number;
+    username: string;
+}

src/app/recipe-view/recipe-view-card/recipe-view-card.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { RecipeViewCard } from './recipe-view-card.component';
+import { RecipeViewCard } from './recipe-view-card';
 
 describe('Card', () => {
     let component: RecipeViewCard;

src/app/recipe-view/recipe-view-card/recipe-view-card.ts

@@ -6,8 +6,8 @@ import { ImageService } from '../../service/image.service';
 @Component({
     selector: 'app-recipe-view-card',
     imports: [],
-    templateUrl: './recipe-view-card.component.html',
+    templateUrl: './recipe-view-card.html',
-    styleUrl: './recipe-view-card.component.css',
+    styleUrl: './recipe-view-card.css',
 })
 export class RecipeViewCard {
     @Input({ required: true })

src/app/recipe-view/recipe-view.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { RecipeView } from './recipe-view.component';
+import { RecipeView } from './recipe-view';
 
 describe('Recipe', () => {
     let component: RecipeView;

src/app/recipe-view/recipe-view.ts

@@ -1,14 +1,14 @@
 import { Component, inject, resource } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { RecipeService } from '../recipe.service';
+import { RecipeService } from '../service/recipe.service';
-import { RecipeViewCard } from './recipe-view-card/recipe-view-card.component';
+import { RecipeViewCard } from './recipe-view-card/recipe-view-card';
 import { injectQuery } from '@tanstack/angular-query-experimental';
 
 @Component({
     selector: 'app-recipe-view',
     imports: [RecipeViewCard],
-    templateUrl: './recipe-view.component.html',
+    templateUrl: './recipe-view.html',
-    styleUrl: './recipe-view.component.css',
+    styleUrl: './recipe-view.css',
 })
 export class RecipeView {
     private recipeService = inject(RecipeService);

src/app/recipes-page/recipes-page.ts

@@ -1,5 +1,5 @@
 import { Component, inject } from '@angular/core';
-import { RecipeService } from '../recipe.service';
+import { RecipeService } from '../service/recipe.service';
 import { injectQuery } from '@tanstack/angular-query-experimental';
 import { RouterLink } from '@angular/router';
 

src/app/service/recipe.service.ts

@@ -1,7 +1,7 @@
 import { inject, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { firstValueFrom, map } from 'rxjs';
-import { Recipe, RecipeInfoViews, RecipeView } from './model/Recipe.model';
+import { Recipe, RecipeInfoViews, RecipeView } from '../model/Recipe.model';
 
 @Injectable({
     providedIn: 'root',