template - Django con angular 2

django angular forms

Question

Quiero integrar Angular 2 con Django y tengo algunas preguntas que hacer.

1. ¿Cómo puedo cambiar la sintaxis de interpolación para Angular 2 de {{ }} a (( )) o algo como esto?

2. ¿Cómo puedo agregar el token CSRF desde la cookie a cada publicación HTTP?

En Angular 1 hice algo como esto:

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

3. ¿Es una buena idea integrar Angular 2 con Django?

Answer 1

1- No se puede cambiar la sintaxis de la plantilla de angular.

2- No creo que Angular''s 2 API esté aún por delante, ya que simplemente con configurar una variable, pero hay formas automáticas de hacerlo, verifique esta pregunta:

Cómo hacer que Angular 2 envíe todas las solicitudes como application / x-www-form-urlencoded

puede hacer algo muy similar, excepto que en su lugar establecería el encabezado X-CSRFToken, y tomaría el valor de la cookie manualmente con algo como esto:

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

3- Esa pregunta es abrir para obtener una respuesta real. Yo personalmente no lo haría, tal vez intentaría probar la idea @Zyzle de usar Django para el back-end, pero comenzaría a mezclar la sintaxis frontal de dos frameworks, no lo recomendaría.

Answer 2

Hay una etiqueta verbatim en Django,
que puede usarse para ignorar la etiqueta {{}} dentro del bloque verbatim
Verifique here

Answer 3

Hmm. Todas las tres preguntas que enfrenté recientemente.

• 3. Sí. Definitivamente es una gran idea. Dado que tiene el poder de muchas bibliotecas de Python como back-end para realizar cualquier acción que desee combinada con la potencia de angular. :RE
• 2. Funciona al inyectar a su propio proveedor de HTTP las Opciones de solicitud predeterminadas actualizadas, como sugirió Langley. Editar: Recientemente encontré una solución más agradable usando el servicio de cookies angular2. Que te inyecta CSRSFToken proporcionando una XSRFStrategy ;-)

Un Drawback es que necesita libs adicionales: 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 ;-)
    }
}

configuración de interpolación predeterminada estática dentro de su módulo '' @ angular / compilador ''.

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 4

Recomendaría un enfoque diferente al diseño general de su proyecto basado en Angular2.

Una aplicación basada en Angular2 está destinada a ser utilizada como una aplicación totalmente contenida que se ejecuta en el navegador (similar conceptualmente a cómo se ejecuta una aplicación móvil en un sistema operativo móvil). Debe haber una separación muy clara y abrupta entre su aplicación Angular2 y el back-end.

Con esto en mente, puede usar Django para su back-end, pero no de la forma en que una aplicación Django tradicional usaría el framework con formularios y páginas renderizadas del lado del servidor.

En su lugar, preferiría diseñar su backend para que exponga una interfaz RESTful API con cargas útiles JSON (con POST / PUT utilizado para crear y actualizar objetos, GET para buscar / enumerar, etc.) Entonces su aplicación Angular2 consumiría esa API para crear la experiencia de usuario.

Cuando se envía, un formulario Angular2 para crear un objeto emitiría una solicitud HTTP POST a su servidor que contiene datos formateados en JSON como su carga (y no los datos codificados en forma tradicional resultantes de la presentación de un formulario HTML)

Buenas opciones de herramientas para crear su API de back-end RESTful serían Django REST Framework o Tastypie .

Para la autenticación, puede usar JWT (JSON Web Tokens) y hay buenos add-ons para Django REST Framework que lo respaldan.

Esa arquitectura tiene una gran ventaja: en el futuro, si la evolución de su sistema requiere verdaderos clientes móviles nativos (aplicaciones Android o iOS, por ejemplo), debería poder consumir exactamente la misma API RESTful para esas aplicaciones nativas.

Esa arquitectura también tiene inconvenientes, como la imposibilidad de utilizar los formularios de Django, manejando la bondad desde el primer momento.

Teniendo en cuenta lo anterior, estas son las respuestas a sus preguntas originales:

1. ¿Cómo puedo cambiar la sintaxis de interpolación para angular2 de {{}} a (()) o algo como esto?

No habría necesidad de eso usando el enfoque que sugiero.

2. ¿Cómo puedo agregar el token csrf de la cookie a cada publicación HTTP?

Si usa JWT, no necesitaría validación de CSRF. Si utiliza la autenticación basada en la sesión, aún la necesitaría, pero podría pasarla usando un encabezado HTTP, como sugirió Langley.

3. ¿Es una buena idea integrar Angular2 con Django?

Subjetivo, pero yo diría que sí, definitivamente. Sin embargo, debe asegurarse de separar claramente el backend de la interfaz. El servidor no debe responder con fragmentos HTML o formularios HTML generados en el servidor. Eso debería ser manejado en su aplicación Angular2.