【问题标题】:Get URL param in Express API from Angular UI-Router从 Angular UI-Router 获取 Express API 中的 URL 参数
【发布时间】:2016-02-07 23:27:52
【问题描述】:

在 Angular(ui 路由器)中更改状态时,我无法获取传递的 URL 的参数:

.state('contact.detail', {
    url: '/:contactId',
    templateUrl: 'detail.html',
    controller: 'DetailController'
})

在 Express 中我定义了一个 API,但问题在于从我从 ui 路由器(上图)传递的 URL 中获取参数。

server.js

var express = require('express');
var mysql = require('mysql');
var url = require('url');

var app = express();

app.use('/', express.static('../app'));
app.use('/bower_components', express.static('../bower_components/'));

var server = require('http').createServer(app);

var bodyParser = require('body-parser');
app.jsonParser = bodyParser.json();
app.urlencodedParser = bodyParser.urlencoded({ extended: true });

//mysql connection setup
var connection = mysql.createConnection({
    host : "localhost",
    port: "3306",
    user : "root",
    password : "",
    database : "db",
    multipleStatements: true
});

app.get('/:id', app.urlencodedParser, function(req,res){

    var id = req.params.id;

    console.log(id); // => :id instead of value

    connection.query('SELECT * FROM contacts WHERE contactId = ?', [id], function (error, results) {        
        if(error) {
            throw error;
        }
        else { 
            res.end(JSON.stringify(results));
        }
    });
});

server.listen(3000, function () {
    'use strict';
});

在日志中,我得到“:id”而不是实际值,例如“45”。

我可以手动访问 API

请查看plunker 了解州详情。

【问题讨论】:

    标签: angularjs node.js express angular-ui-router


    【解决方案1】:

    由于您使用的是 ui-router(或 ngRoute),它是客户端路由,如果您想从服务器调用路由,您必须使用 $http 服务(或 $resource)进行 http 调用,例如:

     //this is a example not tested.
    .controller('DetailController', function($scope, $stateParams,$http){
      console.log('Passed parameter contact id is:', $stateParams.contactId);
    
      $scope.selectedContactId = $stateParams.contactId;
      $http.get("localhost:3000/"+$stateParams.contactId)
             .success(function(data){
                    //console.log(data)
             })
             .error(function(error,status){
    
             })
        });
    

    【讨论】:

    • 感谢 cshion,我没有提到我使用 $http 服务进行了 http 调用,它看起来像这样 $http.get('/:id').success(function (data) { data.forEach( function( row, index ) { $scope.myData.push(data); }); $scope.gridOptions.data = data; }) 当我将 server.js 中的 id 变量硬编码为“45”时(例如) ,数据成功显示在前端。当我在前端单击(更改状态)时,问题是在 API(server.js)中获取此值(45)。
    • 您是否将 StateParams.contactId 传递给 $http call ,类似于 .. $http.get(''/""+$stateParams.contactId) 。 ?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多