当请求新页面时，如何使用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 中的内容：

  $ routeProvider.when（'/'，{
 templateUrl：'/partials/main.html'，
控制器：MainCtrl，
}）; 
 
 $ routeProvider.when（'/ project /：projectId'，{
 templateUrl：'/partials/project.html'，
控制器：ProjectCtrl，
} ）; 
 
 $ locationProvider.html5Mode（true）; 
  

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

如何设置我的快速路线以适应这一点？我猜测需要使用 $ location （尽管我宁愿避免使用丑陋的搜索和#hash），但是我对于如何设置Express路由来处理这个问题我无能为力。 / p>

谢谢。

解决方案

我将创建一个全部处理程序在您发送必要数据的常规路由后运行。

  app = express（）; 
 //你的普通配置像`app.use（express.bodyParser（））;`这里
 // ... 
 app.use（app.router）; 
 app.use（function（req，res）{
 //使用res.sendfile，而不是将文件读入内存
 res.sendfile（__ dirname +'/ public /index.html'）; 
}）; 
  

app.router 是运行的中间件所有的快速路线（如 app.get 和 app.post ）;通常，Express会自动将其放在中间件链的最后端，但您也可以将其直接添加到链中，就像我们在这里一样。

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

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);

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.

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.

Thanks.

解决方案

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 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.

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屋！