将 NodeJS express 对象传递给 AngularJS 1.6

Question

我有一个使用 Express 的可用 NodeJS API。我很困惑如何正确地将参数从 NodeJS 传递到 AngularJS 以检索页面的数据。

注意：我的问题是这个问题的扩展（不是重复）： How do I pass node.js server variables into my angular/html view?

我设置了两条路由，一条用于渲染页面，一条用于根据 Book ID（实体的唯一 ID）返回 JSON 对象。当页面加载时，Angular 使用 $http 发送一个 GET 请求以从 JSON 端点获取数据。

这是可行的，但我在 Angular 中硬编码了一个示例图书 ID。

问题：如何将 Book ID 传递给 Angular 控制器？

/*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： 用户提交 New Book 表单后，Node 应用程序将重定向到呈现详细信息页面的 URL。 '/detail/:book_id'。我想使用 Angular 构建一个数据表来显示所创建书籍的详细信息。

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

更新 2：

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

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

https://docs.angularjs.org/api/ngRoute/service/$routeParams

更新 3：

我能够通过一些 hacky 解决方法来解决这个问题。我对这个解决方案不是很满意，因为它很老套，但至少暂时有效。

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

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

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

Angular routing doesn't work when URL is directly visited in browser but works when clicked to?

Answer 1

您可以在您的网址字符串中使用template literals:。

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);
});

}