Generic filters
Search in title

Basic and Advanced Angular Training

  • Training Duration:
  • 5 Days
  • Training Environment:
  • On-site at the Institution
  • In DVA Classrooms
  • Online
Download Training Document
Request Information!

About the Training

The Basic and Advanced Angular Training is an ideal resource for developers who want to learn fundamental and advanced techniques for building effective and complex Angular applications. This comprehensive training explores both basic and advanced features of Angular in detail.

In the first part of the training, we focus on the fundamental concepts and features of Angular. Participants will learn about core Angular concepts such as components, modules, directives, and services, and understand their impact on application development.

Next, participants will learn how to build a basic Angular application. Topics like forms, HTTP requests, and basic routing are covered, enabling participants to understand how to develop applications and manage general web development processes.

In the advanced section, we explore Angular’s advanced features and techniques. The focus is on reactive programming, advanced components, directives, and performance optimization techniques. Additionally, critical topics such as security and accessibility in Angular are addressed.

The training also includes performance optimization and scaling techniques for Angular applications. We focus on advanced techniques such as Lazy Loading, Change Detection, and bundling, teaching participants how to optimize and scale applications in high-traffic environments.

The Basic and Advanced Angular Training offers the opportunity to work on real-world examples. Participants will apply the basic and advanced concepts they learn in hands-on projects. This approach helps deepen the understanding of Angular’s extensive features, performance optimization, and best practices.

By the end of this training, participants will gain the comprehensive knowledge and skills required to develop effective and high-performance Angular applications.

What Will You Learn?

In Angular training, the following topics can be emphasized:
  • Component Structure and Configuration: Learn how to define, configure, and combine Angular components.
  • Data Binding and Form Creation: Explore data binding and form creation in Angular through hands-on exercises.
  • Services: Understand how to define, configure, and use services in Angular.
  • API Integration: Learn how to integrate and use RESTful APIs with Angular.
  • Data Communication: Cover data communication between Angular components.
  • Improving Application Performance: Gain insights on how to improve application performance and optimize speed in Angular applications.
  • Latest Angular Trends and Best Practices: Stay updated on the latest trends and best practices in Angular development.

Prerequisites

The general prerequisites for participating in Angular training may include:
  • Basic knowledge of HTML, CSS, and JavaScript: Angular works with these languages, so understanding their core concepts is essential.
  • Programming experience: Having some programming experience can make learning Angular easier, as it involves complex coding.
  • Familiarity with TypeScript: Angular is written in TypeScript, so having a basic understanding of this language is helpful.
These are common examples of prerequisites, but they may vary depending on the training provider. Ensuring these prerequisites are met can make learning Angular more efficient.

Who Should Attend?

People interested in attending Angular training may include:
  • Front-end Developers: Developers looking to build dynamic and efficient web applications with Angular.
  • Full-stack Developers: Developers aiming to perform full-stack development and leverage all features of Angular.
  • Web Designers: Designers wanting to create user-friendly and interactive web applications using Angular.
  • Anyone Open to Learning: Individuals interested in Angular and web development who are eager to learn.
Whatever your reason for joining, anyone wanting to learn both fundamental and advanced Angular concepts can benefit from these training sessions.

Outline

TypeScript and ECMAScript 6 (ES6) Fundamentals
  • TypeScript Installation, Configuration & Compilation
  • Type Annotations
  • Classes
  • Scoping using let, var, and const Keywords
  • Arrow Functions
  • ES Modules
  • Decorators
  • Template Literals
  • Spread Syntax and Rest Parameters
  • Destructuring
Angular Overview
  • Benefits of Building using Angular
  • Understanding Angular Versions
  • Single-page Web Application Architectures vs. Traditional Server-side Web Application Architectures
  • Angular Style Guide
  • Angular Architecture
  • Angular Compared to Other JavaScript Libraries and Frameworks (React, VueJS, etc…)
  • Your First Angular Application
Components
  • Understanding Components
  • Component Properties & Methods
  • Templates: Inline, Multi-line, and External with Component-relative Paths
Angular Modules (NgModule)
  • Angular Modules ES Modules
  • Organizing your code into Feature Modules
Project Set-Up (Using the Angular CLI)
  • Angular CLI Features
  • Creating a New Project (with new CLI Prompts)
  • Generating Code
  • Customizing the Angular CLI
Data Binding
  • Interpolation
  • Property binding
  • Event binding
  • Two-way data binding
Directives
  • Structural: ngFor, ngIf, ngSwitch
  • Attribute: ngClass, ngStyle
Pipes
  • Built-in Pipes: Using, Passing Parameters, Chaining
Advanced Components
  • Component Communication using @Input, @Output
  • Component Architecture
  • Component Styles
  • Component Lifecycle Hooks
  • Evaluating UI Component Frameworks & Libraries
