Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Angular Fundamentals from Scratch & Unit/Integration Testing
Introduction to Angular & Course FAQ's
Introduction to Angular and Course FAQ's (6:03)
Node.js and Visual Studio Code installation for Angular Setup (8:39)
Please Note on sequence of Lectures
TypeScript Fundamentals for Beginners
What is Typescript? How different it is from JS? (5:38)
Importance of Let and Const keywords in Typescript (17:06)
Types Usage in Typescript (12:34)
Understanding Classes,Methods and objects in Typescript (14:23)
Importance of Constructor in Typescript (10:22)
Exports,Imports and Functions usage in Typescript (11:47)
Interfaces and objects Importance in defining contracts (17:04)
Usage of Pipes for Anonymous Functions (10:43)
Code Download
Building Angular Components for App development
Demo of the App which we will develop in this course (7:00)
Where to download code files
Install Angular CLI dependencies and create the Project (7:50)
What are Angular Components? Understand how to create one (14:40)
What is Interpolation in Angular and how this can be used (8:24)
How to display Array of items into HTML with Angular Interpolation (6:40)
Structural Directives and ng Directives for Parent Child component relation
What are Built in Structural Directives and how it helps in populating data (12:12)
What are ng-directives and how it helps to put conditions in HTML (9:43)
Understand the concept of Child and Parent Components with Input Tag (10:21)
Example of Input and Output Directives to communicate with parent and child (9:36)
Understand the Event Binding and how to create Custom Events (16:09)
Updating HTML Attributes of Angular with the Property and event Binding (12:16)
BootStrap CSS to bring Styling to Angular Component HTML Pages
What are ng-templates and ng-container and where to use it effectively (13:34)
Introduction to Boostrap and how it helps to build effective CSS (11:42)
Bring the Custom Bootstrap template for Product List page (18:50)
Angular Routing for Page Navigations and Data Session Storage
What is Angular Routing and how it helps to navigate between pages (11:25)
Add Router Link to the Product details page to land on Product Shop page (13:55)
Implementing Route Params to get the specific Product date to render (12:45)
Get Bootstrap template to display Product Details page into Angular html (11:35)
Implement Add to Cart functionality and change Button properties on Select (14:13)
Implement Website Header Navigation Bars with Bootstrap template (6:53)
Injecting Angular Service Providers for Data into Components
Understanding Angular Services and implementing process into Framework (11:09)
Build Cart Component and consume the date from Angular Service (6:40)
What are Template reference variables? And KeyUp event to listen user Input (15:23)
Build Functional logic into Component methods and dynamically update from HTML
Implemeting Logic to retrieve Product Price from ng-init hook (7:07)
Implement logic to update the Product Quantity using ONKEY Event (7:51)
Implement logic to update the Product Total and apply routerLink to Checkout (6:11)
Implment logic for Removing Products from the Cart and cleanup the code (11:20)
Create Angular Forms with ng-model two way Binding Directives
What are Angular Forms- Getting Started with forms (11:41)
What is ng-model Directive ? Apply ng-model to the Angular forms (14:26)
Submitting the Form and storing the details with ng-form directive (12:26)
Creating Domain class to store form data for reusing in any component (7:22)
Consuming HTTP Rest Service Json data into Angular Components to render
Creating Thankyou Page Template and implement toggling to Hide and unhide (9:47)
How to Consume Rest API"s data into Angular App - Example (12:26)
Created Book Interface to cast the API response to the book object (12:54)
Implement Library Page with Table using ng-for directive and API data (12:09)
Build Home page to App with proper router Navigations to respective pages (7:42)
Unit Testing the Angular Components with Angular Test Bed Utilities
Introduction to Angular Unit /Integration Testing and its types (13:12)
What is Karma and Angular Test Bed and how it used for White box testing (14:30)
Build Unit Test for the method defined in the component classes (10:12)
Configuring Test Bed and creating HTML fixture to render the html on fly (10:02)
Test the Alert Details Component with ng-if condition logic validation (13:35)
How to load Stub Data into instance to test component in isolated way (7:04)
Use Stub Data for Testing Input Output Directives in the Angular Framework
Testing Input Output Event emmitters with Stub data required for the component (8:21)
Create Mock Service class for Cart data to Test Cart component in isolated (7:58)
Perform Integration testing by viewing the results on browser with nativeElement (15:39)
Use SPY object to Implement Tests for Library Dashboard component (9:36)
Integration Testing to test the components on UI & SPY object Usage
Use return value for created Spy object and inject into Test Data as Mocking (10:43)
Implement validations on Angular Forms and test on the browsers (10:24)
Understand how to fire DispatchEvents with QuerySelector for Integration testing (17:38)
Project Code Download
Download Code
Teach online with
What is Karma and Angular Test Bed and how it used for White box testing
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock