Skip to main content

AngularJS and Django

Two excellent tools for creating websites are Django and AngularJS, unfortunately they both use the same {{ syntax}} for templates which makes it a bit messy to include both in the same file. This isn't necessarily a bad thing as mixing server and client rendering just sounds like a recipe for a vulnerability.

The method that has been working for me is to completely separate any client side templates from server side templates. For example I serve from a static apache instance a file like this:

    <section id="search" ng-controller="MyCtrl">
        <input type="search" 
               ng-model="searchTerm" 
               ng-change="doSearch()" results="10" 
               placeholder="Search for track to add" autofocus 
               autocomplete="off">
        <table class="table" ng-show="result.tracks">
            <thead><tr><th>Track</th><th>Artist</th></tr></thead>
            <tbody>
                <tr ng-repeat="track in result.tracks | limitTo:10">

                    <td><a href="" ng-click="addTrack(track)">
                        <i class="icon-plus"></i> {{track.name}}</a></td>
                    <td>{{track.artists[0].name}}</td>
                </tr>
            </tbody>
        </table>
    </section>

And then in my django template:
    <div ng-app="App">
        <div ng-controller="Ctrl">
            <div ng-include src="template"></div>
        </div>
    </div>
    ...
    <script src="{% static "js/angular-1.1.4/angular.min.js" %}"></script>
    <script src="{% static "js/angular-1.1.4/angular-resource.min.js" %}"></script>

    <script src="{% static "js/controller.js" %}"></script>


The client side controller is all defined in a javascript file - this includes loading the "static" html template and other goodness like django's cross site validation:

angular.module('App', ['ngResource']);

function Ctrl($scope) {
    $scope.template = "/static/angularTemplates/ResultList.html";
}

function SpotifyCtrl($scope, $http, $resource) {
    /* Protection against cross site scripting attacks. */
    $http.defaults.headers.post['X-CSRFToken'] = csrftoken;

    /* Resources */
    $scope.spotify = $resource("http://ws.spotify.com/search/1/:action",
      {action: 'track.json', q:'Gaga'}
    );

    var Track = $scope.api = $resource("/api/:event/modify",
      {event: ps.event}
    );

    $scope.doSearch = function() {
        $scope.spotifyResult = $scope.spotify.get({q: $scope.searchTerm});
    };
    
   ...snip...
    
}

Which keeps everything very nicely separated.

Popular posts from this blog

Bluetooth with Python 3.3

Since about version 3.3 Python supports Bluetooth sockets natively. To put this to the test I got hold of an iRacer from sparkfun . To send to New Zealand the cost was $60. The toy has an on-board Bluetooth radio that supports the RFCOMM transport protocol. The drive  protocol is dead easy, you send single byte instructions when a direction or speed change is required. The bytes are broken into two nibbles:  0xXY  where X is the direction and Y is the speed. For example the byte 0x16 means forwards at mid-speed. I was surprised to note the car continues carrying out the last given demand! I let pairing get dealt with by the operating system. The code to create a  Car object that is drivable over Bluetooth is very straight forward in pure Python: import socket import time class BluetoothCar : def __init__ ( self , mac_address = "00:12:05:09:98:36" ): self . socket = socket . socket ( socket . AF_BLUETOOTH , socket . SOCK_STREAM , socket .

Matplotlib in Django

The official django tutorial is very good, it stops short of displaying data with matplotlib - which could be very handy for dsp or automated testing. This is an extension to the tutorial. So first you must do the official tutorial! Complete the tutorial (as of writing this up to part 4). Adding an image to a view To start with we will take a static image from the hard drive and display it on the polls index page. Usually if it really is a static image this would be managed by the webserver eg apache. For introduction purposes we will get django to serve the static image. To do this we first need to change the template. Change the template At the moment poll_list.html probably looks something like this: <h1>Django test app - Polls</h1> {% if object_list %} <ul> {% for object in object_list %} <li><a href="/polls/{{object.id}}">{{ object.question }}</a></li> {% endfor %} </ul> {% else %} <p>No polls

Python and Gmail with IMAP

Today I had to automatically access my Gmail inbox from Python. I needed the ability to get an unread email count, the subjects of those unread emails and then download them. I found a Gmail.py library on sourceforge, but it actually opened the normal gmail webpage and site scraped the info. I wanted something much faster, luckily gmail can now be accessed with both pop and imap. After a tiny amount of research I decided imap was the better albiet slightly more difficult protocol. Enabling imap in gmail is straight forward, it was under labs. The address for gmail's imap server is: imap.gmail.com:993 Python has a library module called imaplib , we will make heavy use of that to access our emails. I'm going to assume that we have already defined two globals - username and password. To connect and login to the gmail server and select the inbox we can do: import imaplib imap_server = imaplib . IMAP4_SSL ( "imap.gmail.com" , 993 ) imap_server . login ( use