Displaying OpenEdge Data in an AngularJS Web App

by dcinglis

For my next project I was tasked with displaying data from a backend OpenEdge service on a modern web app built on AngularJS. As is often the case, Node.js is the perfect middleman to bridge the gap between backend and frontend. OpenEdge data can be accessed from Node using a Javascript Data Object (JSDO). I initialize the JSDO within a server-side instance of Node and then populate it with data from an OpenEdge temp-table using the JSDO.fill() method. In just a few lines of code the JSDO can be converted into an array of javascript objects, each object containing several key:value pairs representing various properties of each entry in the database (in this case I had a list of companies, with data fields like street address, city, state, and zip code for each company).

 

Once the data is in this array form we are back into a more typical use case of Node and Angular within the MEAN stack. I make the data accessible from Node through a RESTful API using Express. Angular accesses the data by sending a GET request to Node, which responds with a string form of the array. Angular receives this response and formats the data in an HTML table using the ng-repeat directive to iterate through the array. Note that by default, client-side Javascript can only send requests to endpoints on the same server as a security measure, so I had to enable Cross Origin Resource Sharing (CORS) on both the client and server side of the project in order for Angular to make an HTTP request to the remote Node server. With this in place, our stack is complete:

Screen Shot 2014-08-19 at 4.35.55 PM

Project Architecture.

One of the goals of this project was to host everything on Modulus, so I had to find some way to serve static web content using Node. Luckily, there’s a Node package exactly for this purpose (it seems there always is). Called Serverfy, you can simply run this package in your directory of static web content and it automatically re-formats everything into the Node application format. In a nutshell, it utilizes the node-static module to format the server correctly, then responds to each GET request for page data by serving the entire HTML file as a response. My (very simple) data table is pictured below, but once you have the data it’s easy to dress it up with a nice UI and display it in a visually appealing format to the end user.

Screen Shot 2014-08-19 at 3.52.09 PM

Data Table in Angular

 

 

Advertisements