Build An App With Aspnet Core And Angular From Scratch (updated 1/2023)

A practical example of how to build an application with ASP.NET Core API and Angular from start to finish

What you'll learn

Learn how to build a web application from start to publishing using ASPNET Core (v2.1), Entity Framework Core and Angular (v6)

Students who complete this course will have a practical understanding of Angular and ASPNET Core

Understand how to structure an Angular application using best practices

Learn how to integrate 3rd party components into the Angular application

Use Visual Studio code effectively to improve workflow

Use AutoMapper

Implement drag and drop photo upload integrating into a cloud platform

Implement a private messaging system

Implement filtering, sorting and paging of data

Display notifications in Angular

Implement Authentication using JWT Authentication tokens

Handling errors in the API and the SPA

Persist data using Entity Framework Core

Real time notifications and presence using SignalR

Requirements

Hello world experience in ASPNET Core and Angular

A passion for wanting to learn how to build a fully functional Web Application

Description

This course has been refreshed and completely updated for .Net 7.0 and Angular 14.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 November 2022 using .Net 7.0 and Angular v14 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 environmentCreating the ASP.NET Core WebAPI and the Angular app using the DotNet CLI and the Angular CLIAdding a Client side login and register function to our Angular applicationAdding 3rd party components to add some pizzazz to the appAdding routing to the Angular application and securing routes.Using Automapper in ASP.NET CoreBuilding a great looking UI using BootstrapAdding Photo Upload functionality as well as a cool looking gallery in AngularAngular Template forms and Reactive forms and validationPaging, Sorting and FilteringAdding a Private Messaging system to the appPublishing the application to Heroku free of chargeUsing SignalR for real time presence and live messaging between usersMany more things as wellTools you need for this courseIn 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 MacIs 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.

Overview

Section 1: Introduction

Lecture 1 Introduction to the course

Lecture 2 Setting up the developer environment

Lecture 3 Getting help

Lecture 4 Course assets and source code

Section 2: Building a walking skeleton Part One - API

Lecture 5 Introduction

Lecture 6 Creating the .Net API Project using the dotnet CLI

Lecture 7 Setting up VS code to work with C#

Lecture 8 Getting to know the API project files

Lecture 9 Creating our first Entity

Lecture 10 Introduction to Entity Framework

Lecture 11 Adding Entity Framework to our project

Lecture 12 Adding a DbContext class

Lecture 13 Creating the Connection string

Lecture 14 Creating the database using Entity Framework Code first migrations

Lecture 15 Adding a new API Controller

Lecture 16 Making our code Asynchronous

Lecture 17 Saving our code into Source control

Lecture 18 Section 2 Summary

Section 3: Building a walking skeleton Part Two - Angular

Lecture 19 Introduction

Lecture 20 Creating the Angular application

Lecture 21 Running the angular project and reviewing the bootstrap of the app

Lecture 22 Adding VS Code extensions to work with Angular

Lecture 23 Making HTTP requests in Angular

Lecture 24 Adding CORS support in the API

Lecture 25 Displaying the fetched users in the browser

Lecture 26 Adding bootstrap and font-awesome

Lecture 27 Using HTTPS in angular - MAC

Lecture 28 Using HTTPS in angular - WINDOWS

Lecture 29 Saving into source control

Lecture 30 Section 3 summary

Section 4: Authentication basics

Lecture 31 Introduction

Lecture 32 Safe storage of passwords

Lecture 33 Updating the user entity

Lecture 34 Creating a base API controller

Lecture 35 Creating an Account Controller with a register endpoint

Lecture 36 Using the debugger

Lecture 37 Using DTOs

Lecture 38 Adding validation

Lecture 39 Adding a login endpoint

Lecture 40 JSON web tokens

Lecture 41 Adding a token service

Lecture 42 Adding the create token logic

Lecture 43 Creating a User DTO and returning the token

Lecture 44 Adding the authentication middleware

Lecture 45 Adding extension methods

Lecture 46 Section 4 summary

Section 5: Client login and register

Lecture 47 Introduction

Lecture 48 Creating a nav bar

Lecture 49 Introduction to Angular template forms

Lecture 50 Introduction to Angular services

Lecture 51 Injecting services into components

Lecture 52 Using conditionals to show and remove content

Lecture 53 Using the angular bootstrap components - dropdown

Lecture 54 Introduction to observables

Lecture 55 Persisting the login

Lecture 56 Using the async pipe

Lecture 57 Adding a home page

Lecture 58 Adding a register form

Lecture 59 Parent to child communication

Lecture 60 Child to parent communication

Lecture 61 Hooking up the register method to the service

Lecture 62 Section 5 summary

Section 6: Routing in Angular

Lecture 63 Introduction

Lecture 64 Creating some more components

Lecture 65 Adding the nav links

Lecture 66 Routing in code

