Introduction to Angular 

Course Overview

Duration: 5 days
Level: Intermediate
Prerequisites: Strong JavaScript/TypeScript knowledge, HTML/CSS proficiency, basic understanding of SPAs (Single Page Applications)

Day 1: Angular Fundamentals & Architecture

What is Angular?

• Angular framework overview and ecosystem

• Angular vs AngularJS vs other frameworks (React, Vue)

• TypeScript fundamentals and benefits

• Angular CLI introduction and workspace setup

• Understanding the Angular development workflow

Development Environment Setup

• Installing Node.js, npm, and Angular CLI

• Creating your first Angular application

• Project structure and file organization

• Angular development server and hot reloading

• Browser developer tools for Angular

Hands-on Lab:

• Set up development environment

• Generate new Angular project

• Explore project structure and configuration files

• Run and modify the default application

Angular Architecture Deep Dive

• Components as building blocks

• Templates, metadata, and data binding concepts

• Services and dependency injection overview

• Modules and feature organization

• Angular application lifecycle

Component Fundamentals

• Creating components with Angular CLI

• Component decorator and metadata

• Template syntax basics

• Component lifecycle hooks introduction

• Component communication overview

Hands-on Lab:

• Create custom components

• Practice component generation and structure

• Implement basic component interactions

• Work with component templates and styling

Daily Project

Build a "Personal Portfolio Landing Page" with multiple components (header, about, skills, contact sections)

Day 2: Templates, Data Binding & Directives

Template Syntax Mastery

• Interpolation and expression evaluation

• Property binding and attribute binding

• Event binding and event handling

• Two-way data binding with ngModel

• Template reference variables

• Safe navigation operator and null handling

Hands-on Lab:

• Practice all binding types

• Create interactive forms with two-way binding

• Handle user events and form submissions

Built-in Directives

• Structural directives: *ngIf, *ngFor, *ngSwitch

• Attribute directives: ngClass, ngStyle

• Understanding directive syntax and microsyntax

• Combining multiple directives

• Performance considerations with directives

Hands-on Lab:

• Build dynamic lists with *ngFor

• Implement conditional rendering with *ngIf

• Create dynamic styling with ngClass and ngStyle

• Build a filterable product list

Pipes for Data Transformation

• Built-in pipes: date, currency, decimal, uppercase, lowercase

• Pipe chaining and parameterization

• Async pipe for observables and promises

• Creating custom pipes

• Pure vs impure pipes

Hands-on Lab:

• Apply built-in pipes to data display

• Create custom pipes for data formatting

• Use async pipe with HTTP requests

Component Communication

• Parent to child communication (@Input)

• Child to parent communication (@Output and EventEmitter)

• ViewChild and ViewChildren for accessing child components

• Content projection with ng-content

• Component interaction patterns

Hands-on Lab:

• Build parent-child component relationships

• Implement custom events and data passing

• Create reusable components with input/output

Daily Project

Build a "Task Management Dashboard" with filterable task lists, dynamic styling, and component communication

Day 3: Services, Dependency Injection & HTTP Client

Services and Dependency Injection

• Understanding services and separation of concerns

• Creating services with Angular CLI

• Dependency injection fundamentals

• Injectable decorator and providedIn metadata

• Hierarchical injection and service scope

• Singleton services and multiple instances

Hands-on Lab:

• Create data services for application logic

• Implement service injection in components

• Practice service communication patterns

HTTP Client and API Integration

• HttpClientModule setup and configuration

• Making HTTP requests (GET, POST, PUT, DELETE)

• Handling HTTP responses and errors

• Request and response interceptors

• Working with observables and RxJS basics

• Environment configuration for API endpoints

Hands-on Lab:

• Set up HTTP client in application

• Create API service for data operations

• Handle HTTP errors gracefully

• Implement loading states and error messages

Observables and RxJS Essentials

• Understanding observables vs promises

• Common RxJS operators: map, filter, catchError, switchMap

• Subscription management and memory leaks

• AsyncPipe for template subscriptions

• BehaviorSubject and Subject for state management

Hands-on Lab:

• Transform HTTP responses with RxJS operators

• Implement search functionality with debouncing

