gpt4 book ai didi

javascript - Django 和 AngularJS

转载 作者:行者123 更新时间:2023-12-02 15:42:07 26 4
gpt4 key购买 nike

我已经下载了 Thinkster Djangular Boilerplate我成功地安装并创建了一个应用程序,其中包含从远程数据库读取值的示例页面。

我现在尝试将其配置为使用 AngularJS 显示页面,基于它们的 tutorial ,但无济于事。在我的/static/javascripts/thinkster.js 上,我添加了新的 JS 模块并声明它没有依赖项。

(function () {
'use strict';

angular.module('thinkster', ['thinkster.controllerModule']);
angular.module('thinkster.controllerModule', []);
})();

我在/static/javascripts/controllerModule.js 中创建了该模块,并声明了一个关联的 Controller 来定义变量“名称”(作为一个简单的测试)。

(function () {
'use strict';

angular
.module('thinkster.controllerModule')
.controller('myController', myController);

myController.$inject = ['$scope', '$filter', '$http', '$location', '$timeout'];

function myController($location, $scope, $http, $filter, $timeout) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
}
})();

作为测试 HTML,我已将 index.html 代码复制到/templates/myPage.html 并编辑了几行,以便页面使用我的 Controller 、列出“names”数组并包含 JS 模块。

<!DOCTYPE html>
<html ng-app="thinkster">
<head>
<title>Da Page</title>
<base href="/" />
{% include 'stylesheets.html' %}
</head>

<body>
<div class="row" ng-controller="myController">
<div class="col-md-4 col-md-offset-4">
<ul>
<li ng-repeat="x in names">
{{ x.name }} , {{ x.country }}
</li>
</ul>
</div>
</div>

{% include 'javascripts.html' %}
</body>
</html>

在我的 javascripts.html 文件中,我添加了要包含的新 Controller 。

<script type="text/javascript" src="{% static 'javascripts/controllerModule.js' %}"></script>

最后,我的“views.py”文件(我目前正在应用程序外部使用这些文件,一旦修复此问题,我将立即更改)具有“myPage”功能。

def myPage(request):
return render(request, 'myPage.html')

我的“urls.py”有一个“myPage”模式,它重定向到“views.py”中的函数。

urlpatterns = patterns(
'',
url(r'myPage', views.myPage, name='myPage'),
url('^.*$', include('myApp.urls')),
)

当我加载页面时,列表为空。没有名字出现。我什至不知道如何调试这个,看起来好像配置错误。有什么建议吗?

最佳答案

您正在 Django 模板中包含 Angular 语法。然而,它们都使用相同的 {{ }} 格式,因此由于 Django 首先解析模板,它会在 Angular 有机会看到它们之前评估这些变量(什么都没有)。

一般来说,你应该将 Django 和 Angular 模板分开;从 Django 的 Angular 来看,Angular 模板实际上是静态文件,应该通过静态文件服务器加载。

由于您刚刚学习 Angular,所以现在这样做就足够了。为了解决眼前的问题,您可以使用 Django {% verbatim %}...{% endverbatim %} block 包装 Angular 代码,这样 Django 就不会对其进行评估。

关于javascript - Django 和 AngularJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32481602/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com