将 ngRoute 与 Express 后端一起使用

Question

我已经阅读了关于这个主题的其他几个答案，但我不完全理解它是如何工作的。我有一个 angular 前端。我正在尝试使用 $routeProvider 将部分加载到我的单页应用程序页面中。我收到 $routeProvider 请求的 404，我认为必须有一种方法可以设置它，而无需为服务器上的每个部分声明路由。很快就会有更多的部分，即使我现在在我的配置中只声明了一个。我的 routeProvider 代码如下所示：

myApp.config(['$routeProvider',
function ($routeProvider) {
    $routeProvider.
        when('/register', {
            templateUrl: 'partials/register',
            controller: 'registerCtrl'
        })
}])

但是转到 localhost:3000/register 会出现 404 错误。我在 SO 和其他一些网站上查看了这个回复，但我无法将所有部分放在一起。

Express 4, NodeJS, AngularJS routing

上面这个解法是怎样的post

app.use('/*', function(req, res){
    res.sendfile(__dirname + '/public/index.html');
});

能够找到部分片段并将它们 return 送到前端（顺便说一句，这个片段对我不起作用）。

我的应用与使用 express 生成器创建新的 express 应用没有太大区别。我有这些与路由相关的 require 和 use 语句：

var routes = require('./routes/index');
var users = require('./routes/users');
app.use('/', routes);
app.use('/users', users);

这条路线在 routes/index 中为我的主页提供服务：

router.get('/', function(req, res, next) {
  res.render('home');
});

Answer 1

当您使用前端路由时，您不必为服务器上的每个部分声明一个路由。最简单的解决方案形式是让用户点击任何路由，并在后面使用通配符匹配，无论他们正在查看什么路由，您都只提供相同的前端应用程序模板。所以实际上你在很大程度上完全取消了后端路由。一旦您的 JS 启动并从导航栏中读取当前路线，它将解析适当的视图。

查看其中一个教程，了解如何配置 Express 后端来处理此问题： http://fdietz.github.io/recipes-with-angular-js/backend-integration-with-node-express/implementing-client-side-routing.html

有一些细微差别，之前由于 SEO 之类的原因围绕此结构存在争议，但其中很多已经被 Google 清除，现在能够解析 JS 并解析 SPA 中的视图（ http://googlewebmastercentral.blogspot.com/2014/05/understanding-web-pages-better.html)

当然，您实际上会在后端设置一些路由以接受 api 请求，但理想情况下仅此而已，除非您选择花哨和同构，在后端预渲染 js 并提供服务一个完整的视图（尽管现在更适合 React，至少在 Angular 2.0 之前）

将 ngRoute 与 Express 后端一起使用

Using ngRoute with Express backend

node.js

angularjs

single-page-application