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

Question

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

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

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

文件夹结构:
服务器/
客户/
网站/
仪表板/


server/内的 main.js 正确路由到网站应用程序，但无法路由到 dashboard/

//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 然后我在网站 View 中，无法切换路线和查看仪表板应用程序。

以下是仪表板应用的 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 =仪表板

Answer 1

最简单的方法是更改​​服务器中的这一行:

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

为此:

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

在你的 Angular 应用中:

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

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

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

需要考虑的事情。我并不是要向您提供过多的信息，或者在没有实际回答您的问题的情况下让您陷入困境。因此，请告诉我第一个选项是否有效或部分有效，但您想扩展它以获得其他功能。