Lecture 67 Adding a toast service for notifications

Lecture 68 Adding an Angular route guard

Lecture 69 Adding a dummy route

Lecture 70 Adding a new theme

Lecture 71 Tidying up the app module by using a shared module

Lecture 72 Section 6 summary

Section 7: Error handling

Lecture 73 Introduction

Lecture 74 Creating an error controller for testing errors

Lecture 75 Handling server errors

Lecture 76 Exception handling middleware

Lecture 77 Testing errors in the client

Lecture 78 Adding an error interceptor

Lecture 79 Validation errors

Lecture 80 Handling not found

Lecture 81 Adding a server error page

Lecture 82 Section 7 summary

Section 8: Extending the API

Lecture 83 Introduction

Lecture 84 Extending the user entity

Lecture 85 Adding a DateTime extension to calculate age

Lecture 86 Entity Framework relationships

Lecture 87 Generating seed data

Lecture 88 Seeding data part one

Lecture 89 Seeding data part two

Lecture 90 The repository pattern

Lecture 91 Creating a repository

Lecture 92 Updating the users controller

Lecture 93 Adding a DTO for Members

Lecture 94 Adding AutoMapper

Lecture 95 Using AutoMapper

Lecture 96 Configuring AutoMapper

Lecture 97 Using AutoMapper queryable extensions

Lecture 98 Section 8 summary

Section 9: Building the User Interface

Lecture 99 Introduction

Lecture 100 Using TypeScript

Lecture 101 Creating the member interface

Lecture 102 Adding a member service

Lecture 103 Retrieving the list of members

Lecture 104 Creating member cards

Lecture 105 Adding some style to the cards

Lecture 106 Adding animated buttons

Lecture 107 Using an interceptor to send the token

Lecture 108 Routing to the detailed page

Lecture 109 Styling the member detailed page

Lecture 110 Styling the member detailed page part two

Lecture 111 Adding a photo gallery

Lecture 112 Section 9 summary

Section 10: Updating resources

Lecture 113 Introduction

Lecture 114 Creating a member edit component

Lecture 115 Creating the edit template form

Lecture 116 Adding the update functionality

Lecture 117 Adding a Can Deactivate route guard

Lecture 118 Persisting the changes in the API

Lecture 119 Updating the user in the client app

Lecture 120 Adding loading indicators

Lecture 121 Using the service to store state

Lecture 122 Section 10 summary

Section 11: Adding photo upload functionality

Lecture 123 Introduction

Lecture 124 Cloudinary Account

Lecture 125 Configuring cloudinary in the API

Lecture 126 Adding a photo service

Lecture 127 Updating the users controller

Lecture 128 Testing the photo upload

Lecture 129 Using the Created At Route method

Lecture 130 Adding a photo editor component

Lecture 131 Adding a photo uploader

Lecture 132 Adding a photo uploader part two

Lecture 133 Setting the main photo in the API

Lecture 134 Adding the main photo image to the nav bar

Lecture 135 Setting the main photo in the client

Lecture 136 Deleting photos - API

Lecture 137 Deleting photos - Client

Lecture 138 Section 11 summary

Section 12: Reactive forms

Lecture 139 Introduction

Lecture 140 Reactive forms introduction

Lecture 141 Client side validation

Lecture 142 Adding custom validators

Lecture 143 Validation feedback

Lecture 144 Creating a reusable text input

Lecture 145 Using the form builder service

Lecture 146 Expanding the register form

Lecture 147 Adding a reusable date input

Lecture 148 Updating the API register method

Lecture 149 Client side registration

Lecture 150 Section 12 summary

Section 13: Paging, Sorting and Filtering

Lecture 151 Introduction

Lecture 152 Adding a paged list class

Lecture 153 Adding helper classes for pagination

Lecture 154 Using the pagination classes

Lecture 155 Setting up client pagination

Lecture 156 Using the angular bootstrap pagination component

Lecture 157 Adding filtering to the API

Lecture 158 Adding additional filters

Lecture 159 Cleaning up the member service

Lecture 160 Adding filter buttons to the client

Lecture 161 Adding sorting functionality

Lecture 162 Adding an action filter

Lecture 163 Making the Last Active action filter more optimal

Lecture 164 Sorting on the client

Lecture 165 Formatting dates

Lecture 166 Restoring the caching for members

Lecture 167 Restoring caching for member detailed

Lecture 168 Remembering the filters for a user in the service

Lecture 169 Section 13 summary

Section 14: Adding the Like User feature

Lecture 170 Introduction

Lecture 171 Adding a likes entity

Lecture 172 Adding a likes repository

Lecture 173 Implementing the likes repository

Lecture 174 Controller methods for the likes feature

Lecture 175 Setting up the likes functions in the Angular app

Lecture 176 Adding the likes component

Lecture 177 Adding pagination for the likes

