【问题标题】:Using ngRoute with Express backend将 ngRoute 与 Express 后端一起使用
【发布时间】:2023-03-07 17:19:01
【问题描述】:

我已经阅读了有关此主题的其他几个答案,但我不完全理解这是如何工作的。我有一个角前端。我正在尝试使用 $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

上述帖子的解决方案如何

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

能够找到部分并将它们返回到前端(顺便说一下,这个 sn-p 对我不起作用)。

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

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

这条路线在路线/索引中为我的主页提供服务:

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

【问题讨论】:

    标签: angularjs node.js single-page-application


    【解决方案1】:

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

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

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

    当然,您实际上会在后端有一些路由以接受 api 请求,但理想情况下就是这样,除非您选择花哨并采用同构,在后端预渲染 js 并提供完整的视图(尽管这是现在更适合 React,至少在 Angular 2.0 之前)

    【讨论】:

    • 惊人的链接。谷歌搜索时我找不到这样的东西。
    • 其实,这家伙的食谱已经过时了。我认为他正在使用 express 2 或 3
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-09-24
    • 1970-01-01
    • 1970-01-01
    • 2016-12-09
    • 2011-06-10
    • 1970-01-01
    • 2017-02-22
    相关资源
    最近更新 更多