Angular and Laravel: A Practical Guide with Docker

Install Laravel by installing composer, run four terminal commands, create the project Laravel Admin, start the dev server with artisan serve, and verify the installation in the browser.

Demonstrates building and running a Laravel app with Docker by creating a Dockerfile and docker-compose.yml, installing composer and PHP extensions, and serving via artisan on localhost.

In a docker compose Laravel setup, test the database connection, create an admin schema, run the user table migration with first name, last name, email, password, and timestamps.

Learn how to create the first api route in a laravel app using docker, building an oauth controller with a hello function that returns hello and testing via postman.

Register a new user by handling a post request and extracting first name, last name, email, and password. Return a 201 response with the created user (password hashed by Laravel).

Create a custom request for registration using artisan make:request register, set authorize and rules to require first name, last name, email, password, and password confirmation, then apply it in controller.

Install Laravel Sanctum to manage API tokens, run migrations to create the personal access tokens table, and update the user model to have API tokens for login authentication.

Log in to Laravel using an OAuth-like function with email and password; on success return a JWT token, on failure respond with unauthorized and 'invalid credentials'.

Learn how to use JWT to fetch the authenticated user in a Laravel Sanctum protected API, including middleware, route grouping, and bearer token headers.

Implement HttpOnly cookies to store the JWT securely, avoiding front-end exposure. Configure cookie named JWT with a day expiry and read it server-side to authenticate requests.

Implement a logout function by invalidating the cookie with a past expiration, return a success message, and post to the logout api to achieve unauthenticated state.

install the Laravel ID helper package to add class highlight helpers, generate files with artisan commands, and enhance autocompletion for cookies and other functions.

Create a user controller and implement index, store, show, update, and destroy methods, then map them using Laravel API resource routes via PHP artisan.

Learn to manage users with Angular and Laravel: list, create with first name, last name, email and hashed password, update via put, and delete via delete or destroy.

Learn how Laravel pagination works with docker, showing 15 users per page, navigating pages, and seeding the database with a user factory to generate more data.

Learn how to create and validate user requests in laravel, including create, update, update info, and update password, and connect them to the user controller and api routes.

Create migrations for roles and permissions, build role and permission models and controllers, set up api routes, and connect users to roles and roles to permissions.

Add role_id to users and set up foreign keys to roles and urls, then validate migrations with artisan migrate:fresh while testing up and down methods.

Explore one-to-many relationships in Laravel by seeding roles and users with factories, defining belongsTo and hasMany connections, and retrieving users with their roles via api responses.

Create and customize Laravel json resources to return user fields (id, first name, last name, email, url, role) for single objects and collections, and disable wrapping for clean API responses.

Learn to flexibly load related data in Laravel resources using whenLoaded, with, and load to control role data in user responses for different views.

Connect roles with permissions through a many-to-many relationship by creating a table with role_id and permission_id, adding foreign keys with cascade on delete, and wiring through the role controller.

Learn to manage Laravel roles and permissions with attach, detach, and sync for many-to-many relations, including admin, editor, and viewer permissions and seeding processes.

Create the products table via migration, define a product model with title, nullable description, image, and price, then seed 30 products using a factory.

Enable image uploading in a Laravel app by creating an image controller and upload request, storing files in public storage, and returning the image URL with JPEG type restrictions.

Create orders and order items tables with migrations, define has many order items relationships, and build api resources and endpoints to list and show orders with their items.

Leverage nested factories to seed 30 orders and 1–5 order items per order using Laravel artisan and seeders. Generate random user data and product details to link items to orders.

Expose a property-like name and a computed total by defining get name attribute and get total attribute in Laravel, looping order items and calculating quantity times price.

Create an export function to generate a csv file of orders with headers for email, product title, price, and quantity, write the file, and enable browser download.

Join orders with order items, cast the created date to a date, and sum price times quantity by date to power a chart in Laravel.

In a service provider, define a gate with an ability like view or edit, and check whether the user has access to the model via the role's permissions.

Install Angular using the command, create a project named Angular with routing, and skip unnecessary options. Run the server with serve and open the local URL to view the app.

Develop and customize an Angular dashboard by integrating a Bootstrap email template, generating and wiring the nav and menu components, and refining the markup for a cleaner interface.

Create and organize angular schematics components and models within public and secure modules, update modules accordingly, and prepare for routing in the next tutorial.

Define routes with a router outlet to switch components. Create login and register components under a public parent and configure child routes to render them inside the outlet.

Learn to build a register form in Angular using Bootstrap templates, switching between regular and reactive forms, and binding inputs with ngModel to capture and submit user data.

