Angular and Django: A Practical Guide with Docker

Install Django and set up a new Django project, run the development server, and access the admin panel, noting migrations will come later.

Set up a Django app with docker by creating a dockerfile and docker compose, pinning python 3.9, installing Django rest framework, and running the server with manage.py.

Perform docker-based migrations for a django app by entering the admin_api container, running python manage.py migrate, creating a superuser, and accessing the django admin at localhost:40000/admin.

Create your first REST API in Django by defining a hello view, decorating it as an API view, and wiring a URL path, then test with Postman.

Create a Django user registration API with a model serializer, validate password confirmation, and return serialized user data, while noting password encryption will be addressed in the next tutorial.

Explore write-only fields in the user serializer to hide passwords during registration and responses, and adjust serialization for many through relationships.

Extend the Django user model to login with email, migrate changes in docker, and implement a custom create method to hash passwords and securely store user data.

Implement a login function that processes api requests, validates email and password, and handles user-not-found and incorrect-password errors; the jwt token arrives in the next tutorial.

Generate a jwt token by installing a jwt package, building a payload with user id and expiry, encoding with hs256, and sending it as an http only cookie.

Learn to build a Django Rest Framework API view that returns the authenticated user by decoding a JWT from cookies, using a custom authentication class and is_authenticated permission.

Implement a post logout API view that deletes the JWT cookie from the response and returns a success message; test by posting to the logout endpoint.

Define a permissions API view in Django that requires authentication, implement a permission serializer from the permission model with all fields, and expose an endpoint to fetch all permissions.

Implement Django Rest Framework view sets to streamline API actions. Replace separate get methods with list, retrieve, create, update, and destroy routes for concise, organized endpoints.

Work through a django rest framework setup to serialize roles with nested permissions, switching to a permission serializer and setting many=True to return permissions as objects.

Master Django serializers and related fields by building a role creation flow that handles permissions with a permission related field, validating input, saving objects, and returning proper responses.

Complete the remaining functions for roles by fetching the role, validating and saving updates with the role serializer, and returning responses with accepted updates and no-content deletions.

Use django rest framework generic api views and mixins to implement user endpoints—retrieve, list, create, update, and delete—with a consistent response structure and a user serializer.

Implement custom pagination for user lists with Django Rest Framework, returning last page and page size from the request. Set the default page size to 15.

Learn to manage user and role relations in a Django API using serializers and related fields, perform post requests, apply default passwords, and use partial updates.

Implement profile update and password change endpoints using api views, supporting partial updates, password confirmation validation, and proper password handling for the user.

Learn how to return role-based permissions for the authenticated user by embedding permissions in the user data via a Lambda function, enabling the front end to list permissions directly.

Create a django product model with title, description, image, and price fields, update settings, and run migrations to refresh the database.

Create a product serializer and a Django rest framework generic api view to expose product endpoints, wire up urls, and test create, read, update, delete operations with authentication.

Upload images using a Django Rest Framework view and multipart data parsers. Configure a media folder and route, save files to default storage, and expose them via the media URL.

Create order and order item models with customer details. Link them via a through relationship, expose with serializers and a jwt-authenticated list API; run migrations and load sample data.

Define a serializer method field called total and a get_total function that sums price times quantity across an order's items to produce the order total.

Export csv collects all orders and their items into a csv file, writes headers like name, email, product title, price, and quantity, and returns it as a downloadable attachment.

Create a chart API view using a raw SQL query in Django, joining orders and order items, grouping by date, and summing quantity times price to supply frontend chart data.

Create a permissions file that uses view_access and edit_access to enforce per-model access, checking authenticated users' view_<model> permission and granting get as view access and other methods as edit access.

Install the CORS headers package to let the front end from different ports access the Django API, configure settings, add CORS middleware, and enable credentials for cookies during login.

Install angular, create a new project named admin with routing, install dependencies, run ng serve, and open localhost:4200 to verify the setup.

Learn to split an e-mail into navigation and main components in an Angular project, generate components via the terminal, update the model automatically, and use the component selectors in templates.

Explore building a two-model Angular app with public and secure models, implementing login and admin components, organizing modules and components, and updating app modules for secure navigation.

