Course Code:
angular16
Duration:
28 hours
Prerequisites:
- An understanding of HTML, CSS, and JavaScript
- Experience with TypeScript and RxJS
- Web development experience
Audience
- Developers who wish to learn how to use Angular 16 to create dynamic and responsive web applications
- Developers who wish to upgrade their skills from previous versions of Angular
- Programmers who wish to explore the new features and updates of Angular 16
Overview:
Angular 16 introduces new features and updates such as partial hydration, experimental Jest support, esbuild-based build system, standalone project support, and more.
This instructor-led, live training (online or onsite) is aimed at beginner-level to intermediate-level developers who wish to use the latest features of Angular 16 to build, test, and deploy web applications.
By the end of this training, participants will be able to:
- Set up a development environment that includes Node.js, Visual Studio Code, and Angular CLI.
- Create a basic Angular 16 application that displays data and handles user interactions.
- Use components, directives, pipes, services, and modules to organize and reuse code.
- Use data binding, dependency injection, routing, forms, and HTTP client to communicate with backend services.
- Debug and test Angular 16 applications using tools such as Chrome DevTools, Jest, Karma, and Protractor.
Format of the Course
- Interactive lecture and discussion.
- Lots of exercises and practice.
- Hands-on implementation in a live-lab environment.
Course Customization Options
- To request a customized training for this course, please contact us to arrange.
Course Outline:
Introduction
- What is Angular?
- Angular vs React vs Vue
- Overview of Angular 16 features and architecture
- Setting up the Development Environment
Getting Started
- Creating a new Angular 16 project using Angular CLI
- Exploring the project structure and files
- Running and serving the application
- Displaying data using interpolation and expressions
Components
- Understanding the role of components in Angular 16
- Creating and using components
- Passing data between components using inputs and outputs
- Using component lifecycle hooks
Directives
- Understanding the difference between structural and attribute directives
- Creating and using built-in directives such as ngIf, ngFor, ngSwitch, etc.
- Creating and using custom directives
Pipes
- Understanding the purpose of pipes in Angular 16
- Creating and using built-in pipes such as date, currency, json, etc.
- Creating and using custom pipes
Services
- Understanding the role of services in Angular 16
- Creating and using services
- Injecting dependencies using providers
Modules
- Understanding the role of modules in Angular 16
- Creating and using modules
- Importing and exporting modules
Data Binding
- Understanding the difference between one-way and two-way data binding
- Creating and using property binding, event binding, and banana-in-a-box syntax
- Using template reference variables
Routing
- Understanding the role of routing in Angular 16
- Creating and configuring routes
- Navigating between routes using routerLink and router.navigate
- Using route parameters, query parameters, and fragments
Forms
- Understanding the difference between template-driven and reactive forms
- Creating and validating forms using form controls, form groups, form arrays, etc.
- Using built-in validators such as required, minLength, maxLength, etc.
- Creating and using custom validators
HTTP Client
- Understanding the role of HTTP client in Angular 16
- Creating and using HTTP requests to communicate with backend services
- Using observables to handle asynchronous data streams
- Using interceptors to modify or handle HTTP requests or responses
Debugging
- Understanding the common errors and bugs in Angular 16 applications
- Using Chrome DevTools to inspect elements, sources, network, console, etc.
- Using breakpoints, watch expressions, call stack, etc. to debug code
Testing
- Understanding the importance of testing in Angular 16 applications
- Using Jest as an alternative testing framework
- Using Karma as a test runner for unit tests
- Using Protractor as an end-to-end testing tool
Summary and Next Steps
Sites Published: