
Learn to implement dotnet core seven back-end API integrated with angular front end. Use priming and bootstrap for UI, publish back end on Azure Portal, and front-end on GitHub pages.
Explore the final e-commerce app interface built with .NET and Angular, featuring login and registration with validation, product details, cart management, search, and bootstrap and priming components.
Install and configure the development stack for a .NET core web API, including .NET 7.0 SDK, Node.js 18.x, Visual Studio Code, Visual Studio 2022, and Postman for testing endpoints.
Create a .NET 7 ASP.NET core web API in Visual Studio Code and configure appsettings.json and program.cs. Preview swagger and a single endpoint exposed by a controller.
Create an application user entity and a data context derived from IdentityDbContext, integrating with ASP.NET Core Identity and EF Core.
Connect your dotnet core app to a Microsoft SQL Server by configuring appsettings.json and running EF Core migrations to create and verify the e-commerce database tables.
Create an identity service extension to wire identity with the application user and role, configure password rules, entity framework stores, and JWT bearer authentication with app settings.
Set up a token generation service and interface to produce a jwt with user claims, key from appsettings.json, and seven days expiry, and register as scoped in app service extensions.
Create seed data to populate the database with three initial users and product records by building a static SeedData class, configuring the data context, and running migrations.
Create an account controller with register and login endpoints in a .NET MVC app, inject user and sign in managers and token service to generate tokens, then test with Postman.
Create an Angular frontend for the e-commerce app by scaffolding a new project, building core components like nav, carousel, sidebar, and footer, and wiring login and register endpoints.
Build the frontend app skeleton by creating a root folder and adding assets and images; configure angular.json with styles and scripts and set up routing with a navbar.
Create an account service to handle login and register using the backend base URL, configure http client, and wire up account/login and account/register endpoints while updating the bootstrap navbar visibility.
Implement login and logout flows in an angular e-commerce app by storing the user in local storage, showing a login modal, validating inputs, and handling a CORS policy error.
Enable authentication and a CORS policy in the API, and configure JSON serialization with reference loop handling. Test login on the front end and verify login state in local storage.
Refresh the page after login to update buttons and hide the register option, and display toasts for login success or failure using the login success and login failure keys.
Create the registration component and register user model, initialize the form with validations for title, username, date of birth, and email, and wire up the register route.
Implement password and password confirmation validation for the register form in an Angular app, using a regex for password strength, ngModel bindings, and inline error messages.
Fix the register form presentation by adding address fields with required validations, populate state options via ng on init, and disable the register button when the form is invalid.
Wire the register form to the account service, subscribe to the observable, and show success or error toasts with the message service; validate inputs and test registration.
Create a new products controller with http get endpoints to fetch all products and a single product by id for the index carousel, using async context queries.
Create an Angular products service using Http client and the environment base URL to fetch all products and a product by id, returning observables of products and a product model.
Copy and paste the provided html and css to build the index page, then display products with a carousel fed by the product service via getAllProducts.
Implement pagination for the products on the index page using a paginator, define rows per page, and initialize the paginated view on startup to keep the list concise.
Create a product detail page by adding a product details component, wiring routes and router links, and fetching a product by id from a service.
Finalize the product details page by removing the euro from the price and reuse the index's paginator for related products, with ngOnInit initialization and ngIf guard.
Create a cart and cart item models linked to users, implement add-to-cart events on product details and main pages, and run migrations to update the database.
Create a backend cart controller in the .NET API and persist a user's cart across sessions. Add products to the cart with quantity management, handling existing items and cart items.
Create a back-end cart items count endpoint and wire a front-end service to display a badge showing the cart item count when adding to cart.
Learn to implement add to cart in an .NET and Angular e-commerce app using ng on init to load user data from local storage, update cart counts, and show toasts.
Improve the add to cart flow by enabling product detail page integration, shorten toast durations to two seconds, and persist cart data with local storage via a subscribed product service.
Explore building a cart controller with endpoints to get a user's cart, fetch cart items, update item quantities, compute total price, and delete items.
continue building the cart service on the frontend, implementing get cart items, change product quantity, and delete cart item, using the base url and observables to manage the cart.
Create and connect a cart component in an Angular e-commerce app, wire cart route, fetch user cart items, and compute the total price with increment, decrement, and delete item actions.
Implement update total price and update cart item logic in the cart component. Handle increment, decrement, quantity change, and delete item with cart service and message service, and reload.
Prevent negative cart quantities, fix delete by item id, ensure accurate total price, and plan a contact page with an embedded map before deployment.
Set up a contact page with a new contact component and router link, and implement a sidebar that ensures only one submenu opens at a time.
Implement a backend endpoint to filter products by name, connect it to an Angular front end search form, and update the displayed results with pagination.
Learn to implement a loading bar for every http request by building a loading service with a behavior subject, start/stop logic, and an http interceptor in Angular.
Deploy the backend to Azure by creating a web app and SQL Server, updating the connection string, running migrations, and validating the get all products endpoint.
Create a GitHub repository, push your e-commerce UI project using git add, commit, and git push origin main, then configure the docs folder and GitHub Pages for deployment.
Publish an Angular e-commerce app to GitHub pages by building with ng build, placing dist contents in a docs folder, and configuring base URLs.
Build a fullsatck .Net Core / Angular e-commerce Application.
This course covers in detail every aspect of creating a backend with .Net Core. It also teaches you how to test your routes by using a mock api software named Postman. Further more, you are to discover everything there is to know about a frontend coded with Angular.
About the UI Library you will be using in this course : PrimeNG is a collection of rich UI components for Angular. All widgets are open source and free to use under MIT License. PrimeNG is developed by PrimeTek Informatics, a vendor with years of expertise in developing open source UI solutions.
We will be deploying our app in Azure Portal and Github Pages. The Azure portal is a web-based, unified console that provides an alternative to command-line tools. You can manage your Azure subscription with the Azure portal. Build, manage, and monitor everything from simple web apps to complex cloud deployments.
For the database, we will use Microsoft SQL Server on a local scale, then publish the database in Azure.
This course targets developers from different levels, from intermediate to advanced programming levels (not beginners).
You are expected to know the very basic terms of Javascript, Angular and .Net Core such as "Services", "Components", "npm packages", "Controllers", "Extensions"... .