Django and Angular - Setting up Base Angular App

Learn what it takes to get the basics of an angular app going with Django. See how simple it is to get started.
Download HD Version next video: Django and Angular - Displaying Data

resources

app = angular.module('demoapp', []);

app.controller('DemoCtrl', ['$scope', function($scope) {
    $scope.num = 0;
    $scope.save = function() {
      $(".data").html("Click: " + $scope.num);
      $scope.num += 1;
    };
}]);
<body ng-app="demoapp">
    <h1>Django Angular</h1>

    <div ng-controller="DemoCtrl">
        <div class="data">
            Click:
        </div>
        <button ng-click="save()">Get Time</button>
        <hr />
    </div>
</body>

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 plus equals one. 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 demo controller, 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.

comments powered by Disqus