I have a basic Django application (Django 1.7) with an AngularJS interface (1.2.19) using basic routing. When you first access the site, routing loads correctly and displays the contents in ng-view. However, if I go to / login and successfully sign up to the site (by default on the Django login page), I will be redirected to the home page and the routing will not load into ng-view. I need to reload the page (usually twice) or clear the cache in order to load the contents in my ng-view. Even clicking on the links in my template does not display the contents of ng-view. How to make content load in my ng view after 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 do not 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 : After some deeper testing, the problem seems to be isolated from using Chrome as my testing browser. In Firefox and Safari (Opera was not tested), ng-view loads as expected after redirecting from the login page. I have no idea why this is. Any explanation would be appreciated.