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-view中。

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

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

我在Node中创建了一个用于索引的路由，其中包含我的angular.html页面，它有效地包含整个应用程序角度代码，包括所有路由。

我的问题是，如果我手动将URL输入地址栏，并且仍然拥有来自$ resource的数据，我怎样才能获得角度重定向。

我将我的资源导向'/ admin' - 这可能是问题吗？

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

app结构

公共角应用程序 -app.js // for angular 路线 index.js appointments.js 楷模意见 - index.ejs server.js //节点服务器文件

这是我的代码exerpts 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;

routes / appointmentments.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 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标头，您就能看到JSON响应。

Answer 2

实际网址为localhost#!/admin，试试看。 Angular隐藏了hashbang＃！

Angular的URL路由就是这种“错觉”。它仅适用于客户端，并且仅在加载Angular应用程序时才有效，该应用程序位于主/路径上。

解决方案可能是有条件地从localhost/admin重定向到localhost#!/admin，即重定向到您的Angular应用并传递它 #!/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'})

Angular JS和节点路由/连线 - 仅在页面刷新后显示的数据

2 个答案: