Django/AngularJS：如何从我的 AngularJS 脚本访问我的 Python 上下文项

Posted 2023-02-24

【中文标题】Django/AngularJS：如何从我的 AngularJS 脚本访问我的 Python 上下文项

【英文标题】：Django/AngularJS: How do I access my Python Context Items from my AngularJS Script

【发布时间】：2018-03-27 11:37:59

【问题描述】：

美好的一天！我是一名初学者，正在尝试 Django 项目，同时将 AngularJS 用于我的前端 Firebase 聊天系统。这是我之前就这个项目提出的一个问题：Firebase/Angular: Messages not showing in html, but contain the message objects

我知道在使用 django/python 时直接在 html 上使用 json 变量是不明智的，但碰巧我的 firebase 聊天模块正在使用 angularJS（而且我不知道如何在django..)，而我的 angularJS 代码需要从 View.py 访问我的 Django 上下文查询集。

有什么办法可以：

将 json 项推送到我的 HTML/模板中，就像推送上下文一样 信息从 Views.py 到我的 HTML/模板中，并在我的 AngularJS 脚本？ 从 Views.py 的 Context 访问我的 Django/Python 的数据集？

这是我的 Firebase AngularJS 代码：

var app = angular.module('chatApp', ['firebase']);

app.controller('ChatController', function($scope, $firebaseArray) 

    //I want to populate the crisis and sender variables  with something from my context 
    //from Views.py.. Inside planList

    var crisis = "Crisis1"; 
    var sender = "Sender1";

    //Query

    var ref = firebase.database().ref().child(crisis).child('CMO-PMO');

    $scope.messages = $firebaseArray(ref);

    $scope.send = function() 
        $scope.messages.$add(
            sender: sender,
            message: $scope.messageText,
            date: Date.now()
        )
    
)

这是我的 Views.py 代码：

def home(request):
    template = loader.get_template('app/home.html')
    planList = Plan.objects.filter(plan_crisisID__crisis_status='Ongoing')

    context =         
        'planList': planList
    
    return HttpResponse(template.render(context, request))

我的 AngularJS 代码中需要的两个变量（crisis 和 sender）都来自 planList 上下文。

我有什么办法可以做到这一点吗？请给我一些帮助.. 非常感谢您，我非常感谢 :) 如果需要，我很乐意提供任何其他信息，并且也会及时回复！

【参考方案1】：

我认为最好使用 API。您可以非常轻松地使用 DRF 创建 API。例如：

# Serializer
class SomeSerializer(serializers.ModelSerializer):
   class Meta:
        model = Plan
        fields = ('model_fields',)

# Views:
from rest_framework import generics


Class SomeView(generics.ListView):
      queryset = Plan.objects.all()
      serializer_class = SomeSerializer


# urls

url(r'^plans$', SomeView.as_view()),

在Angular JS中，如果你使用angular-resource，你可以简单地通过以下方式获取数据：

res = $resource('/plans')
res.query().$promise.then(function(data) 
    console.log(data),  // You get your data in here
    function(error) 
    console.log(error)
)