同时使用 Angular routeProvider 和 Express 路由

Posted 2023-03-07

【中文标题】同时使用 Angular routeProvider 和 Express 路由

【英文标题】：Using both Angular routeProvider and Express routes

【发布时间】：2016-03-05 05:11:03

【问题描述】：

我正在尝试让 Angular 的 routeProvider 来管理我的应用程序的所有路由。我在 angular（客户端）的 app.js 文件中相应地定义了我的路线：

(function()

var app = angular.module("Crowdsourcing", ["ngRoute"]);

app.config(function($routeProvider)
    $routeProvider
        .when("/single/:street/:buildingNumber/:apartmentNumber", 
            templateUrl: "/views/single.html'",
            controller: "ListingCtrl"
        )
        .otherwise(redirectTo:"/");
);
());

但是，当在浏览器上编写 URL（例如 /single）时，我的后端 express/node api 会尝试处理该请求。因此，它没有找到，因为后端路由例如 /api/foo。如何确保 Angular 的 routeProvider 始终管理我的请求？

更重要的是应用程序的基本流程是什么？ Client 写 URL 时，应用程序如何知道该 url 是由 express js 处理还是由 routeProvider 处理？

【参考方案1】：

通常，您可以通过在主机名和页面 URL 之间使用 # 符号来区分由 Angular 应用处理的 URL 和快速 URL。

例如：

如果你想从后端请求一个 URL，你可以调用： http://host.com/api/foo/

如果您想从 Angular 应用请求 URL，您可以调用：http://host.com/#/single

因此，如果您想调用 Angular 应用 URL，请添加 # 符号。

这是您在使用单页应用程序时需要牢记的一个非常重要的事实。

更新：

看看这个种子项目：https://github.com/btford/angular-express-seed

它使用与您的项目类似的技术堆栈。这应该会让你更清楚。

【讨论】：

但我应该在哪里打电话： ?

我不明白你的问题？你想用脚本标签做什么？

我的意思是我应该在哪里加载 app.js ？我应该在哪个视图中存储脚本标签？

您需要在您的快速应用程序中有一个基本视图，您可以在其中加载您的角度应用程序。理想情况下，该视图应该可以通过基本 URL '/' 访问。只需为此创建一个路由并提供一个简单的 HTML 页面，您可以在其中初始化 ng-app 等。我已经使用与您相同的堆栈放置了一个种子项目的链接。

我忘了说我的应用不是单页应用。有关系吗？谢谢！

【参考方案2】：

几天前我也遇到了同样的问题。问题是，即使您对数据进行服务器调用，它也会将其重定向到客户端路由并在$routeProvider 中搜索。

您需要确保在 server.js 中添加类似以下代码的内容。 这意味着当有一个以/api 开头的呼叫时，它会将其重定向到服务器端的路由而不是客户端路由。

var api = express.Router();
require('./app/routes')(api);
app.use('/api', api);

在您的工厂中，当我们进行如下调用时，这将转到服务器端 routes.js 而不是客户端。

$resource('/api/adduser')

【讨论】：

但是应用程序如何决定是使用服务器端路由还是客户端路由？

通过使用这个app.use('/api', api); 正如我的回答中提到的那样。它检查 url 是否包含 /api，如果包含，则将其重定向到服务器端的路由。