AngularJS Course Syllabus

80% Practical training & 20% Theory

Experts Available 24x7 for your queries
35 to 45 Hrs. of training

Trainer Profile

Our Trainers provide complete freedom to the students, to explore the subject and learn
based on real-time examples. Our trainers help the candidates in completing their projects
and even prepare them for interview questions and answers. Candidates are free to ask any
questions at any time.

 More than 7+ Years of Experience

 Expert level Subject Knowledge and fully up-to-date on real-world industry
applications
 Trainers have experienced on multiple real-time projects in their Industries

Since everyone wants to make their websites most beautiful and Faster. At the Same time
UI Developers facing lot of problems in multiple page application while loading speed is very
slow. To Overcome this issue Open Source Angularjs group and google come with Angular
frameworks for Single page Application. Get Hands-on Angularjs training with placements at
Besant technologies
Angular 10 / 11 / 12 Training
Create web-based Single Page Applications using Angular 10 / 11 / 12 Versions. Learn how
to make a static web page more interactive thus enhancing its user experience.
 Introduction
 Dynamic Binding
 Directives
 Controllers
 Scope
 Services
 Factories
 Expressions
 Form Validations
 Filters
 Custom Directives
 Routing
 Making an API Call
 Modules
 Dependency Injection
Before Started with Angular 5 Topics we will give basic Overview on Angular 2/4 Versions.
Learn depth knowledge in Angular Versions 2,4,5,6 with the help of Real Time Experts. We
listed below the latest version of Angular 5 Topics.
Angular 5 Training
Section 1: Getting Started with Angular 5
 Course Introduction
 What is Angular
 Angular vs Angular 2 vs Angular 4 vs Angular 5
 CLI Deep Dive
 Project Setup and First App
 The Course Structure
 What is TypeScript
 A basic setup of Bootstrap for Styling

Chennai: +91-8099 770 770 Bangalore: +91-8767 260 270 Online: +91-9707 250 260
www.besanttechnologies.com
Section 2: The Basics of Angular 5
 Module Introduction
 How an Angular App gets loaded and started
 Components
 Creating new Component
 Understanding the role of AppModule and Component Declaration
 Understanding Component Templates
 Understanding Component Styles
 Understanding Component Selector
Section 3: Databinding & Directive Concepts
 Module Introduction
 What is Databinding
 String Interpolation
 Property Binding
 Property Binding vs String Interpolation
 Event Binding
 Bindable Properties and Events
 Passing and Using Data using Event Binding
 Two-Way Binding
 Forms Module and Two Way Binding
 Understanding Directives
 Using ngIf and Else Conditions
 Using ngStyle for Styling Angular App
 Applying CSS Class dynamically with ngClass
 Displaying Lists using ngFor
Section 4: Advanced Component and Databinding
 Module Introduction
 Dividing the App into multiple components
 Property and Event Binding deep dive
 Binding to custom properties
 Binding to custom events
 View Encapsulation
 Understanding Local Reference inside Templates

Chennai: +91-8099 770 770 Bangalore: +91-8767 260 270 Online: +91-9707 250 260
www.besanttechnologies.com
  Getting Access to the templates using @ViewChild.
 Exploring Component Life Cycle
 Life cycle hooks deep dive
Section 5: Advance Directive Concepts
 Creating a basic custom attribute directive
 Exploring Renderer to create a Directive
 Understanding HostListener and HostBinding
 Binding to Directive’s Properties
 Building Structural Directives
 Exploring switch
Section 6: Understanding Services and Implementing Dependency Injection
 Module Introduction
 Why Services are required
 Creating a Service
 Injecting the service into components
 Understanding Dependency Hierarchical Injector
 Injecting a Service into other services
Section 7: Routing in Angular 5
 Module Introduction
 Understanding the need of a Router
 Setting Up and implementing Routes
 Navigating to Router Links
 Understanding Router Paths
 Styling Active Router Links
 Understanding Navigation Paths
 Styling Router Links
 Navigating Dynamically
 Using Relative Paths
 Passing Parameters to Routes and fetching route parameters
 Fetching route parameters in a Reactive Way
 Passing query parameters and fragments
 Understanding Nested Routes
 Redirecting and Wildcard routes

