Liaison HTML angulaire


841

J'écris une application angulaire et j'ai une réponse HTML que je veux afficher.

Comment je fais ça? Si j'utilise simplement la syntaxe de liaison, {{myVal}}elle code tous les caractères HTML (bien sûr).

J'ai besoin de lier innerHTMLd'une manière ou d'une autre divla valeur de la variable.


Article connexe pour obtenir que CSS défini dans un composant fonctionne correctement dans la liaison HTML stackoverflow.com/questions/36265026/…
y3sh

1
J'ai préparé une réponse vidéo pour expliquer la solution et donner un exemple: youtube.com/watch?v=Pem2UXp7TXA
Caleb Grams

et si la variable contient une balise angulaire ou une balise définie par l'utilisateur comme <span [routerLink] = ['some-router']> lien </span>
G. Muqtada

Réponses:


1338

La syntaxe correcte est la suivante:

<div [innerHTML]="theHtmlString"></div>

Référence de la documentation



14
Existe-t-il un moyen de forcer angular à exécuter sa liaison sur les éléments de ce HTML interne? Je dois utiliser un <a [router-link URL==......"> </a>, et je veux fournir cela à partir d'un html externe.
thouliha

4
@thouliha Je recommanderais de commencer un nouveau message concernant votre question.
prolink007

4
Il rend la chaîne dans mon cas, mais fait quelque chose pour le balisage. Semble avoir supprimé les attributs du balisage. Je suis le 2.4.6
paqogomez

2
@paqogomez Oui, il supprime tout ce qu'il juge dangereux
Juan Mendes

312

Angular 2.0.0 et Angular 4.0.0 final

Pour un contenu sûr juste

<div [innerHTML]="myVal"></div>

DOMSanitizer

Le HTML potentiellement dangereux doit être explicitement marqué comme approuvé à l'aide du désinfectant Angulars DOM afin de ne pas supprimer les parties potentiellement dangereuses du contenu

<div [innerHTML]="myVal | safeHtml"></div>

avec un tuyau comme

@Pipe({name: 'safeHtml'})
export class Safe {
  constructor(private sanitizer:DomSanitizer){}

  transform(style) {
    return this.sanitizer.bypassSecurityTrustHtml(style);
    //return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs
  }
}

Voir également Dans RC.1, certains styles ne peuvent pas être ajoutés à l'aide de la syntaxe de liaison

Et les documents: https://angular.io/api/platform-browser/DomSanitizer

Avertissement de sécurité

Faire confiance au HTML ajouté par l'utilisateur peut poser un risque pour la sécurité. Les documents mentionnés ci-dessus indiquent:

L'appel à l'une des bypassSecurityTrust...API désactive la désinfection intégrée d'Angular pour la valeur transmise. Vérifiez et auditez soigneusement toutes les valeurs et tous les chemins de code entrant dans cet appel. Assurez-vous que toutes les données utilisateur sont correctement échappées pour ce contexte de sécurité. Pour plus de détails, consultez le Guide de sécurité .

Balisage angulaire

Quelque chose comme

class FooComponent {
  bar = 'bar';
  foo = `<div>{{bar}}</div>
    <my-comp></my-comp>
    <input [(ngModel)]="bar">`;

avec

<div [innerHTML]="foo"></div>

ne fera pas en sorte qu'Angular traite quoi que ce soit spécifique à Angularfoo . Angular remplace le balisage spécifique Angular au moment de la construction par du code généré. Le balisage ajouté lors de l'exécution ne sera pas traité par Angular .

Pour ajouter du code HTML contenant un balisage spécifique à Angular (liaison de propriété ou de valeur, composants, directives, canaux, ...), il est nécessaire d'ajouter le module dynamique et de compiler les composants lors de l'exécution. Cette réponse fournit plus de détails Comment puis-je utiliser / créer un modèle dynamique pour compiler un composant dynamique avec Angular 2.0?


13
Cela devrait être la réponse. Faites attention aux deux lignes qui sont commentées. C'est en fait le deuxième qui gère le HTML.
paqogomez

8
assurez-vous deimport { BrowserModule, DomSanitizer } from '@angular/platform-browser'
paqogomez

4
Aussiimport { Pipe } from '@angular/core'
Appulus

1
Telle est la réponse, ici! Je cherchais les détails sur ce qui dans NG2 a remplacé $ SCE de NG1. ;)
jrista

2
Très bonne réponse. Résolu mon problème. Merci beaucoup. Dans le cas où quelqu'un ne sait pas comment utiliser le tuyau dans un composant (comme je l'étais): angular.io/guide/pipes Ajoutez-le simplement à vos déclarations dans le module correspondant et voilá!
Alejandro Nagy

