Name: Django and Angular Basics Part 1 - Basic Angular App
Uploaded: 2016-06-14T15:42:19.000Z
Duration: 5 min 34 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Present continuous

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

To-infinitive

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

and getting it actually working with Django.

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

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

which is a super common library that people use

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

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

you'll see we have angulardemo which is the root

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

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

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

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,

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

We're not really gonna be doing any database access

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.

Our first line is we're creating an Angular module

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

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

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

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

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.

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

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

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

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

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

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

is gonna have access to anything that's available

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

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

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,

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