Chennai: +91-8099 770 770 Bangalore: +91-8767 260 270 Online: +91-9707 250 260
www.besanttechnologies.com
  Redirection Path Matching
 Outsourcing the Route Configuration
 Introduction to Guards
 Understanding can activate
 Understanding can activate child
 Understanding can deactivate
 Passing Static Data to a Route
 Understanding Resolve Guard
 Exploring Location Strategies
Section 8: Observables in Angular 5
 Module Introduction
 Understanding built-in Angular Observable
 Creating Observables
 Using a Custom observable
 Unsubscribe
 Using Subjects to pass and Listen to Data
 Understanding Observable Operators
Section 9: Forms in Angular 5
 Module Introduction
 Need of Angular’s help
 Template Driven vs Reactive Approach
Template Driven Approach
 TD: Creating the Form and Registering the controls
 TD: Submitting and Using the form
 TD: Understanding Form’s State
 TD: Accessing Form using @ViewChild
 TD: Adding Validation to user input
 TD: Built-in Validator and using HTML 5 Validation
 TD: Understanding Form State
 TD: Outputting Validation Error Messages
 TD: Set Default Value with ngModel Property Binding
 TD: Using ngModel and two-way binding
 TD: Grouping Form Controls

Chennai: +91-8099 770 770 Bangalore: +91-8767 260 270 Online: +91-9707 250 260
www.besanttechnologies.com
  TD: Using Form Data
Reactive Form Approach
 Reactive: Creating a Form in Code
 Reactive: Submitting the form
 Reactive: Adding Validation
 Reactive: Getting Access to Controls
 Reactive: Grouping Controls
 Reactive: FormArray
 Reactive: Custom Validators
 Reactive: Exploring Error Codes
 Reactive: Custom Async Validator
Section 10: Exploring Pipes in Angular 5
 Module Introduction
 Using Pipes
 Parameterizing Pipes
 Chaining Multiple Pipes
 Creating a custom Pipe
 Pure & Impure Pipes
 Understanding the Async Pipe
Section 11: Making HTTP Requests in Angular 5
 Introduction & how HTTP request works in SPAs
 Sending POST Request
 Adjusting request headers
 Sending GET requests
 Sending PUT Requests
 Response with observable operators
 Catching HTTP errors
 Using the async pipe with HTTP Requests
Section 12: Authentication & Route Protection in Angular Apps
 Module Introduction
 How Authentication works in SPAs
 Introduction to JWT
 Creating a Signup Page and Route

Chennai: +91-8099 770 770 Bangalore: +91-8767 260 270 Online: +91-9707 250 260
www.besanttechnologies.com
  Setting up Firebase SDK
 Signing users up
 Signing users in
 Token introduction
 Sending a token
 Route protection and redirection example.
Section 13: Typescript Introduction
 Module Introduction
 Using types
 Classes
 Interface
 Generics
 Wrap up & Modules
 Deep dive into typescripts.
Section 14: Project: This section will cover a course project where we will try to implement
all the topics we covered in each session. The course project will run after the completion of
each module.
Angular 9 Syllabus
TypeScript v.3
 Introduction to TypeScript
o Overview of TypeScript
o Why TypeScript?
o JavaScript vs TypeScript
 Installation of tools
o Installing Brackets – an IDE
o Installing TypeScript using npm
 Datatypes in TypeScript
o Primitive Datatypes
o User-defined Datatypes
o Tuples and Unions
o Variables and Operators
 Decision Makers and Loops
o if, if-else, switch statements

Chennai: +91-8099 770 770 Bangalore: +91-8767 260 270 Online: +91-9707 250 260
www.besanttechnologies.com
 o for, while loops
o forEach in TypeScript
 Functions in TypeScript
o Defining and Calling a Function
o Returning functions
o Parameterized functions
o Arrow functions
 Inbuilt methods in TypeScript
o String methods
o Array methods
o Other inbuilt methods
 Oops in TypeScript
