Angular 13 Advanced
40 academic hours
● Overview
We already worked with Angular 2+ for more than a year, now it’s time to take
it to the next level…
How do I create a professional web application using Angular 13 ?
How do I optimize the performance of the app and improve the initial load
time?
How to properly structure my angular projects for better code reuse, and
better team work on the projects?
In this course we will dig deep into the more complex topics that you need to
know in order to create a professional app using angular, those topics are hard
to understand, hard to find information online and are not covered in the
basic angular courses.
Our goal is to truly become a professional angular developer.
● On completion students will be able to:
○ Build a professional web application using Angular
● Who should attend the course
○ Software developers with 1+ years of experience in Angular 2+
● Prerequisites
○ Typescript and JavaScript
○ HTML
○ CSS
○ Basic Angular 2+
● Syllabus
Module 1 - Advanced RXJS
Probably more than 80% of all the Observable.prototype.subscribe you are
currently using is redundant. Probably all the callback hell with observables
can be avoided.
Understanding RXJS will greatly improve all the async code in your angular
app, you code will be much cleaner and easy to debug, you can remove most
of the subscribe usage, and you can even improve performance with angular
async pipe
● observables
● observers
● subscription
● Subject
● operators
● error handling
Module 2 - Advanced @angular/cli
@angular/cli has more capabilities than just scaffolding a new angular
application.
In this lesson we will examine advanced features of @angular/cli
● Creating workspace with multiple apps and libs
● Create library and publish to npm
● Ivy renderer
● Optimizations and best practices
Module 3 - Advanced forms
In this lesson we will go over advanced features of @angular/forms.
We will learn to create our own custom form control or custom validation.
● How angular wants us to look at forms
● AbstractControl, FormControl, FormArray, FormGroup
● ControlValueAccessor
● Custom form components
● Custom validation directives
Module 4 - Platform agnostic and Server Side Rendering
Using Server side rendering and the @angular/universal package, we can
create a full HTML representation of our angular app, which will significantly
improve the initial load time.
● Client side rendering / Server side rendering / Prerendering
● Universal code
● @angular/universal
Module 5 - Change Detection
By understanding how change detection works in angular, we can significantly
improve the performance of our angular apps.
● When does angular trigger change detection?
● how does angular detect change detection
● zone.js
● change detection strategy onpush
● optimizing our app performance
● what triggers onpush change detection
Module 6 - Dependency Injection
● How DI works in angular
● providers in component metadata
● Injector service
● InjectionToken
Module 7 - ngrx
Bigger angular apps with significant data changes will be hard to build without
ngrx library which will help you state manage your application data.
● ngrx
● What is Redux
● Advantage of using Redux and ngrx
● Store, Actions, Reducers
● Effects
● Entities
● @ngrx/data
● Best practices
Module 8 - Testing
Good testing practices will open the door for Continuous Deployment and
Trunk Based Development. Using these development methodologies will
greatly improve the product quality and frequent app updates.
● TestBed
● Unit testing
● Mocking
● E2E tests