Intermediate Angular | Reactive Angular, RxJS, NgRX, Testing, Security, Optimization & More
Course Overview
Working within in an engaging, hands-on learning environment, guided by our expert team, attendees will explore:
- Working with the Ahead of Time compiler including its impact of developers and the development process
- How to defend against DOM-based XSS
- How to manage routing decisions based on pre-defined criteria such as a successful authentication
- How to meet huge data requirements by processing asynchronous data streams with RxJS
- Simplify server-side rendering
- How to facilitate unit testing
- Enhance an Angular user interface with animations and other advanced features
- Optimize Angular applications with various tools and techniques
- Maintain state within an Angular application
Course Objectives
This course provides indoctrination in the practical use of the umbrella of technologies that are on the leading edge of modern web development.
Working within in an engaging, hands-on learning environment, guided by our expert team, attendees will explore:
- Working with the Ahead of Time compiler including its impact of developers and the development process
- How to defend against DOM-based XSS
- How to manage routing decisions based on pre-defined criteria such as a successful authentication
- How to meet huge data requirements by processing asynchronous data streams with RxJS
- Simplify server-side rendering
- How to facilitate unit testing
- Enhance an Angular user interface with animations and other advanced features
- Optimize Angular applications with various tools and techniques
- Maintain state within an Angular application
At the end of this two-day course, students will have a functioning, Enterprise-level, Angular application. Students will add reactive programming, authentication, interface enhancements, and learn how to maintain state with NgRX. They will then take a deeper dive including making their own custom directives, lazy loading modules, and E2E testing. They will learn how to enhance their application with animations and create their own Angular library.
Course Prerequisites
In order to be successful in this class, incoming attendees are required to have current, hands-on experience in developing Angular applications. This is an intermediate level Angular development course, designed for experienced Angular developers that need to further extend their skills in Angular development.
Course Outline
Please note that this list of topics is based on our standard course offering, evolved from typical industry uses and trends. We will work with you to tune this course and level of coverage to target the skills you need most.
Session: Reactive Programming in Angular
Lesson: Working with RxJS
- Working with RxJS in Angular
- RxJS Operators
- Filtering, Combining, and Mathematical Operators
- Callback Operators
- Lab: Working with a REST API and RxJS
Session: Security and Authentication
Lesson: DomSanitizer
- Defending Against XSS
- Trusting Values with the DOMSanitizer
Lesson: JSON Web Tokens
- Backend Authentication and SPA
- Using JSON Web Tokens (JWT)
- Firebase and JWT
Lesson: Route Guards
- Overview of Route Guards
- Route Guard CanActivate
- Using in a Service
- Lab: Authentication and Route Protection
Session: Enhancing the Angular App
Lesson: Angular Animations
- Triggers, States and Styles
- Transitions
- Using Animations
- Keyframes and Animations
- Lab: Angular Animations
Lesson: Angular Material
- Gesture Support
- Material Icons and Components
- Materials Themes
- Custom Themes
- Lab: Angular Material
Lesson: Angular Elements
- Angular Elements Overview
- Building a Custom Element Using Angular Elements
- Converting into Custom Elements
Session: Deep Dive into Angular
Lesson: Testing and Angular
- Testing Dependencies
- Options for Testing in Angular
- Karma
- Jasmine
- Protractor
- E2E
- Lab: Unit Testing and Debugging
Lesson: Deep Dive into Components and Directives
- Implementing View Encapsulation
- Content Management
- Custom Attribute Directives
- Listening to Host Events
- Binding to Host Properties
- Lab: View Child
Lesson: Deep Dive into Services and Dependency Injection
- Hierarchical Injectors
- Optional Dependencies
- Host and Visibility
Session: Optimizing for the Enterprise
Lesson: Improving Performance with Ivy
- Overview of Ivy
- Incremental DOM and Ivy Pipes
- Pre-compiling code with Ivy
- Overview of Angular Universal
- Improving User Experience with Universal
- Pre-rendering the App on the Server
Lesson: Lazy Loading
- Module Lazy Loading
- Route Configuration for Lazy Loading
- When to Preload
Lesson: Optimizing with Universal
- Overview of Angular Universal
- Improving the User Experience
- Pre-rendering on the Server
Lesson: Creating Your Own Angular Library
- Creating an Angular Library
- Working with Angular CLI to Build the Library
- Using the Library
- Lab: Creating and Deploying a Library
Session: Maintain State with NgRX
Lesson: NgRX Store
- Overview of NgRX Store
- Actions and Reducers
- Selectors
- Effects
- Lab: Maintain State with NgRX
- Lab: NgRX for an Enterprise Application
Bonus Topics (Time Permitting)
Lesson: ES6+
- ES6 Classes and Modules
- ES6 Arrow Functions and Array Methods
- ES6 Template Literals
- ES6 Spread Operator, Rest Parameter and Destructuring
- Lab: Deep Dive into Object-Oriented ES6+
Lesson: Sass and SCSS for Angular and Material
- Variables
- Nesting
- Partials
- Import
- Mixins
- Extend/Inheritance
- Operators
Sorry! It looks like we haven’t updated our dates for the class you selected yet. There’s a quick way to find out. Contact us at 502.265.3057 or email info@training4it.com
Request a Date