we're going to go over using Angular with Django.

What we're gonna do is we're going to start out

by setting up a basic Angular app

and getting it actually working with Django.

We're gonna move on to how to display data from Angular,

and then two separate ways to get data

from the back end to the front end.

We're going to start with some Ajax

and then we're gonna move on to using Angular's ng-resource

which is a super common library that people use

to deal with data.

We are not going to go over how to use Angular itself.

This is just enough to get you started with a couple

of the intricacies of how to use it with Django.

Once you watch this first video, you'll be able to go on

and follow some tutorials on how to get started

with Angular.

After you get through all of the videos,

you'll be able to go on and do more advanced tutorials

and start actually making your full single-page application

using AngularJS or editing ones that are already existing.

So with that to start, the first thing that we have

is a very basic Django project.

If we'll do an ls of our project folder,

you'll see we have angulardemo which is the root

of our project.

We have our database.

We have a home app.

We have a manage.py,

and media, static, and templates.

All very basic Django stuff

that we're used to seeing every day.

If we look at our views, you'll see we have

an IndexView and it inherits from TemplateView,

so we're setting the template name to be based on HTML

which is in our root templates folder.

From there, if we'll look at our base.html file,

you'll see it's all very basic HTML.

At the very top, we're loading in

our staticfiles template tags.

And then if you'll scroll down you'll see that

we were importing jquery,

and we're also importing angular to be used.

Finally, we're using the static template tag

to bring in our main.js file which is where our JavaScript

and Angular code that we write is going to live,

so that it can be used on the page.

Other than that, there's nothing else that's going on

on our site.

We're not really gonna be doing any database access

or anything like that for this video.

It's just strictly getting stuff on a static page.

So let's go ahead and look at our main.js file.

As you can see, we have three lines of code.

This is very super basic.

Our first line is we're creating an Angular module

and we're calling it app.

This is gonna kinda be our application

that we use with Django.

We're calling it demoapp just to give it a name

that we can reference in our HTML.

The next thing we'll do is we're creating a controller

called demo controller,

and we're gonna be able to use the scope object

which is a very common that thing that you use with Angular

so that you can get data back and forth

and do many other things to be able to hold data

across the current scope, hence the name of controller

that you're using when you're interacting with a page.

So we'll look at our HTML again.

First thing we're gonna do is we're go to our body tag.

We're gonna add ng-app="demoapp".

This is saying, "Hey, for this body area,

"we're going to use the Angular module of demoapp."

And so everything available in demoapp

we can now use inside of this page.

If we do not set this, then we won't have access

to any of our Angular stuff.

Now we want to go ahead and try to use our demo controller.

And there we're gonna down to our div

and do ng-controller="DemoCtrl".

And so now this div that we have set the demo controller to

is gonna have access to anything that's available

in our demo controller that we create.

And we're gonna add some code to our demo controller

here in a moment.

First let's go ahead and just add some HTML.

We're gonna have our div of data.

This is where we're actually gonna put some information.

And then we also have a button that we've created,

and we're adding the save method on ng-click.

So now, whenever we click on this button,

it's going to go ahead and call the function

that we're gonna set in our app controller.

And then the purpose of what this actually div is gonna do

is we're just gonna click on it a few times,

click on this button,

and it's going to count up the number of times

that we've clicked the button.

So let's go ahead and jump back over to our controller.

We're gonna use our scope variable,

and we're gonna set a variable on it called num,

and we're gonna set it to zero,

'cause we've clicked zero times.

Then we're gonna go ahead and create a scope

called save so that we can call the save function

over in our HTML.

And then we're going to set a div over there

with a class of data,

and every time we click on it,

it's going to set the HTML to click

and output the scope.num variable

so that we can see how many times

we've actually clicked on it.

And then finally, after it shows that,

we're going to iterate the scope.num by one,

so we're gonna do our += 1.

So now every time we click on it,

it's going to iterate up the number of times

that we've clicked on the button.

So let's go ahead and see that in action.

If we'll open up in our browser and refresh the page,

you can see we have the click button.

And if we click it, the first click brings up

our click information and then we'll just click it

a few times.

Then you can see that it's up to eight clicks

that we've clicked it without entering any page refreshes.

So this shows that we've actually used our Angular demoapp.

We've used our controller of DemoCtrl,

and have actually successfully used a variable

that we've set on scope and used a function

that we've set on scope.

And then doing the jquery way of getting our element

is one way that you can actually display data on the screen.

And in the next video, we're gonna go over how to

actually display data from a template perspective

in your templates from Angular.

So with that, I hope you join me next time

for a continuation of our Angular code.