Mastering Angular 16 Boot Camp (TT4168)

Hands-on Angular! Learn How to Construct Robust, Scalable, and Feature-Rich Web Applications using Angular (Latest Editions)

TT4168

Introductory and Beyond

5 Days

Course Overview

Geared for experienced web developers, our Mastering Angular 16 Boot Camp is a five-day, comprehensive hands-on program that explores the latest features and benefits Angular has to offer. Throughout the course you’ll learn the practical “real-world” foundational and advanced Angular skills required to solve the usual challenges you might face when developing modern web applications with JavaScript. NOTE: This course is also available for prior editions of Angular (Angular 15, etc.). Please inquire for details and options.

Kicking off with an in-depth introduction to Angular CLI and TypeScript, the course propels you into the world of component-driven development, touching on vital topics like data-binding, directives, and services. As you advance through the curriculum, you'll explore SPA routing, the RxJS library, forms, and unit testing, along with HTTP/REST protocols for server interaction. The course also introduces authentication techniques and delves into the Material library for UI design and custom directives.

By the end of this course, you’ll have built a comprehensive application that brings together all these elements: website structuring through components, dynamic interactivity via directives, and custom pipes for content refinement. You'll know how to employ reactive forms for active user engagement and SPA routing for fluid navigation, fortified by efficient data management through services. All of this is underscored by a strong emphasis on unit testing within a Test-Driven Development framework, as well as practical REST API interactions for modern server communication. Your application will showcase a modern, professional look through the integrated Material library.

You’ll leave the course equipped to construct robust, scalable, and feature-rich web applications using Angular 16, able to implement seamless user experiences, integrate with various data sources through REST APIs, and employ best practices in unit testing for sustainable, high-quality code.

Learning Objectives

The lab intensive course includes plenty of hands-on lab work designed to immerse you in the skills required to get you up and running with Angular right away.  The course is rich with hands-on activities, challenge labs, knowledge checks, valuable discussions and focused projects. 

Guided by our engaging, highly-experienced web development instructor, you’ll explore:

  • What Angular is and why should you use it
  • How Angular reduces the amount of code that you must write to add rich functionality to both existing and new web pages
  • What TypeScript is, why it is useful, and how to use it with Angular
  • How to facilitate development and deployment using Angular CLI
  • How to work with the various aspects of the Angular architecture to implement clean, responsive web interfaces
  • How Routers can support navigation within a Single Page Application
  • What the best practices are for using Angular so that it works unobtrusively and performs well
  • How to use Angular with HTTP to support JSON, REST, and other services
  • 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
  • How to facilitate unit testing
  • Optimize Angular applications with various tools and techniques

If your team requires different topics, additional skills or a custom approach, our team will collaborate with you to adjust the course to focus on your specific learning objectives and goals.

Need different skills or topics?  If your team requires different topics or tools, additional skills or custom approach, this course may be easily adjusted to accommodate.  We offer additional Angular and web development and design courses which may be blended with this course for a track that best suits your development objectives.

Course Objectives

Learning Objectives

The lab intensive course includes plenty of hands-on lab work designed to immerse you in the skills required to get you up and running with Angular right away.  The course is rich with hands-on activities, challenge labs, knowledge checks, valuable discussions and focused projects. 

Guided by our engaging, highly-experienced web development instructor, you’ll explore:

  • What Angular is and why should you use it
  • How Angular reduces the amount of code that you must write to add rich functionality to both existing and new web pages
  • What TypeScript is, why it is useful, and how to use it with Angular
  • How to facilitate development and deployment using Angular CLI
  • How to work with the various aspects of the Angular architecture to implement clean, responsive web interfaces
  • How Routers can support navigation within a Single Page Application
  • What the best practices are for using Angular so that it works unobtrusively and performs well
  • How to use Angular with HTTP to support JSON, REST, and other services
  • 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
  • How to facilitate unit testing
  • Optimize Angular applications with various tools and techniques

If your team requires different topics, additional skills or a custom approach, our team will collaborate with you to adjust the course to focus on your specific learning objectives and goals.

