Learn Python Django & Angular 10 by creating a FullStack App

Install Visual Studio Code, a popular lightweight open source editor by Microsoft, to work on both Jianguo Project and Angler Project, downloading and installing with default settings.

Install Postman to test the API methods by downloading from the official link, installing with default settings, and noting that no account is needed.

Install Norges to set up and run the Anjelah project, download from the official link, install with default settings, verify the installation by checking the version, and confirm successful setup.

install the Angular command line utility, learn to install it globally or per project, and verify the version with --version.

Install Python 3.8 from the official python.org site, verify the installation, and run a simple Hello, world program to confirm success before installing Django.

Understand why virtual environments are essential when managing multiple Django projects, so you can run different Django versions on the same machine without global installation.

Install Django by opening the command prompt, activating the virtual environment, and installing the latest Django. Then install the Jean-Georges framework to create the AP and points.

Create a Django project named Django API with django-admin startproject, run the server on port 8000, and explore key files like manage.py, settings, and the wsgi entry point.

Explore the default SQLite database file in your project using Escalada Studio, load it with the executable, and visualize that it currently has no tables.

Enable cors in a Django project by installing the django-cors-headers package with pip and registering it in installed apps and middleware. Configure a domain whitelist to restrict origins.

Create a Django app named employable within the project, register it and the rest framework, and define department and employee models with fields for id, name, department, and image filename.

Create serializers for both models to convert complex types to native data renderable as json or xml, and implement serializer classes in serializer.py.

Build a department API with Django by implementing get, post, put, delete methods, using models, serializers, and decorators for cross-domain access, and wiring URL routes for the front-end.

Create and test employee screen APIs by adapting existing department methods to handle GET, POST, PUT, and DELETE, adding routing for payments, and validating each method.

Learn how to build an API method to save a profile picture by creating a media folder, updating settings, and using default storage to save and serve uploaded files.

Learn Angular project architecture with department and employee components, including add/edit pop-ups and subcomponents for records. Use a shared service to exchange data with the API in maintainable full-stack app.

Create an Angular 10 project, enable routing, and skip styling; run the dev server to view the app in a browser and explore index.html and app component.

Generate department and employee components and a service to consume APIs, with show, delete, add, and update functionality, and register the service in providers.

Register the http client and ynab modules, import forms and observables, and implement shared service methods to consume department APIs (get, add, update, delete) and save profile pictures.

Learn how routing enables navigation to department and employee screens by typing department or employee, and wire a selector in the app component.

Add bootstrap to your full-stack app to speed up styling and layout. Use the traditional stylesheet link and script tag, or the angular-specific installation, to integrate bootstrap quickly.

Add a navigation menu to the application, enabling navigation to the department screen and employ screen, with Bootstrap styling and on-click buttons activating root-linked groups.

Create a departments table on screen, fetch data via a shared service, and display department names with string interpolation in an actions column for edit or delete, using bootstrap styling.

Implement a reusable modal pop-up for adding and editing departments using Bootstrap and Angular components, passing department data, dynamic title, and preventing outside clicks, with a refresh after changes.

Implement add and edit department functionality, passing department objects between screens, binding the name, and toggling add or update buttons by department id, with API calls via a shared service.

Implement the delete department function by using bootstrap icons instead of text buttons, paste the button code inside the button tag, and refresh the table after showing a success message.

Replicate show department screen to create show employee screen, rename department variables to employee, wire the employee add component, and use an anonymous profile picture when none is uploaded.

Add, edit, and upload employee details with a profile picture in a full-stack app, featuring a department dropdown, name selection, and a 60/40 layout for details and image.

Add custom sorting and filtering to the department table with text inputs and backup data, using ascending and descending sort buttons to update the list via an includes-based filter.