Duration 5 days – 35 hrs
Overview
This Angular 19 Training Course provides a comprehensive and hands-on introduction to building modern, scalable, and high-performance web applications using the latest features of Angular 19. Participants will learn the fundamentals of Angular architecture, TypeScript essentials, component-driven development, routing, forms, Angular Signals, RxJS, state management, dependency injection, and best practices for building enterprise-grade applications. Through practical exercises and real-world examples, attendees will gain the skills needed to efficiently develop, test, and deploy Angular applications.
Objectives
- Understand the core architecture and features of Angular 19.
- Build reusable components and implement clean UI structures.
- Use Angular Signals, Standalone Components, and improved Hydration features.
- Work with data binding, directives, pipes, and templates effectively.
- Implement routing and navigation in single-page applications (SPA).
- Create and manage reactive and template-driven forms.
- Consume REST APIs using HTTPClient and handle data streams with RxJS.
- Apply state management approaches (Signals, RxJS Subjects, NgRx optional).
- Implement best practices for folder structure, performance optimization, and maintainability.
- Build, test, and deploy an Angular application using CLI tools.
Audience
- Frontend developers
- Full-stack developers
- Software engineers
- UI/UX developers transitioning to Angular
- IT professionals involved in web development projects
- Anyone who wants to learn Angular for modern web application development
Prerequisites
- Basic understanding of HTML, CSS, and JavaScript
- Familiarity with TypeScript fundamentals (optional but recommended)
- Basic knowledge of web application concepts
- Experience with any programming language
Course Content
DAY 1 – Fundamentals & Core Concepts
Module 1: Introduction to Angular 19
- What is Angular?
- Angular 19 architecture and key features
- SPA concepts
- Angular vs React vs Vue (quick comparison)
- Setting up the environment (Node.js, Angular CLI)
Module 2: Angular Project Structure
- Angular Workspace and Project files
- Standalone Components (default in Angular 19)
- Angular CLI commands
- Understanding Angular application lifecycle
Module 3: TypeScript Essentials for Angular
- TS datatypes, interfaces, classes
- Modules, decorators
- Useful TypeScript features for Angular projects
Module 4: Components and Data Binding
- Creating components
- Component communication (Input, Output)
- Event binding, property binding, two-way binding
- Lifecycle hooks
Module 5: Directives and Pipes
- Built-in directives
- Structural directives (ngIf, ngFor)
- Custom directives
- Built-in and custom pipes
DAY 2 – Routing, Forms, Services, Signals
Module 6: Angular Routing & Navigation
- Router basics
- Route parameters
- Child routes
- Lazy loading modules for performance
- Guarding routes (AuthGuard, RoleGuard)
Module 7: Services and Dependency Injection
- Creating services
- Angular DI system
- Hierarchical injectors
- Working with Observables in services
Module 8: Angular Forms
- Template-driven forms
- Reactive forms
- FormBuilder, Validators
- Working with form validation
- Dynamic forms
Module 9: Angular Signals (New Feature)
- What are Signals?
- Using Signals for state and data flow
- Signals vs RxJS vs NgRx
- Change detection improvements in Angular 19
DAY 3 – API Integration, RxJS, State Management, Deployment
Module 10: Consuming REST APIs
- HTTPClient fundamentals
- Making GET, POST, PUT, DELETE calls
- Error handling & Retry mechanism
- Interceptors for authentication
Module 11: RxJS for Angular
- Observables, Subjects, BehaviorSubject
- Common operators: map, filter, switchMap, mergeMap
- Handling async operations
- RxJS + Signals integration
Module 12: State Management
- Local component state
- Signals for lightweight state
- RxJS streams for app state
- Intro to NgRx (optional based on skill level)
Module 13: Performance Optimization & Best Practices
- Standalone components structure
- Optimizing bundle size
- Change detection strategy
- Caching & memoization
- Folder structure for enterprise apps
Module 14: Testing & Deployment
- Unit testing with Jasmine & Karma
- Component and service testing
- Building for production
- Deploying to servers (Apache/Nginx)
- Deployment to Firebase/Cloud optional
Module 15: Final Hands-On Activity
- Build a mini Angular 19 application
- API integration
- Form validation
- Basic state management
- Final Q&A
