All courses
Hamburger Icon

Advanced Angular

Course Summary

The Advanced Angular training course is designed to provide students with real-life experience using advanced topics of Angular web development.

The course will begin by discussing advanced topics related to building blocks, components, communication, lifecycle, and the component router. Students will then explore advanced topics in data binding, directives, and pipes. Next, the course will evaluate advanced services and HTTP clients as they relate to Angular. Finally, the course will discuss advanced topics related to forms, testing, and security. Throughout the course, students will work to build out an entire Angular web application.

Purpose
 Learn about the real-life experience using advanced Angular topics.
Audience
 Web developers experienced in Javascript wanting to understand more advanced topics for web development using Angular.
Role
Software Developer - Web Developer
Skill Level
Advanced
Style
Workshops
Duration
3 Days
Related Technologies
JavaScript | TypeScript | Web Development | Angular

 

Productivity Objectives
  • Interpret the advanced concepts of Angular.
  • Utilize the Angular Command-line interface (CLI).
  • Build a web application using Angular.

What You'll Learn:

In the Advanced Angular training course, you'll learn:
  • Angular Essentials
    • Semantic versioning and release schedule
    • Angular CLI
    • Environments config
    • CLI: ng update, ng add and schematics
  • Modules and Build Process
    • Modules and ngModule
    • Module architecture: Feature modules
    • Module architecture: Shared module
    • Angular builds: AOT vs JIT - What to use for production
    • Build modes and environments
    • Introduction to Webpack
    • Should we use Webpack directly for custom builds?
  • Components
    • What are components?
    • Template and expressions
    • Passing data to a component with @Input()
    • Practicing with Angular CLI
    • Component architecture best practices
  • Data Bindings
    • One-way data bindings
    • Expressions
    • Two-way data bindings with ngModel
    • Template syntax
    • Template reference variables
  • Directives
    • What are directives for?
    • Different kinds of directives
    • ngFor
    • ngIf
    • ngSwitch
    • ngClass and ngStyle
    • How to create a custom directive?
    • Data bindings in directives
  • Pipes
    • What are pipes for?
    • Pure and Impure pipes
    • How to create our own pipes?
  • Services and Dependency Injection
    • Purpose of services
    • Dependency injection in Angular
    • Injector Tree
    • Decorators for dependency injection: @Optional(), @Host(), @Self()
    • How to create a service?
  • HTTP Client and Asynchronous Data
    • How to use the HTTP client?
    • What is a promise?
    • Introduction to RxJS
    • What is an Observable?
    • Writing our own Observable or Promise
    • RxJs operators
    • Examples of RxJs operators: max, merge, filter
    • Async pipe
    • Http Interceptor
    • Websockets in Angular
  • Component Communication and Lifecycle
    • How do components share data?
    • Strategies for component communication
    • @ViewChild() decorator
    • Introduction to the component lifecycle
    • Lifecycle hooks
    • Change detection strategies for performance optimization
  • Component Router
    • What is the component router?
    • Example of the component router in action
    • Child routes and route parameters
    • Guards for authentication and user rights
    • Lazy-loading with feature modules
  • Forms
    • How to handle forms with Angular?
    • Properties provided by Angular to validate forms
    • Template-driven forms and reactive forms
    • Form validation and submission
    • Custom form validator
  • Advanced Projects and Tools
    • Progressive web apps
    • Angular Custom Elements
    • Ivy renderer
    • Angular Material
    • Angular Universal or how to pre-compile on the server
    • Schematics
    • Angular Augury: Debugging Angular apps in Google Chrome
  • Testing Angular Applications
    • How to test Angular applications?
    • Karma and Jasmine
    • End to end tests with Protractor
    • Angular Test Bed
    • Mocking and stubbing with Jasmine and Angular
  • Security in Angular
    • How to prevent Cross-site Scripting attacks (XSS)
    • Best practices and things to avoid
    • Trusting values with the DOMSanitizer
    • Prevent HTTP attacks
    • Security audits of Angular applications
  • State Management and Redux
    • What is state management?
    • Redux: Core concepts and principles
    • Redux Store
    • NgRx: Redux for Angular
    • NgRx: Reducer, Store, Actions and Effects
  • Resources and Best Practices
    • How to include external libraries
    • How to use angular.io (cheatsheet, etc.)
    • Style guide and best practices
    • Official Angular blog
real world content

Real-World Content

Project-focused demos and labs using your tool stack and environment, not some canned "training room" lab.
expert practitioners

Expert Practitioners

Industry experts that bring their battle scars into the classroom.
experiential learning

Experiential Learning

More coding than lecture, coupled with architectural and design discussions.
tailored outlines

Tailored Outlines

One-size-fits-all doesn't apply to training teams. That's where we come in!
“I appreciated the instructor's technique of writing live code examples rather than using fixed slide decks to present the material.”

VMware

Dive in and learn more

When transforming your workforce, it's important to have expert advice and tailored solutions. We can help. Tell us your unique needs and we'll explore ways to address them.

Let's chat

By filling out this form and clicking submit, you acknowledge our privacy policy.