Exploring Angular (for Experienced Web Developers)

Comprehensive Hands-on Angular | Essentials, Components, Services, SPA, Routing, RxJS, TDD / Testing, REST API and More

TT4168

Introductory and Beyond

5 Days

Course Overview

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).

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

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

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

Please see the Related Courses tab for specific Pre-Requisite courses, Related Courses that offer similar skills or topics, and next-step Follow-On Courses and Learning Path recommendations.

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.

  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 Materials

Student Materials: Each participant will receive a Student Guide with course notes, code samples, software tutorials, step-by-step written lab instructions, diagrams and related reference materials and resource links. Students will also receive the project files (or code, if applicable) and solutions required for the hands-on work. Any courseware of lab materials provided in a cloud (if applicable) will also be made available to you separately.

Hands-On Setup Made Simple! Our dedicated tech team will work with you to ensure our ‘easy-access’ cloud-based course environment, or local installation, is accessible, fully-tested and verified as ready to go well in advance of the course start date, ensuring a smooth start to class and effective learning experience for all participants. We can also help you install this course locally if preferred. Please inquire for details and options.

Every-Course Extras = High-Value & Long-Term Learning Support! All Public Schedule courses include our unique EveryCourse Extras package (Post-Course Resource Site access with Review Labs & Live Instructor Follow-on Support, access to QuickSkills recorded High-Value lessons, Free *Live* Course Refresh Re-Takes, early access to Special Offers, Free Courses & more). Please inquire for details.

te hands-on work in class, and to revisit to review or refresh skills at any time. Students will also receive the project files (or code, if applicable) and solutions required for the hands-on work.

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
Exploring Angular (for Experienced Web Developers) 5 Days May 17 to May 21 10:00 AM to 06:00 PM EST $2,595.00 Enroll
Exploring Angular (for Experienced Web Developers) 5 Days Jul 12 to Jul 16 10:00 AM to 06:00 PM EST $2,595.00 Enroll
Exploring Angular (for Experienced Web Developers) 5 Days Aug 23 to Aug 27 10:00 AM to 06:00 PM EST $2,595.00 Enroll
Exploring Angular (for Experienced Web Developers) 5 Days Oct 4 to Oct 8 10:00 AM to 06:00 PM EST $2,595.00 Enroll
Exploring Angular (for Experienced Web Developers) 5 Days Nov 15 to Nov 19 10:00 AM to 06:00 PM EST $2,595.00 Enroll

New Site, BIG Savings!
We're celebrating the launch of our lonnngggg awaited new site with with *50% off all 2021 Public Classes* booked by March 31!  Check out our Current Offers for Individuals, Teams and Organizations to Learn for Less!

See our latest Offers and Promotions

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