Angular Training (Front end development) - Blended Learning (Live Online Classroom + eLearning)

- Introduction

- Introduction to TypeScript

- Introduction to Data Types

- Let vs. Const

- Introduction to Functions

- Introduction to Parameters

- Introduction to Classes

- History of Angular

- Understanding Angular

- Set up Angular App

- Angular Building Blocks

- Observables

- Introduction to Reactive Forms

- Introduction to Server Communication

- Angular Modules

- Routing Module

- Feature Module

- Sharing Module

- Systematically Arranging Components of the App

- Introduction to Automated Testing

- Types of Automated Testing

- Introduction to Testing Tools

- Introduction to Test Bed

- Handling Component Dependencies

- RxJS - Observables

- Learning Objectives

- Explain Responsive Web Design (RWD)

- Understand the Bootstrap Grid System

- Learn Bootstrap Components

- Quiz

- Key Takeaways

- Learning Objectives

- What is Template Model?

- How Angular Binding works and the Type of Bindings

- Understand Angular Built-in Directives

- Basics of Webpack and SystemJS

- Quiz

- Key Takeaways

- Learning Objectives

- Understand Dependency Injection (DI)

- Understand DI Application Programming Interface

- Explain a Service

- Describe How to Create a Service

- Explain Injecting a Service

- Quiz

- Key Takeaways

- Learning Objectives

- Angular Directives

- Types of Angular Directives

- Built-in Angular Directives

- Working with Custom Directives

- Quiz

- Key Takeaways

- Learning Objectives

- What is Pipe in Angular

- Understand How Built-in Pipes Work in Angular

- Understand Angular Custom pipes

- Quiz

- Key Takeaways

- Learning Objectives

- Angular Form Benefits

- Template-Driven Approach

- Model-Driven Approach

- Angular Form Validation

- Quiz

- Key Takeaways

- Learning Objectives

- Understand How Angular Helps to Achieve SPA Using Routing

- Define the Benefits of @NgModule

- Identify Multiple Ways of Accessing Routes

- Understand the Process of the Routing Cycle

- Quiz

- Key Takeaways

- Learning Objectives

- Understand Working with RxJS

- Understand Angular Interaction with HTTP GET

- Describe the Process of Sending Data to the Server

- Explain the Difference Between Promises and Observables

- Quiz

- Key Takeaways

Build a Product List Web App in Angular

Implement CRUD functionality in Angular and build an Angular app with the following features:

Product form, product list, view, delete, and update products from the list.

- Course Overview

- Introduction to Single Page Applications (SPA)

- What do we need Angular for

- Setting up the Development Environment

- Angular Application Architecture

- First Angular App

- Module Introduction and Introduction to TypeScript

- Setting up the environment to write TypeScript

- Variable declarations (var, let, and const)

- Types - Primitives

- Types - Reference and Special Types

- Operators - Spread and Backticks

- Operators - Destructure and Rest

- Classes

- Interface

- Arrow Functions

- Modules

- Fetch

- Async or await

- Module Introduction and an overview of Angular Modules

- What are decorators

- Angular Modules and the @NgModule Decorator

- Declarations

- Imports and Exports

- Providers, bootstrap, and entry components

- Angular Application Bootstrap Mechanism

- Module Introduction

- Angular Components and the @Component Decorator

- Creating an Angular Component using the Angular CLI and on StackBlitz

- Component Decorator Metadata

- View Encapsulation - Emulated, ShadowDom, None

- Data Binding - String Interpolation

- Property Binding

- Event Binding

- @Input and @Output Property Decorators

- Two-way Data Binding

- Attribute Binding

- Class Binding

- Class Binding

- Introduction to Lifecycle Hooks in Angular

- Using Lifecycle Hooks in Angular

- View Queries - View Child, View Children, Content Child, Content Children

- Change the Detection Mechanism in Angular. ZoneJS, NgZones

- Introduction to Routing

- Implementing Routing in an Angular App

- Creating a User List. Setting the stage for Child Routing

- Abstracting the user link to a separate component

- Implementing Child Routes

- Path Match and Route Types

- Introduction to Route Guards in Angular

- CanActivate and CanActivateChild Guards in Angular

- CanDeactivate Guard in Angular

- Prefetching Data for a Component using Resolve

- Introduction to Section

- DI as a Pattern, DI as a Framework, and Types of Providers

- Hierarchical Dependency Injection

- Introduction to Services in Angular

- GET data from a Rest API using HttpClient

- CRUD Operations using HttpClient, HttpParams, and HttpHeaders

- Observables and Operators in Observables - Map, Retry, Catch

- Behavior Subject and Sharing Data using Behavior Subjects

- Introduction to Section

- Introduction to Directives

- Built-in Structural Directives

- Built-in Attribute Directives

- Building custom Attribute Directives

- Building Custom Structural Directives

- Introduction to Pipes in Angular

- Using Built In Pipes

- Creating Custom Pipes in Angular

- Pure and Impure Pipes in Angular

- Decorators Revisited

- Building Custom Decorators in Angular

- Building a Custom Lifecycle Hook Class Logger Decorator

- Building Custom Property Decorator in Angular

- Introduction to Section

- Types of Form Building Strategies in Angular

- Creating Long Bootstrap forms quickly using VS Code using Emmet

- Adding FormControl(s) to a Template Driven form using the ngModel directive

- Getting the JavaScript Object Representation of a form using the ngForm directive

- Disabling the Submit Button on a Form using the form's $invalid flag

- Getting the JavaScript Object Representation of a form in the TypeScript Class

- Adding Checkbox, Radio Buttons, and Select List to your Template Driven Form

- Creating Subsections in the form using the NgModelGroup directive

- Steps to implement a Reactive form in Angular

- Quickly creating a Bootstrap form for our Reactive form using Emmet

- Creating a Reactive form in the TypeScript class & connecting it to the template

- Adding form Validations to a Reactive Form

- Dynamically Adding or Removing FormControl(s) or FormGroup(s) using FormArray(s)

- Adding Synchronous Custom Validations to your Reactive Form

- Adding Async Custom Validations to your Reactive Form

- Resetting the value of a form

- Introduction to Section

- Creating an Angular CLI Project with SCSS as a base style

- Introducing Material Design Bootstrap into your Angular CLI Project

- Adding a Navbar in your header

- Adding Material Design Buttons

- Adding Cards

- Using Material Design Dropdowns and Form Inputs

- Introducing Angular Material into your Angular CLI Project on the top of MDB

- Adding Radio Buttons, Slide Toggle, Slider, Progress Bar, and Spinner

- Introduction to Firebase

- Creating an App using the Firebase Console

- Setting up your Angular CLI Project to support Firebase

- Interacting with Firebase Realtime Database using methods on AngularFireList

- Adding and Reading Data from Realtime Database in Firebase

- Updating and Deleting Data from Realtime Database in Firebase