How to archive one page, application using API using NodeJS
I need to create a JavaScript single page web application that fetches data from multiple public and possibly multiple private APIs at regular intervals, and presents and updates data in different tables. I could create it purely as front-end code with jQuery and just use AJAX calls, but in order to store keys and everything for private APIs, I need logic that fetches the API data to work in backend code (on the same server).
I am new to creating such an application and am wondering how to achieve this with NodeJS. After searching and looking at some tutorials, the only way I can wrap myself around so far is to have index.html, which renders the view with empty tables, and then on setInterval, a local JavaScript function makes an AJAX call to the NodeJS (Express) route. which processes all the API stuff and returns a JSON object in response. On success, local JavaScript can write the results in html for different tables / divs.
This sounds good to me, but since it will all have to live on the same server, it seems strange to have front-end script manual calls to the same server via a URL / route.
What am I conceptually missing? Do I need to use Express Express layout and use partials for divs / tables and have a Node backend in the frontend this way? Or should I stick with building .html and .js outside of Express, and perhaps use something like Angular to create a more intuitive UI element? I don't know how any of these scenarios will be stacked, I just feel better for a better approach.
source to share
Posting in response to community Wiki answer, as it was answered in the comments:
How do I approach this app with Angular. Just like you state, you will have an API that is built on nodeJS (a bunch of specific routes that grab data and return JSON) and then your Angular frontend. That's right, every interval your app will call the endpoints you define in your API and then update the $ scope variables based on the JSON response. Your HTML will actually update in real time automatically (as Angular works with glue models and templates / particles). I would look in Angular - sounds like the perfect solution!
Also, once you understand how Angular binding works, you no longer want to write jQuery html () append () or any of these DOM manipulation functions again.
source to share