Call : (+91) 968636 4243
Mail : info@EncartaLabs.com
EncartaLabs

Angular 10

( Duration: 5 Days )

The Angular 10 training course covers all the basics including: Typescript, components, directives, services, pipes, form development, HttpClient and observables. In addition, it covers advanced usage of HttpClient, observables and routing. Added to that are topics on consuming WebSockets data, Testing and Debugging of Angular applications.

By attending Angular 10 workshop, delegates will learn 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

  • JavaScript, HTML and CSS Web Development

The Angular 10 class is ideal for:

  • Programmers, Web-Developers, App Developers

COURSE AGENDA

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
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
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
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
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
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
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
  • Sub FormGroups - Component Class
  • Sub FormGroups - HTML Template
  • Why Use Sub FormGroups
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
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
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
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
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
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
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
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
  • 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
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
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

Encarta Labs Advantage

  • One Stop Corporate Training Solution Providers for over 6,000 various courses on a variety of subjects
  • All courses are delivered by Industry Veterans
  • Get jumpstarted from newbie to production ready in a matter of few days
  • Trained more than 50,000 Corporate executives across the Globe
  • All our trainings are conducted in workshop mode with more focus on hands-on sessions

View our other course offerings by visiting https://www.encartalabs.com/course-catalogue-all.php

Contact us for delivering this course as a public/open-house workshop/online training for a group of 10+ candidates.

Top
Notice
X