代码之家 › 专栏 › 技术社区 › Deepankar Bajpeyi

使用django的url进行Angularjs路由

angularjs-routing angularjs django python javascript

Deepankar Bajpeyi · 技术社区 · 12 年前

我的前端使用AngularJS,后端使用Django。

我在后台做一些非常简单的事情,所以我没有考虑使用tastypie。

我遇到的问题是客户端/服务器路由问题。我完全糊涂了。我所做的是:

从django渲染entry.html页面,该页面具有 <div ng-view></div> 体内。我假设在这之后,路由由angular的routeProvider处理
在我的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
}

2 回复 | 直到 12 年前

miki725 12 年前

您必须将控制器定义为模块的一部分。请尝试以下操作:

// 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 -->

OAnt 12 年前

而不是写作

  <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>