Developers and Application Designers as well as those who are tasked with supporting Angular 12 applications will gain valuable knowledge required for success in their job roles while taking this course.  

Get started with the new Angular 12 today!

Objectives

Develop single page Angular applications using Typescript

Set up a complete Angular development environment

Create Components

Component Templates

Inter Component Communication

Template Driven Forms

Reactive Forms

Services and Dependency Injection

HTTP Client

Pipes and Data Formatting

Introduction to Single Page Applications

The Angular Component Router

Prerequisites

Web development experience using HTML, CSS and JavaScript is required to get the most out of this Angular 12 course. 

Knowledge of the browser DOM is also useful. Prior Angular experience, with AngularJS or the current version of Angular, is not required.

We offer a 1-2 day subset of our Introduction to JavaScript course to meet this pre-requisite if needed. Please ask your salesperson for details.

Duration

3 Days

Download Sample Labs Lab Setup Guide

Outline for Introduction to Angular 12 Programming Training

Chapter 1. Introducing Angular

  • What is Angular?
  • Central Features of the Angular Framework
  • Appropriate Use Cases
  • Building Blocks of an Angular Application
  • Basic Architecture of an Angular Application
  • Installing and Using Angular
  • Anatomy of an Angular Application
  • Running the Application
  • Building and Deploying the Application
  • Angular for Native Mobile Apps
  • Summary

Chapter 2. Introduction to TypeScript

  • Programming Languages for Use with Angular
  • TypeScript Syntax
  • Programming Editors
  • The Type System – Defining Variables
  • The Type System – Defining Arrays
  • Basic Primitive Types
  • Type in Functions
  • Type Inference
  • Defining Classes
  • Class Methods
  • Visibility Control
  • Class Constructors
  • Class Constructors – Alternate Form
  • Uninitialized Fields
  • Interfaces
  • Working with ES6 Modules
  • var vs let
  • Arrow Functions
  • Arrow Function Compact Syntax
  • Template Strings
  • Generics in Class
  • Generics in Function
  • Summary

Chapter 3. Components

  • What is a Component?
  • An Example Component
  • Creating a Component Using Angular CLI
  • The Component Class
  • The @Component Decorator
  • Registering a Component to Its Module
  • Component Template
  • Example: HelloComponent Template
  • Example: The HelloComponent Class
  • Using a Component
  • Run the Application
  • Component Hierarchy
  • The Application Root Component
  • The Bootstrap File
  • Component Lifecycle Hooks
  • Example Lifecycle Hooks
  • CSS Styles
  • Summary

Chapter 4. Component Templates

  • Templates
  • Template Location
  • The Mustache {{ }} Syntax
  • Setting DOM Element Properties
  • Setting Element Body Text
  • Event Binding
  • Expression Event Handler
  • Prevent Default Handling
  • Attribute Directives
  • Apply Styles by Changing CSS Classes
  • Example: ngClass
  • Applying Styles Directly
  • Structural Directives
  • Conditionally Execute Template
  • Example: ngIf
  • Looping Using ngFor
  • ngFor Local Variables
  • Manipulating the Collection
  • Example - Deleting an Item
  • Item Tracking with ngFor
  • Swapping Elements with ngSwitch
  • Grouping Elements
  • Template Reference Variable
  • Summary

Chapter 5. Inter Component Communication

  • Communication Basics
  • The Data Flow Architecture
  • Preparing the Child to Receive Data
  • Send Data from Parent
  • More About Setting Properties
  • Firing Event from a Component
  • @Output() Example - Child Component
  • @Output() Example - Parent Component
  • Full Two Way Binding
  • Setting up Two Way Data Binding in Parent
  • Summary

Chapter 6. Template Driven Forms

  • Template Driven Forms
  • Importing Forms Module
  • Basic Approach
  • Setting Up a Form
  • Getting User Input
  • Omitting ngForm Attribute
  • Initialize the Form
  • Two Way Data Binding
  • Form Validation
  • Angular Validators
  • Displaying Validation State Using Classes
  • Additional Input Types
  • Checkboxes
  • Select (Drop Down) Fields
  • Rendering Options for Select (Drop Down)
  • Date fields
  • Radio Buttons
  • Summary

