Top to (More) Bottom with Angular and .NET Core

Our previous activities got us an Angular application making an HTTP call to a .NET Core backend to retrieve a shopping list.

In this activity, we will extend our .NET backend to use SQL Server.

First, let’s create a Shopping database.

Next, we need to create a ShoppingListItems table.

Now that we have a database table, we need to insert some data. We can achieve this with straight SQL.

Now we need to update our .NET backend to query our database. We have many options here. In this case, we will use Entity Framework to retrieve the data.

For our .NET application to use Entity Framework, we first have to add an Entity Framework reference to our project. To do this, we can use the .NET CLI to include the NuGet package for EntityFramework.

Now we need to create a class for our EntityFramework database context.

Now that we have created the database context, we must wire it up into the .NET Core’s dependency services. That way we can use this database context in our ShoppingListController.

The controller ShoppingListController can be updated to use the database context to retrieve the items from the database.

Now we should have an Angular frontend calling a .NET Core backend communicating with a SQL Server data store. This pattern/setup is a good starting point for understanding much of modern application hosting.