Angular Fundamentals from Scratch & Unit/Integration Testing

Course Curriculum

Chapter 1: Introduction to Angular & Course FAQ's

Lecture 1: Introduction to Angular and Course FAQ's

Lecture 2: Node.js and Visual Studio Code installation for Angular Setup

Lecture 3: Please Note on sequence of Lectures

Chapter 2: TypeScript Fundamentals for Beginners

Lecture 1: What is Typescript? How different it is from JS?

Lecture 2: Importance of Let and Const keywords in Typescript

Lecture 3: Types Usage in Typescript

Lecture 4: Understanding Classes,Methods and objects in Typescript

Lecture 5: Importance of Constructor in Typescript

Lecture 6: Exports,Imports and Functions usage in Typescript

Lecture 7: Interfaces and objects Importance in defining contracts

Lecture 8: Usage of Pipes for Anonymous Functions

Lecture 9: Code Download

Chapter 3: Building Angular Components for App development

Lecture 1: Demo of the App which we will develop in this course

Lecture 2: Where to download code files

Lecture 3: Install Angular CLI dependencies and create the Project

Lecture 4: What are Angular Components? Understand how to create one

Lecture 5: What is Interpolation in Angular and how this can be used

Lecture 6: How to display Array of items into HTML with Angular Interpolation

Chapter 4: Structural Directives and ng Directives for Parent Child component relation

Lecture 1: What are Built in Structural Directives and how it helps in populating data

Lecture 2: What are ng-directives and how it helps to put conditions in HTML

Lecture 3: Understand the concept of Child and Parent Components with Input Tag

Lecture 4: Example of Input and Output Directives to communicate with parent and child

Lecture 5: Understand the Event Binding and how to create Custom Events

Lecture 6: Updating HTML Attributes of Angular with the Property and event Binding

Chapter 5: BootStrap CSS to bring Styling to Angular Component HTML Pages

Lecture 1: What are ng-templates and ng-container and where to use it effectively

Lecture 2: Introduction to Boostrap and how it helps to build effective CSS

Lecture 3: Bring the Custom Bootstrap template for Product List page

Chapter 6: Angular Routing for Page Navigations and Data Session Storage

Lecture 1: What is Angular Routing and how it helps to navigate between pages

Lecture 2: Add Router Link to the Product details page to land on Product Shop page

Lecture 3: Implementing Route Params to get the specific Product date to render

Lecture 4: Get Bootstrap template to display Product Details page into Angular html

Lecture 5: Implement Add to Cart functionality and change Button properties on Select

Lecture 6: Implement Website Header Navigation Bars with Bootstrap template

Chapter 7: Injecting Angular Service Providers for Data into Components

Lecture 1: Understanding Angular Services and implementing process into Framework

Lecture 2: Build Cart Component and consume the date from Angular Service

Lecture 3: What are Template reference variables? And KeyUp event to listen user Input

Chapter 8: Build Functional logic into Component methods and dynamically update from HTML

Lecture 1: Implemeting Logic to retrieve Product Price from ng-init hook

Lecture 2: Implement logic to update the Product Quantity using ONKEY Event

Lecture 3: Implement logic to update the Product Total and apply routerLink to Checkout

Lecture 4: Implment logic for Removing Products from the Cart and cleanup the code

Chapter 9: Create Angular Forms with ng-model two way Binding Directives

Lecture 1: What are Angular Forms- Getting Started with forms

Lecture 2: What is ng-model Directive ? Apply ng-model to the Angular forms

Lecture 3: Submitting the Form and storing the details with ng-form directive

Lecture 4: Creating Domain class to store form data for reusing in any component

Chapter 10: Consuming HTTP Rest Service Json data into Angular Components to render

Lecture 1: Creating Thankyou Page Template and implement toggling to Hide and unhide

Lecture 2: How to Consume Rest API"s data into Angular App – Example

Lecture 3: Created Book Interface to cast the API response to the book object

Lecture 4: Implement Library Page with Table using ng-for directive and API data

Lecture 5: Build Home page to App with proper router Navigations to respective pages

Chapter 11: Unit Testing the Angular Components with Angular Test Bed Utilities

Lecture 1: Introduction to Angular Unit /Integration Testing and its types

Lecture 2: What is Karma and Angular Test Bed and how it used for White box testing

Lecture 3: Build Unit Test for the method defined in the component classes

Lecture 4: Configuring Test Bed and creating HTML fixture to render the html on fly

Lecture 5: Test the Alert Details Component with ng-if condition logic validation

Lecture 6: How to load Stub Data into instance to test component in isolated way

Chapter 12: Use Stub Data for Testing Input Output Directives in the Angular Framework

Lecture 1: Testing Input Output Event emmitters with Stub data required for the component

Lecture 2: Create Mock Service class for Cart data to Test Cart component in isolated

Lecture 3: Perform Integration testing by viewing the results on browser with nativeElement

Lecture 4: Use SPY object to Implement Tests for Library Dashboard component

Chapter 13: Integration Testing to test the components on UI & SPY object Usage

Lecture 1: Use return value for created Spy object and inject into Test Data as Mocking

Lecture 2: Implement validations on Angular Forms and test on the browsers

Lecture 3: Understand how to fire DispatchEvents with QuerySelector for Integration testing

Chapter 14: Project Code Download

Lecture 1: Download Code