Angularjs路由与django的网址

Posted

技术标签:

【中文标题】Angularjs路由与django的网址【英文标题】:Angularjs routing with django's urls 【发布时间】:2013-09-24 13:46:27 【问题描述】:

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

我在后端做着非常简单的事情,所以我没有考虑过使用 sweetpie。

我遇到的问题是客户端/服务器路由。我彻底糊涂了。 我要做的是:

    从 django 渲染 entry.html 页面,该页面在正文中有 <div ng-view></div>。 我假设在此之后路由由 Angular 的 routeProvider 处理

    在我的 static/js 文件夹中,我有一个文件 app.js,它为我要填写的表单定义了另一个模板的路径

但是,当我运行项目并加载应用程序的入口网址时,我没有被重定向到表单。

所有的 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

【问题讨论】:

你能发布 app.js 代码吗? 我们需要查看一些代码。您是否在模板中定义了ng-app?您是否设置了 Angular 模块,并将其配置为使用 routeProvider? 确定已更新。这是我使用的两个文件。 页面是否呈现任何内容?你在 javascript 控制台上遇到错误吗? 你的EntryCtrl是什么? 【参考方案1】:

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

// 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: '/'
                );
         
       ]);

然后确保在模板中定义 Angular 应用程序后将其包含在内:

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

【讨论】:

【参考方案2】:

而不是写

  <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 标签中,而不是像 &lt;ng-view&gt;

【讨论】:

我也尝试过使用div 的方式。无论如何它都不起作用。 也许整个 我的错

以上是关于Angularjs路由与django的网址的主要内容,如果未能解决你的问题,请参考以下文章

Django、REST 和 Angular 路由

python-- Django路由系统(网址关系映射)视图模板

如何将 Angular js 路由与 laravel/lumen 路由一起使用?

[Angularjs]$http.post与$.post

AngularJs之八

Angular JS路由不起作用