Angular

BEGINNER MODULE

Lab 1 :- Running your First Angular Application

This lesson will start and teach you Angular Basics. In this 1 video lesson we will learn basics
of angular.It has 16 chapters which are as listed below.

Chapter 1  :- Node and NPM

Chapter 2  :- Running first app & Angulr CLI
Chapter 3  :- VS Code editor.
Chapter 4  :- TypeScript
Chapter 5  :- CLI project folder structure
Chapter 6  :- The config JSON files
Chapter 7  :- ng serve vs ng build
Chapter 8  :- Angular the binding framework
Chapter 9  :- Component and Modules
Chapter 10 :- Expression , Decorators and TemplateURL
Chapter 11 :- Declaration and BootStrap in Modules
Chapter 12 :- The main.ts file for module startup
Chapter 13 :- Index.html and the selector tag
Chapter 14 :- Polyfills
Chapter 15 :- Webpack :- Packaging and deploying
Chapter 16 :- Vendor.js and Runtime.js

Lab 2: - Creating UI, Component and Model

In this video lesson lab we will create a Customer user interface with Grid.  Chapters are
covered are: -

Chapter 17 :- Angular File naming Convention

Chapter 18 :- Creating Customer UI
Chapter 19 :- Creating Customer Model
Chapter 20 :- Consuming model in component
Chapter 21 :- ngModel , One way and Two way binding
Chapter 22 :- Expressions
Chapter 23 :- Understanding and Intrepeting Errors
Chapter 24 :- FormsModule
Chapter 25 :- *ngForLoop
Chapter 26 :- package.lock.json and versioning
Chapter 27 :- Using source code of the tutorial.

Lab 3: - Creating MasterPage page, Supplier page, Home page & enabling navigation

In this lesson we will create a simple masterpage and the navigation will be done by using
routing. In this lab we will learn routing , router-link and router-outlet concept.

1
It will cover below chapters in it: - 

Chapter 28 :- Thinking Uniform , Thinking Master Pages

Chapter 29:- Creating Angular UI and its components.
Chapter 30 :- Organizing project folders, modules & components.
Chapter 31 :- Masterpage and selector
Chapter 32 :- Grouping components in to Modules.
Chapter 33 :- Understanding UI loading in selector.
Chapter 34 :- Routing and Routing collection
Chapter 35 :- router-outlet and routerLink  
Chapter 36 :- RouterModule and loading routes in Angular.
Chapter 37 :- Understanding the flow of Angular with routing. 

Lab 4: - Increasing Performance using Lazy Loading

In this lab we will understand how to implement on demand loading i.e. load only whats
needed using Angular. This video lesson lab is of 30 minutes and this lab has 10 chapters as
show below. 

Chapter 38 :- Performance issues due to eager loading.

Chapter 39 :- Implementing Lazy loading

Chapter 40 :- Dividing project in to self contained Angular modules.

Chapter 41 :- Self contained routes for self contained modules.

Chapter 42 :- loadChildren: - The heart of lazy loading

Chapter 43:- Understanding path structure for folders and loadChildren.

Chapter 44:- forRoot and forChild

Chapter 45:- Multiple Modules , Multiple builds and Multiple outputs.

Chapter 46:- CommonModule for Lazy Loading

Chapter 47:- Seeing the physical separate modules in the "dist" folder.

Chapter 48:- Revising Angular architecture with Lazy routing

Lab 5: - Implementing Validation in Angular

We will apply validation to our project and display the error message as per validation
rules. In this video lesson lab we will look in to applying validations using Angular. 

Below are the chapters covered in this lab.

2
Chapter 49 :- Validation object model.

Chapter 50 :- Appropriate place to put validations

Chapter 51 :-Formgroup , FormControl , Validators and FormBuilder

Chapter 52 :- Using Angular validation :- The CCC process.

Chapter 53 :- Creating validations

Chapter 54 :- Applying validations to the UI

Chapter 55 :- Checking validation status

Chapter 56 :- ReactiveForms

Chapter 57 :- ngModelOption standalone

Chapter 58 :- Display errors for individual validations.

Chapter 59 :- The dirty flag.

Chapter 60 :- Centralizing validation code for reusability.

Lab 6: - Dependency Injection and Providers

In this section we will learn how to create decoupled architecture using angular DI. In this
video lesson lab we will understand how to create decoupled architecture using Angular DI
and providers. Below are the chapters covered under it: -

Chapter 61: - Definition of a good architecture

