3

I've been scouring the web for answers to this particular question, and am surprised I haven't found much on this issue. I have a Django site I am redoing to use Angular for the front-end and Django for the back-end, which seems to be a common practice. However, none of the examples I have found deal with the issue of the static path changing in production. I have an S3 bucket in production. Therefore using the path static/whatever/maybesomecss/oranimage is not going to work for partials or in trying to get using $resource some data I store in a .json file.

Here is some code to illustrate what I am talking about.

    .state('math', {
        url: '/math',
        templateUrl: 'games/math',
        controller: 'MathController'
    })
    .state('secretgame', {
        url:'/secretgame',
        templateUrl: 'static/js/games/Partials/secretgame.html',
        controller: 'secretController'
    })

In the above,games/math works if there is a Django URL for it to hit. But I don't want people to be able to go to it directly, it gets messed up (which is a separate question), and anyways I would rather use partials here. 'secretgame' works, but that templateUrl is not going to work in production. Because of the S3 bucket replacing 'static', basically.

One solution would be to stick the STATIC_URL setting I use normally into a global javascript variable and then have something like templateUrl: staticUrl + js/games/partials/secretgame.html, but that doesn't seem great.

Has anyone dealt with this issue? Let me know if there is other information I should provide.

Just to clarify: with partials, separating Django templating from AngularJS's using {% verbatim %} isn't going to work. That's fine for stuff you load from Django URL, but not for a partial, which is consumed entirely by AngularJS.

ssaeed
  • 412
  • 1
  • 7
  • 13
  • Not sure to understand you question but isn't that question helps you resolve your problem? : http://stackoverflow.com/questions/13741221/angular-js-and-partials – Luke Skywalker Jul 22 '14 at 07:21
  • @LukeSkywalker That looks like a good way to load partials, one that I will probably try, but it doesn't solve the issue of how I should reference my static folder from within the partial; for an img src, or extra css or whatever the case may be. – ssaeed Jul 22 '14 at 22:00
  • Ok i got you know. What I do is that all my JS scope lies within a module. At the end of my HTML page I initialize the module with a parameter {{ static_folder }} passed in the context in the django view. – Luke Skywalker Jul 23 '14 at 05:04
  • Cool, thanks for the tip! I was also thinking of creating a "SettingsService" to retrieve that kind of stuff, if I learn anything from trying both of these methods I will update the thread – ssaeed Jul 23 '14 at 13:43
  • @ssaeed have you solved this issue? I'm dying to hear the answer.. – sherlock85 Dec 14 '14 at 17:53
  • @s_sherly We are going with the sticking of STATIC_URL setting into a global Javascript variable for now. :( I hope to come back around to it with something better one day. – ssaeed Jan 02 '15 at 02:09

2 Answers2

1

I've had to deal with this type of problem when using django and angular before. As you say you can use a JS global and just prepend but that is sloppy.

Although it is along the same lines, I think a cleaner solution is to use helper functions that you create with django on the initial page load.

Instead of writing templateUrl: 'static/js/....' you may write templateUrl: staticUrl('js/...') or maybe even take it further with things like jsUrl, cssUrl, etc.

Reeling
  • 243
  • 2
  • 8
0

This GitHub project appears to handle this problem:

https://github.com/appliedsec/djangular

In particular, check out this file: https://github.com/appliedsec/djangular/blob/master/djangular/templates/djangular_module.js

Which injects the STATIC_URL and MEDIA_URL into the JavaScript.

Sagebrush GIS
  • 207
  • 4
  • 14