.NET Core API for the Angular Tour of Heroes App — Introduction | by Richard Peterson | Towards Data Science

This article assumes that you have already built the Angular official tutorial — Tour of Heroes app. If you have not built this, you should check the Angular docs, or download from here. Everything else will be taken care of in this series of articles!
In this series, we will embark on a magical exploration of .NET Core, Angular, Docker, Azure, and Azure SQL Server.
We will become familiar with several technologies, such as Docker containers, C#, JavaScript, SQL, and the Azure Command Line Interface.
The end result of these articles will be an Angular front end with a .NET Core API that talks to an Azure SQL server, all hosted on Azure.
This article — environment setup and explanation of MVC.Local Docker setup of a Microsoft SQL Server (mssql).Build the .NET API.Deploying your API to Azure.Deploy your Angular app to Azure.
This article — environment setup and explanation of MVC.
Local Docker setup of a Microsoft SQL Server (mssql).
Build the .NET API.
Deploying your API to Azure.
Deploy your Angular app to Azure.
Visual Studio Code (it’s the free one)Angular CLI (should already be setup from the Tour Of Heroes Tutorial).NET Core — This API will use version 3.0.2Postman — for testing the APIDocker — for a local dev database, and for containerizing our apps
Visual Studio Code (it’s the free one)
Angular CLI (should already be setup from the Tour Of Heroes Tutorial)
.NET Core — This API will use version 3.0.2
Postman — for testing the API
Docker — for a local dev database, and for containerizing our apps
Follow along using my GitHub repo.
First, launch your Tour of Heroes Angular app by running ng serve --open from the root directory of your app. You should see the app running on port 4200.
When you built the original app, it had a built-in web server that mimicked an actual server. We will be replacing this artificial server with a web API written in C# using the .NET framework. Let’s shutdown the app and get to work on the API.
Make sure the .NET Core CLI is installed by running dotnet --version. The .NET Core CLI has lots of templates from which to choose. Check these option flags with dotnet new -h. Do you see the Template for ASP.NET Core Web API? Its Short Name is webapi. Create your API from the command line by running:
dotnet new webapi -n Heroes.API
You should get a result of Restore succeeded. Move into the new directory by typing cd Heroes.API. Check ls to see the folders and files that have been created, and launch VS Code in this directory by typing (with a period)code . .
Let’s also make sure the API launches by running dotnet run. In a web browser, navigate to https://localhost:5001/weatherforecast and accept the unsafe destination to view sample output returned by your API in JSON format. This is great because is gives you an idea of how .NET Core APIs work by using a Model and a Controller. We will create our own Model and Controller, and also add a database Context.
MVC is a web development philosophy that recommends the separation of pieces of an app into logical components. This allows you to build each piece separately and confirm it works, and then connect your pieces for a finished whole. This article from FreeCodeCamp.org does an excellent job of explaining how MVC is like ordering a drink from a bar. The drink menu is the View, and you make requests to the bartender (Controller), who makes drinks based on ingredients and instructions (Model), and returns your finished drink to the bar (View).
In the context of our app, this means:
VIEW: The Angular app will receive input, make requests, and display data.CONTROLLER: C# class that accepts incoming requests, deciphers the route of the request, and uses a specified Model to interact with the database based on the route it receives.MODEL: C# class that defines the data being passed to or retrieved from the database. This will mean defining things like id is an integer, name is a string, so that C# can pass these values in a way that SQL can interpret. Database context is important to the Model
VIEW: The Angular app will receive input, make requests, and display data.
CONTROLLER: C# class that accepts incoming requests, deciphers the route of the request, and uses a specified Model to interact with the database based on the route it receives.
MODEL: C# class that defines the data being passed to or retrieved from the database. This will mean defining things like id is an integer, name is a string, so that C# can pass these values in a way that SQL can interpret. Database context is important to the Model
Microsoft has published great tutorials on .NET Core, and I highly recommend checking out:
Tutorial: Create a web API with ASP.NET Core.Create a web app with ASP.NET Core MVC
Tutorial: Create a web API with ASP.NET Core.
Create a web app with ASP.NET Core MVC
At this point, you should have 2 resources:
A working Angular Tour of Heroes App.A generic .NET Core API.
A working Angular Tour of Heroes App.
A generic .NET Core API.
We need to create a database that can handle requests from our API Controller. We will eventually move to a hosted Azure SQL database, but for now, let’s launch a local Docker container of a Microsoft SQL Server. This container is a lightweight version of SQL Server that we can easily spin up for development.
Head on over to Build a MSSQL Docker Container to setup the database!
Build your .NET API from scratch, with a little help from the aspnet-codegenerator. The app will handle API requests to these routes:
GET: api/Heroes — this method will return all the heroes in the databaseGET: api/Heroes/5 — this method will return a specific hero from the database. In this case, it will return the hero with an Id of 5.PUT: api/Heroes/5 — this method will update a specific hero’s information.POST: api/Heroes — this method will post a new hero to the database.DELETE: api/Heroes/5 — this method will delete a specific hero from the database.
GET: api/Heroes — this method will return all the heroes in the database
GET: api/Heroes/5 — this method will return a specific hero from the database. In this case, it will return the hero with an Id of 5.
PUT: api/Heroes/5 — this method will update a specific hero’s information.
POST: api/Heroes — this method will post a new hero to the database.
DELETE: api/Heroes/5 — this method will delete a specific hero from the database.
At the end of this article, you will have a working local version of the Angular app, .NET API, and database.
Finally, you will create an Azure SQL server and deploy your .NET API to an Azure remote git repo, and serve with a web app.
Then you will deploy your angular app to Azure as a Docker container web app.
Thank you for reading!