IIRF Online > Development > Web Development > Angular > Build an app with ASPNET Core and Angular from scratch
Build an app with ASPNET Core and Angular from scratch by Udemy
A practical example of how to build an application with ASP.NET Core API and Angular from start to finish
Course Highlights
- Learn how to build a web application from start to publishing using .Net 8, Entity Framework Core and Angular (v18)
- 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
Skills you will learn!
Curriculum
4 Topics
Introduction to the course
Setting up the developer environment
Getting help
Course assets and source code
14 Topics
Introduction
Creating the .Net API Project using the dotnet CLI
Setting up VS code to work with C#
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
10 Topics
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
Adding HTTPS to Angular using mkcert
Section 3 summary
15 Topics
Introduction
Safe storage of passwords
Updating the user entity
Creating a base API controller
Creating an Account Controller with a register endpoint
Using DTOs
Using the debugger
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
15 Topics
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 and signals
Persisting the login
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
9 Topics
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
Section 6 summary
10 Topics
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
16 Topics
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
14 Topics
Introduction
Using TypeScript
Creating the member interface
Adding a member service
Retrieving the list of members
Creating member cards
Adding some style to the cards
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
10 Topics
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
17 Topics
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
Installing legacy npm packages
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
12 Topics
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
19 Topics
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
Sorting on the client
Adding an action filter
Making the Last Active action filter more optimal
Formatting dates
Restoring the caching for members
Restoring caching for member detailed
Remembering the filters for a user in the service
Section 13 Summary
11 Topics
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 toggle functionality
Adding the likes component
Adding pagination for the likes
Paginating the likes on the client
Section 14 summary
19 Topics
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
Summary of Section 15
20 Topics
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
Summary of section 16
19 Topics
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
Subscribing to route parameter changes
Optimizing the presence
Optimizing the messages
Section 17 summary
9 Topics
Introduction
Implementing the unit of work
Refactoring the controllers to use the unit of work
Adding a confirmation service to the angular app
Adding a confirmation service to the angular app part 2
Tidying up the member message component
Fixing the read message bug
Section 18 summary
Photo management challenge
11 Topics
Introduction
Preparing the angular app and serving this from the API server
Adding a fallback controller
Creating a Sql Server instance
Using Sql server for our app
Setting up Azure for deployment
Setting up an Azure Sql DB
Setting up Continuous integration part 1
Setting up Continuous integration part 2
Final checks
End of course summary
8 Topics
Introduction to this major update
Updating to .Net 8
Nullable reference types
Updating to Angular 17
Updating the project to use standalone components
Updating the interceptors
Updating code to use Angular signals
Updating to Angular 18
1 Topic
About the legacy course
4 Topics
Introduction to the course
Setting up the developer environment
Getting help
Course assets and source code
15 Topics
Introduction
Creating the .Net API Project using the dotnet CLI
Setting up VS code to work with C#
VS Code tips and troubleshooting
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
11 Topics
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
Adding HTTPS to Angular using mkcert
Saving into source control
Section 3 summary
16 Topics
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
16 Topics
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
10 Topics
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
10 Topics
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
16 Topics
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
14 Topics
Introduction
Using TypeScript
Creating the member interface
Adding a member service
Retrieving the list of members
Creating member cards
Adding some style to the cards
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 (Angular 16+)
Section 9 summary
10 Topics
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
16 Topics
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
12 Topics
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
19 Topics
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
10 Topics
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
19 Topics
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
20 Topics
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
18 Topics
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
10 Topics
Introduction
Implementing the unit of work
Refactoring the controllers to use the unit of work
Optimizing queries part one
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
19 Topics
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
Dockerizing our app
Updating the config to use Postgres
Creating a deployment to fly io
Creating the config variables for fly io
Using github actions
Fixing the issues with the message thread
Automating the deployment
Heroku no longer providing a free service
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
5 Topics
Please see next section if you are updating to .Net 7 and Angular 14
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
4 Topics
How to update to .Net 7
How to update to Angular 14
How to update to Bootstrap 5
Enabling Angular strict mode
2 Topics
Updating the Angular project to Angular 16 and updating other packages
Replacing the photo gallery package
1 Topic
Where to access the legacy content (previous version of the course)
Build an app with ASPNET Core and Angular from scratch
Related Angular Courses
Thank You!
Your review has been submitted successfully.