53

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

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

谢谢。

4

3 回答 3

65

使用 express 4，您可能想要捕获所有请求并重定向到 angularjsindex.html页面。 app.use(app.router);不再存在且res.sendfile已弃用，请res.sendFile与大写F一起使用。

app.post('/projects/', projectController.createProject);
app.get('/projects/:id', projectController.getProject);
app.get('*', function (req, res) {
    res.sendFile('/public/index.html');
});

将所有 API 路由放在每个路径的路由之前app.get('*', function (req, res){...}）

于 2014-12-14T22:11:22.257 回答
46

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

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 会自动将它放在中间件链的最后，但您也可以像我们在此处所做的那样显式地将它添加到链中。

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

于 2012-11-05T07:35:02.533 回答
3

我想我应该澄清一下我对使用模板引擎不感兴趣，但是让 Angular 自己提取所有 HTML 部分，Node 在这里完全作为静态服务器运行（但它不会用于 JSON API. Brian Ford 在这里展示了如何使用 Jade：http: //briantford.com/blog/angular-express.html

我的应用程序是一个单页应用程序，因此我为每个可能的 URL 模式创建了一个 Express 路由，并且它们中的每一个都做同样的事情。

fs.readFile(__dirname + '/public/index.html', 'utf8', function(err, content) {
    res.send(content);
});

我假设我必须将一些请求变量传递给 Angular，但看起来 Angular 会自动处理它。

于 2012-11-05T05:06:29.770 回答