Javascript 将NodeJS express对象传递给AngularJS 1.6

我有一个使用Express的NodeJSAPI。我不知道如何正确地将参数从NodeJS传递到AngularJS，以便检索页面的数据

注：我的问题是这个问题的延伸（不是重复）：

我已经设置了两个路由，一个用于呈现页面，另一个用于基于图书ID（实体的唯一ID）返回JSON对象。加载页面时，Angular使用$http发送GET请求以从JSON端点获取数据

这是可行的，但我已经用Angular硬编码了一个示例图书ID

问题：如何将书本ID传递给角度控制器

/*EXPRESS ROUTES*/
//Render page
router
  .route('/detail/:book_id')
  .get(ctrlRequest.detailPage);

//Return JSON data
router
  .route('/detail/json/:book_id')
  .get(ctrlRequest.detailJSON);


/*NODEJS CONTROLLERS*/
//Render page
module.exports.detailPage = function(req, res) {
    res.render('transfer_request_detail.pug', {
      title: 'Transfer Request Detail'
    });
};

//Return JSON data
module.exports.detailJSON = function(req, res) {
  getModel().read(req.params.book_id, (err, entity) => {
    if (err) {
      console.log('Request Detail JSON unable to return data results. Error message: ', err);
      return;
    } else {
      res.json(entity);
    }
  });
};

/*ANGULAR WITH HARD-CODED BOOK ID*/
//QUESTION: HOW TO PASS THE BOOK ID IN DYNAMICALLY?
function DetailPageController($http) {
  var vm = this;
  $http({
      url: '/detail/json/5761233819297931', //HARD-CODED ID HOW TO PASS IN DYNAMICALLY?
      method: 'GET'
    }).then(function (response){
    vm.book = response.data;
    console.log('API worked', response);
    },function (error){
    console.log('API error: ', error);
    });
}

更新：

---

“这可能取决于应用程序的使用方式。例如，应用程序可能会显示从Express中获取的书籍列表，用户单击其中一个可查看详细信息页面。在这种情况下，前端会从Express中获取书籍ID的完整列表。您能概述应用程序的行为吗？”

用例1： 用户提交新书表单后，节点应用程序将重定向到呈现详细信息页面的URL/细节/：图书编号。我想使用Angular构建一个数据表，以显示创建的书籍的详细信息

用例2： 未来的另一个用例是显示登录用户创建的所有书籍。在本例中，我希望使用Angular显示数据表中的所有书籍。路径类似于“/mybooks/：username”。此外，用户还应该能够单击一个链接，将他们带到单本书的详细信息页面（用例1）

更新2：

我尝试使用routeParams从URL中提取ID。这似乎正是我需要的，但它不工作。请注意，路由是在服务器端使用Express而不是Angular创建的

$routeParams //Object
$routeParams.book_id //undefined

$routeParams

更新3：

我通过一点小技巧解决了这个问题。我对这个解决方案并不是非常满意，因为它相当粗糙，但至少目前它是有效的

我在Angular控制器中使用此代码从URL提取ID

var relpath = $location.path().split('/');
var book_id = relpath[3];

更新4： 看来我又回到了原点。这个解决方案打破了快速路由。我现在遇到了与此线程中描述的相同的问题，因为locationProvider HTML模式已启用，可以使此解决方案正常工作。当点击菜单链接时，页面不会加载，只有直接输入时页面才会加载

您可以在url字符串中使用：

function DetailPageController($http, id = 5761233819297931) {
var vm = this;
$http({
  url: `/detail/json/${id}`, //HARD-CODED ID HOW TO PASS IN DYNAMICALLY?
  method: 'GET'
}).then(function (response){
vm.book = response.data;
console.log('API worked', response);
},function (error){
console.log('API error: ', error);
});

---

}

这可能取决于应用程序的使用方式。例如，该应用程序可能会显示从Express获取的书籍列表，用户单击其中一个以查看详细信息页面。在这种情况下，前端从Express获取图书ID的完整列表。你能概述一下你的应用程序的行为吗？好的，太好了！但是，调用DetailPageController时，如何将ID传递到DetailPageController？这取决于ID的起始位置。是用户输入吗？调用它时，需要将其传递到DetailPageController函数中。您在什么时候有Id？Id是由数据库生成的，所以他们不会键入它。基本用例：用户提交新书表单后，节点应用程序将重定向到呈现详细页面的URL/细节/：图书编号。我想使用Angular构建一个数据表，以显示创建的书籍的详细信息。我只是找不到一种方法将图书ID从快速路线传递到角度控制器。我现在正在查看路线图。我正试图用它从URL中提取ID。到目前为止还不起作用，但我会继续挖掘，希望我在正确的轨道上。好啊您可以使用$location provider解析url的id$location.path（）将包含url的字符串。然后您可以将（“/”）它拆分为一个数组，然后从最后一个索引（应该是id）中弹出（）。