Angular JS 和 Node routing/wiring - 数据仅在页面刷新后显示

Question

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

目前我在 ui-router 中设置我的 routes/states 是这样的：

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

当我从加载页面上的 link 导航到此 url 时，它会加载到我主页上的 ui 视图中。

HOWEVER，当我手动输入 localhost/admin 时，我从 Node 获取路由，而不是通过 angular 呈现状态。

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

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

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

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

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

应用结构

public -angular 应用程序 -app.js //对于angular 路线 index.js appointments.js 楷模观点 - index.ejs server.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/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

一种方法是通过接受 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 来 see/debug 您的 JSON 数据。有几个有用的工具，例如 Advanced REST Client 或 POSTman，它们实际上可以为您提供更好的控制和更多选项。只需确保您在这些工具之一中设置了接受 header，您将能够看到 JSON 响应。

Answer 2

实际的 URL 是 localhost#!/admin，试试看。 Angular 隐藏 hashbang #!

Angular 的 URL 路由是 "illusion" 那种方式。它仅适用于 client-side，并且仅当您的 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（通过设置请求header)，这是服务器将其与常规“/admin”请求区分开来的方式。为此，如果你使用 $http.get 你会做 $http.get('/admin', {'Accept':'application/json'})

Angular JS 和 Node routing/wiring - 数据仅在页面刷新后显示

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

javascript

angularjs

node.js

url-routing