同时使用Angular routeProvider和Express路线

Question

我正在尝试使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始终管理我的请求？

更重要的是，应用程序的基本流程是什么？ 当客户端编写URL时，应用程序如何知道URL是由express js还是由routeProvider处理的？

Answer 1

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

例如：

如果要从后端请求URL，请致电： http://host.com/api/foo/ : http://host.com/api/foo/

相反，如果您想从有角度的应用程序中请求URL，则应调用： http://host.com/#/single : http://host.com/#/single

因此，如果要调用角度应用程序URL，请添加#号。

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

更新：

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

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

Answer 2

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

您需要确保在server.js添加类似下面的代码。 这意味着，无论何时有以/api开头的调用，它都会将其重定向到服务器端的路由，而不是客户端路由。

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

在您的工厂中，当我们按如下所示进行呼叫时，它将转到服务器端route.js而不是客户端。

$resource('/api/adduser')