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

Driveby contribution to Python Cryptography

While at PyConAU 2016 I attended the Monday sprints and spent some time looking at a proposed feature I hoped would soon be part of cryptography. As most readers of this blog will know, cryptography is a very respected project within the Python ecosystem and it was an interesting experience to see how such a prominent open source project handles contributions and reviews.

The feature in question is the Diffie-Hellman Key Exchange algorithm used in many cryptography applications. Diffie-Helman Key Exchange is a way of generating a shared secret between two parties where the secret can't be determined by an eavesdropper observing the communication. DHE is extremely common - it is one of the primary methods used to provide "perfect forward secrecy" every time you initiate a TLS connection to an HTTPS website. Mathematically it is extremely elegant and the inventors were the recipients of the 2015 Turing award.

I wanted to write about this particular contribution because man…

My setup for downloading & streaming movies and tv

I recently signed up for Netflix and am retiring my headless home media pc. This blog will have to serve as its obituary. The box spent about half of its life running FreeNAS, and half running Archlinux. I’ll briefly talk about my experience with FreeNAS, the migration, and then I’ll get to the robust setup I ended up with.

The machine itself cost around $1000 in 2014. Powered by an AMD A4-7300 3.8GHz cpu with 8GB of memory. A SilverStone DS380 case is both functional, quiet and looks great. The hard drives have been updated over the last two years until it had a full compliment of 6 WD Green 4TiB drives - all spinning bits of metal though.

Initially I had the BSD based FreeNAS operating system installed. I had a single hard drive in its own ZFS pool for TV and Movies, and a second ZFS pool comprised of 5 hard drives for documents and photos.

FreeNAS is straight forward to use and setup, provided you only want to do things supported out of the box or by plugins. Each plugin is install…

Markdown Editor Component for Angular2

Thought I'd share a component I've been hacking on for angular2: a syntax highlighted markdown editor with rendered preview.

The code including a basic example is available on github. Because Angular2 hasn't yet been released this is really just me kicking the tyres.



This component relies on two libraries:

- marked for rendering markdown as html
- and ace editor for editing markdown
Basic Usage Example Add to your html template:
<markdown-editor (save)="updatedText($event)" [initial-text]="markdownContent"></markdown-editor> Remember to include the Markdowndirective in your @Component annotation:
@Component({ selector:'about', directives: [CORE_DIRECTIVES, Markdown] }) Another Example You can also control the component with external ui:
<button (click)="md.editMode = true">Custom Edit Button</button><markdown-editor [initial-text]="myMarkdownText" [show-edit-but…