Angular JS和Node路由/布线-仅在页面刷新后显示数据

Angular JS and Node routing/wiring - data only showing after a page refresh

本文关键字：刷新 数据 显示 JS Node 路由 布线 Angular      更新时间：2023-09-26

我正在使用Node和Anugular，我已经从我的应用程序中创建了一个RESTful api，并创建了一种角度资源来使用它。我对Angular ui路由器指令如何与服务器上的节点路由系统协调感到困惑。

目前，我已经在ui路由器中设置了我的路由/状态，如下所示：

$stateProvier
.state('admin', {
            url:'/admin',
            templateUrl:'views/admin.html', 
            controller: 'adminController'
        });

当我从加载页面上的链接导航到这个url时，这会加载到我主页上的ui视图中。

HOWEVER，当我手动键入localhost/admin时，我从Node获得路由，而不是通过angular渲染状态。

现在，我想让Angular处理我的应用程序上的所有导航，以及获取信息的资源，即使地址是手动输入导航栏的。

我在Node is for index中创建了一个路由，其中包含我来自angular的index.html页面，它有效地包含了整个应用程序angular代码，包括所有路由。

我的问题是，如果我手动在地址栏中键入url，并且仍然有$resource中的数据，我如何获得角度重定向。

我正在将我的资源定向到"/admin"-这可能是问题所在吗？

这是否意味着我需要将/routes/ameetings的内容添加到基本节点文件（server.js）中，然后删除路由？如果是，那么我如何将资源引导到正确的RESTapi？

应用程序结构

公众-angular应用程序-app.js//用于angular路线index.js任命.js模型视图-index.ejsserver.js//节点服务器文件

这是我的代码练习器server.js

//standard routing code
var routes = require('./routes/index');
var appointments = require('./routes/appointments');
var app = express();
//configuring Express
app.set('port', process.env.PORT || 3000);
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.use('/', routes);
app.use('/', appointments);

routes/index.js

var express = require('express');
var router = express.Router();
// ./routes/index.js
router.get('/', function(req, res) {
  res.render('index', { title: 'Homepage' });
});
module.exports = router;

routes/ahments.js-这是我RESTFUL api 的基础

var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var Todo = require('../models/Appointments.js');
/* GET /todos listing. */
router.get('/admin', function(req, res, next) {
  Todo.find(function (err, todos) {
    if (err) return next(err);
    res.json(todos);
  });
});
module.exports = router;

实现这一点的一种方法是通过Accept标头。如果请求只接受JSON，那么让请求通过API。如果请求接受HTML，那么始终提供索引页面。然后一旦索引页面加载angular的路由器将负责其余部分

// Angular config - default Accept header for all ajax requests
$httpProvider.defaults.headers.common = {
    'Accept': 'application/json'
};
// Middleware in Node to "intercept" non JSON requests
// Place this after express.static middleware but before your route definitions.
app.use(function(req, res, next) {
    // keep in mind this applies to all requests, so 404s will need to be handled by your angular app since any url will serve up the index page
    if(req.header('Accept') !== 'application/json') {
        console.log('serving the index page');
        req.url = '/'; // force the url to serve the index route.
    }
    next();
});

关于这种方法需要注意的一点是，很明显，您将无法再通过直接点击URL来查看/调试JSON数据。有一些有用的工具，如Advanced REST Client或POSTman，实际上可以为类似的事情提供更好的控制和更多的选择。只要确保在其中一个工具中设置了Accept标头，就可以看到JSON响应。

实际URL是localhost#!/admin，请尝试。Angular隐藏了hashbang#！

Angular的URL路由在某种程度上是一种"幻觉"。它只在客户端工作，并且只在Angular应用程序加载时工作，该应用程序位于主/路由上。

一种解决方案可以是有条件地从localhost/admin重定向到localhost#!/admin，即重定向到您的Angular应用程序并将it传递到#!/admin路径。条件可以是检查是否请求了JSON。

router.get('/admin', function(req, res, next) {
  if(req.header('Accept') !== 'application/json')
    return res.redirect('/#!/admin');
  Todo.find(function (err, todos) {
    if (err) return next(err);
    res.json(todos);
  });
});

您还需要配置Angular，这样当它从服务器请求"/admin"json数据时，它应该只接受json（通过设置请求头），这就是服务器将其与常规"/admin"请求区分开来的方式。为此，如果您使用$http.get，您将执行$http.get('/admin', {'Accept':'application/json'})

相关文章：