Маршрутизация Angularjs с URL-адресами django

Я использую AngularJS для своего внешнего интерфейса и Django в качестве внутреннего.

Я делаю очень простые вещи в бэкэнде, поэтому я не рассматривал возможность использования вкусного пирога.

Проблема, в которой я застрял, - это маршрутизация клиент/сервер. Я в полном замешательстве. Что я делаю:

  1. Визуализируйте страницу entry.html из django, в теле которой есть <div ng-view></div>. Я предполагаю, что после этого маршрутизация обрабатывается angular routeProvider

  2. В моей папке static/js у меня есть файл app.js, который определяет маршрут для другого шаблона для формы, которую я хочу заполнить.

Однако, когда я запускаю проект и загружаю URL-адрес входа в приложение, я не перенаправляюсь в форму.

Все файлы javascript включены, и я не вижу ошибок 404 в своем журнале.
Что я делаю неправильно?

ОБНОВЛЕНИЕ : app.js

App.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/',{templateUrl: '/templates/workflow/request_form.html',     controller:EntryCtrl})
        .otherwise({redirectTo:'/'})
}]);

entry.html

{% extends "site_base.html" %}
{% load staticfiles %}



{% block body %}
  <div class='ng-app'>
    <div class='row-fluid'>
        <ng-view></ng-view>
       </div>
   </div>

{% endblock %}

{% block extra_script %}
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js">    </script>
      <script src="http://code.angularjs.org/1.0.6/angular-resource.min.js"></script>
      <script src="http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js">    </script>
      <script src="/static/js/controller.js"></script>
      <script src="/static/js/app.js"></script>
      <script src="/static/js/bootstrap.min.js"></script>
      <script src="/static/js/bootstrap-datepicker.js"></script>
      <script src="https://maps.googleapis.com/maps/api/js?keyAIzaSyCLZKcTGUw9V0-    UcEHuZMCf6uZpNZZaVrg&sensor=false"></script>
{% endblock %}

controller.js

var App = angular.module('app', ['ngResource']);

function EntryCtrl($scope, $http, $routeParams, $location, master)
{
    $scope.form = master.form
}

person Deepankar Bajpeyi    schedule 19.09.2013    source источник
comment
Не могли бы вы опубликовать код app.js?   -  person Eugenio Cuevas    schedule 19.09.2013
comment
Нам понадобится код. Вы определили ng-app в шаблоне? Вы настроили свой модуль Angular и настроили его для использования routeProvider?   -  person Daniel Roseman    schedule 19.09.2013
comment
Конечно обновил. Это мои два файла, которые я использую.   -  person Deepankar Bajpeyi    schedule 19.09.2013
comment
страница что-нибудь отображает? вы получаете ошибки на консоли javascript?   -  person Eugenio Cuevas    schedule 19.09.2013
comment
Какой у тебя EntryCtrl?   -  person miki725    schedule 19.09.2013
comment
@EugenioCuevas Страница отображает фон и другие вещи. В консоли javascript в браузере тоже нет ошибки   -  person Deepankar Bajpeyi    schedule 19.09.2013
comment
@ miki725 Ничего нет, пока что это пустой контроллер. Это проблема ? :/   -  person Deepankar Bajpeyi    schedule 19.09.2013
comment
@DeepankarBajpeyi, как вы его инициализируете? это может быть проблемой. Можете ли вы опубликовать точный код для этого.   -  person miki725    schedule 19.09.2013
comment
@ miki725 Я добавил код контроллера. Я новичок в angular, так что извините за глупые вопросы: P   -  person Deepankar Bajpeyi    schedule 19.09.2013
comment
@DeepankarBajpeyi Я тоже новичок в angular. Эта книга (shop.oreilly.com/product/0636920028055.do) помогла мне начать. Многие примеры сломаны, но это объясняет общую идею использования angular. Это может помочь и вам.   -  person miki725    schedule 20.09.2013


Ответы (2)


Вы должны определить контроллер как часть модуля. Попробуйте следующее:

// controller.js
angular.module('app')
       .controller('EntryCtrl', [
          '$scope',
          '$http',
          '$routeParams',
          '$location',
          'master', // this has to be angular injectable
          function($scope, $http, $routeParams, $location, master) {
              $scope.form = master.form;
          }
       ]);

и вы должны определить приложение только один раз в app.js:

// angular.js
angular.module('app', ['ngResource'])
       .config([
         '$routeProvider',
         function($routeProvider){
             $routeProvider
                .when('/', {
                    templateUrl: '/templates/workflow/request_form.html',
                    controller: 'EntryCtrl'
                })
                .otherwise({
                    redirectTo: '/'
                });
         }
       ]);

Затем убедитесь, что вы включили это после определения углового приложения в шаблоне:

<script src=".../angular.min.js"></script>
<script src=".../app.js"></script> <!-- where app is defined -->
<script src=".../controller.js"></script> <!-- where EntryCtrl is defined -->
person miki725    schedule 19.09.2013

Вместо того, чтобы писать

  <div class='ng-app'>
    <div class='row-fluid'>
        <ng-view></ng-view>
       </div>
   </div>

Вы должны написать:

{% endraw %}
      <div class='ng-app'>
        <div class='row-fluid'>
            <div ng-view>
        </div>
      </div>
{% endraw %}

{% endraw %} используется, чтобы указать механизму шаблонов (если это jinja2) не учитывать то, что находится между этими блоками.

И я думаю, что директива angular должна быть в теге html, а не как <ng-view>

person OAnt    schedule 19.09.2013
comment
Я тоже пытался сделать это div. Это все равно не работает. - person Deepankar Bajpeyi; 19.09.2013
comment
возможно, весь «скрипт» должен быть перед директивой ng-app и ng-view - person OAnt; 19.09.2013
comment
Плохо, что ‹script› должен быть ниже ng-app - person OAnt; 20.09.2013