Angular Training Web Development - eLearning

Angular - Web Development - eLearning

This Angular Certification Training Course will help you master front-end web development with Angular. Gain in-depth knowledge of Angular concepts, such as facilitating the development of single-page web applications, dependency injection, typescript, components, directives, pipes, forms, routing, and testing.

Program Features:

• 20 hours of online self-paced learning
• Free introductory JavaScript course
• Flexibility in choosing classes
• Industry-recognized course completion certificate

Delivery Mode:

Blended - Online self-paced learning and live virtual classroom

Prerequisites:

There are no prerequisites for taking this Angular certification training course.

Target Audience:

• UI developers
• Technical project managers
• Full-stack web developers
• Quality assurance specialists
• Architects
• Students who wish to learn front-end UI development

Key Learning Outcomes:

By the end of this online Angular training course, you will be able to:

• Understand the design of single-page applications and how Angular facilitates their development
• Separate the model, view, and controller layers of your application and implement them using Angular
• Master Angular expressions, filters, and scopes
• Build Angular forms
• Write Angular directives
• Unit test and end-to-end test your Angular applications
• Developing interactive and dynamic UI using Bootstrap

Certification Details and Criteria:

• Complete at least 85 percent of the course or attend one complete batch
• Successful completion and evaluation of the project

Course Curriculum:

Self-paced Curriculum:

Lesson 01 - Single Page Applications

• 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

Lesson 02 - TypeScript and ESNext

• 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

Lesson 03 - Decorators

• 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

Lesson 04 - Component Decorator

• 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

Lesson 05 - Angular Routing

• 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

Lesson 06 - Dependency Injection

• 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

Lesson 07 - Directives Deep Dive

• 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

Lesson 08 - Forms 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

Lesson 09 - Using Third-Party Libraries

• 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

Live Virtual Class Curriculum:

Lesson 01 - Features of TypeScript

• Introduction
• Introduction to TypeScript
• Introduction to Data Types
• Let vs. Const
• Introduction to Functions
• Introduction to Parameters
• Introduction to Classes

Lesson 02 - Features of Angular

• History of Angular
• Understanding Angular
• Set up Angular App
• Angular Building Blocks
• Observables
• Introduction to Reactive Forms
• Introduction to Server Communication

Lesson 03 - Ngmodule

• Angular Modules
• Routing Module
• Feature Module
• Sharing Module
• Systematically Arranging Components of the App

Lesson 04 - Ng Unit Testing and Observables

• Introduction to Automated Testing
• Types of Automated Testing
• Introduction to Testing Tools
• Introduction to Test Bed
• Handling Component Dependencies
• RxJS - Observables

Lesson 05 - Bootstrap

• Learning Objectives
• Explain Responsive Web Design (RWD)
• Understand the Bootstrap Grid System
• Learn Bootstrap Components
• Quiz
• Key Takeaways

Lesson 06 - Binding and Events

• 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

Lesson 07 - Dependency Injection and Service

• 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

Lesson 08 - Directives

• Learning Objectives
• Angular Directives
• Types of Angular Directives
• Built-in Angular Directives
• Working with Custom Directives
• Quiz
• Key Takeaways

Lesson 09 - Pipes

• Learning Objectives
• What is Pipe in Angular
• Understand How Built-in Pipes Work in Angular
• Understand Angular Custom pipes
• Quiz
• Key Takeaways

Lesson 10 - Forms

• Learning Objectives
• Angular Form Benefits
• Template-Driven Approach
• Model-Driven Approach
• Angular Form Validation
• Quiz
• Key Takeaways

Lesson 11- Routing

• 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

Lesson 12 - HTTP, Promises, and Observables

• 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

Course End Project:

• 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.