Simple CRUD Todo App — Angular 9.1, ASP.NET Core 3.1, Swagger, AutoMapper and MongoDB
In this story, we will discuss about the simple ToDo web application for employees. Angular 9.1 is used for frontend, ASP.NET Core 3.1 for building REST API with Swagger integration. MongoDB community edition is used for storing Todo list and employee data. You can find complete source code at GitHub repository. Feel free to refactor existing code and introduce new features by raising new Pull Requests (PRs).
The simple website built with Angular 9.1 and ASP.NET Core 3.1 with MongoDb database Clone this repository Navigate to…
The frontend is built with Angular 9.1 and Angular Material design library. All modules are lazy loaded for better performance. Note that the API URLs are kept as localhost://<api> for testing purpose thus the below StackBlitz demo won’t work unless you specify live backend URL. You will have to deploy the backend and replace the
environment.prod.ts file for production purpose and in
environment.ts for local development. There is plenty room for improvement in terms of UI and features so feel free to extend it.
I have used ASP.NET Core 3.1 for building REST API with Visual Studio for Mac IDE which works pretty nice. There few NuGet packages imported for:
- Swagger — Swashbuckle.AspNetCore
- AutoMapper — AutoMapper.Extensions.Microsoft.DependencyInjection
- MonogoDB — MongoDB.Driver
To run the backend you need to install NuGet dependencies first which is done by default if you open project in Visual Studio or Visual Studio for Mac but for Visual Studio Code, you will have to use .NET CLI for installing packages.
Once packages are installed, you can run project and navigate to https://localhost:5001/swagger/index.html URL to inspect APIs in Swagger UI.
The AutoMapper has been used for mapping domain models (DTOs) to view models (VMs). Creating mapping gets with DTOs to VMs is very easy thanks to AutoMapper. All we have to do is define a mapper class deriving from
Profile class and define the mapping strategy.
I have used MongoDB community version for this project. The
appsettings.json file contains the database settings.
The MongoDB.Driver package provides nice APIs for working with database. There is TodoService and EmployeeService which interacts with database for CRUD operations.
The aim of this story is you to get started with full stack skeleton project with Angular 9.1, ASP.NET Core 3.1 and MongoDB.