如何创建委派 Angular 多主机站点？

Question

我在一个环境中工作，我们使用多个（很多）服务器开发解决方案。他们的微服务风格是榜样。

为了能够升级系统，它们必须在运行时 switchable/replaceable（包括用户界面）。已决定的主要解决方案是

a Portal/Proxy 是最终用户唯一可见的系统
代理是"aware"支持服务器
代理有一些基本的用户界面，例如菜单。可能与子系统协作（菜单中的几个条目等）
用户请求包含一些动态内容的页面
门户relays/proxy查询"content"部分页面到子系统。
客户端需要的任何 REST 调用也通过主服务器代理。

REST 调用当然非常简单，但我对 Angular 太陌生了，无法真正理解如何进行“混合”。第 5 点当然是最难的部分。如果子服务器可见，则可以使用 iframe（eeek！），但在这种情况下不能使用。

我需要在一个页面中使用某种 "delegation"，之前做过什么吗？微服务旗舰如何处理用户界面？

Answer 1

关于 Angular，我现在已经从 n00b 发展到 n00b++。

解决方案位于 HTML 用于 Angular.

模板的片段中

我可以用一个 JS 文件和一个 HTML 文件定义一个 html 模板。 JS 文件通过 URL 引用 HTML 页面。通常（在我看到的示例中）路径是相对的，如：

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

但是通过使用绝对路径我可以引用外部资源：

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

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

注意我添加了一个参数 'host' 通过查看包含此 JS 文件的脚本标签计算得出。

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

但要解决的第三个问题是处理 CORS 问题。在我的测试环境 (node.js+express) 中，我刚刚添加了 'cors' 库，我可以访问我的 "external" 站点。

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);
});

如何创建委派 Angular 多主机站点？

How do I create a delegating Angular multi host site?

angularjs

rest

proxy

delegation

microservices