Angular ASP.NET Core Minimal APIs Tutorial (pt. 2 – front end)

In this 3-part series you’re going to learn how to combine the popular front end TypeScript framework Angular with an ASP.NET Core Web API.

At the end of it you’ll have a minimal example CRUD Application that demonstrates how to combine the two. Can be used as a clean template to kickstart your CRUD apps.

In this second video we focus on the Angular front end. In the previous video we built the ASP.NET back end. In the third video we’ll focus on publishing them both for free to the Microsoft Azure Cloud.

All the tools I’ll use in these tutorials are free for individuals.

This is an intermediate level tutorial so I’m assuming you know the basics of C#, ASP.NET, HTML, CSS, TypeScript and Angular. You don’t really need prior knowledge of Azure.

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

►► Interested in learning Blazor? Take a look at my course for it:
https://rubenheeren.com/course-promo-link/blazor-your-dev-portfolio

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

►► DOWNLOAD SOURCE CODE:
https://github.com/RubenHeeren/AngularAspNetTutorial

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

►► LINKS MENTIONED

Snippets article:
https://rubenheeren.com/articles/snippets-angular-aspdotnet-core-tutorial-part-2.html

Angular getting started:
https://angular.io/start

NodeJS download:
https://nodejs.org

Fancy Windows Terminal Tutorial:
https://youtu.be/qtxd2wGa0Zk

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

►► TIMESTAMPS

0:00 – Intro & Demo
3:05 – Dev Environment
5:45 – Generating the Project
8:44 – Recommended VSCode Extensions
11:04 – Getting Started Developing
13:15 – PostService and Model
18:10 – GET All Posts
25:08 – Fixing CORS Error
27:10 – Displaying All Posts in a Table
32:36 – Better Way to Store API URLs
36:52 – CREATE Modal Component
50:15 – UPDATE Modal Component
57:56 – DELETE Confirm Modal Component
1:03:10 – Conclusion

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Good luck on your developer journey!

#angular #webapi #aspnetcore