Django and AngularJS

Django and AngularJS

本文关键字：AngularJS and Django      更新时间：2023-09-26

我已经下载了Thinkster djangulerplate，并设法安装并创建了一个应用程序，其中包含一个从远程数据库读取值的示例页面。

我现在正试图配置它使用AngularJS来显示页面，基于他们的教程，但无济于事。在我的/static/javascripts/thinkster.js中，我添加了新的JS模块，并声明它没有依赖项。

(function () {
   'use strict';
   angular.module('thinkster', ['thinkster.controllerModule']);
   angular.module('thinkster.controllerModule', []);
})();

我已经在/static/javascripts/controllerModule.js中创建了这个模块，并声明了一个关联的控制器来定义一个变量'names'(作为一个简单的测试)。

(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并编辑了几行，以便页面使用我的控制器，列出'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>

在我的javascript .html文件中，我已经添加了新的控制器。

<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，所以现在这样做是公平的。为了解决你眼前的问题，你可以用Django的{% verbatim %}...{% endverbatim %}块来包装Angular代码，这样Django就不会对它求值了。

也可以使用$interpolateProvider并将{{}}符号更改为{% %}或//，例如。但是请确保在模块初始化之前执行此操作。

  customInterpolationApp.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('//');
    $interpolateProvider.endSymbol('//');
  });
interpolateProvider美元https://docs.angularjs.org/api/ng/provider/

相关文章：