Django с Angular 2

Я хочу интегрировать Angular 2 с Django, и у меня есть некоторые вопросы, которые нужно сделать.

  • Как изменить синтаксис интерполяции для Angular 2 от {{ }} до (( )) или что-то вроде этого?

  • Как я могу добавить токен CSRF из файла cookie в каждый пост HTTP?

В Angular 1 я сделал что-то вроде этого:

.config(function($httpProvider) {
    $httpProvider.defaults.xsrfCookieName = 'csrftoken';
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
});
  1. Можно ли интегрировать Angular 2 с Django?

Ответы

Ответ 1

Я бы порекомендовал другой подход к общему дизайну вашего проекта, основанного на Angular2.

Приложение Angular2 предназначено для использования в качестве полностью содержащегося приложения, работающего в браузере (аналогично концептуально, как мобильное приложение работает на мобильной ОС). Между вашим приложением Angular2 и бэкэнд должно быть очень четкое и резкое разделение.

С учетом этого вы можете использовать Django для своего бэкэнд, но не так, как традиционное приложение Django будет использовать фреймворк с отображаемыми на стороне сервера формами и страницами.

Вместо этого вы предпочтете создать свой бэкэнд, чтобы он предоставлял интерфейс API RESTful с полезными нагрузками JSON (с POST/PUT, используемым для создания и обновления объектов, GET для извлечения/списка и т.д.). Тогда ваше приложение Angular2 используйте этот API для создания пользовательского опыта.

При отправке форма Angular2 для создания объекта выдает запрос HTTP POST на ваш бэкэнд, содержащий данные в формате JSON, как его полезную нагрузку (а не традиционные данные, закодированные в форме, полученные в результате отправки HTML-формы)

Хорошие варианты инструментов для создания вашего API-интерфейса RESTful будут Django REST Framework или Tastypie.

Для аутентификации вы можете использовать JWT (JSON Web Tokens) и есть хорошие надстройки для Django REST Framework, которые поддерживают это.

У этой архитектуры есть одно важное преимущество: в будущем, если для эволюции вашей системы потребуются реальные мобильные клиенты (например, приложения для Android или iOS), вы должны будете использовать тот же RESTful API для этих родных приложений.

В этой архитектуре также есть недостатки, такие как невозможность использования форм Django для обработки контента из коробки.

Учитывая вышеизложенное, вот ответы на ваши исходные вопросы:

  • Как изменить синтаксис интерполяции для Angular2 от {{}} до (()) или что-то вроде этого.

Не было бы необходимости в этом, используя подход, который я предлагаю.

  1. Как я могу добавить токен csrf из cookie в каждый пост http?

Если вы используете JWT, вам не нужна проверка CSRF. Если вы используете аутентификацию на основе сеанса, вам все равно потребуется, но вы можете передать ее с помощью HTTP-заголовка, как предложил Лэнгли.

  1. Является хорошей идеей для интеграции Angular2 с Django?

Субъективный, но я бы сказал, да, определенно. Тем не менее, вам необходимо убедиться, что вы четко отделяете сервер от внешнего интерфейса. Бэкэнд не должен отвечать генерируемыми на стороне сервера HTML-фрагментами или HTML-формами. Все это должно быть обработано в вашем приложении Angular2.

Ответ 2

Хм. Все три вопроса, с которыми я столкнулся в последнее время.

    1. Да. Это определенно отличная идея. Поскольку у вас есть множество библиотек python в качестве backend для выполнения любых действий, которые вам нравятся в сочетании с мощностью angular.: D
  1. Работает путем ввода собственного HTTP-провайдера с обновленными параметрами запроса по умолчанию, как предложил Лэнгли. Изменить: Недавно я нашел более приятное решение, используя angular2 cookie-сервис. Что вводит вам CSRSFToken, предоставляя XSRFStrategy; -)

Недостатком является то, что вам требуются дополнительные библиотеки: 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 Конфигурация интерполяции в вашем модуле @angular/компилятор.

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

Ответ 3

В Django есть тег verbatim, который можно использовать для игнорирования тега {{}} внутри блока verbatim

Проверьте здесь

Ответ 4

1- Вы не можете изменить синтаксис шаблона angular.

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- Этот вопрос должен открыть, чтобы получить реальный ответ. Я лично не буду, может быть, я попробую @Zyzle идею использования Django для бэкэнд, но начну смешивать передний край sintaxis двух фреймворков, я бы не рекомендовал его.