Use HttpClient to post user data to a server, handle responses, switch endpoints via environment variables, and navigate from register to login in an Angular and Laravel project.

Implement login flow with a reactive form for email and password, built as a form group from a form builder and submitted to the backend with credentials for JWT cookie.

Create and organize authentication logic in Angular by using injectable services to handle login and register requests via the HTTP client, keeping endpoints centralized and code cleaner.

Retrieve the authenticated user via the user endpoint with credentials, then display the first name and last name in the navigation and enable login and profile routing.

Define and enforce strong typing in Angular by creating user and role interfaces, importing them, and typing observables and responses to a user, avoiding any for reliable API data handling.

Implement a logout function that posts to logout with credentials, subscribes to the response, and redirects unauthenticated users to the login page.

Secure a component by loading the authenticated user via a private oauth service, handle success and error paths, and redirect unauthenticated users to login; pass the user as an input.

Create and configure an Angular interceptor to automatically attach withCredentials to every request, then register it via http interceptors with multi: true to streamline authenticated requests in services.

Create and wire a profile page in Angular and Laravel with Docker, building a profile component and dashboard, using reactive forms to update user information and password, with updates reflected.

Use Angular event emitters to share the current authenticated user across components by dispatching a user event from the secure component to the profile and navigation components.

Add a users component to the menu, configure router link and router link active, and redirect the main page to the dashboard to ensure correct highlighting.

Fetches the users via a dedicated angular user service and api endpoint, binds the results to the component, and displays name, email, and role with pagination to come.

Implement user pagination by adding next and previous buttons, a page variable, and loading pages via user service. Enforce first and last page limits to prevent going beyond last page.

Add a delete button for users, confirm before deleting, call the user service delete endpoint with the user id, and remove the user from the list on success.

Create a new add button and a users create component, wire it into routing, and build a form with form builder for first name, last name, email, and id.

Create users in Angular by loading roles via a roles service, selecting a role, posting the new user with a user service, and navigating to the users page.

Create a user edit flow in Angular and Laravel with Docker: prefill the form with server data using the route id and submit updates via the user service.

Students learn to build an abstract class that auto implements five methods for all models, then extend it with a rest service, share a protected endpoint, and handle paging.

Create a new roles component, connect to the roles service, fetch and display roles in a table, and implement delete with confirmation while updating the list.

Create a role create form and component, fetch permissions via the permissions service endpoint, and build a reactive form with a name field and permission checkboxes.

Build an Angular reactive form array for permissions, create a form group per permission with default false checkboxes, then submit only true permissions mapped to IDs via the Roll service.

Update roles by editing a role through a form to modify name and permissions, mapping and selecting permissions, patching updates via a service, and navigating back after update.

Create and manage a products feature in a web app, including a products component, product interface, a product service, and router links, with image, title, price, and pagination.

Create a reusable paginator component to replace duplicated pagination logic in products and users. It accepts inputs for page and lastPage and emits a pageChanged event when the page updates.

Create a product using a product create component, collect title, description, image, and price with a form builder, then submit via the product service and navigate to the products page.

Learn to add image uploading to a product by creating a file input, handling changes, sending the image as form data via post, and emitting the image URL.

Create and wire a product edit component in an Angular and Laravel project to fetch and update product data, subscribe to the service, and navigate back after saving.

Build the orders feature by creating an order component and service, define order and order item interfaces, implement pagination, and enable a view navigation to the browser.

Demonstrates inline nested tables to reveal order items within the orders table using a toggle view, looping over order items to display title, quantity, and price with animation.

Create and apply an Angular animation that toggles a table state between show and hide using a trigger, with max-height transitions of 150px and 0, over 1000 milliseconds.

Export csv files from the order service in an Angular and Laravel workflow, returning a blob via an observable and triggering a programmatic file download.

Build a simple bar chart in Angular using c3 by installing the library, importing it, binding to a dashboard chart, and loading date-based sales data from an order service.

Document your Laravel API with Swagger OpenAPI by installing the package, annotating controllers with version, title, and description, then generate and view the docs in the browser.

Learn swagger authorization for a Laravel API by defining a bearer security scheme and generating a user token with an artisan command, then access users in swagger UI.

Add swagger open api parameters to enable pagination with a page query parameter, test endpoints, and correctly configure required path parameters like user id with lowercase names.

Learn to design and test Swagger-based user management APIs with open API schemas for store, update, and delete user requests, including body parameters and validation.

Learn to document and organize Laravel and Angular API calls with Swagger, separating user and profile endpoints into tags and clarifying authentication related requests.