Loading html from templateURL in AngularJS directive (in a django app)

Question

How can I load html from templateURL in an AngularJS directive in an app built on django. Whenever I give some URL in the templateURL variable, it is reaching the django server. How can I implement this? Can I give a django URL in templateURL variable in directives and render the HTML there in django? What is the proper way of doing this?

My directive:

app.directive('test', function()
{
  return{

  restrict: 'E',
  templateUrl: 'test.html'

}});

It is reaching the django server at someURL/test.html and returning a 404.

Can i Implement this way?

app.directive('test', function()
{
  return{
  restrict: 'E',
  templateUrl: 'app/test'

}});

and in django urls.py

url(r'^test/$', TemplateView.as_view(template_name='test.html'))

Is this a good way of doing this? What is the proper way?

Answer 1

Do one thing:

Crete static folder for your project.

add Static folder to urls.py

then give url in directive as:

templateUrl: 'static/test.html'

Answer 2

It depends.

If test.html is a Django template which needs to be rendered before it gets sent to Angular, then yes this is a good way of doing it.

Otherwise - and I would recommend doing it this way - put your Angular templates in a subdirectory inside your static folder, and reference them via your static URL. Then they'll be served up via exactly the same mechanism as the Angular scripts themselves.