169

[innerHtml] est une excellente option dans la plupart des cas, mais elle échoue avec des chaînes très grandes ou lorsque vous avez besoin d'un style codé en HTML.

Je voudrais partager une autre approche:

Tout ce que vous devez faire est de créer un div dans votre fichier html et de lui donner un identifiant:

<div #dataContainer></div>

Ensuite, dans votre composant Angular 2, créez une référence à cet objet (TypeScript ici):

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
    templateUrl: "some html file"
})
export class MainPageComponent {

    @ViewChild('dataContainer') dataContainer: ElementRef;

    loadData(data) {
        this.dataContainer.nativeElement.innerHTML = data;
    }
}

Ensuite, utilisez simplement la loadDatafonction pour ajouter du texte à l'élément html.

C'est juste une façon de le faire en utilisant du javascript natif, mais dans un environnement angulaire. Je ne le recommande pas, car rend le code plus salissant, mais parfois il n'y a pas d'autre option.

Voir aussi Angular 2 - style innerHTML


1
Je ne vois aucune différence avec les autres solutions, sauf que la vôtre accède nativeElementdirectement aux propriétés de ce qui est considéré comme une mauvaise pratique. Je suis sûr qu'il [innerHTML]="..."fait la même chose sous le capot, mais d'une bonne manière de pratiquer Angular2.
Günter Zöchbauer

1
Ce n'est pas ainsi que fonctionne Angular2. Le code HTML que vous ajoutez aux modèles de composants Angular2 est d'abord traité par Angular et ensuite seulement ajouté au DOM. Avez-vous rencontré des problèmes avec les [innerHTML]grandes chaînes dans Angular2?
Günter Zöchbauer

1
Je pense que cela devrait être signalé comme bogue. Merci d'avoir publié votre résultat.
Günter Zöchbauer

25
[innerHtml]supprime le style codé en dur dans le HTML. Afin d'intégrer un éditeur wysiwyg, j'ai dû utiliser l'approche listée ici.
Jony Adamit

2
Pour moi, cette solution a fonctionné pour inclure un document SVG en ligne, alors que l' [innerHTML]approche n'a pas fonctionné.
Jared Phelps

54

Sur angular2@2.0.0-alpha.44:

Html-Binding ne fonctionnera pas lors de l'utilisation d'un {{interpolation}}, utilisez plutôt une "Expression":

invalide

<p [innerHTML]="{{item.anleser}}"></p>

-> renvoie une erreur (interpolation au lieu de l'expression attendue)

correct

<p [innerHTML]="item.anleser"></p>

-> c'est la bonne façon.

vous pouvez ajouter des éléments supplémentaires à l'expression, comme:

<p [innerHTML]="'<b>'+item.anleser+'</b>'"></p>

allusion

Le code HTML ajouté à l'aide [innerHTML](ou ajouté dynamiquement par d'autres moyens similaires element.appenChild()ou similaires) ne sera en aucun cas traité par Angular, à l'exception de la désinfection à des fins de sécurité.
De telles choses ne fonctionnent que lorsque le code HTML est ajouté de manière statique à un modèle de composants. Si vous en avez besoin, vous pouvez créer un composant lors de l'exécution, comme expliqué dans Comment puis-je utiliser / créer un modèle dynamique pour compiler un composant dynamique avec Angular 2.0?


1
Modifié après avoir réessayé. Solution trouvée :)
jvoigt

3
Le troisième exemple ne fonctionne pas. L'expression n'est pas évaluée. La sortie est simplement une chaîne ... Une autre façon de combiner TrustHTML avec d'autres éléments de balises?
Kévin Vilela Pinto

25

Utiliser [innerHTML] directement sans utiliser le désinfectant DOM d'Angular n'est pas une option s'il contient du contenu créé par l'utilisateur. Le tuyau safeHtml suggéré par @ GünterZöchbauer dans sa réponse est un moyen de désinfecter le contenu. La directive suivante en est une autre:

