Serving partials with django?

[vincentalvo]

Hi all,

I'm starting with djangular. I am trying to serve the partial files through Django instead of as static.

This way, the HTML goes first through the Django engine and can be formated, translated, ... all the django goodness!

I can see it seems doable in django-angular http://django-angular.readthedocs.org/en/latest/integration.html#partials

I got a weird error when I try to do it myself. The app.js seems not capable of loading the content... It looks like it is looping and and re-calls itself, thus resulting in a chrome crashing the page.

angular.module('sample', ['djangular','sample.filters', 'sample.services', 'sample.directives', 'sample.controllers','ngCookies']).
 config([
   '$routeProvider',
   'DjangoProperties',
   function($routeProvider, DjangoProperties) {
       $routeProvider.when('/view1', {templateUrl: '/sample/partials/subview/template', controller: 'MyCtrl1'});
       $routeProvider.when('/view2', {templateUrl: DjangoProperties.STATIC_URL + 'sample/partials/partial2.html', controller: 'MyCtrl2'});
       $routeProvider.otherwise({redirectTo: '/view1'});
 }]).
   run([
   '$http',
   '$cookies',
   function($http, $cookies) {
       $http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;
   }]);

view2 et working fine. view1 does not load. Btw, I can load with no problem localhost:8000/sample/partials/subview/template

Any idea? Thanks a lot!

Vincent

[vincentalvo]

Hi all,

I answered my question myself after a big headache...! Pretty obvious at the end. That was what I was thinking, a cyclic call from angular.

Before angular externally calls '/sample/partials/subview/template' it checks if it is inside its namespace. If so (and in my case it was) it calls resolves itself the URL and goes back to router. Again and again...

My fix on the router:

  config([
    '$routeProvider',
    'DjangoProperties',
    function($routeProvider, DjangoProperties) {
        $routeProvider.when('/view1', {templateUrl: '../partials/subview/v1', controller: 'MyCtrl1'});
        $routeProvider.when('/view2', {templateUrl: DjangoProperties.STATIC_URL + 'sample/partials/partial2.html', controller: 'MyCtrl2'});
        $routeProvider.otherwise({redirectTo: '/view1'});
  }])

My urls in django:

    url(r'^partials/(?P<template_name>[-_\w]+/$)', SamplePartial.as_view(), name='partials' ),
    url(r'^partials/(?P<folder>[-_\w]+)/(?P<template_name>[-_\w]+/$)', SamplePartial.as_view(), name='partials_folder' ),
    url(r'^app/$', InventionView1.as_view(), name='invention' ),

The magic base view, a little dirty but robust:

class SamplePartial(TemplateView):
    def dispatch(self, request, *args, **kwargs):
        template_name = kwargs['template_name']
        try :
            folder = kwargs['folder'] + '/'
        except:
            folder = ''
        if template_name[-1] == '/':
            self.template_name = 'sample/%s%s.html' % (folder, template_name[:-1])
        else:
            self.template_name = 'sample/%s%s.html' % (folder, template_name)
        return super(SamplePartial, self).dispatch(request,*args,**kwargs)

And for info, my template subview/v1.html:

{% load i18n %}

{% trans "This is the partial 1 from djangooooooo.!!!! Enjoy all the django templating goodness in you angular apps :-) " %}

What do you think of this way of doing? I have no experience with it, would be great to get some feedbacks from you before I start. I'm thinking of implementing the the {$ angular_variable &} to make it works with django well.

Do you think it would be worth including it in the template for startapp? I will for myself, should I pull request that change?

Thanks, Vincent

[vincentalvo]

Sorry to flood this issue.

I just found out that it could be integrated in a much neater way with djangular. All the logic could be hidden in Djangular app, the result would be that the router could call directly any template from Django, the same way it calls static partials now:

$routeProvider.when('/view1', {templateUrl: DjangoProperties.TEMPLATES_URL + 'sample/partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: DjangoProperties.STATIC_URL + 'sample/partials/partial2.html', controller: 'MyCtrl2'});

partial1.html would come from templates and not static! It would be pre-processed by django first and render using a basic TemplateView. Nothing fancy, I think it would make no sense to do complicated stuff here. It would just be confusing on whether things should be done with django or angular.

That requires a few tweeks, namely: 1/ Modifying djangular_module.js in order to add the parameter TEMPLATES_URL 2/ Adding a view (similar ish to the one I have posted above) 3/ doing the URL logics (similar to what I have posted) in djangular

Seems clean and nice to me. Please let me know if that's in the philosophy of what you want to deliver with djangular in that case I would be happy to pull request the changes. It works beautifully :-)

Cheers, Vince

[AncientSwordRage]

@vincentalvo did you ever put these in?

[vincentalvo]

Yes I did, but finally we gave up on angular all together, so it never really went to prod. Definitely doable though.

[AncientSwordRage]

@vincentalvo so these are in Djangular/master?

[vincentalvo]

No sorry, never put the PR together.

[AncientSwordRage]

@vincentalvo Give it a go? It sounds like a good pattern to follow.

[vincentalvo]

Yes it was good and robust. Unfortunately as I said I don't use angular anymore and I didn't keep this piece of code separated from my main project....

[AncientSwordRage]

@vincentalvo not to worry :+1: