Basic Angular

Section 1: Lab: Introducing Angular and Setting Up

• What an SPA is and how Angular works with REST APIs
• How AngularJS, older NgModule-based Angular and current Angular differ
• Angular's release cycle and LTS periods
• Install Node.js and the Angular CLI, then create a project with ng new
• Lab: run your first app with ng serve and explore main.ts and app.config.ts

Section 2: The TypeScript You Need for Angular

• Types, interfaces and union types
• Classes, access modifiers and decorators
• import and export between files
• Promises, async/await and an introduction to observables
• Lab: write an employee data model with an interface

Section 3: Lab: Standalone Components and Data Binding

• Create components with ng generate and the parts of @Component
• Interpolation and property binding
• Event binding and two-way binding
• Separate template and style files for a component
• Lab: an employee profile card

Section 4: Lab: Signals and Control Flow

• signal(), set() and update() for holding state
• computed() for values derived from other state
• Conditional rendering with @if and @switch
• Render lists with @for, track and @empty
• Lab: an employee list you can search and count

Section 5: Communication Between Components

• Receive values from a parent with input()
• Send events back with output()
• Two-way binding between components with model()
• Project external content with ng-content
• Lab: split the list page into parent and child components

Section 6: Lab: Routing

• Define routes with provideRouter and render them with RouterOutlet
• Navigate with routerLink and Router.navigate()
• Receive route parameters through component inputs
• Lazy-load pages with loadComponent and add a 404 page
• Lab: employee list, detail and edit pages

Section 7: Lab: Forms and Validation

• Template-driven forms with ngModel for simple forms
• Reactive forms with FormGroup, FormControl and Validators
• Signal Forms with form() and FormField
• Show messages when input is invalid
• Lab: an add-employee form with validation

Section 8: Pipes and Services

• Built-in pipes such as date, currency, number and uppercase
• Create a custom pipe to format your own data
• Move logic into a service and use it with inject()
• Keep state shared across pages in a service
• Lab: a service that manages employee data

Section 9: Lab: Connecting to a Back End with HttpClient

• Configure provideHttpClient and a mock REST API with json-server
• GET, POST, PUT and DELETE with HttpClient
• Work with observables and convert them to signals with toSignal()
• Show loading states and handle errors
• Lab: load and save employee data through the API

Section 10: Workshop: Employee Directory System

• Combine the list, search, form and detail pages into one system
• Build for production with ng build
• Read older Angular code that uses NgModule and *ngIf
• Upgrade projects with ng update and Angular CLI migrations
• Present your work and plan your next steps