Django与角2 [英] Django with Angular 2

问题描述

1. 我想如何将Angular 2与Django进行整合，如何更改插值角度2的语法从 {{}} 到（（））或类似的东西

   / li>
   

2. 如何将CSRF令牌从Cookie添加到每个HTTP帖子？

在角度1我做了这样的事情：

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

3. 将Angular 2与Django？

解决方案

我会推荐一个不同的方法来整体设计您的Angular2项目。

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

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

相反，您宁愿设计您的后端，以便它暴露了一个具有JSON有效负载的RESTful API接口（使用POST / PUT来创建和更新对象，GET获取/列表等）然后您的Angular2应用程序将消耗该API以创建面向用户的体验。

提交时，用于创建对象的Angular2表单将发出HTTP POST请求到您的后端包含JSON格式的数据作为其有效负载（而不是由HTML表单提交导致的传统表单编码数据）

创建您的RESTful的好的工具选项后端API将 Django REST框架或 Tastypie 。

对于身份验证，您可以使用JWT（JSON Web令牌），并且有良好的附加组件支持的Django REST框架。

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

该体系结构也有缺点，如无法使用Django表单处理好的开箱即用。

考虑到上述情况，以下是对您的原始问题的回复：

1. 如何将angle2的插值语法从{{}}更改为（（））或类似的东西。

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

2. 如何从cookie添加csrf令牌到每个http post？

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

3. 将Angular2与Django整合起来，是一个很好的想法吗？

主观，但我会说是肯定的。但是，您需要确保从前端清楚后端。后端不应该使用服务器端生成的HTML片段或HTML表单进行响应。所有这些都应在您的Angular2应用程序中处理。

I want to integrate Angular 2 with Django and I have some questions to make.

1. How can I change the interpolation syntax for Angular 2 from {{ }} to (( )) or something like this?

2. How can I add the CSRF token from cookie to every HTTP post?

In Angular 1 I did something like this:

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

3. Is a good idea to integrate Angular 2 with Django?

解决方案

I would recommend a different approach to the overall design of your Angular2-based project.

An Angular2-based application is meant to be used as a fully contained application running in the browser (similar conceptually to how a mobile application runs on a mobile OS). There should be a very clear and abrupt separation between your Angular2 app and the backend.

With that in mind, you can certainly use Django for your backend but not in the way a traditional Django app would use the framework with server-side rendered forms and pages.

Instead, you would rather design your backend so that it exposes a RESTful API interface with JSON payloads (with POST/PUT used to create and update objects, GET to fetch/list, etc.) Then your Angular2 app would consume that API to create the user-facing experience.

When submitted, an Angular2 form for creating an object would issue an HTTP POST request to your backend containing JSON-formatted data as its payload (and not the traditional form encoded data resulting from an HTML form submission)

Good tooling options for creating your RESTful backend API would be Django REST Framework or Tastypie.

For authentication, you could use JWT (JSON Web Tokens) and there are good add-ons for Django REST Framework that support that.

That architecture has one major advantage: in the future, if the evolution of your system requires real native mobile clients (Android or iOS apps for example), you should be able to consume the exact same RESTful API for those native apps.

That architecture also has drawbacks such as the inability to use Django forms-handling goodness out-of-the-box.

Considering the above, here are responses to your original questions:

1. How can I change the interpolation syntax for angular2 from {{ }} to (()) or something like this.

There would be no need for that using the approach I suggest.

2. How can i add the csrf token from cookie to every http post ?

If using JWT you would not need CSRF validation. If using session-based authentication, you would still need it but you could pass it using an HTTP header, as Langley suggested.

3. Is a good ideea to integrate Angular2 with Django ?

Subjective but I would say yes, definitely. However, you need to make sure you clearly separate the backend from the frontend. The backend should not respond with server-side generated HTML snippets or HTML forms. That should all be handled within your Angular2 app.

这篇关于Django与角2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！