带有 express 的 Angular HTML5 模式 [英] Angular HTML5 mode with express

问题描述

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

I know there are answers to this question, but they're not fully working for me. I'm using Angular 1.4 and Express 4. Express is handling API calls and Angular is supposed to be handling all HTML.

我的快递 app.js:

My express 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

Here is 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 ?>

Now, if I go to http://localhost:3000/, I get the main Angular view, as expected. The problem is when I go to http://localhost:3000/howitworks, which redirects me to http://localhost:3000/index.html and does not show the 'howitworks' view. How do I fix the express router so that I can go to http://localhost:3000/howitworks ?

推荐答案

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

Your code is simply redirecting every request to index.html, which isn't what you want. You do need that file, but since Angular handles the routing, you only want Express to send the file, no questions asked.

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

Basically, you shouldn't be using redirect, but sendFile:

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

此外，正如有人在评论中指出的那样，您应该使用 get 而不是 all.

Also, as someone pointed out in the comments, you should use get and not all.

这篇关于带有 express 的 Angular HTML5 模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！