javascript - 将 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 中硬编码了一个示例 Book ID。

问题:如何将 Book ID 传递给 Angular Controller ？

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

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

更新 2:

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

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

https://docs.angularjs.org/api/ngRoute/service/ $路由参数

更新 3:

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

我在 Angular Controller 中使用这段代码从 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);
});