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

Question

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

目前我已经在 ui-router 中设置了我的路线/状态，如下所示:

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

当我从加载页面上的链接导航到此 URL 时，它会加载到我主页上的 ui-view 中。

但是，当我手动输入 localhost/admin 时，我从 Node 获取路由，而不是通过 Angular 渲染状态。

现在，我希望 Angular 能够处理我的应用程序上的所有导航，并让我的资源来获取信息，即使地址是手动输入到导航栏中的。

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

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

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

这是否意味着我需要将/routes/appointments' 的内容添加到基本 Node 文件 (server.js) 中，然后删除该路由？如果是这样，那么我如何将我的资源定向到正确的 REST api？

应用程序结构

公开 - Angular 应用程序 -app.js//用于 Angular 路线 索引.js 约会.js楷模意见 - 索引.ejsserver.js//Node 服务器文件

这是我的代码摘录服务器.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);

路线/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/appointments.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;

Answer 1

实现此目的的一种方法是通过 Accept header 。如果请求仅接受 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 数据。有一些有用的工具，例如高级 REST 客户端或 POSTman，它们实际上可以为您提供更好的控制和更多类似的选项。只需确保在这些工具之一中设置 Accept header ，您就可以看到 JSON 响应。