Services & Dependency Injection
  • Using a service to access data
  • Using a service to encapsulate business logic
  • Understanding the scope of services
Dependency Injection
  • Understanding Dependency Injection
  • Angular’s Dependency Injection System
  • Registering
  • Injecting
Model-driven Forms (Reactive Forms)
  • Importing the ReactiveFormsModule
  • FormControl, FormGroup, and AbstractControl
  • Binding DOM Elements to FormGroups and FormControls
  • Validation Rules, Messages, and Styles
  • Refactoring Reactive Forms for Reuse
  • Custom Validators
Communicating with the Server using the HttpClient Service
  • Deciding between Promises or Observables (RxJS)
  • Making an HTTP GET Request
  • Sending data to the server using Http POST and PUT Requests
  • Issuing an HTTP DELETE Request
  • Intercepting Requests and Responses
Router
  • Importing the RouterModule
  • Configuring Routes
  • Displaying Components using a RouterOutlet
  • Navigating declaratively with RouterLink
  • Navigating with code using the Router
  • Accessing parameters using ActivatedRoute
Deploying an Angular Application to Production
  • Building an application using the Angular CLI
  • Differential loading: creating a modern build (ES2015) and a legacy build (ES5)
  • Deploying to a web server
Upgrading to the latest version of Angular from earlier versions
  • x and above
  • Update Guide
  • Deprecation Guide
  • Patching Dependencies: npm audit fix
  • Looking for AngularJS to Angular upgrades? See optional topics
RxJS and Observables
  • What is an Observable?
  • Creating Observables
  • What is an Observer?
  • Observer Example
  • Operators: map, switchMap, debounceTime, distinctUntilChanged
  • Practical Application of using RxJS
  • Subscriptions
  • Unsubscribing from Observables in Angular (unsubscribe, Async Pipe, takeUntil)
  • Subject
  • Subject Example
  • Subject Variants (AsyncSubject,BehaviorSubject, ReplaySubject)
  • EventEmitter or Observable
  • RxJS Operators and HTTP
  Unit Testing
  • Tools: Jasmine, Karma
  • Jasmine Syntax: describe, it, beforeEach, afterEach, matchers
  • Setup and your First Test
  • Testing Terminology: Mock, Stub, Spy, Fakes
  • Angular Testing Terminology: TestBed, ComponentFixture, debugElement, async, fakeAsync, tick, inject
  • Simple Component Test
  • Detecting Component Changes
  • Testing a Component with properties (inputs) and events (outputs)
  • Testing a Component that uses the Router
  • Testing a Component that depends on a Service
  • Testing a Service and Mocking its HTTP requests
  • Testing a Pipe
  Security
  • Best Practices
  • Preventing Cross-site Scripting (XSS)
  • Trusting values with the DOMSanitizer
  • HTTP Attacks (CSRF and CSSI)
  • Authentication using JSON Web Tokens (JWT)
  • Authorization: Router Guards
  Change Detection
  • Understanding js and Change Detection
  • Change Detection Strategies Default and OnPush
  Advanced Angular CLI
  • Customizing a build using Builder APIs in the CLI
  • Generating web workers
  Advanced Routing
  • Lazy-loading Angular Modules (using Dynamic Imports)
  • Nested or Child Routes
  • Providers
  • Hierarchical Injection
  • providedIn options: root, module, platform, any
  Pipes
  • Creating a custom Pipe using PipeTransform
  • Understanding Pure and Impure Pipes
 

Conclusion

  • Choose any two additional topics. If desired, the course can be customized to include more than two of these topics if other topics are scaled back or removed.
    • npm QuickStart
      • Installing Dependencies
      • Understanding json and package-lock.json
      • Using npm as a Build Tool
    • Benefits Overview
    • Three Principles of Redux: Single Source of Truth, State is Read-Only, Pure Functions
    • Examples of Pure Functions
    • Reducers
    • Simple ngrx Example
    • Time-traveling with Redux Devtools
    • Full ngrx Example Application
    • Upgrade Strategies from AngularJS
      • High-level Approaches
      • Concept Mapping AngularJS to Angular
      • UpgradeAdapter
      • What can be Upgraded or Downgraded
      • What cannot be Upgraded or Downgraded
      • UpgradeAdapter and Dependency Injection
    • End-to-End Testing
      • What is Protractor?
      • Why Protractor?
      • Using Locators
      • Page Objects
      • Debugging E2E Test

Training Request Form

If you want to maximize the benefits of your training in terms of time and cost efficiency, all you need to do is contact us.

Our training consultants will get in touch with you, assist in identifying your organization’s needs, and provide the most suitable training programs for your employees.

Training Request Form

Digital Vision Academy © All Rights Reserved 2023