Building Ecommerce Angular Application

Complete guide to build enterprise edition application end to end

What you'll learn

Learn how to build Angular Applications from scratch

Learn how to design eCommerce Application from scratch

Learn how to implement feature driven modules

Learn how to implement lazy loading

Learn how to implement pagination

Learn how to implement sorting

Learn how to implement searching

Learn how to implement Error Interceptors

Learn how to implement Breadcrumbs

Requirements

Basics of Angular

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 include1. Getting Started with Microservices using Clean Architecture2. Securing Microservices using Identity Server 43. Implementing Cross Cutting Concerns 4. Versioning Microservices5. Building Angular Application for MicroServices (Current Course)6. Deploying Microservices to Kubernetes and AKSIDE Required:- You can either use Visual Studio or JetBrains Rider, or VS Code itself. In this edition you will learn below topics:IntroductionIntroductionAngular Installation StepsBranching StrategyAngular project setupIdentity Server ChangesAngular VS Code ExtensionsGetting Started with AngularUnderstanding Angular project structureInstalling ngx-bootstrap packageInstalling Font AwesomeAdding a Navbar componentAdding Navbar Component HTMLObservable Vs PromiseImplementing Http ClientEnabling CORSFetching ProductsImplementing Paginated Product ModelBuilding the Store FrontCreating Feature ModulesCreating the Store ComponentsCreating the Store ServiceConsuming the Store ServiceModifying Store PageCreating Product Items PagePassing Data to Child ComponentAdding Images and Product Page changesFetching Brands and TypesMarkup Changes for Types and BrandsImplementing Brand and Type Selected FunctionalityHooking up HTML changes for filtering functionalityApplying Spread OperatorImplementing SortingAdding Pagination ModuleImplementing Pagination ComponentImplementing Pagination - 2nd PartAdding Pagination HeaderImplementing Search and Reset FilterRoutingCreating Home and Product Detail moduleCreating RoutesCreating Router Links in NavbarActivating Router LinksFetching Product DetailAdding Markup to Product detail pageImplementing Lazy LoadingError HandlingIntroductionError InterceptorImplementing Error InterceptorImproving Error pagesUI ComponentsIntroductionCreating Header ComponentAdding XNG BreadCrumb ModuleAdding BreadCrumb MetadataAdding BreadCrumb AliasSetting Breadcrumb dynamicallyAdding Loading InterceptorImplementing Ngx SpinnerImplementing Home PageBasket ImplementationCreating Basket setupCreating Basket TypesCreating Basket ServiceCreating Basket methodsAdding Items to BasketFetching Basket with UsernameUpdating Basket Icon value dynamicallyImplementing Basket PageCreating Basket total methodCreating the Order Summary ComponentCreating Basket addition deletion remove functionalityWiring up Basket HTML with cart functionalityImplementing Product detail pageIdentity Server Client ImplementationAccount Module CreationAccount Routing fixServer Side ChangesUnderstanding Checkout ModuleUnderstanding Account ModuleUnderstanding Account serviceCan Activate Route Guard Issue With Angular 15UnInstallation StepsPackage.json changesSilent Callback changesBasket service changesUnderstanding Checkout module changesNavbar changes401 Error Interceptor demoCheckout giving 400 ErrorDemoWhat's NextWhat's Next

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Angular Installation Steps

Lecture 3 Branching Strategy

Lecture 4 Angular project setup

Lecture 5 Identity Server Changes

Lecture 6 Angular VS Code Extensions

Section 2: Getting Started with Angular

Lecture 7 Understanding Angular project structure

Lecture 8 Installing ngx-bootstrap package

Lecture 9 Installing Font Awesome

Lecture 10 Adding a Navbar component

Lecture 11 Adding Navbar Component HTML

Lecture 12 Observable Vs Promise

Lecture 13 Implementing Http Client

Lecture 14 Enabling CORS

Lecture 15 Fetching Products

Lecture 16 Implementing Paginated Product Model

Section 3: Building the Store Front

Lecture 17 Creating Feature Modules

Lecture 18 Creating the Store Components

Lecture 19 Creating the Store Service

Lecture 20 Consuming the Store Service

Lecture 21 Modifying Store Page

Lecture 22 Creating Product Items Page

Lecture 23 Passing Data to child Component

Lecture 24 Adding Images and Product Page changes

Lecture 25 Fetching Brands and Types

Lecture 26 Markup Changes for Types and Brands

Lecture 27 Implementing Brand and Type Selected Functionality

Lecture 28 Hooking up HTML changes for filtering functionality

Lecture 29 Applying Spread Operator

Lecture 30 Implementing Sorting

Lecture 31 Adding Pagination Module

Lecture 32 Implementing Pagination Component

Lecture 33 Implementing Pagination - 2nd Part

Lecture 34 Adding Pagination Header

Lecture 35 Implementing Search and Reset Filter

Section 4: Routing

Lecture 36 Creating Home and Product Detail module

Lecture 37 Creating Routes

Lecture 38 Creating Router Links in Navbar

Lecture 39 Activating Router Links

Lecture 40 Fetching Product Detail

Lecture 41 Adding Markup to Product detail page

Lecture 42 Implementing Lazy Loading

Section 5: Error Handling

Lecture 43 Introduction

Lecture 44 Error Interceptor

Lecture 45 Implementing Error Interceptor

Lecture 46 Improving Error pages

Section 6: UI Components

Lecture 47 Introduction

Lecture 48 Creating Header Component

Lecture 49 Adding XNG BreadCrumb Module

Lecture 50 Adding BreadCrumb Metadata

Lecture 51 Adding BreadCrumb Alias

Lecture 52 Setting Breadcrumb dynamically

Lecture 53 Adding Loading Interceptor

Lecture 54 Implementing Ngx Spinner

Lecture 55 Implementing Home Page

Section 7: Basket Implementation

Lecture 56 Introduction

Lecture 57 Creating Basket setup

Lecture 58 Creating Basket Types

Lecture 59 Creating Basket Service

Lecture 60 Creating Basket methods

Lecture 61 Adding Items to Basket

Lecture 62 Fetching Basket with Username

Lecture 63 Updating Basket Icon value dynamically

Lecture 64 Implementing Basket Page

Lecture 65 Creating Basket total method

Lecture 66 Creating the Order Summary Component

Lecture 67 Creating Basket addition deletion remove functionality

Lecture 68 Wiring up Basket HTML with cart functionality

Lecture 69 Implementing Product detail page

Section 8: Identity Server Client Implementation

Lecture 70 Account Module Creation

Lecture 71 Account Routing fix

Lecture 72 Server Side Changes

Lecture 73 Understanding Checkout Module

Lecture 74 Understanding Account Module

Lecture 75 Understanding Account service

Lecture 76 Can Activate Route Guard Issue With Angular 15

Lecture 77 UnInstallation Steps

Lecture 78 Package.json changes

Lecture 79 Silent Callback changes

Lecture 80 Basket service changes

Lecture 81 Understanding Checkout module changes

Lecture 82 Navbar changes

Lecture 83 401 Error Interceptor demo

Lecture 84 Checkout giving 400 Error

Lecture 85 Demo

Section 9: What's Next

Lecture 86 What's Next

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