Comprehensive Angular Programming Training

Comprehensive Angular Programming Training

Course Length:
Delivery Methods: Available for private class only
Course Topics
  • 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 WebSockets 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
Course Overview

This Comprehensive Angular 10 Programming Training training class covers all the essential topics found in the introductory course as well as additional topics typically encountered while developing real-world applications. The Comprehensive Angular 10 course is designed to get students up and running with basic Angular 10 development and provide the knowledge needed for more challenging tasks.

Course Outline
  1. Introducing Angular
    1. What is Angular?
    2. Central Features of the Angular Framework
    3. Appropriate Use Cases
    4. Building Blocks of an Angular Application
    5. Basic Architecture of an Angular Application
    6. Installing and Using Angular
    7. Anatomy of an Angular Application
    8. Running the Application
    9. Building and Deploying the Application
    10. Summary
  2. Introduction to TypeScript
    1. Programming Languages for Use with Angular
    2. TypeScript Syntax
    3. Programming Editors
    4. The Type System – Defining Variables
    5. The Type System – Defining Arrays
    6. Type in Functions
    7. Type Inference
    8. Defining Classes
    9. Class Methods
    10. Class Constructors
    11. Class Constructors – Alternate Form
    12. Interfaces
    13. Working with ES6 Modules
    14. Visibility Control
    15. var vs let
    16. Arrow Functions
    17. Arrow Function Compact Syntax
    18. Arrow Function and Caller Context
    19. Template Strings
    20. Generics in Class
    21. Generics in Function
    22. Generics - Restricting Types
    23. TypeScript Transpilation
    24. Summary
  3. Components
    1. What is a Component?
    2. An Example Component
    3. Creating a Component Using Angular CLI
    4. The Component Class
    5. The @Component Decorator
    6. Registering a Component to Its Module
    7. Component Template
    8. Example: HelloComponent Template
    9. Example: The HelloComponent Class
    10. Using a Component
    11. Run the Application
    12. Component Hierarchy
    13. The Application Root Component
    14. The Bootstrap File
    15. Component Lifecycle Hooks
    16. Example Lifecycle Hooks
    17. CSS Styles
    18. Summary
  4. Component Templates
    1. Templates
    2. Template Location
    3. The Mustache {{ }} Syntax
    4. Setting DOM Element Properties
    5. Event Binding
    6. Expression Event Handler
    7. Prevent Default Handling
    8. Attribute Directives
    9. Apply Styles by Changing CSS Classes
    10. Example: ngClass
    11. Applying Styles Directly
    12. Structural Directives
    13. Conditionally Execute Template
    14. Example: ngIf
    15. Looping Using ngFor
    16. ngFor Local Variables
    17. Manipulating the Collection
    18. Example - Deleting an Item
    19. Item Tracking with ngFor
    20. Swapping Elements with ngSwitch
    21. Template Reference Variable
    22. Summary
  5. Inter Component Communication
    1. Communication Basics
    2. The Data Flow Architecture
    3. Preparing the Child to Receive Data
    4. Send Data from Parent
    5. More About Setting Properties
    6. Firing Event from a Component
    7. @Output() Example - Child Component
    8. @Output() Example - Parent Component
    9. Full Two Way Binding
    10. Setting up Two Way Data Binding in Parent
    11. Summary
  6. Template Driven Forms
    1. Template Driven Forms
    2. Importing Forms Module
    3. Basic Approach
    4. Setting Up a Form
    5. Getting User Input
    6. Omitting ngForm Attribute
    7. Initialize the Form
    8. Two Way Data Binding
    9. Form Validation
    10. Angular Validators
    11. Displaying Validation State Using Classes
    12. Additional Input Types
    13. Checkboxes
    14. Select (Drop Down) Fields
    15. Rendering Options for Select (Drop Down)
    16. Date fields
    17. Radio Buttons
    18. Summary
  7. Reactive Forms
    1. Reactive Forms Overview
    2. The Building Blocks
    3. Import ReactiveFormsModule
    4. Construct a Form
    5. Design the Template
    6. FormControl Constructor
    7. Getting Form Values
    8. Setting Form Values
    9. The Synchronous Nature
    10. Subscribing to Input Changes
    11. Validation
    12. Built-In Validators
    13. Showing Validation Error
    14. Custom Validator
    15. Using a Custom Validator
    16. Supplying Configuration to Custom Validator
    17. Sub FormGroups - Component Class
    18. Sub FormGroups - HTML Template
    19. Why Use Sub FormGroups
    20. Summary
  8. Services and Dependency Injection
    1. What is a Service?
    2. Creating a Basic Service
    3. The Service Class
    4. What is Dependency Injection?
    5. Injecting a Service Instance
    6. Injectors
    7. Injector Hierarchy
    8. The Root Injector
    9. Registering a Service with a Component's Injector
    10. Where to Register a Service?
    11. Dependency Injection in Other Artifacts
    12. Providing an Alternate Implementation
    13. Dependency Injection and @Host
    14. Dependency Injection and @Optional
    15. Summary
  9. HTTP Client
    1. The Angular HTTP Client
    2. Using The HTTP Client - Overview
    3. Importing HttpClientModule
    4. Simple Example
    5. Service Using HttpClient
    6. ES6 Import Statements
    7. Making a GET Request
    8. What does an Observable Object do?
    9. Using the Service in a Component
    10. The PeopleService Client Component
    11. Error Handling
    12. Customizing Error Object with .catch()
    13. Making a POST Request
    14. Making a PUT Request
    15. Making a DELETE Request
    16. Summary
  10. Pipes and Data Formatting
    1. What are Pipes?
    2. Built-In Pipes
    3. Using Pipes in HTML Template
    4. Chaining Pipes
    5. Internationalized Pipes (i18n)
    6. Loading Locale Data
    7. The number Pipe
    8. Currency Pipe
    9. Create a Custom Pipe
    10. Custom Pipe Example
    11. Using Custom Pipes
    12. Using a Pipe with ngFor
    13. A Filter Pipe
    14. Pipe Category: Pure and Impure
    15. Pure Pipe Example
    16. Impure Pipe Example
    17. Summary
  11. Introduction to Single Page Applications
    1. What is a Single Page Application (SPA)
    2. Traditional Web Application
    3. SPA Workflow
    4. Single Page Application Advantages
    5. HTML5 History API
    6. SPA Challenges
    7. Implementing SPA's Using Angular
    8. Summary
  12. The Angular Component Router
    1. The Component Router
    2. View Navigation
    3. The Angular Router API
    4. Creating a Router Enabled Application
    5. Hosting the Routed Components
    6. Navigation Using Links and Buttons
    7. Programmatic Navigation
    8. Passing Route Parameters
    9. Navigating with Route Parameters
    10. Obtaining the Route Parameter Values
    11. Retrieving the Route Parameter Synchronously
    12. Retrieving a Route Parameter Asynchronously
    13. Query Parameters
    14. Supplying Query Parameters
    15. Retrieving Query Parameters Asynchronously
    16. Problems with Manual URL entry and Bookmarking
    17. Summary
  13. Advanced HTTP Client
    1. Request Options
    2. Returning an HttpResponse Object
    3. Setting Request Headers
    4. Creating New Observables
    5. Creating a Simple Observable
    6. The Observable.create() Method
    7. Observable Operators
    8. More About map
    9. Piping Operators
    10. The flatMap() Operator
    11. The tap() Operator
    12. The zip() Operator
    13. Caching HTTP Response
    14. Making Sequential HTTP Calls
    15. Making Parallel Calls
    16. Customizing Error Object with catchError()
    17. Error in Pipeline
    18. Error Recovery
    19. Summary
    20. Chapter 14. Angular Modules
    21. Why Angular Modules?
    22. Angular Built-in Modules
    23. Anatomy of a Module Class
    24. @NgModule Properties
    25. Feature Modules
    26. Create Feature Module Using CLI
    27. Add Artifacts to a Feature Module
    28. Using One Module From Another
    29. Module as a Service Injector
    30. Summary
  14. Advanced Routing
    1. Routing Enabled Feature Module
    2. Using the Feature Module
    3. Lazy Loading the Feature Module
    4. Creating Links for the Feature Module Components
    5. More About Lazy Loading
    6. Preloading Modules
    7. routerLinkActive binding
    8. Default Route
    9. Wildcard Route Path
    10. redirectTo
    11. Child Routes
    12. Defining Child Routes
    13. for Child Routes
    14. Links for Child Routes
    15. Navigation Guards
    16. Creating Guard Implementations
    17. Using Guards in a Route
    18. Route Animations
    19. Summary
  15. Unit Testing Angular Applications
    1. Unit Testing Angular Artifacts
    2. Testing Tools
    3. Typical Testing Steps
    4. Test Results
    5. Jasmine Test Suites
    6. Jasmine Specs (Unit Tests)
    7. Expectations (Assertions)
    8. Matchers
    9. Examples of Using Matchers
    10. Using the not Property
    11. Setup and Teardown in Unit Test Suites
    12. Example of beforeEach and afterEach Functions
    13. Angular Test Module
    14. Example Angular Test Module
    15. Testing a Service
    16. Injecting a Service Instance
    17. Test a Synchronous Method
    18. Test an Asynchronous Method
    19. Using Mock HTTP Client
    20. Supplying Canned Response
    21. Testing a Component
    22. Component Test Module
    23. Creating a Component Instance
    24. The ComponentFixture Class
    25. Basic Component Tests
    26. The DebugElement Class
    27. Simulating User Interaction
    28. Summary
  16. Debugging
    1. Overview of Angular Debugging
    2. Viewing TypeScript Code in Debugger
    3. Using the debugger Keyword
    4. Debug Logging
    5. What is Augury?
    6. Using Augury
    7. Opening Augury
    8. Augury - Component Tree
    9. Augury - Router Tree.
    10. Catching Syntax Errors
    11. Summary
Class Materials

Each student in our Live Online and our Onsite classes receives a comprehensive set of materials, including course notes and all the class examples.

Class Prerequisites

Experience in the following is required for this Angular class:

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

Experience in the following would be useful for this Angular class:

  • Knowledge of the browser DOM is also useful. Prior Angular experience, with AngularJS or the current version of Angular, is not required.
Request a Private Class
  • Private Class for your Team
  • Online or On-location
  • Customizable
  • Expert Instructors
Request Pricing