Section 7: Lab: Angular 22 for the MEAN Stack
- Create a project with ng new and the standalone structure
- Signals, computed() and control flow (@if, @for)
- Pass data between components with input() and output()
- Lab: a product list that can be searched and filtered
Section 8: Routing and Services
- Define routes with provideRouter and lazy load with loadComponent
- Read route parameters and navigate between pages
- Move logic into services and use them with inject()
- Lab: product list, detail and edit pages
Section 9: Lab: Connecting Angular to the Express API
- Configure provideHttpClient and the ng serve proxy
- Read data reactively with httpResource
- Create, update and delete data with HttpClient
- Lab: a full CRUD product page with loading and error states
Section 10: Lab: Forms and Validation
- Reactive forms with FormGroup and Validators
- Signal Forms with form() and FormField
- Show error messages from the client and from the API
- Lab: an add-product form with image upload
Section 11: Lab: Authentication with JWT
- Sign-up with passwords hashed by bcrypt
- Log in, issue a JWT and check tokens with Express middleware
- Functional interceptors and CanActivateFn in Angular
- Lab: an admin page available only to logged-in users
Section 12: Workshop: Deploying the MEAN Stack to Production
- Build Angular with ng build and set the API URL per environment
- Write a Dockerfile and Docker Compose for the API and front end
- Move the database to MongoDB Atlas and configure access
- Deploy to Render or a VPS with HTTPS
- Workshop: a working full-stack product management system