Build an app with ASPNET Core and Angular from scratch

Udemy

Gain the practical knowledge to develop applications using ASP.NET core API and Angular from the ground up.

Online

₹ 3499

particular

details

                                    Medium of instructions
                                    English

                                    Mode of learning
                                    Self study

                                    Mode of Delivery
                                    Video and Text Based

Introduction

Introduction to the course
Setting up the developer environment
Getting help
Course assets and source code

Building a walking skeleton Part One - API

Introduction
Creating the .Net API Project using the dotnet CLI
Setting up VS code to work with C#
.Net 6 update - switching to the classic hosting model
Getting to know the API project files
Creating our first Entity
Introduction to Entity Framework
Adding Entity Framework to our project
Adding a DbContext class
Creating the Connection string
Creating the database using Entity Framework Code first migrations
Adding a new API Controller
Making our code Asynchronous
Saving our code into Source control
Section 2 Summary

Building a walking skeleton Part Two - Angular

Introduction
Creating the Angular application
Running the angular project and reviewing the bootstrap of the app
Adding VS Code extensions to work with Angular
Making HTTP requests in Angular
Adding CORS support in the API
Displaying the fetched users in the browser
Adding bootstrap and font-awesome
Using HTTPS in angular - MAC
Using HTTPS in angular - WINDOWS
Saving into source control
Section 3 summary

Authentication basics

Introduction
Safe storage of passwords
Updating the user entity
Creating a base API controller
Creating an Account Controller with a register endpoint
Using the debugger
Using DTOs
Adding validation
Adding a login endpoint
JSON web tokens
Adding a token service
Adding the create token logic
Creating a User DTO and returning the token
Adding the authentication middleware
Adding extension methods
Section 4 summary

Client login and register

Introduction
Creating a nav bar
Introduction to Angular template forms
Introduction to Angular services
Injecting services into components
Using conditionals to show and remove content
Using the angular bootstrap components - dropdown
Introduction to observables
Persisting the login
Using the async pipe
Adding a home page
Adding a register form
Parent to child communication
Child to parent communication
Hooking up the register method to the service
Section 5 summary

Routing in Angular

Introduction
Creating some more components
Adding the nav links
Routing in code
Adding a toast service for notifications
Adding an Angular route guard
Adding a dummy route
Adding a new theme
Tidying up the app module by using a shared module
Section 6 summary

Error handling

Introduction
Creating an error controller for testing errors
Handling server errors
Exception handling middleware
Testing errors in the client
Adding an error interceptor
Validation errors
Handling not found
Adding a server error page
Section 7 summary

Extending the API

Introduction
Extending the user entity
Adding a DateTime extension to calculate age
Entity Framework relationships
Generating seed data
Seeding data part one
Seeding data part two
The repository pattern
Creating a repository
Updating the users controller
Adding a DTO for Members
Adding AutoMapper
Using AutoMapper
Configuring AutoMapper
Using AutoMapper queryable extensions
Section 8 summary

Building the User Interface

Introduction
Using TypeScript
Creating the member interface
Adding a member service
Retrieving the list of members
Creating member cards
Adding some styles to the card
Adding animated buttons
Using an interceptor to send the token
Routing to the detailed page
Styling the member detailed page
Styling the member detailed page part two
Adding a photo gallery
Section 9 summary

Updating resources

Introduction
Creating a member edit component
Creating the edit template form
Adding the update functionality
Adding a Can Deactivate route guard
Persisting the changes in the API
Updating the user in the client app
Adding loading indicators
Using the service to store state
Section 10 summary

Adding photo upload functionality

Introduction
Cloudinary Account
Configuring cloudinary in the API
Adding a photo service
Updating the users controller
Testing the photo upload
Using the Created At Route method
Adding a photo editor component
Adding a photo uploader
Adding a photo uploader part two
Setting the main photo in the API
Adding the main photo image to the nav bar
Setting the main photo in the client
Deleting photos - API
Deleting photos - Client
Section 11 summary

Reactive forms

Introduction
Reactive forms introduction
Client side validation
Adding custom validators
Validation feedback
Creating a reusable text input
Using the form builder service
Expanding the register form
Adding a reusable date input
Updating the API register method
Client side registration
Section 12 summary

Paging, Sorting and Filtering

Introduction
Adding a paged list class
Adding helper classes for pagination
Using the pagination classes
Setting up client pagination
Using the angular bootstrap pagination component
Adding filtering to the API
Adding additional filters
Cleaning up the member service
Adding filter buttons to the client
Adding sorting functionality
Adding an action filter
Making the Last Active action filter more optimal
Sorting on the client
Formatting dates
Restoring the caching for members
Restoring caching for member detailed
Remembering the filters for a user in the service
Section 13 summary

Adding the Like User feature

Introduction
Adding a likes entity
Adding a likes repository
Implementing the likes repository
Controller methods for the likes feature
Setting up the likes functions in the Angular app
Adding the likes component
Adding pagination for the likes
Paginating the likes on the client
Section 14 summary

Adding the messaging feature

Introduction
Setting up the entities for messaging
Setting up the message repository
Setting up the automapper profiles
Adding a message controller
Getting the messages from the Repo
Getting the message thread for 2 users
Setting up the Angular app for messaging
Designing the inbox
Adding the message thread in the client
Styling the message thread
Activating the message tab
Using query params
Using route resolvers
Sending messages
Fixing the photo weirdness
Deleting messages on the API
Deleting messages on the client
Section 15 summary

Identity and role management

Introduction
Setting up the entities
Configuring the DbContext
Configuring the startup class
Refactoring and adding a new migration
Updating the seed method
Updating the account controller
Adding roles to the app
Adding the roles to the JWT token
Adding policy based authorisation
Getting the users with roles
Editing user roles
Adding an admin component
Adding an admin guard
Adding a custom directive
Adding the edit roles component
Setting up modals
Editing roles in the client
Editing roles part two
Section 16 summary

SignalR

Introduction
Adding a presence hub
Authenticating to SignalR
Client side SignalR
Adding a presence tracker
Displaying online presence
Creating a message hub
Adding the send message method to the hub
Adding the hub connection to the message service
Refactoring the message components to use the hub
Sending messages via the hub
Tracking the message groups
Updating the message hub with group tracking
Dealing with UTC date formats
Notifying users when they receive a message
Optimizing the presence
Optimizing the messages
Section 17 summary

Unit of work pattern and finishing touches

Introduction
Implementing the unit of work
Refactoring the controllers to use the unit of work
Optimizing queries part one
Fixing UTC dates again
Optimizing queries part two
Adding a confirmation service to the angular app
Getting the data from the confirmation modal
Tidying up the member message component
Section 18 summary
Photo management challenge

Publishing

Introduction
Preparing the angular app and serving this from the API server
Adding a fallback controller
Creating an angular production build
Switching the DB Server to PostGres
Changing the DB Server in our app
Setting up Heroku
Deploying the app to Heroku
Using branches in git and connecting Heroku to GitHub
Merging changes and redeploying
End of course summary

Updating to .Net 6, Angular 12 and Bootstrap

How to update .Net 5 to .Net 6
.Net 6 new features and how to update the project to use them
Updating Angular to v12
How to update Bootstrap to v5

Bonus - Legacy Content

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

Popular Courses

Popular Platforms

Popular Searches

Build an app with ASPNET Core and Angular from scratch

Online

₹ 3499

Quick Facts

Course overview

The highlights

Program offerings

Course and certificate fees

Fees information

certificate availability

certificate providing authority

Who it is for

What you will learn

The syllabus