Need different skills or topics?  If your team requires different topics or tools, additional skills or custom approach, this course may be easily adjusted to accommodate.  We offer additional Angular and web development and design courses which may be blended with this course for a track that best suits your development objectives.

Course Prerequisites

Audience

The course is appropriate for experienced web developers new to Angular. In order to be successful in the course, you should have solid, current hands-on experience developing basic web applications, and be well versed in HTML5, CSS3 and JavaScript.  We can adjust this for dedicated course deliveries. Please inquire for details.

 

Pre-Requisites

Take Before: Attendees should have experience with the topics in the following courses, or should have recently attended these as a pre-requisite:

  • TT4003          Introduction to HTML5, CSS3 & JavaScript - 3 days

Related Courses

The following is a small subset of related courses. We offer many additional courses and topics on modern web, mobile and full stack development. Please see the online catalog for a complete list of courses and learning paths.

  • TT4002          Introduction to HTML5 / CSS3 - 2 days
  • TT4003          Introduction to HTML5, CSS3 & JavaScript - 3 days
  • TT4110          Introduction to Moden JavaScript – 3 days
  • TT4165          Introduction to Angular Essentials - 3-day subset of this course
  • TT4168          Mastering Angular Boot Camp - 5 days
  • TT4190          Getting Started with React Essentials – 3 days
  • TT4195          Mastering React Boot Camp |With Redux, Flux, Unit Testing, JSX & More – 5 days (TT4190 superset)

Course Agenda

Please note that this list of topics is based on our standard course offering, evolved from typical industry uses and trends. We’ll work with you to tune this course and level of coverage to target the skills you need most.

Getting Started with Angular 

  1. Overview of Angular Architecture
  • Angular Versioning
  • Data Binding
  • Components and Dependency Injection
  • Services and Events
  • Common Component Lifecycles and Hooks
  1. TypeScript
  • Angular, ES6 and TypeScript
  • Typing and Classes
  • Abstract Classes and Interfaces
  • Annotations
  • Generics
  • Optional Chaining
  • Nullish coalescing
  • Decorators
  • Partial, Record, Union types
  • Lab: Angular and TypeScript
  1. Bootstrapping with Angular CLI
  • Angular CLI Overview
  • New Projects with CLI
  • Testing and Generating with CLI
  • Angular Console – NX Console
  1. Angular Basics
  • Configuration Files
  • Working with angular.json
  • Top-Level Directories
  • Contents of app folder
  • Angular DevTools
  • Lab: Creating Projects with Angular CLI

Working with Angular

  1. Components and Events
  • Data Binding and Components
  • Event Binding
  • Custom Events
  • Parent/Child Events
  • EventEmitter/emit()
  • Lab: Nested Components
  1. Third Party Libraries
  • Angular and the Need for Libraries
  • Options for adding Libraries
  • Working with npm install
  • Lab: Third-Party Libraries
  1. Dynamic Views - Directives
  • View Encapsulation
  • Structural/Attribute Directives
  • Conditional Styling
  • Lab: Working with Directives
  1. Pipes
  • Overview of Pipes
  • Built-in Pipes
  • Formatting and Conversions
  • Parameterizing Pipes
  • Pure vs. Impure Pipes
  • Customizing Pipes
  • Lab: Built-in and Custom Pipes

Angular Forms

  1. Forms and the Forms API
  • Forms and NgModel
  • NG Form Groups
  • NG Form Validation
  • Model-Driven Reactive Forms
  • FormBuilder API
  • Reactive Form Validation
  • Lab: Template-Driven Forms
  • Lab: Reactive Forms

Single Page Applications and Routes

  1. SPA - Routing
  • Overview of the SPA Concept
  • Routing for Page Display
  • Working with ActivatedRoute
  • Location Strategies
  • Nested Routes
  • Lab: Routing
  1. Services (Dependency Injection)
  • Angular’s DI Framework
  • Components and Injectables
  • Tree-shakeable providers
  • Service Interfaces and DI
  • Constructor Injection
  • Lab: Services
  1. Modules
  • Overview of Modules
  • Feature Modules
  • Feature Module Routing
  • Shared Modules
  • Lab: Modules