import { Directive, ElementRef, Input, OnChanges, Sanitizer, SecurityContext,
  SimpleChanges } from '@angular/core';

// Sets the element's innerHTML to a sanitized version of [safeHtml]
@Directive({ selector: '[safeHtml]' })
export class HtmlDirective implements OnChanges {
  @Input() safeHtml: string;

  constructor(private elementRef: ElementRef, private sanitizer: Sanitizer) {}

  ngOnChanges(changes: SimpleChanges): any {
    if ('safeHtml' in changes) {
      this.elementRef.nativeElement.innerHTML =
        this.sanitizer.sanitize(SecurityContext.HTML, this.safeHtml);
    }
  }
}

À utiliser

<div [safeHtml]="myVal"></div>

J'ai essayé d'utiliser ceci mais Can't bind to 'safeHtml' since it isn't a known property of 'div'.
j'obtiens

1
@ObasiObenyOj vous pouvez toujours le faire sans utiliser de directive distincte si c'est un cas limité, constructor( private sanitizer: Sanitizer) {} et lier le résultat à tout ce dont vous avez besoin, aussi l'utilisation d'ElementRef est fortement déconseillée.
Vale Steve

22

Veuillez vous référer à d'autres réponses plus à jour.

Cela fonctionne pour moi: <div innerHTML = "{{ myVal }}"></div>(Angular2, Alpha 33)

Selon un autre SO: Insertion de HTML du serveur dans le DOM avec angular2 (manipulation générale du DOM dans Angular2) , "inner-html" est équivalent à "ng-bind-html" dans Angular 1.X


La bonne façon est sans le {{}}: <div innerHTML = "myVal"> </div>
Christian Benseler

2
Utilisez la syntaxe de liaison [propriété] au lieu de {{interpolation}}
superluminaire

C'est définitivement la mauvaise façon de procéder et cela devrait être déclassé. Cela rendra tout votre html à l'intérieur de l'attribut div!
AsGoodAsItGets

11

Juste pour obtenir une réponse complète, si votre contenu html est dans une variable de composant, vous pouvez également utiliser:

<div [innerHTML]=componementVariableThatHasTheHtml></div>

10

Je m'excuse si je manque le point ici, mais je voudrais recommander une approche différente:

Je pense qu'il est préférable de renvoyer les données brutes de votre application côté serveur et de les lier à un modèle côté client. Cela rend les demandes plus agiles car vous ne retournez que json depuis votre serveur.

Pour moi, il ne semble pas logique d'utiliser Angular si tout ce que vous faites est de récupérer du code HTML à partir du serveur et de l'injecter "tel quel" dans le DOM.

Je sais que Angular 1.x a une liaison html, mais je n'ai pas encore vu d'homologue dans Angular 2.0. Ils pourraient cependant l'ajouter plus tard. Quoi qu'il en soit, je considérerais toujours une API de données pour votre application Angular 2.0.

J'ai quelques exemples ici avec une simple liaison de données si vous êtes intéressé: http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples


28
Il y a certainement des cas d'utilisation où vous souhaitez récupérer et afficher du code HTML brut. Par exemple, récupérer un article formaté à distance.
Alexander Chen

2
Un autre scénario souvent ignoré est la protection de la logique métier dans le modèle, vous ne voulez parfois pas que des utilisateurs non autorisés voient la logique que vous utilisez pour afficher des informations, vous préférez donc préparer la vue côté serveur
Ayyash

2
En outre, afficher un e-mail HTML, par exemple - juste point / question!
un darren

2
Si vous manquez le point (que vous semblez être de votre propre aveu), alors pourquoi poster une réponse? Évidemment, le but d'Angular est d'utiliser son moteur de vue pour lier et rendre les données. Mais compte tenu du fait qu'il existe d'innombrables applications où une application Angular peut être utilisée, il est en fait possible qu'une ou deux d'entre elles aient l'exigence que certaines des données qui doivent être affichées dans votre application soient déjà au format HTML, et il se peut que ce soit le cas lorsque le développeur n'a aucun contrôle sur ce contenu. En d'autres termes ... question pertinente.
Gregor

Ya nous devrions juste abandonner Angular et utiliser JQuery parce que Jquery fait mieux cette chose ...
Simon_Weaver

