Django and AngularJS

Question

I've downloaded the Thinkster Djangular Boilerplate and I managed to install and create an app with a sample page that read values from a remote database.

I'm now trying to configure it to use AngularJS to display the page, based on their tutorial, but to no avail. On my /static/javascripts/thinkster.js I've added my new JS module and declared it didn't have dependencies.

(function () {
   'use strict';

   angular.module('thinkster', ['thinkster.controllerModule']);
   angular.module('thinkster.controllerModule', []);
})();

I've created that module in /static/javascripts/controllerModule.js and declared an associated controller to define a variable 'names' (as a simple test).

(function () {
  'use strict';

  angular
    .module('thinkster.controllerModule')
    .controller('myController', myController);

  myController.$inject = ['$scope', '$filter', '$http', '$location', '$timeout'];

  function myController($location, $scope, $http, $filter, $timeout) {
    $scope.names = [
          {name:'Jani',country:'Norway'},
          {name:'Hege',country:'Sweden'},
          {name:'Kai',country:'Denmark'}
      ];
  }
})();

As a test HTML, I've copied the index.html code to /templates/myPage.html and edited a couple of lines so that the page uses my controller, lists the 'names' array and includes the JS modules.

<!DOCTYPE html>
<html ng-app="thinkster">
<head>
  <title>Da Page</title>
  <base href="/" />
  {% include 'stylesheets.html' %}
</head>

<body>
  <div class="row" ng-controller="myController">
      <div class="col-md-4 col-md-offset-4">
            <ul>
            <li ng-repeat="x in names">
                {{ x.name }} , {{ x.country }}
            </li>
          </ul>
      </div>
    </div>

    {% include 'javascripts.html' %}
</body>
</html>

In my javascripts.html file, I've added my new controller to be included.

<script type="text/javascript" src="{% static 'javascripts/controllerModule.js' %}"></script>

Finally, my 'views.py' file (I'm currently using the ones outside of an app, I'll change that as soon as I get this fixed) has a 'myPage' function.

def myPage(request):
    return render(request, 'myPage.html')

And my 'urls.py' has a pattern for 'myPage' that redirects to the function in 'views.py'.

urlpatterns = patterns(
    '',
    url(r'myPage', views.myPage, name='myPage'),
    url('^.*$', include('myApp.urls')),
)

When I load up my page, the list is empty. No names come up. I don't even know how to debug this, it just seems like something is configured wrong. Any tips?

Daniel Roseman · Accepted Answer · 2015-09-09 14:10:32Z

You're including Angular syntax in a Django template. However, they both use the same {{ }} format, so since Django parses the template first it is evaluating those variables (to nothing) before Angular has a chance to see them.

Generally, you should split up Django and Angular templates; Angular templates are really static files from the point of view of Django, and should be loaded via the static file server.

Since you're just learning about Angular, it's fair enough to do it this way for now though. To solve your immediate problem, you can wrap the Angular code with the Django {% verbatim %}...{% endverbatim %} block so that Django doesn't evaluate it.

Paul · Accepted Answer · 2015-09-09 14:20:03Z

0

Also you can use $interpolateProvider and change {{}} symbols to {% %} or //, for example. But make shure that you are doing it before your module has been already initialized.

  customInterpolationApp.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('//');
    $interpolateProvider.endSymbol('//');
  });

https://docs.angularjs.org/api/ng/provider/$interpolateProvider

answered Sep 9, 2015 at 14:20

Paul

6,81711 gold badges45 silver badges60 bronze badges

Collectives™ on Stack Overflow

Django and AngularJS

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related