Chapter 62: - Concrete classes and tight coupling

Chapter 63: - Provider - provides things to component.

Chapter 64: - Creating providers: - Provide & UseClass

Chapter 65: - Interfaces issues with Angular DI

Chapter 66: - Finally understanding Dependency Injection

Chapter 67: - Seeing the actual fruits of Dependency Injection

Chapter 68: - Centralized and Conditional DI

Chapter 69: - Injector and tokens - Conditional DI

3
Chapter 70: - Dynamic collections

Chapter 71: - Revising Angular DI architecture

Lab 7: - Input, Output and Event Emitters

In this Lab we will understand how to create decoupled architecture using Angular DI and
providers. In this video lesson lab we will try to understand how to create reusable
component using input,output and event emitters.

Chapter 72 :- Defining a user control

Chapter 73 :- Interactions :- Input, output and event emitters

Chapter 74 :- Creating user control and its components

Chapter 75 :- Creating user control component and importance of selector

Chapter 76 :- The @input decorator

Chapter 77 :- Stters and custom component naming convention

Chapter 78 :- Creating the Grid UI of the user control

Chapter 79 :- Defining output and event emitters

Chapter 80 :- Understanding the user control flow

Chapter 81 :- Importing and running the user control

Chapter 82 :- Debugging and watching the full flow.

Lab 8: - Making HTTP calls using Angular.

In this video lesson lab we will learn how to make HTTP calls , what is new in HTTPclient ,
interceptors  and double data post problem. 

Chapter 83 :- Json-server , the fake webserver

Chapter 84 :- Configuring json-server & db.json.

Chapter 85 :- importing and creating  http component object

Chapter 86:-  Making HTTP Post calls and the subscribe method.

Chapter 87 :- Import HTTP Module at the module level.

Chapter 88 :- Implementing DTO( Data transfer objects)

4
Chapter 89 :- Lambdas and Callback

Chapter 90 :- Angular HTTP Client.

Chapter 91 :- Using HttpClient

Chapter 92 :  Simplicity of HttpClient.

Chapter 93:-  Interceptors in HttpClient

Chapter 94:-  The double data post

Lab 9: - Integrating MVC core with Angular using Visual Studio

This lab will teach you how to integrate angular with MVC core and WebAPI. 

Below are the chapters covered under it: -

Chapter 1 :- Defining the scope of the tutorial.

Chapter 2 :- Using Angular template and its limitation
Chapter 3 :- Respecting individual build and compilation.
Chapter 4 :- MVC wwwroot folder and Angular
Chapter 5 :- Issues with ng serve and integration
Chapter 6 :- Bootstrapping through MVC
Chapter 7 :- Deployurl concept.
Chapter 8 :- Integrating Webapi with Angular Http
Chapter 9 :- Debugging Angular and MVC
Chapter 10 :- Ahh the camel case and pascal case issue
Chapter 11:- Integrating Grunt with Task runner explorer
Chapter 12 :- Grunt configuration using appsettings.json
Chapter 13 :- Prebuild and Postbuild style
Chapter 14 :- Double tooling VS code and Visual Studio

Lab 10:- Migrating Angular 6 to Angular 7

In this video lesson we have 4 chapters which focuses on Migrating Angular 6 to 7 migration:
-

Chapter 109: - Create new project using ng new command.

Chapter 110: - Copy the code in to newly created projects.
Chapter 111: - Run ng serve , fix errors http to httpclient
Chapter 112: - Test and you are all set

Lab 11: - Unit Testing in Angular using Jasmine & Karma.

This video lesson is of 30 minutes length which focuses on Unit testing using karma and
jasmine: -
Chapter 113 :- Integration testing vs Unit Testing

5
Chapter 114 :- Black Box vs White Box
Chapter 115 :- Jasmine and Karma
Chapter 116 :- Understanding Jasmine syntaxes , BDD , Describe and it.
Chapter 117 :- BeforeEach,BeforeAll,AfterEach and AfterAll
Chapter 118 :- The TestBed API
Chapter 119 :- Angular loading flow.
Chapter 120 :- Fixture the baseline.
Chapter 121 :- DebugElement , componentInstance and nativeElement
Chapter 122 :- Assertion - expect , tobeTruthy , toEqual
Chapter 123 :- Synching DOM's DetectChanges.
Chapter 124 :- QuerySelectors.
Chapter 125 :- Running Angular test

Chapter 126 :- Writing a complex unit test for the Customer screen