带有 express 的 Angular HTML5 模式答案

【问题标题】：Angular HTML5 mode with express带有 express 的 Angular HTML5 模式
【发布时间】：2015-08-03 01:40:22
【问题描述】：

我知道这个问题有答案，但它们并没有完全适合我。我正在使用 Angular 1.4 和 Express 4。Express 处理 API 调用，Angular 应该处理所有 HTML。

我的快递 app.js：

var express = require('express');
var path = require('path');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

require('./routes/api')(app);

var app = express();

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

app.use(express.static(path.join(__dirname, '../client')));
// This covers serving up the index page
app.use(express.static(path.join(__dirname, '../client/.tmp')));
app.use(express.static(path.join(__dirname, '../client/app')));

app.all('*', function(req, res) { 
  res.redirect('/index.html'); 
});

module.exports = app;

这里是 angular app.js

angular
  .module('punyioApp', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/howitworks', {
        templateUrl: 'views/howitworks.html',
        controller: 'HowItWorksCtrl',
        controllerAs: 'howitworks'
      })
      .otherwise({
        redirectTo: '/'
      });

      $locationProvider.html5Mode(true);
  });

现在，如果我转到 http://localhost:3000/，我会得到主要的 Angular 视图，正如预期的那样。问题是当我转到http://localhost:3000/howitworks 时，它会将我重定向到http://localhost:3000/index.html 并且不显示“howitworks”视图。如何修复快速路由器，以便我可以转到http://localhost:3000/howitworks？

【问题讨论】：

您为什么使用app.all(*... 而不仅仅是app.get('/', ....？谢谢。
我的客户本质上是一个单独的项目。 express 应用程序没有“howitworks”端点。不过，我的 Angular 代码可以理解它。我正在寻找如何将未知 URL 发送到 Angular。
如果我可以重定向到 index.html，似乎我应该能够以某种适用于 Angular 的方式将其发送给 Angular。

标签： angularjs node.js express

【解决方案1】：

您的代码只是将每个请求重定向到index.html，这不是您想要的。你确实需要那个文件，但由于 Angular 处理路由，你只希望 Express 发送文件，不问任何问题。

基本上，你不应该使用redirect，而是sendFile：

app.get('/*', function(req, res) { 
  res.sendFile(__dirname + '/index.html')
});

另外，正如 cmets 中有人指出的那样，您应该使用 get 而不是 all。

【讨论】：

在此之前添加一个特定的路由处理程序：app.get('/api/some', ...) 然后app.get('/*', ...)
就是这样！谢谢@Pier-Luc
@Pier-LucGendreau 为什么每次我尝试实现这个&我去我的一个网址时，我下载那个文件而不是打开页面。我也发了一篇关于这个的帖子，但我似乎无法用你的解决方案来解决它：stackoverflow.com/questions/37394053/…

【解决方案2】：

如果你用的是angularjs ui-router，就不用express，你可以用node-static或者只用nginx，用grunt或者gulp connect plugin来dubug，我觉得这样比较好。

【讨论】：

Express 正在处理 RESTful API，我希望能够在一台服务器上部署所有内容。这可能有点奇怪，但我喜欢这种设置。

【解决方案3】：

如果是玉，你可以使用：

app.get('/*', function (req, res) {
res.render('index.pug');
});

【讨论】：