Web Development with Django and AngularJS

Learn how to create a web application using Django and AngularJS. Django and AngularJS are both very popular frameworks for web development.
Course info
Rating
(51)
Level
Intermediate
Updated
Nov 7, 2016
Duration
3h 42m
Table of contents
Course Overview
Course Introduction
Introducing Two Frameworks
Setting up a Django Project
The Back-end: Django and REST
Adding an AngularJS Front-end
Editing Data
Login, Authentication, and Routing
Final Steps
Description
Course info
Rating
(51)
Level
Intermediate
Updated
Nov 7, 2016
Duration
3h 42m
Description

Take a journey to learn full-slack web development in this course. In this course, Web Development with Django and AngularJS, you'll learn how to get the best of both worlds with web development in Django and AngularJS. We will use the power of AngularJS to create a rich interactive user experience, and the awesomeness that is Django to write our server-side code, including REST and persistence to a database. First, you'll discover how to create a basic web application with Django. Next, you'll explore using AngularJS to add an interactive front-end. Finally, you'll learn how to use REST and AJAX to pass data between the front-end JavaScript and back-end Python code. By the end of this course, you'll know the basics of both Django and AngularJS, and how to combine them to create a fully interactive web application.

About the author
About the author

After years of working in software development, Reindert-Jan Ekker has decided to pursue another passion of his: education. He currently works as a college professor of Computer Science in the Netherlands, teaching many subjects like web development, algorithms and data structures and Scrum.

More from the author
Pandas Playbook: Visualization
Intermediate
2h 11m
9 Oct 2018
Pandas Playbook: Manipulating Data
Intermediate
2h 15m
24 May 2018
Django Fundamentals
Intermediate
3h 43m
5 Dec 2017
More courses by Reindert-Jan Ekker
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone, my name is Reindert Ekker, and welcome to my course, Web Development with Django and Angular JS. I am a free-lance developer and teacher focusing on full-stack web development at various companies. Now Angular JS is the most popular JavaScript framework for developing a rich user interfaces for web applications on the client side, and Django is the most popular Python framework for developing the server side of those applications. In this course we're going to build a complete web application, including a rich user interface and a database and more. Some of the major topics that we'll cover include creating a basic web application with Django using Angular to add an interactive front end, and using REST and AJAX to pass data between the front end JavaScript and back end Python calls. By the end of this course, you'll know the basics of both Django and Angular, and how to combine them to create a fully interactive web application. Before beginning the course, you should be familiar with the basics of Python, JavaScript, HTML, and CSS. I hope you'll join me on this journey to learn full-stack web development with the course Web Development with Django and Angular at Pluralsight.

Introducing Two Frameworks
In this module, I'm going to show you an overview of the two frameworks we're going to be using in this course, and how to combine them in a single project. This module is meant as a sort of conceptual overview. I'm going to show you some working code from the project that we'll be creating later in the course. Because there are two complex frameworks involved, it's important that you understand the role each of them has in our final product. This also means that you can just sit back for now and try to understand how the components I'm showing you work together. For now, there's no need to go into details and type along with the code. We'll go through everything step by step later on. So right now, just sit back and look at the big picture. Now, first we'll take a short look at the Django side of the project, and at the various concepts and components that make up a Django project. Next, we'll do the same for Angular. We'll see what an Angular project looks like, and we'll briefly explore the features that makes it such a popular framework. After introducing both frameworks, we'll take a moment to compare and contrast the two. We'll see how to combine them in a single project in such a way that would take advantage of both the strengths of Django and Angular.

Setting up a Django Project
Hi, in this module, I'll show you how to get up and running with the Django side of our projects. So in this module I'm going to focus completely on Django and it's a good idea if you work along with me. We're only going to do the basic steps for setting up a project and those are, installing Python which of course you might have done already but make sure to at least watch the instructions to see if you have the right version installed. Then after installing Python, we'll create a so-called virtual environment to work in and inside that environment, we will install Django, start a new Django project and run that project on the Django web server. So at the end of this module, we'll have a nice and clean Django project and we'll be ready to add some Django code of our own.

The Back-end: Django and REST
In this module, we'll see how to go from our empty Django projects to simple back end that's ready to serve data to an Angular front end. After the previous module, we now have an empty default Django project and the usual first step in that case is to add a new Django app. This takes the form of a Python module that contains its own models, templates, or views. Django apps are used to split an application into cleanly separated modules with clear purpose, and that's what we're going to do. Into that app we will then add some model classes. These represent the persistent data in our application, and Django will help us to store the data in a database. Django also provides a nice admin interface which we will use to create some data to store in the database. The final step is to make or models available for use by the Angular front end. We will use a package called Django-Rest-Framework, which makes it very easy to expose our data to Angular through a rest interface. In case you're unfamiliar with rest, don't worry, I will take you through the steps. At the end of this module, we'll have a simple Django back end that's ready to add Angular at the front end and serve the data from our database to that front end.

Adding an AngularJS Front-end
Hi there, and welcome to this module. We'll be adding a frontend to our project using AngularJS. Since we have our basic backend done, we can now start serving actual webpages and we'll start with creating a simple page with AngularJS, which shows our list of scrum cards. At first, our page will show some cards from a dummy data set that we create with JavaScript so we won't be connecting to the backend with REST just yet. Instead we'll take a moment to explore the mobile view controller architecture of our Angular page and how to display our simple dummy data on a page. We will be using the backend, although not to serve our data yet. Instead we use the general web server to serve our HTML and JavaScripts. We'll then change our dummy data structure to reflect the structure of our lists of strum cards and we'll see how to use Angular directives to display this more complex data structure. We'll see how to use Ng-repeat to loop over JavaScript lists, Ng-model to handle input, and Ng-click to handle mouse clicks. Finally, we'll do away with dummy data altogether and connect with a REST API to retrieve the actual data from a database. This is actually very easy with Angular. So at the end of the module, we'll have a simple webpage written in Angular that displays the data that comes from a database. It'll still be read only though and we'll see how to edit and create cards in the next module.

Login, Authentication, and Routing
Hello, and welcome to the next module in which we're going to add login and logout to our application. We'll need to add a new HTML page for the login form, and we will use Angular routing to serve that page on its own URL. In terms of functionality the main theme of this module will be logging in and out, and there's two sides to implementing that functionality. First there's the backend part, and we'll have to write some new rest views to handle login and logout, and we will put these in their own Django app. And of course we'll have to add all the usual configurations like URL mappings et cetera, et cetera, but an important thing we have already spoken about is to make our forms secure using something called CSRF protection. After that we can move on to the frontend. We will add a new page with a login form and see how to handle a form submit with Angular. We will also have to serve the login page at its own URL, and to do so we will use Angular routing. Now our frontend code is increasing, and to keep things manageable along the way we will have to do some restructuring of our frontend code. So we're going to cover a lot of ground again, let's get started with the first demo.