Duration: 3 days

Overview

This introduction to Angular training teaches attendees how to build interactive Single Page Applications (SPAs) quickly and easily.

Objectives

  • Design reusable UI elements with robust data binding and lifecycle hooks.
  • Use TypeScript for cleaner, more robust code and prevent runtime errors.
  • Share data effectively and orchestrate complex functionalities across your application.
  • Conquer forms by implementing validation, handling user interactions, and building dynamic form experiences.
  • Use the Angular router to create seamless navigation and user journeys.

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

Outline for Introduction to Angular 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
04/01/2024 - 04/03/2024
10:00 AM - 06:00 PM
Eastern Standard Time
Online Virtual Class
USD $1,995.00
Enroll
05/20/2024 - 05/22/2024
10:00 AM - 06:00 PM
Eastern Standard Time
Online Virtual Class
USD $1,995.00
Enroll
07/08/2024 - 07/10/2024
10:00 AM - 06:00 PM
Eastern Standard Time
Online Virtual Class
USD $1,995.00
Enroll