.NET 10 with Angular

Section 1: Lab: Overview and Tool Setup

• What an SPA is and how Angular works with ASP.NET Core
• Angular compared with React and Vue for business systems
• Install Node.js, Angular CLI 22, the .NET 10 SDK, Git and VS Code with extensions
• Create a project with ng new, explore its structure and run the app
• Lab: keep the project on GitHub from day one

Section 2: TypeScript for Angular

• Commonly used types, interfaces, classes and generics
• Modules, import and export
• async/await, promises and observables at a glance
• Lab: write product and sales receipt models in TypeScript

Section 3: Lab: Components, Templates and Signals

• Standalone components and template syntax
• signal(), computed() and effect() for screen state
• Control flow with @if, @for and @switch
• Event, property and class binding
• Lifecycle hooks that are still needed, and OnPush change detection

Section 4: Lab: Starting the POS Workshop

• Install Tailwind CSS 4 and manage asset files
• Build the layout with header, sidebar, footer and menu
• Design the login and register pages
• Extract reusable components such as buttons and product cards
• Lab: a responsive home page for the POS system

Section 5: Lab: Routing

• Define routes, the router outlet and RouterLink
• Route parameters received through component inputs
• Lazy loading with loadComponent and loadChildren
• Redirects, a not-found page and navigating back
• Lab: routing for every page of the POS workshop

Section 6: Lab: Forms with Signal Forms

• Build a form from a signal model with form() and [formField]
• Built-in validation and writing your own rules
• Show error messages and dirty and touched states
• Signal Forms compared with reactive and template-driven forms
• Lab: registration and login forms with validation

Section 7: Services and Dependency Injection

• Create services and use inject() in components
• Share state with signals in a service
• Built-in pipes and writing a custom pipe
• Lab: a shopping cart service shared by several pages

Section 8: Lab: Calling APIs with HttpClient and httpResource

• Configure provideHttpClient and per-environment settings
• Create models and map JSON data to TypeScript
• Fetch data reactively with httpResource
• Observables and signals, and converting between them
• Lab: list products from a mock API with loading and error states

Section 9: Lab: Getting Started with an ASP.NET Core 10 Web API

• What a RESTful API is, and the structure of an ASP.NET Core 10 project
• Controllers versus Minimal APIs and route groups
• Read data from query strings, paths, forms and JSON with validation
• Middleware, logging, the development certificate and the built-in OpenAPI document
• Lab: a first product API tested with .http files

Section 10: Lab: EF Core 10 with SQL Server

• Run SQL Server 2025 with Docker and install packages through NuGet
• DbContext, entities and dependency injection
• Code-first with migrations, and database-first with scaffolding
• Manage configuration and connection strings per environment
• How to switch to PostgreSQL through an EF Core provider

Section 11: Lab: A Membership API

• Separate a service layer and pass data with DTOs
• Hash passwords with PasswordHasher
• CRUD with async EF Core
• Return standard errors with ProblemDetails
• Lab: APIs for registration, sign-in and user management

Section 12: Lab: A Stock API

• Relationships between products, categories and stock movements
• Search, filter and page data
• Upload product images and serve static files
• Use a transaction when a sale reduces stock
• Lab: product and stock APIs covering every function

Section 13: Lab: Protecting the API with JWT

• Authentication for SPAs and what a JWT is
• Issue and validate JWTs with JWT bearer authentication
• Authorise with roles and policies
• Configure CORS so Angular can call the API safely
• Lab: lock down API endpoints that require sign-in

Section 14: Lab: Connecting Angular to the API

• Storing tokens, and browser-side security precautions
• A functional interceptor that attaches tokens and handles errors centrally
• Route guards with CanActivateFn
• Notify users with dialogs and SweetAlert2
• Lab: real sign-in from Angular to ASP.NET Core

Section 15: Lab: Stock Screens with Angular Material

• Install Angular Material and use it alongside Tailwind CSS
• Data tables with sorting, searching and paging
• Add and edit product forms with an image preview before upload
• Lab: product and stock management pages connected to the real API

Section 16: Communication Between Components

• Signal-based input(), output() and model()
• Pass data between parent and child components
• Share data and functions through services
• Component stylesheets and the system theme
• Lab: split the sales page into child components that talk to each other

Section 17: Lab: The Sales Screen and Reports

• A point-of-sale screen with product search and totals calculated with computed()
• Save sales receipts and reduce stock through the API
• Daily sales and best-seller reports
• Lab: make the POS workshop work end to end

Section 18: Testing the Front End and Back End

• Angular unit tests with Vitest
• Test components and services that use signals
• Unit tests for .NET services with xUnit
• API integration tests with WebApplicationFactory
• Lab: tests for the sales total calculation on both sides

Section 19: Lab: Deploying with Docker

• Build Angular for production and serve it with Nginx
• Create a container image for ASP.NET Core
• Combine Angular, the API and SQL Server with Docker Compose
• Configure environments and secrets for production
• Lab: run the whole system with a single command

Section 20: Workshop: Extending and Presenting the Project

• Add a feature of your choice, such as discounts or a loyalty points scheme
• Use an AI assistant to help write code and tests, and review the output
• Review code together and go through a pre-production checklist
• Present the work and next steps