Exploring Angular (for Experienced Web Developers)

Updated for Angular 11 and geared for experienced web developers, Exploring Angular (for Experienced Web Developers) provides you with hands-on experience working with the latest features and benefits Angular has to offer. It provides you with 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. The course begins with a solid introduction to the core features of the Angular CLI and TypeScript. You’ll then jump right into a hands-on exploration of component-driven development with Angular components, covering data-binding, directives, services, SPA routing, the RxJS library, forms, unit testing, and HTTP/REST. You’ll also learn how to add authentication, use the Material library, make custom directives, write an E2E/Protractor test, and increase their application's efficiency by lazy loading modules. By the end of this course, you’ll have a well-built but simple application up and running that incorporates components(to show sections of the website), directives (to dynamically display the interactive components), custom pipes(to format and filter the content), reactive forms (to creatively display interactive forms), routes (SPA- to allow the almost instantaneous navigation to different pages/sections of the application), services(to allow mocking and the abstraction of the data model for speed and maintenance), unit testing (to allow for the constant testing, and regression testing needed in today’s TDD world), and the REST API (to interact with the web server for data in a modern and efficient manner through JSON/XML). You’ll have also learned how to implement the Material library (for more professional/modern looking web pages), as well as explored including lazy loading modules (for better performance and best practices) and E2E testing (using Protractor to simulate user testing for a more complete testing solution).

Retail Price: $2,595.00

Next Date: 01/27/2025

Course Days: 5


Enroll in Next Date

Request Custom Course


Course 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.  By the end of this course, you’ll have a well-built application up and running that incorporates components, directives, custom pipes, reactive forms, routes, services, unit testing, and the REST API. You’ll have also learned how to implement the Material library, as well as explored including lazy loading modules and E2E testing.

Working in a hands-on learning environment guided by our expert team, 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
  • Working with Angular Ivy and the Ahead of Time (AOT) compiler including its impact of developers and the development process
  • 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 with Angular Universal
  • How to facilitate unit testing and perform enterprise testing with E2E/Protractor testing
  • Optimize Angular applications with various tools and techniques

 

Course Prerequisites

In order to be successful in this class, incoming attendees are required to have current, hands-on experience in developing basic web applications, and be versed in HTML5, CSS3 and JavaScript.  This is a fast paced introduction to Angular for Intermediate-Skilled web developers. who wish to further extend their skills in modern web development.

Take Instead: We offer other courses that provide different levels of knowledge or focus:

 

  • TT4165 Introduction to Angular Essentials (3-day subset of this course)

 

Follow-on Courses / Take After: Our core training courses provide students with a solid foundation for continued learning based on role, goals, or their areas of specialty.  Our web developer learning paths offer a wide variety of continued learning paths such as:

  • Intermediate and beyond Angular training
  • Additional Full Stack training, MEANStack, React, Node.js, mobile development, UX/UI or other next level web development courses

Outline

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.

  1. Overview of Angular Architecture
  • Angular Versioning
  • Model-View-*
  • Data Binding
  • Components and Dependency Injection
  • Services and Events
  • Common Component Lifecycles and Hooks
  1. TypeScript Quick Intro or Refresh
  • Angular, ES6 and TypeScript
  • Transpilers
  • Typing and Classes
  • Abstract Classes and Interfaces
  • Annotations
  • Angular and TypeScript
  1. Bootstrapping with Angular CLI
  • Angular CLI Overview
  • New Projects with CLI
  • Testing and Generating with CLI
  • Angular Console
  1. Angular Project Structure
  • Configuration Files
  • Top-Level Directories
  • Contents of app folder
  • Creating Projects with Angular CLI

Session: Working with Angular

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

Session: 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
  • Template-Driven Forms & Reactive Forms

Session: Single Page Applications and Routes

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

Session: Using RESTful Services

  1. Overview of REST
  • REpresentational State Transfer
  • REST and HTTP
  • REST/HTTP: Representation-Oriented
  • REST Design Principles
  1. Angular and REST
  • REST in Angular
  • Promises, Observables, Subject
  • HttpClient and Observables
  • async Pipes and HttpClient Interceptors

Session: Reactive Programming in Angular

  1. In depth - Working with RxJS
  • Working with RxJS in Angular
  • RxJS Operators
  • Filtering, Combining, and Mathematical Operators
  • Callback Operators
  • Working with a REST API and RxJS
  1. Testing and Angular
  • Testing Dependencies
  • Options for Testing in Angular
  • Karma
  • Jasmine
  • ng E2E
  • Protractor
  • Unit Testing and E2E

Session: Enhancing the Angular App

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

Session: Optimizing for the Enterprise

  1. 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
  1. Lazy Loading
  • Module Lazy Loading
  • Route Configuration for Lazy Loading
  • When to Preload
  1. Optimizing with Universal
  • Overview of Angular Universal
  • Improving the User Experience
  • Pre-rendering on the Server
  1. Angular Deployment
  • Deployment options
  • Server Configurations
  • Production Optimizations

 

  1. Angular Debugging
  • With Chrome DevTools
  • With VS Code
  • Lab: Debugging Angular

Bonus Topics / Time Permitting

Angular Style Guide

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

ES6+

  • ES6 Classes and Modules
  • ES6 Arrow Functions and Array Methods
  • ES6 Template Literals
  • ES6 Spread Operator, Rest Parameter and Destructuring
  • Deep Dive into Object-Oriented ES6+
Course Dates Course Times (EST) Delivery Mode GTR
1/27/2025 - 1/31/2025 10:00 AM - 6:00 PM Virtual Enroll
3/24/2025 - 3/28/2025 10:00 AM - 6:00 PM Virtual Enroll
6/2/2025 - 6/6/2025 10:00 AM - 6:00 PM Virtual Enroll
8/11/2025 - 8/15/2025 10:00 AM - 6:00 PM Virtual Enroll
10/20/2025 - 10/24/2025 10:00 AM - 6:00 PM Virtual Enroll
12/1/2025 - 12/5/2025 10:00 AM - 6:00 PM Virtual Enroll