请求新页面时如何将 AngularJS 路由与 Express (Node.js) 一起使用? [英] How to use AngularJS routes with Express (Node.js) when a new page is requested?

问题描述

我正在使用 Express，它从静态目录加载 AngularJS.通常，我会请求 http://localhost/，其中 Express 为我提供我的 index.html 和所有正确的 Angular 文件等.在我的 Angular 应用程序中，我设置了这些路由，它们替换了 ng-view 中的内容:

I'm using Express, which loads AngularJS from a static directory. Normally, I will request http://localhost/, in which Express serves me my index.html and all of the correct Angular files, etc. In my Angular app, I have these routes setup, which replace the content in an ng-view:

$routeProvider.when('/', {
    templateUrl: '/partials/main.html',
    controller: MainCtrl,
});

$routeProvider.when('/project/:projectId', {
    templateUrl: '/partials/project.html',
    controller: ProjectCtrl,
});

$locationProvider.html5Mode(true);

在我的主页上，我有一个指向 <a href="/project/{{project.id}}"> 的链接，它将成功加载模板并将我定向到http://localhost/project/3 或我指定的任何 ID.问题是当我尝试将浏览器定向到 http://localhost/project/3 或刷新页面时，请求将转到 Express/Node 服务器，该服务器返回 Cannot GET/project/3.

On my main page, I have a link to <a href="/project/{{project.id}}">, which will successfully load the template and direct me to http://localhost/project/3 or whatever ID I have specified. The problem is when I try to direct my browser to http://localhost/project/3 or refresh the page, the request is going to the Express/Node server, which returns Cannot GET /project/3.

如何设置我的 Express 路线以适应这种情况?我猜它需要使用 $location 在 Angular 中(尽管我更愿意避免使用丑陋的 ?searches 和 #hashes)，但我对如何设置 Express 路由来处理这个问题一无所知.

How do I setup my Express routes to accommodate for this? I'm guessing it will require the use of $location in Angular (although I'd prefer to avoid the ugly ?searches and #hashes they use), but I'm clueless about how to go about setting up the Express routes to handle this.

谢谢.

推荐答案

我将创建一个包罗万象的处理程序，它在发送必要数据的常规路由之后运行.

I would create a catch-all handler that runs after your regular routes that sends the necessary data.

app = express();
// your normal configuration like `app.use(express.bodyParser());` here
// ...
app.use(app.router);
app.use(function(req, res) {
  // Use res.sendfile, as it streams instead of reading the file into memory.
  res.sendfile(__dirname + '/public/index.html');
});

app.router 是运行所有 Express 路由(如 app.get 和 app.post)的中间件；通常，Express 会自动将其放在中间件链的最末端，但您也可以像我们在此处一样将其显式添加到链中.

app.router is the middleware that runs all of your Express routes (like app.get and app.post); normally, Express puts this at the very end of the middleware chain automatically, but you can also add it to the chain explicitly, like we did here.

然后，如果 app.router 不处理 URL，最后一个中间件会将 Angular HTML 视图向下发送到客户端.对于任何未由其他中间件处理的 URL 都会发生这种情况，因此您的 Angular 应用程序必须正确处理无效路由.

Then, if the URL isn't handled by app.router, the last middleware will send the Angular HTML view down to the client. This will happen for any URL that isn't handled by the other middleware, so your Angular app will have to handle invalid routes correctly.

这篇关于请求新页面时如何将 AngularJS 路由与 Express (Node.js) 一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！