Welcome to the first lesson of our course Creating an Interactive Cooking Helper Landing Page with Angular! So far, you have built a 404 page and the basic structure in our app component. Up to this point, your app has worked with static or mock data. Now, it’s time to make your app truly useful by connecting it to real data from a backend and database.

In this lesson, you will learn how to set up the connection between your Angular frontend and the backend API. This will allow your app to search for recipes, fetch details, and submit ratings using real data. By the end of this lesson, you’ll have a solid foundation for working with live data in your Cooking Helper app.

Before we dive in, let’s quickly remind ourselves about two important concepts in Angular: services and models.

• Services in Angular are used to organize and share code that performs specific tasks, like fetching data from an API. They help keep your components clean and focused on displaying data.
• Models are TypeScript interfaces or classes that describe the shape of the data your app works with. They help you write safer and more predictable code.

You have seen these ideas before, but now we’ll use them to connect to real backend data.

To work with recipe data from the backend, we need to define what a recipe looks like in our app. We do this using TypeScript interfaces. Let’s build these step by step.

First, let’s define a simple recipe summary. This will represent a recipe in a list, showing only the most important details.

• id: A unique number for each recipe.
• name: The name of the recipe.
• average_rating: The average rating, which is optional (it might not always be present).

Sometimes, we need more details about a recipe, like its ingredients and steps. We can extend our summary interface to include these.

• ingredients: A list of ingredient names.
• steps: The instructions for making the recipe.

Depending on what the backend provides, we might need more models. For example, a model for recipe steps, a random recipe, or a response when submitting a rating.

Each interface describes a different kind of data your app might receive from the backend. By defining these models, you make your code easier to understand and less prone to errors.

Now that we have our models, let’s create a service to handle all communication with the backend API. We’ll build this step by step.

In Angular, services are usually decorated with @Injectable and provided in the root of the app. We also need to import HttpClient to make HTTP requests.

• @Injectable({ providedIn: 'root' }) makes the service available everywhere in your app.
• HttpClient is Angular’s tool for making HTTP requests.
• Observable is used to handle asynchronous data.

We import the models we defined earlier so we can use them in our service methods.

Let’s start the service class and set up the base URL for our API.

• apiBase is the base path for all API requests. The relative path /api is automatically redirected to the backend URL for ease of development.

Now, let’s add methods to fetch and send data. Each method returns an Observable of the expected data type.

• This method sends a POST request with a list of ingredients and gets back a list of recipe summaries.

• This method fetches a list of popular recipes.

• This method fetches a random recipe from the backend.

• This method fetches detailed information for a specific recipe.

• This method fetches the step-by-step instructions for a recipe.

• This method sends a user’s rating for a recipe to the backend.

By organizing all API calls in one service, your app stays clean and easy to maintain.

Let’s look at how Angular actually communicates with the backend and why we use certain tools.

• HTTP Requests: Angular uses the HttpClient service to send HTTP requests (like GET and POST) to the backend. Each method in our service uses http.get or http.post to fetch or send data.
• Observables: All HTTP methods return an Observable. This is a special object that lets you handle data that arrives asynchronously (for example, after a network request finishes). You can subscribe to an observable to get the data when it’s ready.

Example Output:
When you call getPopularRecipes(), you might get data like this from the backend:

Your Angular app will use the models you defined to work with this data safely and easily.

In this lesson, you learned how to:

• Define TypeScript interfaces (models) for recipe data.
• Build an Angular service to handle all API communication.
• Understand how Angular uses HTTP and observables to talk to the backend.

These steps are essential for connecting your Cooking Helper app to real data. In the next practice exercises, you’ll get hands-on experience using these models and services to fetch and display recipes from the backend. This will set you up for even more advanced features as you continue building your app. Keep going — your Cooking Helper is getting smarter and more useful with every step!