Learning Objectives
- Architect a feature-rich CRUD application using modular/standalone design patterns.
- Implement authentication flows (login, refresh tokens) with guards, interceptors, and directive-based permission control.
- Build complex reactive forms with dynamic controls and server-side validation.
- Achieve robust testing coverage across unit, integration, and end-to-end (E2E) layers.
Core Concepts & References
- Angular Docs: Standalone APIs and Feature Organization
- Blog: Best Practices for Angular Authentication
- Testing: Angular Testing Library Docs, Cypress Component Testing
Hands-On Checklist
- Design domain modules/standalone route groupings (e.g.,
customers,orders,admin). - Implement authentication service with login, logout, refresh token logic; persist auth state securely.
- Build CRUD screens using reactive forms, optimistic updates, and server-side validation handling.
- Add role-based directives (
hasPermission) to hide/show UI controls. - Expand testing: - Unit: services, guards, forms. - Component: render forms, simulate user interaction. - E2E: cover core CRUD flows using Cypress or Playwright.
- Configure CI pipeline (GitHub Actions) to run lint, unit, and E2E tests.
Deliverable: Fully Tested CRUD App with Auth Flow
- Authenticated routes gated by guards; login page with error feedback.
- CRUD screens (list, detail, create/edit) with optimistic UI updates and API resilience.
- Role-based UI restrictions and audit logging (optional).
- Testing artifacts: coverage report ≥ 80%, E2E scripts for main flows.
Suggested Daily Breakdown
- Day 1: Auth service + login component + guard updates.
- Day 2: CRUD API service and data table/list view.
- Day 3: Detail/edit form with validation and save flows.
- Day 4: Implement role-based directives + admin-only actions.
- Day 5: Write unit/component tests; add mock HTTP tests.
- Day 6: Implement Cypress/Playwright E2E scripts.
- Day 7: Harden error states, add loading skeletons, update documentation.
Reflection & Extension
- Review token storage strategies (cookies vs. localStorage) and refresh workflows.
- Explore optimistic UI vs. pessimistic updates trade-offs.
- Stretch goal: integrate WebSocket updates for live data synchronization.