Using RESTful Services

  1. Angular and REST
  • REST in Angular
  • Promises, Observables, Subject
  • HttpClient and Observables
  • async Pipes and HttpClient Interceptors

Reactive Programming in Angular

  1. In depth - Working with RxJS
  • Working with RxJS in Angular
  • RxJS Operators
  • Creation Operators
  • Pipeable Operators
  • Filtering, Combining, and Mathematical Operators
  • Lab: Working with a REST API and RxJS
  1. Testing and Angular
  • Testing Dependencies
  • Options for Testing in Angular
  • Karma
  • Jasmine
  • Lab: Unit Testing

Enhancing the Angular App

  1. Advanced Routing - Route Guards –Overview of Route Guards
  • Route Guard CanActivate
  • Using in a Service
  • Lab: Route Protection  
  1. Angular Material (Design)
  • Gesture Support
  • Material Icons and Components
  • Materials Themes
  • Custom Themes
  • Lab: Angular Material

Deployment, Errors, and Debugging

  1. Angular Deployment
  • Deployment options
  • Server Configurations
  • Production Optimizations
  1. Angular Error Handling and Debugging
  • With Chrome DevTools
  • With VS Code
  • Http client request errors
  • Lab: Debugging Angular

Bonus Content / Time Permitting

Angular Style Guide

  • Recent Angular Improvements
  • Upgrading Angular
  • Single Responsibility Principle
  • Naming Conventions
  • Coding Conventions
  • Application Structure
  • Routing

Course Materials

Setup Made Simple! Learning Experience Platform (LXP) 

All applicable course software, digital courseware files or course notes, labs, data sets and solutions, live coaching support channels, and rich extended learning and post training resources are provided for you in our “easy access, single source, no install required” online Learning Experience Platform (LXP), remote lab and content environment. Access periods vary by course. We’ll collaborate with you to ensure your team is set up and ready to go well in advance of the class. Please inquire about set up details and options for your specific course of interest.

Raise the bar for advancing technology skills

Attend a Class!

Live scheduled classes are listed below or browse our full course catalog anytime

Special Offers

We regulary offer discounts for individuals, groups and corporate teams. Contact us

Custom Team Training

Check out custom training solutions planned around your unique needs and skills.

EveryCourse Extras

Exclusive materials, ongoing support and a free live course refresh with every class.

Attend a Course

Please see the current upcoming available open enrollment course dates posted below. Please feel free to Register Online below, or call 844-475-4559 toll free to connect with our Registrar for assistance. If you need additional date options, please contact us for scheduling.

Course Title Days Date Time Price
Mastering Angular 16 Boot Camp (TT4168) 5 Days Jun 24 to Jun 28 10:00 AM to 06:00 PM EST $2,495.00 Enroll
Mastering Angular 16 Boot Camp (TT4168) 5 Days Aug 19 to Aug 23 10:00 AM to 06:00 PM EST $2,495.00 Enroll
Mastering Angular 16 Boot Camp (TT4168) 5 Days Oct 7 to Oct 11 10:00 AM to 06:00 PM EST $2,495.00 Enroll
Mastering Angular 16 Boot Camp (TT4168) 5 Days Dec 2 to Dec 6 10:00 AM to 06:00 PM EST $2,495.00 Enroll

Mix, Match & Master!
2FOR1: Two Courses, One Price!

Enroll in *any* two public courses (for 2023 *OR* 2024 dates!) by December 31, for one price!  Learn something new, or share the promo!

Click for Details & Additional Offers

Learn. Explore. Advance!

Extend your training investment! Recorded sessions, free re-sits and after course support included with Every Course
Trivera MiniCamps
Gain the skills you need with less time in the classroom with our short course, live-online hands-on events
Trivera QuickSkills: Free Courses and Webinars
Training on us! Keep your skills current with free live events, courses & webinars
Trivera AfterCourse: Coaching and Support
Expert level after-training support to help organizations put new training skills into practice on the job

The voices of our customers speak volumes

Special Offers
Limited Offer for most courses.

SAVE 50%

Learn More