Comment créer un site multi-hôte Angular délégué?

Question

Je travaille dans un environnement où nous développons une solution en utilisant plusieurs (beaucoup de) serveurs. Le style microservice est le modèle.

Pour pouvoir mettre à niveau des systèmes, ils doivent être commutables/remplaçables (y compris l'interface utilisateur) pendant l'exécution. La principale solution qui ont été décidées que

1. un portail/Proxy est le seul système visible pour l'utilisateur final
2. Le proxy est « conscient » Af les serveurs supportant
3. Le mandataire a quelques-uns interface utilisateur de base avec par exemple des menus. Peut être en collaboration avec les sous-systèmes (plusieurs entrées dans le menu, etc.)
4. Un utilisateur demande une page avec du contenu dynamique
5. Le portail relaie/proxy la requête de la partie "contenu" de la page au sous-système.
6. Tous les appels REST requis par le client sont également transmis via le serveur principal.

Les appels REST sont bien sûr très simple mais je suis trop n00b dans angulaire pour vraiment comprendre comment faire le « mix. point numéro 5 est bien sûr la partie la plus difficile. SI le sous-serveur aurait été visible un iframe (eeek!) aurait pu être utilisé, mais pas dans ce cas.

je besoin d'une sorte de « délégation » dans une page, quoi que ce soit fait avant? Comment le programme phare Microservice gérer l'interface utilisateur?

Answer 1

I ont maintenant évolué de n00b à n00b ++ en ce qui concerne Angular

La solution se trouve dans les extraits HTML utilisés pour les modèles dans Angular.

Je peux définir un modèle html avec un fichier JS et un fichier HTML. Le fichier JS fait référence à la page HTML par une URL. Habituellement (dans les échantillons que je l'ai vu) le chemin est relatif comme:

angular.module('myApp.view1', ['ngRoute']) 
.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/view1', { 
    templateUrl: 'view1/view1.html', 
    controller: 'View1Ctrl' 
    }); 
}]) 
.controller('View1Ctrl', [function() {}]); 

Mais en utilisant un chemin absolu, je peux faire référence à une ressource externe:

angular.module (« myApp.view2 », [ 'ngRoute'])

.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/view2', { 
    templateUrl: host + '/app/view2/view2.html', 
    controller: 'View2Ctrl' 
    }); 
}]) 
.controller('View2Ctrl', [function() {}]); 

Avis I ajouté 'hôte' un paramètre calculé en regardant la balise de script, y compris ce fichier JS.

var scripts = document.getElementsByTagName('script'); 
var src = scripts[scripts.length - 1].src; 
var host = src.match(new RegExp('https?://[^/]*'))[0]; 

Mais le troisième problème à résoudre est de gérer le problème CORS. Dans mon environnement de test (node.js + express), j'ai simplement ajouté la bibliothèque 'cors' et j'ai pu accéder à mon site "externe".

var express = require('express'), 
    cors = require('cors'), 
    app = express(); 

app.use(cors()); 
app.use("/", express.static(__dirname)); 

app.listen(8001, function(){ 
    console.log('CORS-enabled web server listening on port', 8001); 
});