WA3446
Comprehensive Angular Programming Training
This Angular course teaches attendees skills they can use immediately in their work. Students learn the fundamentals of the latest version of Angular development, such as single-page browser applications, responsive websites, and hybrid mobile applications.
Course Details
Duration
5 days
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.
Skills Gained
- Build dynamic components and design reusable UI elements with data binding and lifecycle hooks.
- Use TypeScript for static typing for code clarity and to prevent runtime errors.
- Communicate between components, share data effectively, and build modular applications.
- Manage state and user interaction with form validation, routing, and HTTP connectivity.
- Create engaging Single Page Applications for modern, seamless user experiences.
Course Outline
- Introduction
- 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
- Introduction to TypeScript
- 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
- Uninitialized Fields
- Interfaces
- Working with ES6 Modules
- var vs let
- Arrow Functions
- Arrow Function Compact Syntax
- Template Strings
- Generics in Class
- Generics in Function
- Components
- What is a Component?
- An Example Component
- Creating a Component Using Angular CLI
- The Component Class
- The @Component Decorator
- Component Template
- Example: HelloComponent Template
- Example: The HelloComponent Class
- Using a Component
- Run the Application
- Component Hierarchy
- The Application Root Component
- Bootstrapping the main component
- Component Lifecycle Hooks
- Example Lifecycle Hooks
- CSS Styles
- Component Templates
- Templates
- Template Location
- The Interpolation {{ }} Syntax
- Setting DOM Element Properties
- Setting Element Body Text
- Setting tag attributes
- Event Binding
- Expression Event Handler
- Prevent Default Handling
- Attribute Directives
- Apply CSS Classes using [class]
- Applying Styles Directly using [style]
- Structural Directives
- Conditionally Execute Template using @if
- Looping Using @for
- Item Tracking with @for
- Swapping Elements with @switch
- 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
- 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
- Reactive Forms
- Reactive Forms Overview
- The Building Blocks
- Import ReactiveFormsModule
- Construct a Form
- Design the Template
- Getting Input Values
- Initializing the Input Fields
- Strictly typed 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
- 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 Application Configuration Injector
- Where to Register a Service?
- Dependency Injection in Other Artifacts
- Providing an Alternate Implementation
- Dependency Injection and @Host
- Dependency Injection and @Optional
- 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
- 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
- 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
- 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
- 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
- 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
- Unit Testing Angular Applications
- Unit Testing Angular Artifacts
- Introduction to Jasmine and Karma
- 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
- 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
- Simulating User Interaction
- Code Coverage testing
- 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
Upcoming Course Dates