9

Une réponse courte a déjà été fournie ici: utiliser <div [innerHTML]="yourHtml"> liaison.

Cependant, les autres conseils mentionnés ici peuvent être trompeurs. Angular a un mécanisme de nettoyage intégré lorsque vous vous associez à des propriétés comme ça. Étant donné qu'Angular n'est pas une bibliothèque de nettoyage dédiée, il est trop zélé envers le contenu suspect de ne prendre aucun risque. Par exemple, il purifie tout le contenu SVG dans une chaîne vide.

Vous pourriez entendre des conseils pour "nettoyer" votre contenu en utilisant DomSanitizerpour marquer le contenu comme sûr avec des bypassSecurityTrustXXXméthodes. Il y a aussi des suggestions pour utiliser le tuyau pour ce faire et ce tuyau est souvent appelésafeHtml .

Tout cela est trompeur car il contourne en fait l' assainissement , pas la désinfection de votre contenu. Cela pourrait être un problème de sécurité, car si vous le faites sur du contenu fourni par l'utilisateur ou sur tout ce dont vous n'êtes pas sûr - vous vous ouvrez à des attaques de code malveillant.

Si Angular supprime quelque chose dont vous avez besoin par sa désinfection intégrée - ce que vous pouvez faire au lieu de le désactiver, c'est déléguer la désinfection réelle à une bibliothèque dédiée qui est bonne à cette tâche. Par exemple - DOMPurify.

J'ai créé une bibliothèque de wrappers pour qu'elle puisse être facilement utilisée avec Angular: https://github.com/TinkoffCreditSystems/ng-dompurify

Il a également un canal pour purifier déclarativement HTML:

<div [innerHtml]="value | dompurify"></div>

La différence avec les tuyaux suggérés ici est qu'il fait la désinfection via DOMPurify et fonctionne donc pour SVG.

Une chose à garder à l'esprit est que DOMPurify est idéal pour nettoyer HTML / SVG, mais pas CSS. Vous pouvez donc fournir le désinfectant CSS Angular pour gérer CSS:

import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
import {SANITIZE_STYLE} from '@tinkoff/ng-dompurify';

@NgModule({
    // ...
    providers: [
        {
            provide: SANITIZE_STYLE,
            useValue: ɵ_sanitizeStyle,
        },
    ],
    // ...
})
export class AppModule {}

C'est un ɵpréfixe interne - hense , mais c'est de cette façon que l'équipe Angular l'utilise également dans leurs propres packages. Cette bibliothèque fonctionne également pour Angular Universal et l'environnement de redéfinition côté serveur.


5

Utilisez simplement l' [innerHTML]attribut dans votre code HTML , quelque chose comme ceci ci-dessous:

<div [innerHTML]="myVal"></div>

Avez-vous déjà eu des propriétés dans votre composant qui contiennent des balises HTML ou des entités que vous devez afficher dans votre modèle? L'interpolation traditionnelle ne fonctionnera pas, mais la liaison de propriété innerHTML vient à la rescousse.

L'utilisation {{myVal}} ne fonctionne PAS comme prévu! Cela ne ramassera pas les balises HTML comme <p>, <strong>etc. et ne les passera que sous forme de chaînes ...

Imaginez que vous avez ce code dans votre composant:

const myVal:string ='<strong>Stackoverflow</strong> is <em>helpful!</em>'

Si vous utilisez {{myVal}}, vous obtiendrez ceci dans la vue:

<strong>Stackoverflow</strong> is <em>helpful!</em>

mais l'utilisation [innerHTML]="myVal"donne le résultat attendu comme ceci:

Stackoverflow est utile!


Comment afficheriez-vous votre contenu si vous le souhaitez sans cette division de conteneur? Est-ce possible?
Ε Г И І И О

3

Vous pouvez appliquer plusieurs canaux pour le style, le lien et le HTML comme suit en .html

<div [innerHTML]="announcementContent | safeUrl| safeHtml">
                    </div>

et dans le tube .ts pour le désinfectant «URL»

