Django-Angular 项目教程

最新推荐文章于 2024-08-25 08:48:08 发布

郑微殉

最新推荐文章于 2024-08-25 08:48:08 发布

阅读量660

点赞数 20

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_01110/article/details/141514332

Django-Angular 项目教程

django-angularLet AngularJS play well with Django项目地址:https://gitcode.com/gh_mirrors/dj/django-angular

项目介绍

Django-Angular 是一个旨在使 Django 和 AngularJS 协同工作的开源项目。它通过提供一些工具和库，简化了在 Django 后端和 AngularJS 前端之间进行数据交互的过程。尽管 AngularJS 已经不再维护，但 Django-Angular 仍然可以为那些需要支持旧版 AngularJS 的项目提供帮助。

项目快速启动

安装

首先，确保你已经安装了 Django 和 AngularJS。然后，通过 pip 安装 Django-Angular：

pip install django-angular

配置 Django 项目

在你的 Django 项目的 settings.py 文件中，添加 django_angular 到 INSTALLED_APPS：

INSTALLED_APPS = [
    ...
    'django_angular',
    ...
]

创建一个简单的视图

在你的 Django 应用中，创建一个视图来返回一些数据：

from django.http import JsonResponse

def simple_view(request):
    data = {'message': 'Hello from Django!'}
    return JsonResponse(data)

配置 URL

在你的 urls.py 文件中，添加一个 URL 来访问这个视图：

from django.urls import path
from . import views

urlpatterns = [
    path('api/simple-view/', views.simple_view, name='simple_view'),
]

创建 AngularJS 应用

在你的前端目录中，创建一个简单的 AngularJS 应用来调用这个 API：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Django-Angular Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        var myApp = angular.module('myApp', []);

        myApp.controller('MainCtrl', function($scope, $http) {
            $http.get('/api/simple-view/').then(function(response) {
                $scope.message = response.data.message;
            });
        });
    </script>
</head>
<body ng-controller="MainCtrl">
    <h1>{{ message }}</h1>
</body>
</html>