Build A TodoList with ASP.NET Core and Ionic Angular

Download and install the dotnet core 6 framework using the appropriate installer for your platform (Mac arm64 or x64, or Windows x64), then verify with dotnet --version.

Connect to SQL Server after installation, enter server name and Windows authentication, then create a new database for the app, and note that tables will be created in upcoming videos.

Create an ASP.NET Core API project in Visual Studio 2022 by selecting the Web API template, configuring .NET 6, and cleaning up generated controllers for your todo app.

Install Entity Framework Core and related tools via the package manager, add database support using Aurora, and prepare to connect the app to the database.

Set up a database connection by locating the server and database names in server explorer, copying the connection string, and configuring the default connection in appsettings.json and program.cs.

Create and configure the todo data models and a db context, defining a todo class with id, title, and completed, then register the context with SQL Server in program setup.

Create and apply an EF Core migration to populate the database schema for your to-do items, then update the database to include id, title, and completed fields.

Create an ASP.NET Core todos API controller with CRUD actions, inject a to-do context, and use Entity Framework for complete data operations.

Implement an asynchronous get todos flow using Entity Framework Core in ASP.NET Core backend, including fetching all todos, retrieving a specific todo with context, and returning not found if missing.

Create a post method for todos with entity framework core to save the new todo to the database and return the created todo via an action result.

Update todos with entity framework core using post and put for an id and a to-do. Validate input, set state to modified, and handle concurrency with try-catch.

Delete todos using Entity Framework Core in ASP.NET Core and Ionic Angular app by finding the todo, removing it, saving changes, and returning no content; test with insomnia or postman.

Run and test a RESTful API built with ASP.NET Core by launching the application, using Insomnia to perform CRUD operations on todos (create, read, update, delete) and verify data changes.

Install the Ionic CLI, create a new Angular Ionic project, explore its structure and services, then run Ionic serves to preview a basic to-do list app.

Install capacitor http to enable HTTP requests in Ionic, build to create www folder, then install capacitor v8 and learn get, post, delete, and put requests with headers and params.

Create an Angular http todo service by defining a todo interface, injecting the service at root, and setting a base rest URL to enable create, read, update, and delete.

Learn to create and update to-dos by sending an easy to do object and returning an http response promise, using a url resource, data, and headers including content-type application/json.

Create http get functions to find todos, returning promises and supporting find all and find by id in the todo list app with ASP.NET Core and Ionic Angular.

Create a delete request for todos by passing the id and handling the http response.

Examine the home component, adjust modules and routers, replace the messages service with a tattoos service, and create two new folders for the upcoming to-do list feature.

Build a todo form UI inside the home component using a reactive form, with an iron button, grid layout, and a form group with validation for the title.

Submit form validation enables sending todo data, including title and completed, by marking controls dirty, validating form, and posting to a service, then refreshing the list and resetting the form.

Copy and adapt existing cases to build a todo component in an ionic angular app. Include padding, margins, a toggle, and a completed state with text-decoration.

Add update and delete methods for todos on the home page, refresh the list via the service find all, and pass these functions to the to-do component.

Create an ionic to-do item with dynamic styling for completed and uncompleted states, bind data to a to-do list, and implement update and delete methods in the home component.

Unlock a permanent 30% discount at codebrains.io for CodeBrain students, with monthly updates, weekly contact, early access to courses, and a special forum via a discount code.