web-dev-qa-db-ja.com

Django with Angular 2

Angular 2とDjangoを統合したいのですが、いくつか質問があります。

  1. Angular 2の補間構文を{{ }}から(( ))またはこのようなものに変更するにはどうすればよいですか？

  2. CookieからすべてのHTTP投稿にCSRFトークンを追加するにはどうすればよいですか？

Angular 1では、次のようなことをしました。

.config(function($httpProvider) {
    $httpProvider.defaults.xsrfCookieName = 'csrftoken';
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
});
  1. Angular 2をDjangoと統合するのは良い考えですか？
djangoangular
44
Rus Mine

Angular2ベースのプロジェクトの全体的な設計には、別のアプローチをお勧めします。

Angular2ベースのアプリケーションは、ブラウザーで実行される完全に含まれるアプリケーションとして使用することを意図しています（モバイルOSでのモバイルアプリケーションの実行方法に概念的に似ています）。 Angular2アプリとバックエンドの間には、非常に明確で突然の分離が必要です。

これを念頭に置いて、バックエンドにDjangoを使用できますが、従来のDjangoアプリがサーバー側でレンダリングされたフォームおよびページでフレームワークを使用する方法では使用できません。

代わりに、JSONペイロードを使用したRESTful APIインターフェイスを公開するようにバックエンドを設計します（オブジェクトの作成と更新、フェッチ/リストへのGETなどに使用されるPOST/PUTを使用）。その後、Angular2アプリはそのAPIを使用して作成しますユーザー向けのエクスペリエンス。

送信されると、オブジェクトを作成するためのAngular2フォームは、ペイロードとしてJSON形式のデータを含むHTTP POSTリクエストをバックエンドに発行し​​ます（HTMLフォームの送信から生じる従来のフォームエンコードデータではありません）

RESTfulバックエンドAPIを作成するための適切なツールオプションは、 Django REST Framework または Tastypie です。

認証には、JWT（JSON Web Tokens）を使用できます。また、それをサポートするDjango REST Frameworkには add-ons があります。

そのアーキテクチャには1つの大きな利点があります：将来、システムの進化が実際のネイティブモバイルクライアント（AndroidアプリやiOSアプリなど）を必要とする場合、それらのネイティブアプリに対してまったく同じRESTful APIを使用できるようになるはずです。

このアーキテクチャには、すぐにDjangoフォーム処理の良さを使用できないなどの欠点もあります。

上記を考慮して、元の質問に対する回答を次に示します。

  1. Angle2の補間構文を{{}}から（（））またはこのようなものに変更するにはどうすればよいですか。

私が提案するアプローチを使用する必要はありません。

  1. Csrfトークンをcookieからすべてのhttp投稿に追加するにはどうすればよいですか？

JWTを使用する場合、CSRF検証は必要ありません。セッションベースの認証を使用する場合、それも必要ですが、Langleyが提案したように、HTTPヘッダーを使用して渡すことができます。

  1. Angular2とDjangoを統合するのは良いアイデアですか？

主観的ですが、間違いなくそうです。ただし、バックエンドをフロントエンドから明確に分離する必要があります。バックエンドは、サーバー側で生成されたHTMLスニペットまたはHTMLフォームで応答すべきではありません。これらはすべて、Angular2アプリ内で処理する必要があります。

131
David M.

うーん。私が最近直面した3つの質問すべて。

    1. はい。それは間違いなく素晴らしいアイデアです。角度の力と組み合わせて好きなアクションを実行するためのバックエンドとして多くのpythonライブラリの力を持っているので。 ：D
    1. 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 ;-)
    }
}

static default Interpolation config '@ 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= '$}';
9
tlausch

Djangoにはverbatimタグがあります。
これは、verbatimブロック内の{{}}タグを無視するために使用できます
チェック ここ

4
Anoop Ar

1-角度のテンプレート構文を変更することはできません。

2- Angularの2 APIは、変数を設定するだけでできるとは思っていませんが、自動で行う方法があります。この質問を確認してください。

Angular 2を作成する方法は、すべてのリクエストをapplication/x-www-form-urlencodedとして送信します

代わりにX-CSRFTokenヘッダーを設定し、次のような方法でCookieの値を手動で取得することを除いて、非常に似たようなことができます。

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

3-その質問は、本当の答えを得るために開かれます。私は個人的にはしないでしょう、多分私はバックエンドにDjangoを使用するという@Zyzleのアイデアを試してみますが、2つのフレームワークのフロントエンドのシンタックスを混ぜ始めます、私はお勧めしません。

0
Langley