web-dev-qa-db-fra.com

Django avec Angular 2

Je veux intégrer Angular 2 avec Django et j'ai quelques questions à poser.

  1. Comment changer la syntaxe d'interpolation pour Angular 2 à partir de {{ }} à (( )) ou quelque chose comme ça?

  2. Comment puis-je ajouter le jeton CSRF du cookie à chaque publication HTTP?

Dans Angular 1 j'ai fait quelque chose comme ça:

.config(function($httpProvider) {
    $httpProvider.defaults.xsrfCookieName = 'csrftoken';
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
});
  1. Est-ce une bonne idée d’intégrer Angular 2 avec Django?
djangoangular
44
Rus Mine

Je recommanderais une approche différente de la conception globale de votre projet basé sur Angular2.

Une application basée sur Angular2 est conçue pour être utilisée comme une application entièrement contenue exécutée dans le navigateur (de manière similaire à la manière dont une application mobile s'exécute sur un système d'exploitation mobile). Il devrait exister une séparation très nette et abrupte entre votre application Angular2 et le serveur.

Dans cet esprit, vous pouvez certainement utiliser Django pour votre backend, mais pas de la même manière qu'une application Django traditionnelle utiliserait le framework avec des formulaires rendus côté serveur. et pages.

Au lieu de cela, vous préféreriez concevoir votre backend de manière à ce qu'il expose une interface API RESTful avec des charges JSON (avec POST/PUT utilisé pour créer et mettre à jour des objets, GET pour récupérer/lister, etc.). Votre application Angular2 utiliserait alors cette API pour créer l'expérience face à l'utilisateur.

Une fois soumis, un formulaire Angular2 permettant de créer un objet émettrait une requête HTTP POST à votre serveur, contenant des données au format JSON comme charge utile (et non les données codées de formulaire traditionnel résultant d'une soumission de formulaire HTML). )

Les bonnes options d’outillage pour la création de votre API d’arrière-plan RESTful seraient Django REST Framework ou Tastypie .

Pour l’authentification, vous pouvez utiliser JWT (jetons Web JSON) et il existe de bons add-ons pour Django REST. Framework supportant cette.

Cette architecture présente un avantage majeur: à l'avenir, si l'évolution de votre système nécessite de véritables clients mobiles natifs (applications Android ou iOS par exemple), vous devriez pouvoir utiliser exactement la même API RESTful pour ces applications natives.

Cette architecture présente également des inconvénients tels que l'incapacité à utiliser Django la qualité de la gestion des formulaires immédiatement ".

Compte tenu de ce qui précède, voici les réponses à vos questions initiales:

  1. Comment puis-je changer la syntaxe d'interpolation pour angular2 de {{}} à (()) ou quelque chose comme ça.

Il ne serait pas nécessaire pour cela d'utiliser l'approche que je suggère.

  1. Comment puis-je ajouter le jeton csrf du cookie à chaque publication http?

Si vous utilisez JWT, vous n’auriez pas besoin de la validation CSRF. Si vous utilisez une authentification basée sur une session, vous en aurez toujours besoin, mais vous pouvez la transmettre à l'aide d'un en-tête HTTP, comme suggéré par Langley.

  1. Est-ce une bonne idée d’intégrer Angular2 avec Django?

Subjective mais je dirais oui, définitivement. Cependant, vous devez vous assurer de séparer clairement le serveur de l'interface. Le serveur ne doit pas répondre avec des extraits HTML ou des formulaires HTML générés côté serveur. Tout cela devrait être géré dans votre application Angular2.

131
David M.

Hmm. Toutes les trois questions que j'ai rencontrées récemment.

    1. Oui. C'est vraiment une bonne idée. Puisque vous avez le pouvoir de nombreuses bibliothèques python comme back-end pour effectuer l’action de votre choix combinée à la puissance angulaire.: D
    1. Fonctionne en injectant à votre propre fournisseur HTTP des options de demande par défaut mises à jour, comme suggéré par Langley. Edit: J'ai récemment trouvé une solution plus intéressante en utilisant le service de cookies angular2. Ce qui vous injecte CSRSFToken en fournissant une stratégie XSRFS; -)

Un inconvénient est que vous avez besoin de bibliothèques supplémentaires: 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 ;-)
    }
}

statique par défaut Config d'interpolation dans votre module ' @ 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

Il y a une balise verbatim dans Django,
qui peut être utilisé pour ignorer la balise {{}} dans le bloc verbatim
Vérifier ici

4
Anoop Ar

1- Vous ne pouvez pas changer la syntaxe du template angular.

2- Je ne pense pas que l'API 2 d'Angular soit aussi avancée que la configuration d'une variable, mais il existe des moyens automatiques de le faire, vérifiez cette question:

Comment faire Angular 2 envoyer toutes les demandes en tant qu'application/x-www-form-urlencoded

vous pouvez faire quelque chose de très similaire sauf que vous définissiez l'en-tête X-CSRFToken à la place et que vous récupériez la valeur du cookie manuellement avec quelque chose comme:

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

3- Cette question est d'ouvrir pour obtenir une vraie réponse. Personnellement, je ne le ferais pas. Peut-être que je voudrais essayer l’idée de @Zyzle d’utiliser Django pour le backend, mais commencez à brouiller l’affichage frontal de deux frameworks, je ne le recommanderais pas.

0
Langley