如何使用防爆preSS（Node.js的）AngularJS路由时请求了新的一页？ [英] How to use AngularJS routes with Express (Node.js) when a new page is requested?

问题描述

我用防爆preSS，它从一个静态的目录中加载AngularJS。通常情况下，我会要求的http：//本地主机/ ，其中前preSS供应我，我的 index.html的和所有正确的角文件等。在我的角度应用程序，我有这些路线的设置，取代在 NG-视图：

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

在我的主网页，我有一个链接＆LT; A HREF =/项目/ {{project.id}}＆GT; ，这将成功加载模板，直接我的http：//本地主机/项目/ 3 或任何ID我指定的。问题是，当我尝试我的浏览器直接到的http：//本地主机/项目/ 3 或刷新页面，请求将防爆preSS /节点服务器，它返回拿不到/项目/ 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.

我如何设置我的前preSS路线，以适应这种？我猜它会要求使用 $位置 在角（虽然我倒是preFER避免丑吗？搜索和#hashes他们使用），但我茫然不知如何去设置防爆preSS途径来处理这

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 是运行所有你的前preSS途径（像 app.get 和 app.post ）;通常，防爆preSS在中间件链的最末端自动将本，但你也可以将其加入连锁明确的，就像我们在这里做的。

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.

然后，如果该URL不是由 app.router 处理，最后的中间件将发送角HTML视图到客户端。这将发生在不是由其他中间件处理的任何的网址，这样你的角的应用程序将要正确处理无效的路由。

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.

这篇关于如何使用防爆preSS（Node.js的）AngularJS路由时请求了新的一页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！