• Manage component subscriptions properly

State Management Patterns

• Service-based state management

• Sharing data between unrelated components

• BehaviorSubject for application state

• Local state vs global state considerations

• Introduction to state management libraries

Hands-on Lab:

• Create shared state service

• Implement data persistence across components

• Build notification/messaging service

Daily Project

Build a "Contact Manager Application" with full CRUD operations, API integration, and shared state management

Day 4: Routing, Forms & Validation

Angular Router Deep Dive

• Setting up routing in Angular applications

• Route configuration and RouterModule

• Router outlet and navigation basics

• Route parameters and query parameters

• Nested routes and child routing

• Route guards for authentication and authorization

Hands-on Lab:

• Configure application routing

• Implement navigation between views

• Handle route parameters and query strings

• Create nested route structures

Advanced Routing Features

• Lazy loading modules for performance

• Route resolvers for data pre-loading

• Custom route matching strategies

• Router events and navigation lifecycle

• Programmatic navigation with Router service

Hands-on Lab:

• Implement lazy loading for feature modules

• Create route guards for protected routes

• Add route resolvers for data fetching

Template-Driven Forms

• FormsModule and template-driven form basics

• Two-way data binding with ngModel

• Form validation with HTML5 and Angular validators

• Displaying validation errors and form states

• Form submission and data handling

Hands-on Lab:

• Build contact forms with template-driven approach

• Implement form validation and error display

• Handle form submission and reset

Reactive Forms

• ReactiveFormsModule and reactive form fundamentals

• FormControl, FormGroup, and FormArray

• Validators and custom validation functions

• Dynamic form generation and manipulation

• Cross-field validation and async validators

Hands-on Lab:

• Convert template-driven forms to reactive forms

• Create dynamic form fields

• Implement custom validators and async validation

• Build complex multi-step forms

Daily Project

Build a "User Registration and Profile System" with authentication routing, form validation, and user profile management

Day 5: Advanced Features, Testing & Deployment

Advanced Component Patterns

• Content projection and ng-content

• Dynamic component creation

• ViewContainerRef and ComponentFactoryResolver

• Angular Elements for custom elements

• Component inheritance and mixins

Hands-on Lab:

• Create flexible components with content projection

• Build dynamic component loading

• Implement reusable component patterns

Angular Modules and Architecture

• Feature modules and lazy loading

• Shared modules and core modules

• Module organization best practices

• Standalone components (Angular 14+)

• Library creation and publishing

Hands-on Lab:

• Refactor application into feature modules

• Create shared and core modules

• Implement proper module architecture

Testing Angular Applications

• Testing pyramid and Angular testing utilities

• Unit testing components with TestBed

• Testing services and dependency injection

• Testing HTTP interactions with HttpClientTestingModule

• End-to-end testing introduction with Cypress/Protractor

Hands-on Lab:

• Write unit tests for components and services

• Test component interactions and outputs

• Mock HTTP requests in tests

• Set up automated testing pipeline

Performance Optimization

• OnPush change detection strategy

• Lazy loading and code splitting

• Tree shaking and bundle optimization

• Performance profiling with Angular DevTools

• Memory leak prevention and subscription management

Hands-on Lab:

• Optimize application performance

• Implement OnPush change detection

• Analyze bundle size and optimization opportunities

Build and Deployment

• Angular build process and environments

• Production build optimization

• Environment configuration management

• Deployment strategies (static hosting, CDN, server-side rendering)

• CI/CD pipeline basics for Angular applications

Deployment Platforms:

• Static hosting (Netlify, Vercel, GitHub Pages)

• Traditional web servers (Apache, Nginx)

• Cloud platforms (AWS S3, Azure, Google Cloud)

• Angular Universal for SSR

Hands-on Lab:

• Prepare application for production

• Configure environment variables

• Deploy to static hosting platform

• Set up basic CI/CD workflow

Final Project Integration

Complete a "E-commerce Product Catalog" featuring:

• Multi-module architecture with lazy loading

• Product browsing with search and filtering

• Shopping cart functionality with state management

• User authentication and route guards

• Comprehensive form validation

• Responsive design and performance optimization

• Unit tests and deployment configuration