o Introduction to Classes and Objects
o Interfaces
o Inheritance
 Winding up with TypeScript
o Revising the TypeScript Concepts
o Bridging TypeScript to Angular
Angular 9
 Introduction to Angular
o What is Angular?
o Features of Angular
o Angular versions
o AngularJS vs Angular 2+
o What’s new in Angular 9
 Installation of tools
o Installing the latest version of nodeJS
o Installing Angular 9 using a node package manager (npm)
o Installing an IDE like Visual studio code
 Getting started with our First Angular Project
o List of commands for creating, running and building a project
o Create a new Angular project
o The folder structure of an Angular Project

Chennai: +91-8099 770 770 Bangalore: +91-8767 260 270 Online: +91-9707 250 260
www.besanttechnologies.com
 o Linking bootstrap with Angular
o Linking icons, fonts with the Projects
 Angular Components and Modules
o What are the components?
o Structure of a component
o Default vs custom components
o Creating components manually
o Creating components using npm
o Calling a component
o Nesting components
o Execution flow of Angular applications
o Component Interactions
o Introduction to Modules
 Navigation using Routers
o Introduction to Angular routings
o Nested routes
o Relative path vs Absolute paths
o Lazy loading modules
o Pre-loading modules
o Preventing unauthorized access using protected routes
 Angular Templates and Directives
o Angular elements
o Advance concepts of components
o Angular Lifecycle hooks
o Structural directives
o Attribute directives
o Custom directives
 Data Binding
o Introduction to data binding
o String Interpolation
o Property Binding
o Event Binding
o Two-way data binding

Chennai: +91-8099 770 770 Bangalore: +91-8767 260 270 Online: +91-9707 250 260
www.besanttechnologies.com
  Services and Dependency injection
o What are Services?
o Need for Services
o Creating a Service
o Achieving inter-component data exchange
o Dependency injection in Angular
o Creating an injectable service in a class
o Injecting services
 Angular Animations
o Introduction to Angular Animations
o Creating a Basic Animation
o Example for Advanced Animations
o Creating Re-usable Angular Animations
 Angular Pipes and Maps
o Introduction to Pipes
o Importing and using pipes
o Parameterizing pipes
o Chaining pipes
o Custom pipes
o Creating a Filter pipe
 Angular Forms
o Introduction to Angular Forms
o Template-driven forms
o Reactive forms
o TDD vs Reactive forms
o Adding validations to forms
o Displaying error messages
 Angular Observables and RxJS
o Introduction to Observables
o Using observables to pass data
o Type-ahead suggestions using Observables
o Introduction to RxJS library
 Server Interactions using HTTP

Chennai: +91-8099 770 770 Bangalore: +91-8767 260 270 Online: +91-9707 250 260
www.besanttechnologies.com
 o Introduction to Http Client Services
o HTTP get vs post
o Requesting and sending data to the server
o Sending get Request
o Sending put Request
o Adjusting Request Headers
 Deployment of the Application
o Building the Application
o Steps to host the application on some server
o Hosting the Application
 Building a Real-time Website for an Imaginary University
o Creating the Project Setup
o Linking BootStrap
o Creating modules and grouping Components
o Implementing Lazy Loading and adding Routings
o Adding necessary Material Components
o Completing the contents
o Hosting the Website
 Bonus
o Introduction to Angular Material
o Working with any of three External Plugins

Chennai: +91-8099 770 770 Bangalore: +91-8767 260 270 Online: +91-9707 250 260
www.besanttechnologies.com
Our Branches
Chennai Locations Bangalore Locations
Velachery BTM Layout
Tambaram Marathahalli
OMR Rajaji Nagar
Porur Jaya Nagar
Anna Nagar Kalyan Nagar
T.Nagar Electronic City
Thiruvanmiyur Indira Nagar
Siruseri HSR Layout
Maraimalai Nagar Hebbal

Follow Us

Chennai: +91-8099 770 770 Bangalore: +91-8767 260 270 Online: +91-9707 250 260
www.besanttechnologies.com