[Angular 2] Hoe kan een externe webpagina worden ingeladen?

[Ossebol]

Sinds kort ben ik me aan het verdiepen in AngularJS. Eén van de dingen die ik zou willen bereiken is het inladen van externe webpagina's in een webapplicatie, zoals bijvoorbeeld ook mogelijk is met jQuery.load en server side includes. Dit is noodzakelijk omdat ik met meerdere microservices werk.

Uit de verschillende bronnen kan ik weinig opmaken over hoe ik precies een pagina moet includen. Ik begrijp dat er in Angular 1 ng-include zat - wat feitelijk de functionaliteit bood die ik zoek - maar dat die functionaliteit eruit is gehaald, omdat alles een component zou moeten zijn.

Vanaf Angular 2 kunnen templates worden ingeladen in de componenten als zijnde inline- of externe templates. Alleen zijn die templates niet bedoeld voor het inladen van een pagina op domein X in pagina van domein Y. Althans, dit werkt niet als ik bijvoorbeeld een externe URL opgeef. Ter info: ik heb CORS ingeschakeld.

Misschien kan en wil iemand me kort uitleggen hoe ik dit probleem zou kunnen tackelen? Het zou me heel erg helpen

[Ed Vertijsment]

AFAIK is angular een templating library (ik heb zelf meer ervaring met andere libraries zoals react en aurelia). Niet perse bedoeld om externe (micro) services te benaderen.

Doorgaans zal een microservice een (REST) api exposen om zaken mee af te hangen. De applicatie zal die applicatie dan benaderen via een HTTP request en daar dingen mee doen, om vervolgens in de view (angular) te renderen.

Om een lang verhaal kort te houden, moet je, je view geen model/control logic laten uitvoeren. Data verwerken wil je in een dedicated "data store" afhandelen en mits een (angular) controller door laten vloeien naar je view.

Persoonlijk heb ik een bias van hier tot gunter omdat ik zelf een library hiervoor beheer (consumerjs) maar er zijn verschillende oplossingen mogelijk. Een tip die ik je wil meegeven is om altijd MVC te benaderen en nooit alles te willen oplossen in 1 library. Genoeg applicaties die deze fout hebben gemaakt en nu 100% afhankelijk zijn van jQuery.

Dus kies een library voor je datamodel (iets dat REST api's "consumed"), en voor je controller (iets dat model X aan view en Y koppelt) en voor je view (iets dat X in Y toont zoals Angular).

Vaak zijn je controller en je view dezelfde library (zoal in Angular) maar meestal heb je iets dedicated voor data stores.

[ Voor 13% gewijzigd door Ed Vertijsment op 06-11-2016 02:36 . Reden: Meer detail. ]

[NNF]

Ik heb inmiddels aardig wat ervaring met Angular 2, maar volgens mij begrijp ik je use case niet helemaal. Je wil dus een externe pagina als template gebruiken... en dan? Als je met een externe service werkt dan werk je in de regel met een API, waar je data vandaan plukt en naartoe stuurt via de Http-class.

Het is ongetwijfeld wel mogelijk om, door heel veel beveiliging te omzeilen, een externe HTML-pagina in je eigen DOM te krijgen, maar het ontgaat me even wat je daar dan precies mee wil doen.

Ed Vertijsment schreef op zondag 06 november 2016 @ 02:33:
AFAIK is angular een templating library (ik heb zelf meer ervaring met andere libraries zoals react en aurelia). Niet perse bedoeld om externe (micro) services te benaderen.

Angular is zeker niet alleen een templating library, het lijkt meer op Aurelia. Of eigenlijk lijkt Aurelia op Angular, aangezien het gebouwd is door een ex-lid van het Angular 2 team dat ontevreden was over de kant die het project op ging

[ Voor 34% gewijzigd door NNF op 06-11-2016 11:17 ]

[Ed Vertijsment]

Angular heeft natuurlijk een HTTP client en ja Rob Eisenberg heeft inderdaad aardig wat Angular design overgebracht naar Aurelia.

Misschien snap jij mijn use case niet en ik de jouwe niet

Persoonlijk lijkt het mij geen goed idee om een html input in te laden middels een (Angular) http client en dat te gebruiken in je applicatie. Beter lijkt mij om de microservice een API te laten exposen en die aan te roepen d.m.v. bijvoorkeur een data store ("vanilla" http werkt ook maar vind ik vergelijkbaar met rouwe sql zonder orm).

Ik zou gewoon een component maken die async data van een microservice ophaalt d.m.v. een REST api. Waarom wil je per se een include doen?

[Ossebol]

Zoals gezegd werken we microservices en mag er geen tot nauwelijks invloed van de ene op de andere service zijn. Daarom heeft het mijn voorkeur om iets (bijvoorbeeld een site in Docker-container met Node en Express) direct te includen door middel van ssi (we gebruiken Nginx) ipv het aanmaken van een component en dus afhankelijkheid.

In principe wil ik de letterlijke site (nouja, een microservice ervan) includen in een Angular-template via ssi, maar ik begrijp dus dat Angular ook een alternatief voor ssi aanbiedt, tenzij ik het verkeerd begrijp.

We gebruiken REST, maar die gebruiken de microservices weer om data te verkrijgen. Je moet het zo zien: we hebben een service voor menu en header en een andere service voor de daadwerkelijke content. Die service wordt geïncluded en haalt zijn data dmv OData uit een andere service.

Hopelijk ben ik een beetje duidelijk, zeg het anders vooral! Dank voor de inhoudelijke antwoorden tot zover! Altijd goed om alternatieven te horen

[ Voor 8% gewijzigd door Ossebol op 06-11-2016 21:14 ]

[Ossebol]

Uiteindelijk heb ik een oplossing gevonden door het toevoegen van de DomSanitizer, dat ervoor is bedoeld om externe webpagina's van vertrouwde domeinen toe te staan in een Angular-template. Dat kan er zo uit zien:

code:

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

@Component({
  selector: 'app-x',
  template: `
     <iframe [src]="newFrame"></iframe>
  `,
})

export class NewComponent {

    newFrame: any;
    constructor(private sanitizer: DomSanitizer) {
        this.newFrame = sanitizer.bypassSecurityTrustResourceUrl('<external source here>');
    }
}

[q-enf0rcer.1]

Dat is de correcte oplossing om een pagina uit externe bron in je applicatie binnen een iframe te tonen. Indien je beide bronnen in beheer hebt is het overigens netter om geen iframe te gebruiken.In plaats daarvan zou je doormiddel van een http request de data op kunnen halen als JSON en met angular2 een component opbouwen met deze data.