Angular 10 Programming Comprehensive Training

Course Details

• In this Angular 10 training, attendees will learn how to:
• 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
• 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
• 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
• Type in Functions, Type Inference, Defining Classes
• Class Methods, Class Constructors, Class Constructors – Alternate Form
• Interfaces, Working with ES6 Modules
• Visibility Control, var vs let, Arrow Functions
• Arrow Function Compact Syntax, Arrow Function and Caller Context
• Template Strings, Generics in Class, Generics in Function
• Generics - Restricting Types
• TypeScript Transpilation
• 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
• 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
• 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, FormControl Constructor
• Getting Form Values, Setting Form Values
• The Synchronous Nature, Subscribing to Input Changes
• Validation, Built-In Validators, Showing Validation Error
• Custom Validator, Using a Custom Validator
• Supplying Configuration to Custom Validator
• 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, The Root Injector
• Registering a Service with a Component's 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, Simple Example
• Service Using HttpClient, ES6 Import Statements
• Making a GET Request, What does an Observable Object do?
• Using the Service in a Component, The PeopleService Client Component
• Error Handling, Customizing Error Object with .catch()
• 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 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
• 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
• 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
• Chapter 13. Advanced HTTP Client
• Request Options, Returning an HttpResponse Object
• Setting Request Headers, Creating New Observables
• Creating a Simple Observable, The Observable.create() Method
• Observable Operators, More About map
• Piping Operators, The flatMap() Operator
• The tap() Operator, The zip() Operator
• 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?
• Angular Built-in Modules, Anatomy of a Module Class
• @NgModule Properties, Feature Modules
• Create Feature Module Using CLI
• Add Artifacts to a Feature Module
• Using One Module From Another
• Module as a Service Injector
• 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
• Route Animations
• Chapter 16. Unit Testing Angular Applications
• Unit Testing Angular Artifacts, Testing Tools
• Testing Tools, Typical Testing Steps
• Test Results, Jasmine Test Suites, Jasmine Specs (Unit Tests)
• Expectations (Assertions), MatchersMatchers
• Examples of Using Matchers, Using the not Property
• Setup and Teardown in Unit Test Suites
• Example of beforeEach and afterEach Functions
• 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 Augury? Using Augury, Opening Augury
• Augury - Component Tree
• Augury - Router Tree.
• Catching Syntax Errors
• Lab Exercises
• Lab 1. Introduction to Angular
• Lab 2. Introduction to TypeScript
• Lab 3. Introduction to Components
• Lab 4. Component Template
• 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)
• .
• Lab 14. Advanced HTTP Client
• Lab 15. Using Angular Bootstrap
• Lab 16. Lazy Module Loading
• Lab 17. Advanced Routing
• Lab 18. Unit Testing
• Lab 19. Debugging Angular Applications