Django with Angular 2

Question

Desidero integrare Angular 2 con Django e ho alcune domande da fare.

1. Come posso cambiare la sintassi di interpolazione per Angular 2 da {{ }} a (()) o qualcosa di simile?

2. Come posso aggiungere il token CSRF dal cookie a ogni post HTTP?

In angolare 1 ho fatto qualcosa di simile:

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

3. è una buona idea per integrare angolare 2 con Django?

Answer 1

Vorrei raccomandare un approccio diverso alla progettazione generale del progetto basato su Angular2.

Un'applicazione basata su Angular2 è pensata per essere utilizzata come un'applicazione completamente contenuta nel browser (simile concettualmente a come un'applicazione mobile viene eseguita su un sistema operativo mobile). Ci dovrebbe essere una separazione molto chiara e improvvisa tra la tua app Angular2 e il back-end.

Con questo in mente, puoi sicuramente usare Django per il tuo back-end ma non nel modo in cui una tradizionale app Django userebbe il framework con moduli e pagine renderizzati lato server.

Invece, si preferisce progettare il back-end in modo da esporre un'interfaccia API RESTful con carichi utili JSON (con POST/PUT utilizzato per creare e aggiornare gli oggetti, arriva a prendere/list, ecc), allora la vostra applicazione Angular2 consumerebbe quell'API per creare l'esperienza dell'utente.

Quando presentato, una forma Angular2 per la creazione di un oggetto avrebbe emesso una richiesta HTTP POST al back-end che contiene i dati JSON-formattati come il suo carico utile (e non la forma codificata di dati tradizionali derivante da un invio di form HTML)

Le buone opzioni di strumenti per la creazione dell'API backend RESTful sono Django REST Framework o Tastypie.

Per l'autenticazione, è possibile utilizzare JWT (Token Web JSON) e ci sono buoni add-ons per Django REST Framework che lo supportano.

Questa architettura ha un grande vantaggio: in futuro, se l'evoluzione del tuo sistema richiede client mobili nativi reali (ad esempio app Android o iOS), dovresti essere in grado di utilizzare la stessa API RESTful per quelle app native .

Questa architettura ha anche degli svantaggi, come l'impossibilità di usare la forma di manipolazione di Django, pronta all'uso.

Considerando quanto sopra, qui le risposte alle vostre domande originali:

1. Come posso cambiare la sintassi di interpolazione per angular2 da {{}} a (()) o qualcosa di simile.

Non ci sarebbe bisogno di quello usando l'approccio che suggerisco.

2. Come posso aggiungere il token csrf dai cookie a ogni post http?

Se si utilizza JWT non avrebbe bisogno di convalida CSRF. Se si utilizza l'autenticazione basata su sessione, sarebbe comunque necessario ma è possibile passarlo utilizzando un'intestazione HTTP, come suggerito da Langley.

3. È una buona idea integrare Angular2 con Django?

Soggettivo ma direi di si, sicuramente. Tuttavia, è necessario assicurarsi di separare chiaramente il back-end dal frontend. Il back-end non dovrebbe rispondere con snippet HTML o moduli HTML generati dal lato server. Questo dovrebbe essere gestito all'interno della tua app Angular2.

Answer 2

1- Non è possibile modificare la sintassi del modello angolare.

2- Non credo 2 API angolare è che avanti ancora come farlo con semplicemente la creazione di una variabile, ma ci sono modi automatici di farlo, controllare questa domanda:

How to make Angular 2 send all requests as application/x-www-form-urlencoded

si può fare qualcosa di molto simile, tranne che quando si imposta l'intestazione X-CSRFToken invece, e afferrare manualmente il valore del cookie con qualcosa di simile:

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

3- tale questione è quello di aprire a ottenere una risposta reale Personalmente non lo farei, forse proverei l'idea @Zyzle di usare Django per il backend, ma iniziare a mescolare le sintassi front-end di due framework, non lo consiglierei.

Answer 3

Hmm. Tutte e tre le domande che ho dovuto affrontare di recente.

• 3. Sì. È sicuramente una grande idea Dal momento che hai la potenza di molte librerie Python come backend per eseguire qualsiasi azione tu voglia combinata con il potere angolare. : D
• 2. Opere di iniettare il proprio HTTP-Provider con richiesta Opzioni Aggiornato predefinite come suggerito Langley. Modifica: Recentemente ho trovato una soluzione migliore utilizzando il servizio di cookie angular2. Che inietta si CSRSFToken fornendo una XSRFStrategy ;-)

Un inconveniente è che si richiede librerie aggiuntive: 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 ;-) 
    } 
} 

statico predefinito interpolazione di configurazione all'interno del vostro '@ modulo angolare/compilatore '.

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

C'è un tag verbatim in Django,
che può essere utilizzato per ignorare il tag {{}} all'interno verbatim blocco
check here