Angular + ASP.NET Core Web API CRUD Guide

Welcome to an in-depth tutorial on building a powerful Full-Stack CRUD (Create, Read, Update, Delete) application! In this video, we'll guide you through the process of creating a web application using cutting-edge technologies. We'll start by harnessing the frontend capabilities of Angular 17, exploring its latest features and enhancements for a seamless user experience. Moving on, we'll dive into the backend using .NET 8, a versatile and high-performance framework. Learn to set up a Web API and handle server-side operations efficiently. Our application's data layer will be powered by Entity Framework (EF) Core, a flexible and extensible Object-Relational Mapping (ORM) framework. Discover how to integrate EF Core seamlessly with a SQLite database, offering a lightweight yet powerful storage solution. Throughout the tutorial, we'll cover essential concepts such as data modeling, API development, and frontend-backend communication. By the end of this video, you'll have a comprehensive understanding of building a Full-Stack CRUD application, equipped with the latest tools and best practices. Whether you're a seasoned developer or just getting started, join us on this coding journey to elevate your skills and create a modern, efficient Full-Stack CRUD application with Angular 17, .NET 8, EF Core, and SQLite. https://github.com/pushpa-raj-dangi/ng17net8Crud.git https://www.youtube.com/watch?v=wuyHRnpXpgM https://youtu.be/Wit8nv1ZorQ Buy me coffe 🙏🏽: https://buymeacoffee.com/codewithpushpa Chapters 0:00 Introduction 0:20 Environment Setup for .net 8 web development 1:20 Visual Studio Code Setup for .NET Web Api developement 3:18 Project Setup 3:46 .Net web api CLI project setup 3:55 Material Icon Vs Code Icon Extension Setup 5:16 Creating Dotnet Web API Model Class 5:24 Creating Student Model 6:46 Createing AppDbContext 7:22 Install .Net ef core packages 7:38 Install .Net ef tools 8:25 Add DbContext Service Container 8:55 Install Sqlite package 9:35 Configure Sqlite Database connection string 9:43 Add Student Controller 12:35 Add Controller Service Container and map controller 13:40 Add Student in DbSet 13:56 Create first migration 14:15 Install ef core tool globally 17:08 HttpGet List of students 18:37 HttpPost Create new student 21:36 HttpGet Get Single Student By Id 23:46 HttpDelete Delete Student By Id 26:50 HttpPut Edit Student By Id 32:28 Angular local environment setup guide 32:33 Node js setup for angular 17 33:23 Angular CLI Setup 34:20 Angular vs code extension setup 35:28 Angular project setup 36:58 Angular tailwindcss setup 38:55 Tailwindcss vs code extension setup 39:26 Student standalone component generate using cli 41:32 Angular 17 routing setup for student component 42:07 Import routerlink in standalone component 42:40 Create student service using cli 43:26 Create Student Interface 45:15 Get list of student using http client 46:25 Inject student service in component 48:35 Enable CORS in .NET 8 and angular 50:28 Iterate students array observable with @for loop 50:44 Import async pipe in component 1:05:40 Create student form component using cli 1:11:40 Configure reactive student form 1:13:13 Add react form in student form component 1:14:29 Display form value in JSON format inside component 1:20:50 On Destroy component lets unsubscribe observable 1:22:11 Reactive form validation 1:22:49 Display validation message in template 1:24:27 Activated router to get student id params form url 1:25:31 Get single student service and patch value for edit 1:27:38 Angular reactive form patch value for editing 1:28:00 Conditionally render add or edit form text 1:32:00 Add edit student form routing 1:35:40 Ng Toaster for beautiful notification message 1:36:50 Implement delete method in angular 1:42:55 Implement edit operation in angular 1:45:46 Programatically navigate to home page after edit success #angular17 #dotnet8 #fullstack_crud