How to set up routing in Angular -route + Django?

I

Ilya Oskin2016-07-24 23:05:29

Django

Ilya Oskin, 2016-07-24 23:05:29

Good afternoon! I'm making a single page application on Django + Angular using Rest-framework.
At the stage of setting up routing using angular-route, the following problem arose: when opened in a browser, an empty page is screened, while errors continue to fly out in the developer console, and the loading icon constantly spins on the tab. Routing is configured according to the example from elementary tutorials:
app.js

var app = angular.module('uniApp', ['ngRoute']);

app.config(function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/', {
      controller : 'mainCtrl',
      templateUrl : '../views/main.html'
    })
    .when('/\d', {
      controller : 'detailCtrl',
      templateUrl : '../views/detail.html'
    })
    .otherwise({
      redirectTo:'/'
    });
  $locationProvider.html5Mode(true);
})

app.controller('mainCtrl', function ($scope, $http) {
  $http.get('http://127.0.0.1:3000/api/v0/cases/').success(function(data){
    $scope.cases = data;
  });
});
app.controller('detailCtrl', function($scope) {

});

index.html

<!DOCTYPE html>
<html ng-app="uniApp">
<head>
    <meta charset="utf-8">
    <base href="/">
    <title>UNI DIGIT</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
    {% load staticfiles %}
    <script type="text/javascript" src="{% static 'js/app.js' %}"></script>
</head>
<body ng-controller="mainCtrl">

    <div ng-view></div>

</body>
</html>

I tried to rewrite the entire code exactly as in the examples from the tutorials, but the problem did not disappear.
Maybe it's Django, but it has nothing to do with the frontend...

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

M

marazmiki, 2016-07-25
@marazmiki

Take a look in the developer's console to see what addresses go to requests for the templates specified in templateUrl. It seems to me that Dzhanga instead gives the index page, which initializes the angular, looks for the route, tries to load the template, gets the main one instead, and so on until it stops.
If I guessed correctly, what are the solutions:
1. Wrong: put all angular templates in a directory for static files (see staticfiles )
2. Do not use Django for the frontend at all. As a backend with an API, it is great, but for SPA and, in particular, for Angular, it is not very good. I would advise developing SPA in a separate repository that knows nothing about the backend.

V

Vladimir, 2016-07-24
@Casufi

1) If there is a controller in the routes, it does not need to be listed here <body ng-controller="mainCtrl">
2) Repeat the lesson word for word and step by step, and then write your application