Cart 0

Introduction to Angular 2+

Course Outline

Learn Angular 12 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.

Introduction to Angular 2+ Benefits

  • In this Angular Training course, you will learn how to:

    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 the following: 

    • Experience developing web pages at the level of JavaScript Essentials for Web Development.
    • Knowledge of HTML (HyperText Markup Language) and CSS (Cascading Style Sheets).

Angular Training 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 (command line interfaces) 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
  • Building Feature Modules
  • 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
  • Differentiating Template Driven and Reactive forms
  • 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 (HyperText Transfer Protocol) object
  • Sending data asynchronously with POST
  • Invoking different HTTP methods
  • Gracefully handling errors

Module 8: Extending Angular Capabilities

  • Adding functionality to the DOM (Document Object Model) 
  • Creating a custom styling directive 
  • Performing animation 
Course Dates - North America
Course Dates - Europe
Attendance Method
Additional Details (optional)