带有 Angular 2 的 Django

Question

我想将 Angular 2 与 Django 集成，我有一些问题要问。

1. 如何将 Angular 2 的插值语法从 {{ }} 更改为 (( )) 或类似的东西？

2. 如何将 cookie 中的 CSRF 令牌添加到每个 HTTP 帖子中？

在 Angular 1 中，我做了这样的事情：

.config(function($httpProvider) {
    $httpProvider.defaults.xsrfCookieName = 'csrftoken';
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
});

1. 将 Angular 2 与 Django 集成是个好主意吗？

Answer 1

对于基于 Angular2 的项目的整体设计，我会推荐一种不同的方法。

基于 Angular2 的应用程序旨在用作在浏览器中运行的完全包含的应用程序（在概念上类似于移动应用程序在移动操作系统上的运行方式）。 Angular2 应用程序和后端之间应该有一个非常清晰和突然的分离。

考虑到这一点，您当然可以将 Django 用于您的后端，但不能像传统的 Django 应用程序将框架与服务器端呈现的表单和页面一起使用。

相反，您宁愿设计您的后端，以便它公开一个带有 JSON 有效负载的 RESTful API 接口（使用 POST/PUT 来创建和更新对象，GET 来获取/列出等）然后您的 Angular2 应用程序会使用它用于创建面向用户的体验的 API。

提交后，用于创建对象的 Angular2 表单会向您的后端发出 HTTP POST 请求，其中包含 JSON 格式的数据作为其有效负载（而不是 HTML 表单提交产生的​​传统表单编码数据）

用于创建 RESTful 后端 API 的良好工具选项是 Django REST Framework 或 Tastypie。

对于身份验证，您可以使用 JWT（JSON Web 令牌），并且有很好的 add-ons 用于支持该功能的 Django REST 框架。

这种架构有一个主要优势：在未来，如果您的系统发展需要真正的原生移动客户端（例如 Android 或 iOS 应用程序），您应该能够为这些原生应用程序使用完全相同的 RESTful API。

这种架构也有一些缺点，例如无法使用 Django 开箱即用的表单处理功能。

考虑到上述情况，以下是对您最初问题的答复：

1. 如何将 angular2 的插值语法从 {{ }} 更改为 (()) 或类似的东西。

使用我建议的方法就不需要了。

1. 如何将 cookie 中的 csrf 令牌添加到每个 http 帖子中？

如果使用 JWT，则不需要 CSRF 验证。如果使用基于会话的身份验证，您仍然需要它，但您可以使用 HTTP 标头传递它，正如 Langley 建议的那样。

1. 将 Angular2 与 Django 集成是一个好主意吗？

主观，但我肯定会说是的。但是，您需要确保清楚地将后端与前端分开。后端不应使用服务器端生成的 HTML sn-ps 或 HTML 表单进行响应。这一切都应该在您的 Angular2 应用程序中处理。

Answer 2

嗯。我最近遇到的三个问题。

• 3. 是的。这绝对是个好主意。由于您拥有许多 Python 库作为后端的强大功能，可以结合 Angular 的强大功能执行您喜欢的任何操作。 :D
• 2. 按照 Langley 的建议，通过使用更新的默认请求选项注入您自己的 HTTP 提供程序来工作。 编辑：我最近发现了一个使用 angular2 cookie 服务的更好的解决方案。它通过提供 XSRFStrategy 为您注入 CSRSFToken ;-)

缺点是您需要额外的库： NPM:Angular2-cookie

import { Injectable } from '@angular/core';
import { CookieService } from 'angular2-cookie/services/cookies.service';
import { HttpModule, Headers, BaseRequestOptions, RequestOptions, XSRFStrategy, CookieXSRFStrategy }    from '@angular/http';


@Injectable()
export class DefaultRequestOptions extends BaseRequestOptions{
    headers:Headers = new Headers({
        'Content-Type': 'application/json'
    });
}

@NgModule({
    imports:  [...
        HttpModule],
    declarations: [
        AppComponent, ...,
    ],
    bootstrap: [AppComponent],
    providers: [...
        CookieService,
        {
            provide: RequestOptions,
            useClass: DefaultRequestOptions
        },
        {
            provide: XSRFStrategy,
            useFactory: (cookieService) => {
                return new CookieXSRFStrategy('csrftoken', 'X-CSRFToken');
            },
            deps: [CookieService]
        }
    ]
})
export class AppModule {
    constructor(){
       // ther you go ;-)
    }
}

您的“@angular/compiler”模块中的

静态默认插值配置。

import { DEFAULT_INTERPOLATION_CONFIG } from '@angular/compiler'

// These values will be used if not provided by your Component.interpolation

DEFAULT_INTERPOLATION_CONFIG.start = '{$';
DEFAULT_INTERPOLATION_CONFIG.end= '$}';

Answer 3

Django中有一个verbatim标签，
可以用来忽略verbatim块内的{{}}标签
检查here

Answer 4

1- 你不能改变 Angular 的模板语法。

2- 我不认为 Angular 的 2 API 领先于简单地设置一个变量，但是有自动的方法，检查这个问题：

How to make Angular 2 send all requests as application/x-www-form-urlencoded

除了设置 X-CSRFToken 标头之外，您可以执行非常相似的操作，并使用以下方式手动获取 cookie 值：

https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

3- 这个问题要打开才能得到真正的答案。我个人不会，也许我会尝试@Zyzle 使用 Django 作为后端的想法，但是开始混合两个框架的前端语法，我不会推荐它。