Angular + PHP: Build a Full-Stack SPA in 2 Hours
Learn how to create a modern Single Page Application (SPA) using Angular and connect it to a robust PHP backend. In this 2-hour course, you'll explore component-based architecture, RESTful communication, and practical techniques for integrating frontend and backend systems efficiently.
Project Setup & Environment
00:00 – Introduction: Goals for the Angular and PHP single-page application.
00:10 – Required VS Code extensions (Angular Language Service, ESLint, Prettier).
00:32 – Setting up Ubuntu on Windows 11 using WSL.
01:20 – Installing NVM (Node Version Manager) and Node.js (LTS).
02:22 – Installing the Angular CLI and scaffolding the project (ng new).
03:15 – Integrating Gemini AI in VS Code via MCP servers for coding assistance.
Building the UI Components
06:00 – Creating core components: About, Contact, Footer, Header, and Sidenav.
07:32 – Setting up the Router and defining paths for navigation.
09:47 – Building the Footer with a three-column CSS layout.
10:45 – Installing and configuring Angular Material.
11:59 – Creating a Media Query Service for responsive design (detecting mobile views).
14:47 – Implementing the Header with a responsive mat-toolbar.
17:53 – Enabling smooth page transitions using the View Transition API.
18:56 – Building the responsive Sidenav (mobile drawer menu).
Backend Integration (PHP & Security)
23:47 – Creating the Form API Service with HttpClient and rxResource.
25:56 – Coding the Contact Form template and validation logic.
29:21 – Setting up the local PHP backend server.
29:58 – Implementing token-based authentication (HTTP-only cookies).
31:50 – PHP backend: Handling CORS headers and JSON input.
32:48 – Security: Implementing CSRF (Cross-Site Request Forgery) protection.
Polishing & UI Refinement
35:05 – Adding Material elevation and shadows to the UI.
38:55 – Aligning footer elements using CSS Flexbox.
54:15 – Advanced: Creating custom fade-in/fade-out router animations.
01:13:00 – Refining the Contact Form with Material design cards and inputs.
01:51:00 – Adding feedback with the Material Snackbar for success/error messages.