Angular 8

Overview

Duration: 5 days

The Angular8 training course covers all major components, syntax, and tooling of theAngular web application framework. Angular 8 fulfil the expectations of moderndevelopers who demand fast performance and responsiveness from their webapplications. Participants will set up their working environment to have allthe tools needed to start building Angular 8 components with minimum effort.The program starts with an introduction of JavaScript, NPM, and TypeScript.Participant will understand TypeScript, a powerful typed superset of JavaScriptthat compiles to JavaScript. The course dives into component-driven developmentwith Angular components. The participants will also learn to create and useAngular 8 Directives and Pipes. Data binding (both 1 and 2 way) is discussed inthe context of the new directive API. Finally, the core parts of Angular suchas services, HTTP, routing, form validation are covered to develop applicationsbased on the Model-View-Controller (MVC) architecture.


Objectives

?Utilize the Angular core constructs to build Single Page Applications.

?Install necessary modules correctly using NPM.

?Write applications in TypeScript to be transferred to browser-supported JavaScript.

?Build Template and Module-driven forms.

?Utilize Pipes and built-in data formatting tools.

?Setup routing and URLs.

?Execute CRUD commands on REST APIs over Http.

Content

Day 1

1.Introduction
? Overview of ES5
? Installing Node and NPM
? JavaScript Basic Syntax
? Detailing on ES5 problems
? JavaScript project creation using NPM
? Introduction to TypeScript
? TypeScript Environment Setup
? Basic Syntax
? Types, Variables and Operators
? Decision Making
? Loops
? Functions and Lambda Expressions
? Summary

2.Introduction to TypeScript
? Classes and Objects
? Interface
? Inheritance
? Generics
? Enums
? Number and Strings
? Arrays
? Tuples and Union
? Namespaces and Modules
? Decorators
? Ambients
? Mixins
? Summary
 
3.Introduction to Angular
?  Angular CLI
? Why Angular 8
? Angular 8 Features
? Installing and Using Angular 8
? Creating the first Angular Project
? Architecture Overview
? What is new in Angular 8
? Summary

4.Building with Components
? Introducing the component
? Component Decorator Properties
? Template
? Inline Template
? Interpolation – Plain text, Object and Array
? Adding CSS
? Component Starter
? Integrating Bootstrap
? Summary

Day 2

5.Data and Event Binding
? Binding Syntax
? One-Way Binding
? Property binding
? Attribute binding
? Setting Element Properties
? Binding Events
? Key event filtering
? Template Reference Variables
? Two-Way Binding of Input Fields
? Summary
 
6.Attribute Directive
? What are Directives
? Directive Types
? Apply Styles using NgClass and NgStyle
? Applying Styles Directly
? Obsolete Directives and Property Binding
? Controlling Element Visibility
? Setting Image Source Dynamically
? Setting Hyperlink Source Dynamically
? Creating custom Directive
? Summary

7.Structural Directives
? Adding and Removing Elements Dynamically
? Looping Using ngFor
? ngFor - Basic Syntax
? Creating Tables with ngFor
? ngFor Local Variables
? Swapping Elements with ngSwitch
? ngSwitch - Basic Syntax
? ngSwitch - Full Template Syntax
? Creating custom Directive
? Summary

8.Template Driven Forms
? A Basic Angular Form
? Binding Input Fields
? Accessing the Form Object
? Binding the Form Submit Event
? The Submit Function
? Basic HTML5 Validation - "required" Attribute
? Angular Validators
? Angular Validation State
? Displaying Form Validation State
? Displaying Field Validation State
? Disabling Submit when Form is Invalid
? Submitting the Form
? Binding to Object Variables
? Additional Input Types
? Checkboxes
? Select (drop down) Fields
? Rendering Options for Select (drop down)
? Date fields
? Radio Buttons
? Summary

Day 3

9.Pipes and Data Formatting
? What are Pipes?
? Using a Built-in Pipe
? Chaining Pipes
? Some Pipe Examples
? Decimal Pipe, Currency Pipe
? Custom Pipes
? Using Custom Pipes
? A Filter Pipe
? A Sort Pipe
? Pipe Category: Pure and Impure
? Pure Pipe Example
? Impure Pipe Example
? Summary

10.The Angular Component Router
? Routing and Navigation
? The Component Router
? Traditional Browser Navigation
? Component Router Terminology
? Setting up the Component Router
? Routes
? The app.routes.ts File
? Bootstrapping Routing in main.ts
? A Basic App With Routing
? App Routes
? App Component
? Programmatic Navigation
? Basic Navigation
? Passing Data During Navigation
? Creating Routes with Route Parameters
? Navigating with Route Parameters
? Using Route Parameter Values
? Retrieving the Route Parameter Synchronously
? Retrieving the Route Parameter Asynchronously
? Query Parameters
? Query Parameters - queryParams
? Query Parameters - Navigation
? Retrieving Query Parameters Asynchronously
?Summary

