Building Angular and Django Apps

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

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