Create and unify login and register components under a public component, adding first name, last name, password, and password confirm fields, rendered via a router outlet with parent styles.

Develop an authentication service in Angular to post login data, including email and password, to http://localhost:1000/login, subscribe to the response, and obtain a token to access private roads.

Build the registered component form with first name, last name, email, password, and password confirmation, wire submit to a register request, and configure the API URL in Angular environments.

Set up and connect secure dashboard and users components under a secure route in Angular by using router links, router outlet, and router module, enabling navigation without page refresh.

Redirect the empty path in Angular routing to the dashboard on the main localhost, adjusting the path and slash to ensure automatic redirection.

Enforce dashboard access by authenticating users, fetch the current user via the user service with credentials to true, and redirect unauthenticated users to the login route.

Define interfaces for user and role, include id, first name, last name, and email, implement user data handling and sign-out functionality, and prepare the result as any for integration.

Explore how to pass variables between components in Angular using inputs, binding a user object to the app, and preventing errors with safe navigation when data is undefined.

Implement sign-out by creating a logout function that posts credentials to the server, subscribes to the response, redirects to the login page, and fixes double refresh with javascript:void(0).

Implement a token interceptor to attach credentials to every request, enable secure cookie handling across calls, and register Tolkan Interceptor as a provider in the app module.

Create a profile page in Angular, wire routes to a profile component, and build two reactive forms for personal information and password to update user data.

Prefill first name, last name, and email by using a global OAuth class with a private static user, plus getter and setter, and guard child components with router outlet.

Update profile by submitting form data through API calls to update user info and password using a health service, then verify changes by re-signing in.

Use event emitters to trigger and subscribe to user updates in real time, updating the profile across components as changes occur.

Create a user table in Angular by building a user service to fetch users from the environment API, then display each user's name, email, role, and an action column.

Add pagination to fetch the first 15 users and load others with prev and next controls, using a current page and a page parameter to refresh the user service.

Implement delete by id using the user service with a confirmation dialog, then filter the list to remove the deleted user, alongside edit and delete actions in Angular and Django.

Create users by opening a user creation form from the button, submitting first name, last name, email, and role selected from a roles service, then return to the users list.

Update users by editing existing records, pre-filling the form with current data, and submitting changes with an HTTP put. Navigate back to the users list after a successful update.

Refactor response handling by introducing interfaces and a consistent response structure. Mark meta as optional to handle missing fields across components, keeping responses cleaner.

Refactor services into a base rest service with default get, create, update, and delete methods; implement abstract endpoint in user and role services.

Develop a permissions system in Angular by creating a permissions service and displaying permissions as checkboxes in a role form. Use reactive forms to select permissions and create the role.

Create and manage a dynamic Angular form array of permissions using a form builder, form groups, and checkboxes; initialize, loop, and submit selected permission ids.

Edit a role by prefill fields from the role service, map and mark permissions, and update the role via the update function, reflecting changes in the browser.

Create a secure Angular products component, define a product interface with image, title, description, and price, fetch via a service, and render in a table with image handling and routing.

Create a product creation flow by building a create product component with a form group for title, description, image, and price, submitted via the product service.

Reuse the same product form in create and edit components, load the current product via route parameters, update it with the product service, and navigate back to the products page.

Learn to implement image uploading in an Angular and Django project by sending files as form data to a backend API, and retrieving the resulting image URL.

Create a reusable image upload component, emit a file uploaded event to pass the image value to the product create form, and remove repeated image service usage for cleaner code.

Add the orders feature by creating the order component and service, extending the rest service, and defining order and order item interfaces with name, email, total, and items.

Create the order view component, fetch order items via the order service using the order id, and display product title, price, and quantity in a table with router links.

Implement a csv export feature by adding an export button in the orders component, calling the order service to fetch a file blob, and triggering a browser download of orders.csv.

Build a dashboard in Angular using the C3 chart library, load order data, and configure a time-series daily sales chart with date-based x axis, switchable line or bar types.

Learn to implement HttpOnly cookies in Angular and Django by replacing token-based auth, updating the interceptor, enabling with credentials, and handling logout by clearing cookies and redirecting to login.

Reach out for help if you're stuck on the project, and I'll assist you. Leave a review to unlock future tutorials, and I wish you all the best.