11.Services and Dependency Injection
? What is a Service?
? Creating a Basic Service
? What is Dependency Injection?
? What Dependency Injection Looks Like
? Injecting Services
? Using a Service in a Component: Dedicated Instance
? Using a Service in a Component: Shared Instance
? Dependency Injection and @Self
? Dependency Injection and @Host
? Dependency Injection and @Optional
? Summary
 
12.RxJS and Observables
? What is an Observable?
? Introduction
? Environment Setup
? What are Streams
? What is RxJS
? RxJS Observable
? Subject
? Behaviour Subject
? Core RxJS Concepts - Errors, Completion and Subscriptions
? RxJS Operators
? RxJS Filter Operator
? RxJS concatMap Operator
? RxJS mergeMap Operator
? RxJS exhaustMap Operator
? RxJS startWith Operator
? Building Components with RxJS
? Sharing HTTP Responses with the shareReplay Operator
? Observable Concatenation
? Understanding the merge Observable combination Strategy
? Unsubscription
? Summary

Day 4

13.HTTP Client
?  The Angular HTTP Client
? Importing Individual Providers into Services
? Service Using Http Client
? Service Imports
? What does an Observable Object do?
? Making a Basic HTTP GET Call
? Using the Service in a Component
? Importing Observable Methods
? Enhancing the Service with .map() and .catch()
? Using .map()
? Using .catch()
? Using to Promise()
? GET Request
? GET Request with Options
? GET Request Example
? POST Request
? POST Request Example
? Reading HTTP Response Headers
? Summary

14.Reactive Forms
? Introduction
? Registering the reactive forms module
? Generating a new form control
? Registering the control
? Managing control values
? Grouping form controls
? Creating FormGroup
? Associating the FormGroup model and View
? Saving form data
? Displaying the component
? Creating nested form groups
? Grouping the nested form in the template
? Partial model updates
? Generating form controls with FormBuilder
? Injecting the FormBuilder service
? Generating form controls
? Simple form validation
? Dynamic controls using form arrays
? Summary
 
15.Angular Modules
? Introduction
? What are Modules?
? Getting Started with Feature Modules
? Splitting Modules Correctly
? Adding Routes to Feature Modules
? Component Declarations
? Understanding Shared Modules
? Understanding the Core Module
? Understanding Lazy Loading
? Implementing Lazy Loading
? Modules & Services
? Loading Services Differently
? Summary

16.Dynamic Components
? Introduction
? Dynamic component Loading
? The anchor directive
? Loading Components
? Resolving Components
? Developing Dialog Component
? Adding the Dialog Component
? Summary

Day 5

17.Angular Material Design
? Introduction
? Key principles
? Setting up Angular Material
? Creating Material Master Module
? First Material Components
? Flexbox Basics
? Adding Sidenav Component
? Adding Responsiveness
? Using Lists
? Using Cards
? Using Tabs
? Using Tables
? Adding Pagination
? Adding Filtering
? Adding Header Sorting
? Summary

18. Angular Material Design – Dialogs and Popups
? Adding Toolbar Menu
? Dialog Basics
? Creating First Dialog
? Scaffolding a Form
? Customizing the Form
? Adding Form Validation
? Using DatePicker
? Saving the Data
? Snackbar Notification
? Creating Custom Themes
? Toggling Themes
? RTL and LTR Support
? Summary

19.Client-Side Authentication Service
? Introduction to Cryptographic Hashes
? Implement a Password Policy
? Modelling a User Session
? Browser Cookies
? Protect Cookies using HTTP Only Cookies
? Client-Side User Session Management
? Securing a REST Endpoint
? User Login
? Implementing Logout
? Understanding CSRF
? Implement CSRF double submit cookie defense
? Introduction JSON Web Tokens
? JSON Web Tokens In Detail - Header and Payload
? JWT Signature With HS256 / RS256
? Combine Cookies and JWTs
? Setting Subject and Expiration
? Storing JWT In Local Storage
? Authorization Router Guard
? Summary

20.Unit Testing
? Introduction to Jasmine and Karma
? Benefits of Unit Testing
? Karma Config
? Using – describe
? Using – it
? Using – beforeEach
? Testing a Form
? Testing a Component with Services
? Testing an asynchronous operation
? Summary

Audience

Prerequisites

Before attending this course, students should have general programming experience and knowledge of HTML, CSS and JavaScript

Certification

#AdvancedTechnologyCourses #AdvancedTechnologyCoursesMY #AdvancedTechnologyCoursesMalaysia #AdvancedTechnologyCoursesAsia #AdvancedTechnologyCoursesVILT #VILT #OnlineTraining #A8 #A8MY #A8Malaysia #A8Asia #WebDev

Schedule

Course ID:
A8


Show Schedule for: