Angular 9

Course Overview

Developed and maintained by Google, Angular has evolved over the years into a comprehensive development framework that includes all of the tools and components required to build a web applications.

At the end of the training, participants will be able to:

Introduce Angular 9
Discuss what is Angular 9
Discuss the various versions of Angular
Define the features of Angular 9
Explain about Typescript and its features

Pre-requisite

Any developer who is building Angular applications
Teams getting started with or working on Angular projects

Duration

5 Days

Course Outline

ES6 & Typescript – Essentials

Introduction
Types & Strict Typing
REPL
Built-in types
Classes
Properties
Methods
Constructors
Inheritance
Utilities
Annotations
Tuples
Fat Arrow Functions
Template Strings

Getting Started with Angular

Introduction to SPA’s & Angular
Angular v/s v/s React v/s Vue

Creating our First Angular App (TaskList / ToDo App)

Preparing the Angular-cli &Development Environment
Creating and Preparing the Project
Creating the Project
Adding the Bootstrap CSS Package
Starting the Development Tools
Editing the HTML File
Adding Angular Features to the Project
Preparing the HTML File
Creating a Data Model
Preparing the Template
Preparing the Component
Understanding DI (dependency injection)
Putting the Application Together
Adding Features to the Example Application
Adding the To-Do Table
Creating a Two-Way Data Binding
Adding To-Do Items
Finishing touches

E-Commerce App – Part 1

Preparing the Project
Installing the Additional NPM Packages
Preparing the RESTful Web Service
Preparing the HTML File
Understanding the MVC Pattern
Understanding RESTful Services
Common Design Pitfalls
Putting the Logic in the Wrong Place
Adopting the Data Store Data Format
Planning Architecture (SRP / Separation of concerns )
Starting the RESTful Web Service
Preparing the Angular Project Features
Updating the Root Component
Updating the Root Module
Inspecting the Bootstrap File
Starting the Data Model
Creating the Model Classes
Creating the Data Source with Observables
Creating the Model Repository
Creating the Feature Module

Starting the Store

Creating the Store Component and Template
Creating the Store Feature Module
Updating the Root Component and Root Module
Adding Store Features the Product Details
Displaying the Product Details
Adding Category Selection
Adding Product Pagination
Creating a Custom Directive
Understandind SRP & OCP etc (single responsibility principle & Open & Closed Principle)

E-Commerce App – Part 2 : Orders and Checkout

Creating the Cart
Creating the Cart Model
Creating the Cart Summary Components
Integrating the Cart into the Store
Adding URL Routing
Creating the Cart Detail and Checkout Components
Creating and Applying the Routing Configuration
Navigating Through the Application
Guarding the Routes
Completing the Cart Detail Feature
Processing Orders
Extending the Model
Collecting the Order Details
Using the RESTful Web Service
Applying the Data Source
View Encapsulation

E-Commerce App – Part 3: Administration

Creating the Lazy Loaded Module
Configuring the URL Routing System
Navigating to the Administration URL (Auxiliary routes & Lazy Loading)
Implementing Authentication
Understanding the Authentication System
Extending the Data Source
Creating the Authentication Service
Enabling Authentication
Extending the Data Source and Repositories
Creating the Administration Feature Structure
Creating the Placeholder Components
Preparing the Common Content and the Feature Module
Implementing the Product Feature
Rxjs Operators
Implementing the Orders Feature

E-Commerce App – Part 4 : PWA – (Progressive/Offline Features and Deployment)

Adding Progressive Features
Installing the PWA Package
Caching the Data URLs
Responding to Connectivity Changes
Preparing the Application for Deployment
Creating the Data File
Creating the Server
Changing the Web Service URL in the Repository Class
Building and Testing the Application
Testing the Progressive Features
Containerizing the SportsStore Application
Installing Docker
Preparing the Application
Creating the Docker Container
Running the Application

Reactive or Model Based Forms

1. Adding Form Data Validation
1. Validating the Entire Form
1. Using Model-Based Forms
1. Enabling Model-Based Forms Feature
1. Defining the Form Model Classes
1. Using the Model for Validation
1. Generating the Form Elements from the Model / Service
1. Creating Custom Form Validators
1. Applying a Custom Validator

Creating Custom Directives : Part 1 - Attribute Directives

Creating a Simple Attribute Directive
Applying a Custom Directive
Accessing Application Data in a Directive
Reading Host Element Attributes
Creating Data-Bound Input Properties – @input
Responding to Input Property Changes
Creating Custom Events – @output
Binding to a Custom Event
Creating Host Element Bindings – @hostBinder & @hostListener
Creating a Two-Way Binding on the Host Element
Replacing the ngModel directive
Exporting a Directive for Use in a Template Variable
Change Detection Strategy

Creating Custom Directives : Part 2 - Structural Directives

Creating a Simple Structural Directive
Implementing the Structural Directive Class
Enabling the Structural Directive
Using the Concise Structural Directive Syntax
Creating Iterating Structural Directives
Replacing the *ngFor directive
Providing Additional Context Data ( Template variables like index,first,last,odd,even etc)
Using the Concise Structure Syntax
Dealing with Property-Level Data Changes – ngOnInit & ngOnChanges
Dealing with Collection-Level Data Changes – ngDoCheck
Restricting Memory leak – ngDoCheck
Querying the Host Element Content @ViewChild
Querying Multiple Content Children @ViewChildren
Receiving Query Change Notifications