Angular Training

Learn Angular 11 and build responsive, enterprise-strength applications that run smoothly on desktop and mobile devices with this Angular training course. Angular provides a robust framework that facilitates the development of richly interactive applications running on multiple platforms. Gain experience building components, creating directives, modularizing applications, and building template-driven forms.

You'll be given remote access to a preconfigured virtual machine for you to redo your hands-on exercises, develop/test new code, and experiment with the same software used in your course. This course is compatible with older versions of Angular.

Angular Training Delivery Methods

• In-Person

• Online

Angular Training Course Information

• Angular Training Course Benefits

  • Create device-independent Angular applications
  • Develop Components using TypeScript, Templates, and Decorators
  • Consume REST services using Observables
  • Modularize applications with the Component Router
  • Capture and validate input with template-driven forms
  • Leverage continued support with after-course one-on-one instructor coaching and computing sandbox

• Angular Training Course Prerequisites

  Before attempting this course, attendees should have:

  • Experience developing web pages at the level of JavaScript Essentials for the Full Stack Developer Using ECMAScript
  • Knowledge of HTML and CSS

Angular Instructor-Led Course Outline

Module 1: Angular Introduction

Architectural overview

• Simplifying the development of complex modern applications
• The organization of an Angular app
• Supporting multiple client devices
• Configuring an Angular development environment
• Bootstrapping your first Angular application

Getting started with TypeScript

• Transpiling TypeScript to JavaScript
• Building an app with TypeScript

Module 2: Constructing User Interface (UI) Components

Defining components

• Structure of a component
• Introducing the component hierarchy
• Declaring metadata with the @Component decorator
• Controlling HTML5 generation with Templates
• Displaying repeating data with *ngFor
• Conditional generation of DOM content

Debugging techniques and strategies

• Interpreting framework error messages
• Exploring the component hierarchy with Augury

Reducing code complexity with Dependency Injection (DI)

• Principles of DI
• Creating loosely coupled applications
• Configuring providers and declaring Injectables
• Satisfying dependencies with Provider metadata

Module 3: Testing Angular Components & Functionality

Structuring test strategies

• Unit testing vs. integration testing
• Working with mock Angular components
• Asynchronous testing with ES6 arrow functions

Leveraging 3rd party tools

• Defining tests with Jasmine
• Automating tests with Angular CLI and Karma
• Building and running a Protractor test

Module 4: Adding Interactivity to Your Applications

Coordinating Component interaction

• Passing data from parent to child with Input bindings
• Listening for property changes with ngOnChanges
• Binding a model to display with interpolation

Managing events

• Detecting and responding to user interaction
• Capturing browser events
• Emitting custom events to trigger behavior

Module 5: Navigation and Data Transformation

Creating modular applications

• Controlling application flow with the Component Router
• Dividing application functionality across multiple Component trees
• Parameterizing routes for dynamic navigation

Manipulating data with Pipes

• Formatting dates for display
• Chaining pipes to combine functionality
• Filtering data with custom Pipes

Module 6: Building Interactive Forms

Displaying and capturing data

• Developing forms with ngFormModel and FormBuilder
• Creating a form from a business object
• Two-way binding between input controls and data model

Validating form input

• Leveraging HTML5 and custom validation
• Providing user feedback from validators

Module 7: Managing Asynchronous Behavior

Keeping the App responsive

• Subscribing to Observables
• Converting stream data types with the Observable map function
• Optimizing change detection with immutability and onPush

Interacting with a REST Web service

• Retrieving data with the HTTP object
• Sending data asynchronously with POST
• Invoking different HTTP methods
• Gracefully handling errors

Module 8: Extending Angular Capabilities

• Adding functionality to the DOM
• Creating a custom styling directive
• Performing animation