Как настроить маршрутизацию в Angular -route + Django?

Добрый день! Делаю одностраничное приложение на Django + Angular с использованием Rest-framework.
На этапе настройки маршрутизации с помощью angular-route возникла следующая проблема: при открытии в браузере экранируется пустая страница, при этом в консоли разработчика не переставая вылетают ошибки, а на вкладке постоянно крутится иконка загрузки. Маршрутизация настроена по примеру из элементарных туториалов:

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>


Постарался переписать весь код в точности, как в примерах из туториалов, но проблема не изчезла.
Возможно, дело в Django, но ведь он не имеет отношения к фронтэнду...
  • Вопрос задан
  • 359 просмотров
Пригласить эксперта
Ответы на вопрос 2
@marazmiki
Укротитель питонов
Поглядите в консоли разработчика, на какие адреса идут запросы к шаблонам, указанным в templateUrl. Сдаётся мне, Джанга вместо них отдаёт индексную страницу, которая инициализирует ангуляр, ищет роут, пытается загрузить шаблон, вместо него получает главную и так до упора.

Если я угадал, то какие есть пути решения:

1. Неправильный: класть все шаблоны ангуляра в директорию для статических файлов (см. staticfiles)

2. Вообще не использовать Джанго для фронтэнда. Как бэкенд с API он отлично подходит, а вот для SPA и в частности для ангуляра — не очень. Я бы посоветовал разрабатывать SPA в отдельном репозитории, который ничего не знает про бэкенд.
Ответ написан
1) Если есть контроллер в роутах, его не нужно указывать здесь <body ng-controller="mainCtrl">
2) Повторите урок слово в слово и по шагам, а потом пишите свое приложение
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы