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

Build An App With Aspnet Core And Angular From Scratch
Last updated 1/2023
MP4 | Video: h264, 1280×720 | Audio: AAC, 44.1 KHz

What you’ll learn

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

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

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

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

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 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 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 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 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 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 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

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 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