IntroductionCourse OutlineEnroll

Duration

Five Days

Overview

This Angular course teaches attendees skills they can use immediately in their work. Students learn the fundamentals of Angular 15 development such as single-page browser applications, responsive websites, and hybrid mobile applications. 

Objectives

  • Develop single page Angular applications using Typescript
  • Set up a complete Angular development environment
  • Create Components, Directives, Services, Pipes, Forms and Custom Validators
  • Handle advanced network data retrieval tasks using Observables
  • Consume data from REST web services using the Angular HTTP Client
  • Handle push-data connections using the WebSocket protocol
  • Work with Angular Pipes to format data
  • Use advanced Angular Component Router features
  • Test and debug Angular applications using built in tools
  • Work with Angular CLI

Prerequisites

  • Web development experience using HTML, CSS and JavaScript is required to get the most out of this Angular 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.

Outline for Comprehensive Angular 15 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Chapter 13. Advanced HTTP Client
    • Request Options
    • Returning an HttpResponse Object
    • Setting Request Headers
    • Creating New Observables
    • Creating a Simple Observable
    • The Observable Constructor Method
    • Observable Operators
    • The map and filter Operators
    • The flatMap() Operator
    • The tap() Operator
    • The zip() Combinator
    • Caching HTTP Response
    • Making Sequential HTTP Calls
    • Making Parallel Calls
    • Customizing Error Object with catchError()
    • Error in Pipeline
    • Error Recovery
  • Chapter 14. Angular Modules
    • Why Angular Modules?
    • Anatomy of a Module Class
    • @NgModule Properties
    • Feature Modules
    • Example Module Structure
    • Create a Domain Module
    • Create a Routed/Routing Module Pair
    • Create a Service Module
    • Creating Common Modules
    • Using One Module From Another
    • Summary
  • Chapter 15. Advanced Routing
    • Routing Enabled Feature Module
    • Using the Feature Module
    • Lazy Loading the Feature Module
    • Creating Links for the Feature Module Components
    • More About Lazy Loading
    • Preloading Modules
    • routerLinkActive binding
    • Default Route
    • Wildcard Route Path
    • redirectTo
    • Child Routes
    • Defining Child Routes for Child Routes
    • Links for Child Routes
    • Navigation Guards
    • Creating Guard Implementations
    • Using Guards in a Route
  • Chapter 16. Unit Testing Angular Applications
    • Unit Testing Angular Artifacts
    • Testing Tools
    • Typical Testing Steps
    • Test Results
    • Jasmine Test Suites
    • Jasmine Specs (Unit Tests)
    • Expectations (Assertions)
    • Matchers
    • Examples of Using Matchers
    • Using the not Property
    • Setup and Teardown in Unit Test Suites
    • Example of beforeEach and afterEach Functions
    • Angular Test Module
    • Example Angular Test Module
    • Testing a Service
    • Injecting a Service Instance
    • Test a Synchronous Method
    • Test an Asynchronous Method
    • Using Mock HTTP Client
    • Supplying Canned Response
    • Testing a Component
    • Component Test Module
    • Creating a Component Instance
    • The ComponentFixture Class
    • Basic Component Tests
    • The DebugElement Class
    • Simulating User Interaction
  • Chapter 17. Debugging
    • Overview of Angular Debugging
    • Viewing TypeScript Code in Debugger
    • Using the debugger Keyword
    • Debug Logging
    • What is Angular DevTools?
    • Using Angular DevTools
    • Angular DevTools - Component Structure
    • Angular DevTools - Change Detection Execution
    • Catching Syntax Errors
    • Summary
01/01/2024 - 01/05/2024
10:00 AM - 06:00 PM
Eastern Standard Time
Online Virtual Class
USD $2,995.00
Enroll
02/05/2024 - 02/09/2024
10:00 AM - 06:00 PM
Eastern Standard Time
Online Virtual Class
USD $2,995.00
Enroll
03/11/2024 - 03/15/2024
10:00 AM - 06:00 PM
Eastern Standard Time
Online Virtual Class
USD $2,995.00
Enroll