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 标签中,而不是像 <ng-view>
【讨论】:
我也尝试过使用div
的方式。无论如何它都不起作用。
也许整个
我的错 以上是关于Angularjs路由与django的网址的主要内容,如果未能解决你的问题,请参考以下文章
python-- Django路由系统(网址关系映射)视图模板