Build an app with ASPNET Core and Angular from scratch
-
Introduction
-
Building a walking skeleton part 1 – APIIntroduction0sCreating the .Net API Project using the dotnet CLI0sSetting up VS code to work with C#0sGetting to know the API project files0sCreating our first Entity0sIntroduction to Entity Framework0sAdding Entity Framework to our project0sAdding a DbContext class0sCreating the Connection string0sCreating the database using Entity Framework Code first migrations0sAdding a new API Controller0sMaking our code Asynchronous0sSaving our code into Source control0sSection 2 Summary0s
-
Building a walking skeleton part 2 – AngularIntroduction0sCreating the Angular application0sRunning the angular project and reviewing the bootstrap of the app0sAdding VS Code extensions to work with Angular0sMaking HTTP requests in Angular0sAdding CORS support in the API0sDisplaying the fetched users in the browser0sAdding bootstrap and font-awesome0sAdding HTTPS to Angular using mkcert0sSection 3 summary0s
-
Authentication basicsIntroduction0sSafe storage of passwords0sUpdating the user entity0sCreating a base API controller0sCreating an Account Controller with a register endpoint0sUsing DTOs0sUsing the debugger0sAdding a login endpoint0sJSON web tokens0sAdding a token service0sAdding the create token logic0sCreating a User DTO and returning the token0sAdding the authentication middleware0sAdding extension methods0sSection 4 summary0s
-
Client login and registerIntroduction0sCreating a nav bar0sIntroduction to Angular template forms0sIntroduction to Angular services0sInjecting services into components0sUsing conditionals to show and remove content0sUsing the angular bootstrap components – dropdown0sIntroduction to observables and signals0sPersisting the login0sAdding a home page0sAdding a register form0sParent to child communication0sChild to parent communication0sHooking up the register method to the service0sSection 5 summary0s
-
Routing in Angular
-
Error handling
-
Extending the APIIntroduction0sExtending the user entity0sAdding a DateTime extension to calculate age0sEntity Framework relationships0sGenerating seed data0sSeeding data part one0sSeeding data part two0sThe repository pattern0sCreating a repository0sUpdating the users controller0sAdding a DTO for Members0sAdding AutoMapper0sUsing AutoMapper0sConfiguring AutoMapper0sUsing AutoMapper queryable extensions0sSection 8 summary0s
-
Building the user interfaceIntroduction0sUsing TypeScript0sCreating the member interface0sAdding a member service0sRetrieving the list of members0sCreating member cards0sAdding some style to the cards0sAdding animated buttons0sUsing an interceptor to send the token0sRouting to the detailed page0sStyling the member detailed page0sStyling the member detailed page part two0sAdding a photo gallery0sSection 9 summary0s
-
Updating resourcesIntroduction0sCreating a member edit component0sCreating the edit template form0sAdding the update functionality0sAdding a Can Deactivate route guard0sPersisting the changes in the API0sUpdating the user in the client app0sAdding loading indicators0sUsing the service to store state0sSection 10 summary0s
-
Adding photo upload functionalityIntroduction0sCloudinary Account0sConfiguring cloudinary in the API0sAdding a photo service0sUpdating the users controller0sTesting the photo upload0sUsing the Created At Route method0sAdding a photo editor component0sInstalling legacy npm packages0sAdding a photo uploader0sAdding a photo uploader part two0sSetting the main photo in the API0sAdding the main photo image to the nav bar0sSetting the main photo in the client0sDeleting photos – API0sDeleting photos – Client0sSection 11 summary0s
-
Reactive formsIntroduction0sReactive forms introduction0sClient side validation0sAdding custom validators0sValidation feedback0sCreating a reusable text input0sUsing the form builder service0sExpanding the register form0sAdding a reusable date input0sUpdating the API register method0sClient side registration0sSection 12 summary0s
-
Paging, sorting and filteringIntroduction0sAdding a paged list class0sAdding helper classes for pagination0sUsing the pagination classes0sSetting up client pagination0sUsing the angular bootstrap pagination component0sAdding filtering to the API0sAdding additional filters0sCleaning up the member service0sAdding filter buttons to the client0sAdding sorting functionality0sSorting on the client0sAdding an action filter0sMaking the Last Active action filter more optimal0sFormatting dates0sRestoring the caching for members0sRestoring caching for member detailed0sRemembering the filters for a user in the service0sSection 13 Summary0s
-
Adding the likes featureIntroduction0sAdding a likes entity0sAdding a likes repository0sImplementing the likes repository0sController methods for the likes feature0sSetting up the likes functions in the Angular app0sAdding the toggle functionality0sAdding the lists component0sAdding pagination for the likes0sPaginating the likes on the client0sSection 14 summary0s
-
Adding the Messaging featureIntroduction0sSetting up the entities for messaging0sSetting up the message repository0sSetting up the automapper profiles0sAdding a message controller0sGetting the messages from the Repo0sGetting the message thread for 2 users0sSetting up the Angular app for messaging0sDesigning the inbox0sAdding the message thread in the client0sStyling the message thread0sActivating the message tab0sUsing query params0sUsing route resolvers0sSending messages0sFixing the photo weirdness0sDeleting messages on the API0sDeleting messages on the client0sSummary of Section 150s
-
Identity and role managementIntroduction0sSetting up the entities0sConfiguring the DbContext0sConfiguring the startup class0sRefactoring and adding a new migration0sUpdating the seed method0sUpdating the account controller0sAdding roles to the app0sAdding the roles to the JWT token0sAdding policy based authorisation0sGetting the users with roles0sEditing user roles0sAdding an admin component0sAdding an admin guard0sAdding a custom directive0sAdding the edit roles component0sSetting up modals0sEditing roles in the client0sEditing roles part two0sSummary of section 160s
-
SignalRIntroduction0sAdding a presence hub0sAuthenticating to SignalR0sClient side SignalR0sAdding a presence tracker0sDisplaying online presence0sCreating a message hub0sAdding the send message method to the hub0sAdding the hub connection to the message service0sRefactoring the message components to use the hub0sSending messages via the hub0sTracking the message groups0sUpdating the message hub with group tracking0sDealing with UTC date formats0sNotifying users when they receive a message0sSubscribing to route parameter changes0sOptimizing the presence0sOptimizing the messages0sSection 17 summary0s
-
Unit of work and finishing touchesIntroduction0sImplementing the unit of work0sRefactoring the controllers to use the unit of work0sAdding a confirmation service to the angular app0sAdding a confirmation service to the angular app part 20sTidying up the member message component0sFixing the read message bug0sSection 18 summary0sPhoto management challenge0s
-
PublishingIntroduction0sPreparing the angular app and serving this from the API server0sAdding a fallback controller0sCreating a Sql Server instance0sUsing Sql server for our app0sSetting up Azure for deployment0sSetting up an Azure Sql DB0sSetting up Continuous integration part 10sSetting up Continuous integration part 20sFinal checks0sEnd of course summary0s
-
Appendix A – Updating to .Net 8 and Angular 17/18
-
Legacy version of the course
-
Introduction (Legacy)
-
Building a walking skeleton Part One API (Legacy)Introduction0sCreating the .Net API Project using the dotnet CLI0sSetting up VS code to work with C#0sGetting to know the API project files0sCreating our first Entity0sIntroduction to Entity Framework0sAdding Entity Framework to our project0sAdding a DbContext class0sCreating the Connection string0sCreating the database using Entity Framework Code first migrations0sAdding a new API Controller0sMaking our code Asynchronous0sSaving our code into Source control0sSection 2 Summary0s
-
Building a walking skeleton Part Two Angular (Legacy)Introduction0sCreating the Angular application0sRunning the angular project and reviewing the bootstrap of the app0sAdding VS Code extensions to work with Angular0sMaking HTTP requests in Angular0sAdding CORS support in the API0sDisplaying the fetched users in the browser0sAdding bootstrap and font-awesome0sAdding HTTPS to Angular using mkcert0sSection 3 summary0s
-
Authentication basics (Legacy)Introduction0sSafe storage of passwords0sUpdating the user entity0sCreating a base API controller0sCreating an Account Controller with a register endpoint0sUsing DTOs0sUsing the debugger0sAdding a login endpoint0sJSON web tokens0sAdding a token service0sAdding the create token logic0sCreating a User DTO and returning the token0sAdding the authentication middleware0sAdding extension methods0sSection 4 summary0s
-
Client login and register (Legacy)Introduction0sCreating a nav bar0sIntroduction to Angular template forms0sIntroduction to Angular services0sInjecting services into components0sUsing conditionals to show and remove content0sUsing the angular bootstrap components – dropdown0sIntroduction to observables and signals0sPersisting the login0sAdding a home page0sAdding a register form0sParent to child communication0sChild to parent communication0sHooking up the register method to the service0sSection 5 summary0s
-
Routing in Angular (Legacy)
-
Error handling (Legacy)
-
Extending the API (Legacy)Introduction0sExtending the user entity0sAdding a DateTime extension to calculate age0sEntity Framework relationships0sGenerating seed data0sSeeding data part one0sSeeding data part two0sThe repository pattern0sCreating a repository0sUpdating the users controller0sAdding a DTO for Members0sAdding AutoMapper0sUsing AutoMapper0sConfiguring AutoMapper0sUsing AutoMapper queryable extensions0sSection 8 summary0s
-
Building the User Interface (Legacy)Introduction0sUsing TypeScript0sCreating the member interface0sAdding a member service0sRetrieving the list of members0sCreating member cards0sAdding some style to the cards0sAdding animated buttons0sUsing an interceptor to send the token0sRouting to the detailed page0sStyling the member detailed page0sStyling the member detailed page part two0sAdding a photo gallery0sSection 9 summary0s
-
Updating resources (Legacy)Introduction0sCreating a member edit component0sCreating the edit template form0sAdding the update functionality0sAdding a Can Deactivate route guard0sPersisting the changes in the API0sUpdating the user in the client app0sAdding loading indicators0sUsing the service to store state0sSection 10 summary0s
-
Adding photo upload functionality (Legacy)Introduction0sCloudinary Account0sConfiguring cloudinary in the API0sAdding a photo service0sUpdating the users controller0sTesting the photo upload0sUsing the Created At Route method0sAdding a photo editor component0sAdding a photo uploader0sAdding a photo uploader part two0sSetting the main photo in the API0sAdding the main photo image to the nav bar0sSetting the main photo in the client0sDeleting photos – API0sDeleting photos – Client0sSection 11 summary0s
-
Reactive forms (Legacy)Introduction0sReactive forms introduction0sClient side validation0sAdding custom validators0sValidation feedback0sCreating a reusable text input0sUsing the form builder service0sExpanding the register form0sAdding a reusable date input0sUpdating the API register method0sClient side registration0sSection 12 summary0s
-
Paging Sorting and Filtering (Legacy)Introduction0sAdding a paged list class0sAdding helper classes for pagination0sUsing the pagination classes0sSetting up client pagination0sUsing the angular bootstrap pagination component0sAdding filtering to the API0sAdding additional filters0sCleaning up the member service0sAdding filter buttons to the client0sAdding sorting functionality0sSorting on the client0sAdding an action filter0sMaking the Last Active action filter more optimal0sFormatting dates0sRestoring the caching for members0sRestoring caching for member detailed0sRemembering the filters for a user in the service0sSection 13 Summary0s
-
Adding the Like User feature (Legacy)Introduction0sAdding a likes entity0sAdding a likes repository0sImplementing the likes repository0sController methods for the likes feature0sSetting up the likes functions in the Angular app0sAdding the lists component0sAdding pagination for the likes0sPaginating the likes on the client0sSection 14 summary0s
-
Adding the messaging feature (Legacy)Introduction0sSetting up the entities for messaging0sSetting up the message repository0sSetting up the automapper profiles0sAdding a message controller0sGetting the messages from the Repo0sGetting the message thread for 2 users0sSetting up the Angular app for messaging0sDesigning the inbox0sAdding the message thread in the client0sStyling the message thread0sActivating the message tab0sUsing query params0sUsing route resolvers0sSending messages0sFixing the photo weirdness0sDeleting messages on the API0sDeleting messages on the client0sSummary of Section 150s
-
Identity and role management (Legacy)Introduction0sSetting up the entities0sConfiguring the DbContext0sConfiguring the startup class0sRefactoring and adding a new migration0sUpdating the seed method0sUpdating the account controller0sAdding roles to the app0sAdding the roles to the JWT token0sAdding policy based authorisation0sGetting the users with roles0sEditing user roles0sAdding an admin component0sAdding an admin guard0sAdding a custom directive0sAdding the edit roles component0sSetting up modals0sEditing roles in the client0sEditing roles part two0sSummary of section 160s
-
SignalR (Legacy)Introduction0sAdding a presence hub0sAuthenticating to SignalR0sClient side SignalR0sAdding a presence tracker0sDisplaying online presence0sCreating a message hub0sAdding the send message method to the hub0sAdding the hub connection to the message service0sRefactoring the message components to use the hub0sSending messages via the hub0sTracking the message groups0sUpdating the message hub with group tracking0sDealing with UTC date formats0sNotifying users when they receive a message0sOptimizing the presence0sOptimizing the messages0sSection 17 summary0s
-
Unit of work pattern and finishing touches (Legacy)
-
Publishing (Legacy)Introduction0sPreparing the angular app and serving this from the API server0sAdding a fallback controller0sCreating an angular production build0sSwitching the DB Server to PostGres0sChanging the DB Server in our app0sDockerizing our app0sUpdating the config to use Postgres0sCreating a deployment to fly io0sCreating the config variables for fly io0sUsing github actions0sFixing the issues with the message thread0sAutomating the deployment0sHeroku no longer providing a free serviceSetting up Heroku0sDeploying the app to Heroku0sUsing branches in git and connecting Heroku to GitHub0sMerging changes and redeploying0sEnd of course summary0s
This course has been refreshed and completely updated for .Net 8.0 and Angular 17/18.
Have you learnt the basics of ASP.NET Core and Angular? Not sure where to go next? This course should be able to help with that. In this course we start from nothing and incrementally build up our API and Angular front end until we have a fully functional Web Application that we then publish to IIS and a Linux server.
These are 2 of the hottest frameworks right now for the ‘back-end’ (Microsoft’s ASP.NET Core) and the ‘front-end’ (Google’s Angular) and are well worth spending the time to learn.
In this course we build a complete application from start to finish and every line of code is demonstrated and explained.
This course is right up to date as at June 2024 using .Net 8.0 and Angular 17/18 and as these frameworks evolve, this course will evolve with it.
Read some of the great reviews of the course:
Jim says “The absolute best course for building an API in .Net core and working with Angular!”
Daniyal says: “This is a complete project based course from start to finish with real world experience using technologies that are currently in demand in the market. People interested in learning latest technologies should consider this course.“
Here are some of the things you will learn about in this course:
Setting up the developer environment
Creating the ASP.NET Core WebAPI and the Angular app using the DotNet CLI and the Angular CLI
Adding a Client side login and register function to our Angular application
Adding 3rd party components to add some pizzazz to the app
Adding routing to the Angular application and securing routes.
Using Automapper in ASP.NET Core
Building a great looking UI using Bootstrap
Adding Photo Upload functionality as well as a cool looking gallery in Angular
Angular Template forms and Reactive forms and validation
Paging, Sorting and Filtering
Adding a Private Messaging system to the app
Publishing the application to Heroku free of charge
Using SignalR for real time presence and live messaging between users
Many more things as well
Tools you need for this course
In this course all the lessons are demonstrated using Visual Studio Code, a free (and fantastic) cross platform code editor. You can of course use any code editor you like and any Operating system you like… as long as it’s Windows, Linux or Mac
Is this course for you?
This course is very practical, about 90%+ of the lessons will involve you coding along with me on this project. If you are the type of person who gets the most out of learning by doing, then this course is definitely for you.
On this course we will build an example Dating Application, completely from scratch using the DotNet CLI and the Angular CLI to help us get started. All you will need to get started is a computer with your favourite operating system, and a passion for learning how to build an application using ASP.NET Core and Angular.
What's included
- 32 hours on-demand video
- 1 article
- 3 downloadable resources
- Access on mobile and TV
- Certificate of completion