Placeholder Image

Subtitles section Play video

  • Over the next few videos,

  • 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.

Over the next few videos,

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it