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

Question

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

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

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

当我从已加载页面上的链接导航到该URL时，这将加载到我主页的ui视图中。

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

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

我已经在Node for index中创建了一条路由，其中​​包含我从angular出发的index.html页面，该页面实际上包含了整个应用的angular代码，包括所有路由。

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

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

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

应用程式结构

public -angular app -app.js //用于角度路由index.js约会.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);

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

route / 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标头。 如果请求仅接受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响应。

Answer 2

实际的URL是localhost#!/admin ，尝试尝试。 角形隐藏##！

Angular的URL路由以这种方式是一种“幻想”。 它仅在客户端且仅当您的Angular应用加载时才起作用，该应用位于主/路由上。

一个解决办法是有条件地重定向localhost/admin到localhost#!/admin ，即重定向到您的角度应用程序，并给它传递#!/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（通过设置请求标头），这是服务器如何将其与常规的'/区别开来的管理员的请求。 为此，如果您使用$http.get ，则可以执行$http.get('/admin', {'Accept':'application/json'})