2

I have a basic Django app (Django 1.7) with an AngularJS (1.2.19) frontend using basic routing. When first accessing the site, the routing loads properly and displays the content in the ng-view. However, if I go to /login and successfully log into the site (default Django login page), I am redirected to the home page and the routing fails to load in the ng-view. I have to reload the page (usually twice) or clear the cache to get the content in my ng-view to load. Even clicking on the links in my template fail to display the ng-view content. How can I force the content to load in my ng-view after a redirect?

home.html

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js"></script>
  </head>
  <body ng-app="testyApp">
    <h1>Routing Test</h1>
    <ul>
      <li><a href="#/">Default</a></li>
      <li><a href="#/test">Other</a></li>
    </ul>

    <div ng-view></div>

    <script type="text/javascript" src="/static/main.js"></script>
  </body>
</html>

main.js

angular.module('testyApp', ['ngRoute'])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', {
      template:'<h3>Home page</h3>'
    })
    .when('/test', {
      template:'<h3>Other page</h3>'
    })
    .otherwise({redirectTo: '/'});
  }]);

I don't think these files are necessary, but here they are just in case.

urls.py

from django.conf.urls import patterns, include, url
from app_test.views import home

urlpatterns = patterns('',
    url(r'^$', 'app_test.views.home', name='home'),
    url(r'^login/$', 'django.contrib.auth.views.login', {
            'template_name': 'login.html'}),
)

views.py

from django.shortcuts import render


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

login.html

{% extends 'base.html' %}
{% block header_text %}Login{% endblock %}
{% block content %}
<form name="loginForm" 
      method="post" 
      action="{% url 'django.contrib.auth.views.login' %}">
    {% csrf_token %}
    {% for field in form %}
    <div>
      {{ field.label_tag }}
      <br>
      {{ field }}
    </div>
    {% endfor %}
    <div>
      <input type="submit" 
             value="Login"
             id="id_submit">
    </div>
</form>
{% endblock %}

more info: After some more indepth testing the issue seems isolated to using Chrome as my testing browser. With Firefox and Safari (didn't test Opera) the ng-view loads as expected following the redirect from the login page. I have no idea as to why this is the case. Any explanations would be appreciated.

user3597703
  • 335
  • 3
  • 12
  • Please open chrome dev tools and let us know if any errors show up in console during that redirect stage. – tutuDajuju Jun 08 '15 at 08:55
  • I don't think there were any errors. When the test site was deployed using AWS my problem disappeared. I could easily be wrong, but this made me think the error is actually due to a problem with the Django development server. – user3597703 Jun 22 '15 at 21:51
  • It most definitely sounds like an environment specific issue, but chrome will tell you more (in dev console). E.g.: it's common that chrome rejects [running scripts with different domains - due to same origin policy](http://stackoverflow.com/q/9613210/484127). – tutuDajuju Jun 23 '15 at 12:15

0 Answers0