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.