Building eCommerce Angular Application

Complete guide to build enterprise edition application end to end

Description

This course is 5th edition of building Creating .Net Core Microservices using Clean Architecture. In this course you will learn how to implement Identity Server 4. You will also learn how to secure your microservices using Identity Server 4. You will learn how to implement different kinds of security principles at different levels of microservices. By the end of this course you’ll be having full featured angular application consuming APIs. In this course you will first start with angular folder setup, then you will start implementing different feature modules say Home, Core, Shared, Basket etc. After this, you will be setting up basic routing first and then lazy loading of feature modules. You will also be implementing all cross cutting concerns which is required for any frontend store. After implementing all required changes, then you will be integrating Identity Server 4 implementation with your angular application. In this section, you will also enable auth guard to protect the routes and hence setting up OIDC client to interact with server side counterpart. Apart from these, you will be learning tons of features in this segment. Other parts of this series include

1. Getting Started with Microservices using Clean Architecture

2. Securing Microservices using Identity Server 4

3. Implementing Cross Cutting Concerns

4. Versioning Microservices

5. Building Angular Application for MicroServices (Current Course)

6. Deploying Microservices to Kubernetes and AKS

IDE Required:- You can either use Visual Studio or JetBrains Rider, or VS Code itself.

Coupon Code:- 875C44899021806DE018

In this edition you will learn below topics:

  • Introduction
  • Introduction
  • Angular Installation Steps
  • Branching Strategy
  • Angular project setup
  • Identity Server Changes
  • Angular VS Code Extensions
  • Getting Started with Angular
  • Understanding Angular project structure
  • Installing ngx-bootstrap package
  • Installing Font Awesome
  • Adding a Navbar component
  • Adding Navbar Component HTML
  • Observable Vs Promise
  • Implementing Http Client
  • Enabling CORS
  • Fetching Products
  • Implementing Paginated Product Model
  • Building the Store Front
  • Creating Feature Modules
  • Creating the Store Components
  • Creating the Store Service
  • Consuming the Store Service
  • Modifying Store Page
  • Creating Product Items Page
  • Passing Data to Child Component
  • Adding Images and Product Page changes
  • Fetching Brands and Types
  • Markup Changes for Types and Brands
  • Implementing Brand and Type Selected Functionality
  • Hooking up HTML changes for filtering functionality
  • Applying Spread Operator
  • Implementing Sorting
  • Adding Pagination Module
  • Implementing Pagination Component
  • Implementing Pagination – 2nd Part
  • Adding Pagination Header
  • Implementing Search and Reset Filter
  • Routing
  • Creating Home and Product Detail module
  • Creating Routes
  • Creating Router Links in Navbar
  • Activating Router Links
  • Fetching Product Detail
  • Adding Markup to Product detail page
  • Implementing Lazy Loading
  • Error Handling
  • Introduction
  • Error Interceptor
  • Implementing Error Interceptor
  • Improving Error pages
  • UI Components
  • Introduction
  • Creating Header Component
  • Adding XNG BreadCrumb Module
  • Adding BreadCrumb Metadata
  • Adding BreadCrumb Alias
  • Setting Breadcrumb dynamically
  • Adding Loading Interceptor
  • Implementing Ngx Spinner
  • Implementing Home Page
  • Basket Implementation
  • Creating Basket setup
  • Creating Basket Types
  • Creating Basket Service
  • Creating Basket methods
  • Adding Items to Basket
  • Fetching Basket with Username
  • Updating Basket Icon value dynamically
  • Implementing Basket Page
  • Creating Basket total method
  • Creating the Order Summary Component
  • Creating Basket addition deletion remove functionality
  • Wiring up Basket HTML with cart functionality
  • Implementing Product detail page
  • Identity Server Client Implementation
  • Account Module Creation
  • Account Routing fix
  • Server Side Changes
  • Understanding Checkout Module
  • Understanding Account Module
  • Understanding Account service
  • Can Activate Route Guard Issue With Angular 15
  • UnInstallation Steps
  • Package.json changes
  • Silent Callback changes
  • Basket service changes
  • Understanding Checkout module changes
  • Navbar changes
  • 401 Error Interceptor demo
  • Checkout giving 400 Error
  • Demo
  • What’s Next
  • What’s Next

Who this course is for:

  • Beginners, Intermediate or even Advanced level candidates who wanted to refine their Microservices knowledge using .Net core and other tons of different technologies

Tutorial Bar
Logo