如何通过 Express 路由到多个 Angular 应用程序？

Posted 2023-03-07

【中文标题】如何通过 Express 路由到多个 Angular 应用程序？

【英文标题】：How to route to multiple Angular apps via Express?

【发布时间】：2015-05-10 21:15:01

【问题描述】：

问题，我有一个 server 和 client 文件夹，而不是客户端我有 2 个 Angular 应用程序：1 个用于网站，1 个用于仪表板。

https://github.com/leongaban/bitage/tree/website

目前，在我运行服务器并点击路径 / 之后，您将被路由到网站应用程序，一旦在那里我似乎无法路由到仪表板应用程序。

文件夹结构： server/ client/ website/ dashboard/

服务器/内部的 main.js 正确路由到网站应用程序，但无法路由到仪表板/

//website api
=============
var website = express.Router();
app.use('/', website);
app.use('/', express.static("../client/website/"));
console.log(__dirname + "../client/website/");

website.use(function(req, res, next) 
    console.log(req.method, req.url);

    next();
);

website.get('/', function(req, res) 
    var path = 'index.html';
    res.sendfile(path,  'root': '../client/website/' );
);

//dashboard api
===============
var dashboard = express.Router();
app.use('/dashboard', dashboard);
app.use('/', express.static("../client/dashboard/"));
console.log(__dirname + "../client/dashboard/");

dashboard.use(function(req, res, next) 
    console.log(req.method, req.url);

    next();
);

dashboard.get('/dashboard', function(req, res) 
    var path = 'index.html';
    res.sendfile(path,  'root': '../client/dashboard/' );
);

网站的mainController路由配置：

.config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) 

        $stateProvider
            .state('home',  url: '/home' )

            .state('about', 
                url: '/about',
                templateUrl: 'views/about.html'
            )

            .state('login', 
                url: '/login',
                templateUrl: 'views/login.html'
            )

            .state('register', 
                url: '/register',
                templateUrl: 'views/register.html'
            );

        $urlRouterProvider.otherwise('/home');
])

一旦我点击http://localhost:9999/，网站 Angular 应用就会接管：http://localhost:9999/#/home 我在网站视图中，无法切换路线并查看仪表板应用。

以下是仪表板应用的 mainController 中的配置

.config([
    '$stateProvider',
    '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) 

        $stateProvider

            .state('wallet',  url: '/wallet' )

            .state('wallet', 
                url: '/wallet',
                templateUrl: 'views/wallet.html'
            )

            .state('accounts', 
                url: '/accounts',
                templateUrl: 'views/accounts.html'
            )

            .state('settings', 
                url: '/settings',
                templateUrl: 'views/settings.html'
            )

            .state('help', 
                url: '/help',
                templateUrl: 'views/help.html'
            );

        $urlRouterProvider.otherwise('wallet');
])

---

您将如何更改 Express 应用 (main.js) 中的路由以允许我更改 Angular 应用？

即：http://localhost:9999/#/home = 网站http://localhost:9999/#/dashboard = 仪表板

【参考方案1】：

最简单的方法是在您的服务器中更改此行：

app.use('/', express.static("../client/dashboard/"));

到这里：

app.use('/', express.static("../client/"));

在您的 Angular 应用中：

        .state('about', 
            url: '/about',
            templateUrl: 'dashboard/views/about.html'
        )

但是，您可能会遇到让一个后端服务于两个前端的问题。您是否考虑过将您的服务器分成两个 api 以分离关注点？

实现此目的的另一种（可能更符合行业标准）方法是使用 nginx 为您的静态资产提供服务，并充当反向代理来为每个后端提供静态 API 路由。

需要考虑的事项。我并不是要在没有实际回答您的问题的情况下向您提供过多的信息或将您送上兔子的踪迹。所以让我知道第一个选项是否有效或部分有效，但您想扩展它以获得额外的功能。

【讨论】：

谢谢！是的，这行得通:) 是的，这不会是生产甚至是开发就绪的代码。这样我就可以预览并继续为这两个客户端应用程序开发前端...