.NET 7.0 + Postgres CRUD API with Angular Front End App
Built with .NET 7, Postgres and Angular 14
In this tutorial we'll go through how to build a full stack CRUD app with a .NET 7.0 API, PostgreSQL database and Angular front end.
- Tools required
- .NET 7.0 (ASP.NET Core) API Overview
- Angular App Overview
- Download and Start the .NET API
- Download and Start the Angular App
Tools required for this tutorial
To follow the steps in this tutorial you'll need the following:
- Node.js and npm - includes the Node runtime and command line tools
- .NET SDK - includes the .NET runtime and command line tools
- Visual Studio Code - code editor that runs on Windows, Mac and Linux
- C# extension for Visual Studio Code - adds support to VS Code for developing .NET applications
- PostgreSQL - you'll need access to a running PostgreSQL server instance for the API to connect to, it can be remote (e.g. Azure, AWS etc) or on your local machine. The PostgreSQL downloads page is at https://www.postgresql.org/download/, ensure it is started so the API can connect to it. You can also run it in a Docker container, the official docker images for Postgres are available at https://hub.docker.com/_/postgres.
.NET 7.0 (ASP.NET Core) CRUD API Overview
The example ASP.NET Core API includes routes to retrieve, update, create and delete records in the database, the records in the example app are for users but this is only for demonstration purposes, the same CRUD pattern and code structure could be used to manage any type of data e.g. products, services, articles etc.
PostgreSQL (also known as Postgres) is the database used by the ASP.NET Core API, a free and open-source full featured relational database, it's a good option for any size application in production or development. The ADO.NET provider for Postgres (
Npgsql) is used to connect to the database.
Dapper ORM (Object Relational Mapper)
The API uses Dapper to access and manage data in the database. Dapper is a micro ORM that supports executing raw SQL queries and mapping results to C# objects and collections, it's implemented as a collection of extension methods on top of the ADO.NET
Dapper doesn't support all of the functionality of full ORMs such as Entity Framework Core (e.g. SQL generation, caching, database migrations etc) but instead is focused on performance and is known for being lightweight and fast.
For more info see .NET 7.0 + Dapper + PostgreSQL - CRUD API Tutorial in ASP.NET Core.
Angular 14 CRUD App Overview
The Angular app includes a basic home page and users section with CRUD functionality, the default page in the users section displays a list of all users and includes buttons to add, edit and delete users. The add and edit buttons navigate to a page containing an Angular Reactive Form for creating or updating a user record, and the delete button executes a function within the user list component to delete a user record.
For more info see Angular 14 - CRUD Example with Reactive Forms.
Download and Start the .NET 7.0 CRUD API
- Download or clone the tutorial project code from https://github.com/cornflourblue/dotnet-7-dapper-postgres-crud-api
- Update the database credentials in
/appsettings.jsonto connect to your PostgreSQL instance, and ensure Postgres is running.
- Start the API by running
dotnet runfrom the command line in the project root folder (where the WebApi.csproj file is located), you should see the message
Now listening on: http://localhost:4000.
PostgreSQL database creation
A new Postgres database (
dotnet-7-dapper-crud-api) is created with all required tables by the data context class the first time the API is started.
Download and Start the Angular 14 CRUD App
- Download or clone the Angular project source code from https://github.com/cornflourblue/angular-14-crud-example
- Install all required npm packages by running
npm ifrom the command line in the project root folder (where the package.json is located).
- Delete or comment out the line below the comment
// provider used to create fake backendlocated in the
/src/app/app.module.tsfile. This disables the default "fake backend API" so the Angular app will send requests to the real .NET API.
- Start the app by running
npm startfrom the command line in the project root folder, this will compile the Angular app and automatically launch it in the browser on the URL
You have a full stack Angular + .NET + Postgres CRUD application running.
Subscribe or Follow Me For Updates
Subscribe to my YouTube channel or follow me on Twitter, Facebook or GitHub to be notified when I post new content.
- Follow me on Twitter at https://twitter.com/jason_watmore
- Subscribe on YouTube at https://www.youtube.com/JasonWatmore
- Follow me on Facebook at https://www.facebook.com/JasonWatmoreBlog
- Follow me on GitHub at https://github.com/cornflourblue
- Feed formats available: RSS, Atom, JSON
Other than coding...
I'm currently attempting to travel around Australia by motorcycle with my wife Tina on a pair of Royal Enfield Himalayans. You can follow our adventures on YouTube, Instagram and Facebook.
- Subscribe on YouTube at https://www.youtube.com/TinaAndJason
- Follow us on Instagram at https://www.instagram.com/tinaandjason
- Follow us on Facebook at https://www.facebook.com/TinaAndJasonVlog
- Visit our website at https://tinaandjason.com.au
Need Some .NET Help?
Search fiverr to find help quickly from experienced .NET developers.