将NodeJS Express对象传递给AngularJS 1.6 [英] Pass a NodeJS express object to AngularJS 1.6

问题描述

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

I have a working NodeJS API using Express. I am confused how to properly pass in a parameter from NodeJS to AngularJS in order to retrieve the data for the page.

注意:我的问题是此问题的扩展名(不是重复): 如何通过节点. js服务器变量放入我的angular/html视图?

Note: My question is an extension (not a repeat) of this question: How do I pass node.js server variables into my angular/html view?

我已经设置了两条路线，一条用于呈现页面，另一条基于Book ID(实体的唯一ID)返回JSON对象.页面加载时，Angular使用$ http发送GET请求以从JSON端点获取数据.

I have set up two routes, one to render the page and one to return the JSON object based on the Book ID (the unique ID of the entity). When the page loads, Angular uses $http to send a GET request to get the data from a JSON endpoint.

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

This is working, but I have hard-coded an example Book ID in Angular.

问题:如何将Book ID传递给Angular控制器?

Question: How can I pass the Book ID to the 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.能否概述应用程序的行为?"

"This probably depends on how your application is used. For example, the app might display a list of Books fetched from Express, and the user clicks one to see the detail page. In that case, the frontend fetches the complete list of Book ID's from Express. Can you please outline the behavior of your application?"

用例1: 用户提交新书"表单后，节点"应用程序将重定向到呈现详细信息页面的URL. '/detail/:book_id'.我想使用Angular构建数据表来显示所创建书籍的详细信息.

Use Case 1: After the user submits a the New Book form, the Node app will redirect to the URL that renders the detail page. '/detail/:book_id'. I want to use Angular to build a datatable to display the details of the book that was created.

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

Use Case 2: Another use case in the future will be to display all books that were created by the logged-in user. In this case, I want to use Angular to display all the books in a datatable. The route will be something like '/mybooks/:username'. Also, the user should also be able to click on a link that brings them to the details page (use case 1) for single book.

更新2:

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

I tried using routeParams to extract the ID out of the URL. It appears to be exactly what I need however it isn't working. Note that the routes were created on the server side with Express, not Angular.

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

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

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

更新3:

我可以通过一些棘手的解决方法来解决此问题.我对这种解决方案并不满意，因为它非常笨拙，但至少暂时可以使用.

I was able to solve this with a bit of a hacky workaround. I'm not super satisfied with this solution since it is quite hacky but at least it works for the time being.

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

I used this code in the Angular controller to extract the ID from the URL.

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

更新4: 因此，看来我又回到了正题.该解决方案打破了快速路由.我现在遇到了与该线程中所述相同的问题，因为启用了locationProvider HTML模式才能使此解决方案正常工作.单击菜单链接时不会加载页面，仅当直接键入时才加载页面.

UPDATE 4: So it looks like I am back to square one. This solution broke the express routing. I am now having the same issue as described in this thread because locationProvider HTML mode is enabled to get this solution to work. Pages aren't loading when clicking on menu links, they are only loading when typed in directly.

Angular在浏览器中直接访问URL时，路由不起作用，但是在单击时起作用?

推荐答案

您可以使用模板文字:在您的网址字符串中.

You can use template literals: in your url string.

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！