import { Component, Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({ name: 'safeUrl' })
export class SafeUrlPipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) {}
    transform(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

tuyau pour désinfectant «HTML»

import { Component, Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
    name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) {}
    transform(value) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

cela s'appliquera à la fois sans perturber aucun style et événement de clic de lien


2

 <div [innerHTML]="HtmlPrint"></div><br>

Le innerHtml est une propriété de HTML-Elements, qui vous permet de définir son contenu html par programmation. Il existe également une propriété innerText qui définit le contenu comme du texte brut.

le [attributeName]="value" crochet de la boîte, entourant l'attribut, définit une liaison d'entrée angulaire. Cela signifie que la valeur de la propriété (dans votre cas innerHtml) est liée à l'expression donnée, lorsque le résultat de l'expression change, la valeur de la propriété change également.

Donc, fondamentalement, [innerHtml]vous permet de lier et de modifier dynamiquement le contenu html de l'élément HTML donné.


1

Dans Angular 2, vous pouvez faire 3 types de liaisons:

  • [property]="expression"-> Toute propriété html peut être liée à une
    expression. Dans ce cas, si l'expression change, la propriété sera mise à jour, mais cela ne fonctionne pas dans l'autre sens.
  • (event)="expression" -> Lorsque l'événement active l'expression d'exécution.
  • [(ngModel)]="property"-> Lie la propriété de js (ou ts) à html. Toute mise à jour sur cette propriété sera visible partout.

Une expression peut être une valeur, un attribut ou une méthode. Par exemple: '4', 'controller.var', 'getValue ()'

Exemple ici


0

La façon d'ajouter dynamiquement des éléments au DOM, comme expliqué dans la doc Angular 2, est d'utiliser la classe ViewContainerRef de @ Angular / core.

Ce que vous devez faire est de déclarer une directive qui implémentera ViewContainerRef et agira comme un espace réservé sur votre DOM.

Directif

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appInject]'
})
export class InjectDirective {

  constructor(public viewContainerRef: ViewContainerRef) { }

}

Ensuite, dans le modèle où vous souhaitez injecter le composant:

HTML

<div class="where_you_want_to_inject">    
  <ng-template appInject></ng-template>
</div>

Ensuite, à partir du code du composant injecté, vous injecterez le composant contenant le code HTML souhaité:

import { Component, OnInit, ViewChild, ComponentFactoryResolver } from '@angular/core';
import { InjectDirective } from '../inject.directive';
import { InjectedComponent } from '../injected/injected.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  @ViewChild(InjectDirective) injectComp: InjectDirective;

  constructor(private _componentFactoryResolver: ComponentFactoryResolver) {
  }

  ngOnInit() {
  }

  public addComp() {
    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(InjectedComponent);
    const viewContainerRef = this.injectComp.viewContainerRef;
    const componentRef = viewContainerRef.createComponent(componentFactory);
  }

  public removeComp() {
    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(InjectedComponent);
    const viewContainerRef = this.injectComp.viewContainerRef;
    const componentRef = viewContainerRef.remove();
  }

}

J'ai ajouté une application de démonstration entièrement fonctionnelle sur Angular 2 pour ajouter dynamiquement un composant à la démo DOM


0

Vous pouvez utiliser plusieurs approches pour parvenir à la solution. Comme déjà dit dans la réponse approuvée, vous pouvez utiliser:

<div [innerHTML]="myVal"></div>

selon ce que vous essayez de réaliser, vous pouvez également essayer d'autres choses comme le DOM javascript (non recommandé, les opérations DOM sont lentes):

Présentation

<div id="test"></test>

Composant

var p = document.getElementsById("test");
p.outerHTML = myVal;

Reliure de propriété

Javascript DOM Outer HTML


Que les opérations DOM soient plus lentes qu'angulaires ou non, le faire en utilisant getElementsByIdou toute autre méthode de sélection est mauvais car il peut capturer des éléments appartenant à des composants complètement différents s'ils contiennent des éléments avec le même identifiant (ou d'autres critères).
Aviad P.

De plus, il fonctionne complètement en dehors de toute zone angulaire afin que les changements ne soient pas détectés.
Philipp Meissner

0

Nous pouvons toujours transmettre le contenu html à la innerHTMLpropriété pour rendre le contenu dynamique html mais ce contenu html dynamique peut également être infecté ou malveillant. Donc, avant de transmettre du contenu dynamique à innerHTMLnous devons toujours nous assurer que le contenu est filtré (en utilisant DOMSanitizer) afin que nous puissions échapper à tout contenu malveillant.

Essayez ci-dessous le tuyau:

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";

@Pipe({name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) {
    }
    transform(value: string) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

Usage:
<div [innerHTML]="content | safeHtml"></div>

Cela est nécessaire même si vous pensez que ce n'est pas le cas. Par exemple, style: background-colortout peut être supprimé et il est donc préférable de commencer à l'utiliser dès le début ou vous serez très confus plus tard.
Simon_Weaver

Ce que je comprends, c'est que ce script est d'autoriser tout le contenu malveillant (bypassSecurityTrustHtml), comme vous le signalez, je pense que ce canal n'est pas nécessaire sauf si vous faites confiance à la source. referto: angular.io/api/platform-browser/DomSanitizer#security-risk
Sae

0

Si vous le souhaitez dans Angular 2 ou Angular 4 et que vous souhaitez également conserver le CSS en ligne, vous pouvez utiliser

<div [innerHTML]="theHtmlString | keepHtml"></div>

Cela m'a donné une erreur «Uncaught (promis): Erreur: Erreurs d'analyse du modèle: le tuyau« keepHtml »est introuvable»
Praveen

importer {Pipe, PipeTransform} depuis "@ angular / core";
Jay Momaya


0

Travailler dans Angular v2.1.1

<div [innerHTML]="variable or htmlString">
</div>

2
Cela produit: <div _ngcontent-luf-0=""></div>pour moi. Le divest vide.
Scott Marcus

-2

Si vous avez des modèles dans votre application angulaire (ou dans n'importe quel framework) et que vous renvoyez des modèles HTML de votre backend via une requête / réponse HTTP, vous mélangez des modèles entre le frontend et le backend.

Pourquoi ne pas simplement laisser les modèles sur le frontend (je dirais que), ou dans le backend (imo assez transparent)?

Et si vous conservez des modèles dans le frontend, pourquoi ne pas simplement répondre avec JSON pour les demandes au backend. Vous n'avez même pas besoin d'implémenter une structure RESTful, mais garder les modèles d'un côté rend votre code plus transparent.

Cela sera rentable lorsque quelqu'un d'autre devra faire face à votre code (ou même vous ressaisissez vous-même votre code après un certain temps)!

Si vous le faites correctement, vous aurez de petits composants avec de petits modèles, et mieux encore, si votre code est imba, quelqu'un qui ne connaît pas les langages de codage pourra comprendre vos modèles et votre logique! De plus, gardez vos fonctions / méthodes aussi petites que possible. Vous découvrirez finalement que la maintenance, la refactorisation, la révision et l'ajout de fonctionnalités seront beaucoup plus faciles par rapport aux grandes fonctions / méthodes / classes et mélanger les modèles et la logique entre le frontend et le backend - et garder autant de logique dans le backend si votre frontend doit être plus flexible (par exemple, écrire un frontend android ou passer à un framework frontend différent).

Philosophie, mec :)

ps: vous n'avez pas à implémenter du code 100% propre, car c'est très cher - surtout si vous devez motiver les membres de l'équipe;) mais: vous devez trouver un bon équilibre entre une approche de code plus propre et ce que vous avez (peut-être est déjà assez propre)

consultez le livre si vous le pouvez et laissez-le entrer dans votre âme: https://de.wikipedia.org/wiki/Clean_Code


Parfois, il est nécessaire d'obtenir du HTML côté serveur lorsque vous traitez avec l'ancienne API comme dans SOAP. Je travaillais sur un de mes projets avec BSC (Bharat Stock Exchange) et ils retournent le code HTML de la page bancaire lors des paiements. Vous ne pouvez donc pas modifier leur API, vous devez mettre à jour votre code en conséquence.
Mahendra Waykos

Vous pouvez écrire un middleware qui interroge fréquemment l'api soap et fournir les résultats extraits dans un socket par exemple. La consommation et l'extraction d'informations via du savon peuvent être pénibles.
Guntram

Le cas d'utilisation le plus évident pour le balisage brut est lorsque votre balisage provient d'un CMS et est écrit dans un éditeur WYSIWYG. Vous pouvez par exemple servir plusieurs points de terminaison à partir d'un CMS sans tête. Ce genre de chose explique pourquoi chaque moteur de template a une option pour le balisage brut.
gburton
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.