Angular Training (Front end development) - Blended Learning (Live Online Classroom + eLearning)
450,00 EUR
- 50 hours
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.
Live Virtual Class Curriculum
![Hero](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fo4uw3mgf%2Fproduction%2F6d30fbf0272a4f7aa2ce5250c9658eee85a6c07d-5304x7952.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
Features of TypeScript
Lesson 01
- Introduction
- Introduction to TypeScript
- Introduction to Data Types
- Let vs. Const
- Introduction to Functions
- Introduction to Parameters
- Introduction to Classes
Features of Angular
Lesson 02
- History of Angular
- Understanding Angular
- Set up Angular App
- Angular Building Blocks
- Observables
- Introduction to Reactive Forms
- Introduction to Server Communication
Ngmodule
Lesson 03
- Angular Modules
- Routing Module
- Feature Module
- Sharing Module
- Systematically Arranging Components of the App
Ng Unit Testing and Observables
Lesson 04
- Introduction to Automated Testing
- Types of Automated Testing
- Introduction to Testing Tools
- Introduction to Test Bed
- Handling Component Dependencies
- RxJS - Observables
Bootstrap
Lesson 05
- Learning Objectives
- Explain Responsive Web Design (RWD)
- Understand the Bootstrap Grid System
- Learn Bootstrap Components
- Quiz
- Key Takeaways
Binding and Events
Lesson 06
- 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
Dependency Injection and Service
Lesson 07
- 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
Directives
Lesson 08
- Learning Objectives
- Angular Directives
- Types of Angular Directives
- Built-in Angular Directives
- Working with Custom Directives
- Quiz
- Key Takeaways
Pipes
Lesson 09
- Learning Objectives
- What is Pipe in Angular
- Understand How Built-in Pipes Work in Angular
- Understand Angular Custom pipes
- Quiz
- Key Takeaways
Forms
Lesson 10
- Learning Objectives
- Angular Form Benefits
- Template-Driven Approach
- Model-Driven Approach
- Angular Form Validation
- Quiz
- Key Takeaways
Routing
Lesson 11
- 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
HTTP, Promises, and Observables
Lesson 12
- 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
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.
eLearning Course Curriculum
![Hero](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fo4uw3mgf%2Fproduction%2F67778cd2283bb975d7bfaba74ed380c8cfa32259-6000x4000.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
Single Page Applications
Lesson 01
- 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
TypeScript and ESNext
Lesson 02
- 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
Decorators
Lesson 03
- 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
Component Decorator
Lesson 04
- 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
Angular Routing
Lesson 05
- 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
Dependency Injection
Lesson 06
- 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
Directives Deep Dive
Lesson 07
- 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
Forms in Angular
Lesson 08
- 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
Using Third-Party Libraries
Lesson 09
- 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
Learning Outcomes
By the end of this online Angular training course, you will be able to:
Design
Understand the design of single-page applications and how Angular facilitates their development
Model
Separate the model, view, and controller layers of your application and implement them using Angular
Angular expressions
Master Angular expressions, filters, and scopes
Build
Build Angular forms and write Angular directives
Unit test
Unit test and end-to-end test your Angular applications
Dynamic UI
Developing interactive and dynamic UI using Bootstrap
Key Features
50 hours of Blended Learning
Blended - Online self-paced learning and live virtual classroom
20 hours of online self-paced learning
30 hours of instructor-led training
Free introductory JavaScript course
Flexibility in choosing classes
Industry-recognized course completion certificate
Complete at least 85 percent of the course or attend one complete batch Successful completion and evaluation of the project
![Hero](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fo4uw3mgf%2Fproduction%2F3cc0317062302793d9b96ba73451b4695a5d6fff-4948x3303.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
![](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fo4uw3mgf%2Fproduction%2Fd4706f5ff64250a141461b07bcf06de1b0aa4d45-7846x5233.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
Who Should Enroll in this Program?
There are no prerequisites for taking this Angular certification training course.
UI developers
Technical project/ product manager
Full-stack web developers
Quality Assurance
Students in UG/ PG programs
![](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fo4uw3mgf%2Fproduction%2F4a62a9240acd7e91f42786201cd72ab32c6ec840-5418x3612.jpg%3Ffit%3Dmax%26auto%3Dformat&w=3840&q=75)
Need corporate solutions or LMS integration?
Didn't find the course or program which would work for your business? Need LMS integration? Write us, we will solve everything!