Chapter 7. Reactive Forms

  • Reactive Forms Overview
  • The Building Blocks
  • Import ReactiveFormsModule
  • Construct a Form
  • Design the Template
  • Getting Input Values
  • Initializing the Input Fields
  • Setting Form Values
  • Subscribing to Input Changes
  • Validation
  • Built-In Validators
  • Showing Validation Error
  • Custom Validator
  • Using a Custom Validator
  • Supplying Configuration to Custom Validator
  • FormArray - Dynamically Add Inputs
  • FormArray - The Component Class
  • FormArray - The Template
  • FormArray - Values
  • Sub FormGroups - Component Class
  • Sub FormGroups - HTML Template
  • Why Use Sub FormGroups
  • Summary

Chapter 8. Services and Dependency Injection

  • What is a Service?
  • Creating a Basic Service
  • The Service Class
  • What is Dependency Injection?
  • Injecting a Service Instance
  • Injectors
  • Injector Hierarchy
  • Registering a Service with the Root Injector
  • Registering a Service with a Component's Injector
  • Register a Service with a Feature Module Injector
  • Where to Register a Service?
  • Dependency Injection in Other Artifacts
  • Providing an Alternate Implementation
  • Dependency Injection and @Host
  • Dependency Injection and @Optional
  • Summary

Chapter 9. HTTP Client

  • The Angular HTTP Client
  • Using The HTTP Client - Overview
  • Importing HttpClientModule
  • Service Using HttpClient
  • Making a GET Request
  • What does an Observable Object do?
  • Using the Service in a Component
  • The PeopleService Client Component
  • Error Handling
  • Customizing the Error Object
  • Making a POST Request
  • Making a PUT Request
  • Making a DELETE Request
  • Summary

Chapter 10. Pipes and Data Formatting

  • What are Pipes?
  • Built-In Pipes
  • Using Pipes in HTML Template
  • Chaining Pipes
  • Internationalized Pipes (i18n)
  • Loading Locale Data
  • The date Pipe
  • The number Pipe
  • Currency Pipe
  • Create a Custom Pipe
  • Custom Pipe Example
  • Using Custom Pipes
  • Using a Pipe with ngFor
  • A Filter Pipe
  • Pipe Category: Pure and Impure
  • Pure Pipe Example
  • Impure Pipe Example
  • Summary

Chapter 11. Introduction to Single Page Applications

  • What is a Single Page Application (SPA)
  • Traditional Web Application
  • SPA Workflow
  • Single Page Application Advantages
  • HTML5 History API
  • SPA Challenges
  • Implementing SPA's Using Angular
  • Summary

Chapter 12. The Angular Component Router

  • The Component Router
  • View Navigation
  • The Angular Router API
  • Creating a Router Enabled Application
  • Hosting the Routed Components
  • Navigation Using Links and Buttons
  • Programmatic Navigation
  • Passing Route Parameters
  • Navigating with Route Parameters
  • Obtaining the Route Parameter Values
  • Retrieving the Route Parameter Synchronously
  • Retrieving a Route Parameter Asynchronously
  • Query Parameters
  • Supplying Query Parameters
  • Retrieving Query Parameters Asynchronously
  • Problems with Manual URL entry and Bookmarking
  • Summary

Lab Exercises

Lab 1. Introduction to Angular
Lab 2. Introduction to TypeScript
Lab 3. Introduction to Components
Lab 4. Component Template
Lab 5. Create a Photo Gallery Component
Lab 6. Template Driven Form
Lab 7. Create an Edit Form
Lab 8. Reactive Form
Lab 9. Develop a Service
Lab 10. Develop an HTTP Client
Lab 11. Use Pipes
Lab 12. Basic Single Page Application Using Router
Lab 13. Build a Single Page Application (SPA)

12/18/2023 - 12/20/2023
10:00 AM - 06:00 PM
Eastern Standard Time
Online Virtual Class
USD $2,090.00
Enroll
02/05/2024 - 02/07/2024
10:00 AM - 06:00 PM
Eastern Standard Time
Online Virtual Class
USD $2,090.00
Enroll
03/11/2024 - 03/13/2024
10:00 AM - 06:00 PM
Eastern Standard Time
Online Virtual Class
USD $2,090.00
Enroll