Building Angular and Django Apps

Learn how to build dynamic, full-stack applications by pairing two robust frameworks—Angular and Django.

Put your Angular and Django REST knowledge to the test. In this course, join Rudolf Olah as he delves into the intricacies of pairing the two frameworks to build dynamic web applications. Throughout the course, Rudolf demonstrates how to wire together the two frameworks, add pagination, secure, and test your applications. Discover how to prepare your Angular code for production, communicate between the front-end and back-end servers using the built-in Angular HttpClient, and use the Angular Material UI component framework to display pop-up dialog boxes and data in tables. Plus, learn how to set up authentication with the Django OAuth Toolkit, implement filtering with Django and Angular, and use unit and end-to-end testing to ensure that your app is ready for production.

Introduction

• Create a full-stack Angular app with the Django REST framework
• What you should know
• Demo project overview

1. Django and Angular Preparation

• Running the Angular and Django development servers
• Compiling Angular Code
• Serving Angular Code Through Django static files

2. Forms with Angular and Django

• Creating models with the Django REST framework
• Creating a ViewSet with Django
• Creating a REST API service with Angular
• Creating a basic form as an Angular component
• Connecting an Angular component to a service

3. Front-End Design and Layout with Angular

• Form layout with Angular Material
• Date/time selection with a Calendar in Angular
• Displaying a data table with Angular Material table
• Displaying a pop-up dialog box with Angular
• Displaying more information with Angular

4. Authentication with Django and Angular

• Setting up Authentication with Django OAuth Toolkit
• Using scopes with Django OAuth Toolkit for permissions
• Registering a new OAuth application with Django OAuth Toolkit
• Logging in and authentication with Angular and HttpClient
• Using OAuth headers with Angular and HttpClient
• Authentication storage with Angular

5. Filtering and Pagination with Django and Angular

• Checking permissions with Django
• Deleting an item using Angular and Django
• Partially updating an item using Angular
• Pagination with Django
• Pagination with Angular
• Filtering with Django
• Filtering with Angular
• Animations in Angular

6. Testing Angular

• Unit testing a component
• Unit testing a service
• Unit testing a controller
• End-to-end testing the form submission process
• End-to-end testing the filtered data table

7. Testing Django

• Unit testing authentication
• Unit testing permission checks
• Unit testing validation for the REST API

Conclusion

• Next steps