Django与Angular 2

我想将Angular 2与Django集成,我还有一些问题需要解决.

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

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

在Angular 1中,我做了类似这样的事情:

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

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

David M... 131

我建议对基于Angular2的项目的整体设计采用不同的方法.

基于Angular2的应用程序旨在用作在浏览器中运行的完全包含的应用程序(概念上类似于移动应用程序在移动OS上运行的方式).您的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令牌),并且Django REST Framework 有很好的附加组件可以支持它.

该架构有一个主要优势:在未来,如果您的系统发展需要真正的原生移动客户端(例如Android或iOS应用程序),您应该能够为这些本机应用程序使用完全相同的RESTful API.

该体系结构也有缺点,例如无法使用Django表单 - 处理开箱即用的优点.

考虑到上述情况,以下是对您原始问题的回答:

如何将angular2的插值语法从{{}}更改为(())或类似的内容.

使用我建议的方法没有必要这样做.

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

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

将Angular2与Django集成是一个很好的想法吗？

主观但我肯定会说是的.但是,您需要确保清楚地将后端与前端分开.后端不应响应服务器端生成的HTML代码段或HTML表单.这应该都在你的Angular2应用程序中处理.

我建议对基于Angular2的项目的整体设计采用不同的方法.

基于Angular2的应用程序旨在用作在浏览器中运行的完全包含的应用程序(概念上类似于移动应用程序在移动OS上运行的方式).您的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令牌),并且Django REST Framework 有很好的附加组件可以支持它.

该架构有一个主要优势:在未来,如果您的系统发展需要真正的原生移动客户端(例如Android或iOS应用程序),您应该能够为这些本机应用程序使用完全相同的RESTful API.

该体系结构也有缺点,例如无法使用Django表单 - 处理开箱即用的优点.

考虑到上述情况,以下是对您原始问题的回答:

如何将angular2的插值语法从{{}}更改为(())或类似的内容.

使用我建议的方法没有必要这样做.

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

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

将Angular2与Django集成是一个很好的想法吗？

主观但我肯定会说是的.但是,您需要确保清楚地将后端与前端分开.后端不应响应服务器端生成的HTML代码段或HTML表单.这应该都在你的Angular2应用程序中处理.

嗯.我最近遇到的所有三个问题.

是.这绝对是一个好主意.因为你拥有许多python库的强大功能作为后端来执行你喜欢的任何动作以及角度的力量.:d

正如Langley建议的那样,通过注入您自己的HTTP-Provider和更新的默认请求选项来工作. 编辑:我最近发现了一个使用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 ;-)
    }
}

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= '$}';