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。

问题：如何将书籍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);
    });
}

更新：

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

用例1：用户提交新书表单后，节点应用程序将重定向到呈现详细信息页面的URL。＆＃39; /细节/：book_id＆＃39 ;.我想使用Angular构建一个数据表来显示已创建的书的细节。

用例2：将来的另一个用例是显示由登录用户创建的所有书籍。在这种情况下，我想使用Angular来显示数据表中的所有书籍。该路线将类似于＆＃39; / mybooks /：username＆＃39;。此外，用户还应该能够点击链接，将链接带到详细信息页面（用例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);
});

}

将NodeJS express对象传递给AngularJS 1.6

1 个答案: