Quiero integrar Angular 2 con Django y tengo algunas preguntas que hacer.
¿Cómo puedo cambiar la sintaxis de interpolación para Angular 2 de {{ }} a (( )) o algo así?
¿Cómo puedo agregar el token CSRF de 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'; });Recomendaría un enfoque diferente para el diseño general de su proyecto basado en Angular2.
Una aplicación basada en Angular2 está diseñada para usarse como una aplicación completamente contenida que se ejecuta en el navegador (conceptualmente similar 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 backend.
Con eso en mente, ciertamente puede usar Django para su backend, pero no en la forma en que una aplicación Django tradicional usaría el marco con formularios y páginas renderizados del lado del servidor.
En su lugar, preferiría diseñar su backend para que exponga una interfaz API RESTful con cargas útiles JSON (usando POST/PUT para crear y actualizar objetos, GET para obtener/listar, etc.). Luego, su aplicación Angular2 consumiría esa API para crear la experiencia de cara al usuario.
Cuando se envía, un formulario Angular2 para crear un objeto emitiría una solicitud HTTP POST a su backend que contiene datos con formato JSON como su carga útil (y no los datos codificados de formulario tradicionales que resultan de un envío de 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 complementos para Django REST Framework que lo admiten.
Esa arquitectura tiene una gran ventaja: en el futuro, si la evolución de su sistema requiere clientes móviles nativos reales (aplicaciones de 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 incapacidad de usar la bondad de manejo de formularios de Django lista para usar.
Teniendo en cuenta lo anterior, aquí están las respuestas a sus preguntas originales:
- ¿Cómo puedo cambiar la sintaxis de interpolación para angular2 de {{ }} a (()) o algo así?
No habría necesidad de eso usando el enfoque que sugiero.
- ¿Cómo puedo agregar el token csrf de la cookie a cada publicación http?
Si usa JWT, no necesitaría la validación CSRF. Si usa la autenticación basada en sesión, aún la necesitaría, pero podría pasarla usando un encabezado HTTP, como sugirió Langley.
- ¿Es una buena idea integrar Angular2 con Django?
Subjetivo pero diría que sí, definitivamente. Sin embargo, debe asegurarse de separar claramente el backend del frontend. El backend no debe responder con fragmentos de HTML o formularios HTML generados en el lado del servidor. Todo eso debe manejarse dentro de su aplicación Angular2.
Mmm. Las tres preguntas que enfrenté recientemente.
Un inconveniente es que necesita bibliotecas 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= '$}';