Lecture 178 Paginating the likes on the client

Lecture 179 Section 14 summary

Section 15: Adding the messaging feature

Lecture 180 Introduction

Lecture 181 Setting up the entities for messaging

Lecture 182 Setting up the message repository

Lecture 183 Setting up the automapper profiles

Lecture 184 Adding a message controller

Lecture 185 Getting the messages from the Repo

Lecture 186 Getting the message thread for 2 users

Lecture 187 Setting up the Angular app for messaging

Lecture 188 Designing the inbox

Lecture 189 Adding the message thread in the client

Lecture 190 Styling the message thread

Lecture 191 Activating the message tab

Lecture 192 Using query params

Lecture 193 Using route resolvers

Lecture 194 Sending messages

Lecture 195 Fixing the photo weirdness

Lecture 196 Deleting messages on the API

Lecture 197 Deleting messages on the client

Lecture 198 Section 15 summary

Section 16: Identity and role management

Lecture 199 Introduction

Lecture 200 Setting up the entities

Lecture 201 Configuring the DbContext

Lecture 202 Configuring the startup class

Lecture 203 Refactoring and adding a new migration

Lecture 204 Updating the seed method

Lecture 205 Updating the account controller

Lecture 206 Adding roles to the app

Lecture 207 Adding the roles to the JWT token

Lecture 208 Adding policy based authorisation

Lecture 209 Getting the users with roles

Lecture 210 Editing user roles

Lecture 211 Adding an admin component

Lecture 212 Adding an admin guard

Lecture 213 Adding a custom directive

Lecture 214 Adding the edit roles component

Lecture 215 Setting up modals

Lecture 216 Editing roles in the client

Lecture 217 Editing roles part two

Lecture 218 Section 16 summary

Section 17: SignalR

Lecture 219 Introduction

Lecture 220 Adding a presence hub

Lecture 221 Authenticating to SignalR

Lecture 222 Client side SignalR

Lecture 223 Adding a presence tracker

Lecture 224 Displaying online presence

Lecture 225 Creating a message hub

Lecture 226 Adding the send message method to the hub

Lecture 227 Adding the hub connection to the message service

Lecture 228 Refactoring the message components to use the hub

Lecture 229 Sending messages via the hub

Lecture 230 Tracking the message groups

Lecture 231 Updating the message hub with group tracking

Lecture 232 Dealing with UTC date formats

Lecture 233 Notifying users when they receive a message

Lecture 234 Optimizing the presence

Lecture 235 Optimizing the messages

Lecture 236 Section 17 summary

Section 18: Unit of work pattern and finishing touches

Lecture 237 Introduction

Lecture 238 Implementing the unit of work

Lecture 239 Refactoring the controllers to use the unit of work

Lecture 240 Optimizing queries part one

Lecture 241 Optimizing queries part two

Lecture 242 Adding a confirmation service to the angular app

Lecture 243 Getting the data from the confirmation modal

Lecture 244 Tidying up the member message component

Lecture 245 Section 18 summary

Lecture 246 Photo management challenge

Section 19: Publishing

Lecture 247 Introduction

Lecture 248 Preparing the angular app and serving this from the API server

Lecture 249 Adding a fallback controller

Lecture 250 Creating an angular production build

Lecture 251 Switching the DB Server to PostGres

Lecture 252 Changing the DB Server in our app

Lecture 253 Dockerizing our app

Lecture 254 Updating the config to use Postgres

Lecture 255 Creating a deployment to fly io

Lecture 256 Creating the config variables for fly io

Lecture 257 Using github actions

Lecture 258 Fixing the issues with the message thread

Lecture 259 Automating the deployment

Lecture 260 Heroku no longer providing a free service

Lecture 261 Setting up Heroku

Lecture 262 Deploying the app to Heroku

Lecture 263 Using branches in git and connecting Heroku to GitHub

Lecture 264 Merging changes and redeploying

Lecture 265 End of course summary

Section 20: Updating to .Net 6, Angular 12 and Bootstrap 5

Lecture 266 Please see next section if you are updating to .Net 7 and Angular 14

Lecture 267 How to update .Net 5 to .Net 6

Lecture 268 .Net 6 new features and how to update the project to use them

Lecture 269 Updating Angular to v12

Lecture 270 How to update Bootstrap to v5

Section 21: Updating to .Net 7, Angular 14 and Bootstrap 5

Lecture 271 How to update to .Net 7

Lecture 272 How to update to Angular 14

Lecture 273 How to update to Bootstrap 5

Lecture 274 Enabling Angular strict mode

Section 22: Bonus - Legacy Content

Lecture 275 Where to access the legacy content (previous version of the course)

Beginners to ASPNET Core and Angular who want to learn practical usage of these frameworks to build a compelling and functional application,Students who like to learn by doing rather than learning by theory