“Places2Go” and the MEAN Stack (IV)

4 min readMar 3, 2017

In the previous post we have the angular app created with a simple service, but the data from that service is stored in a JSON variable.

Could we get this data from a MongoDB database? Of course, yes! But, indeed, we don´t access to a MongoDB db, but also through and API REST in the server side… and in the server is the component that access to the Mongo DB. Ok, but what are the steps to do that…?

Let´s see it on this post

Source Code

The Full Source Code is available on GitHub:

https://github.com/Pabloin/mean-stack-talk

The project

Our project, how we left from the previous post, look like this:

and the result when we run the app is the following:

Let´ start

#01: API REST — The server Side

First, we are going to define a new service in node.js to serve the content. In reality we will follow again the steps from our previous post about Backend API REST with NodeJS

Let´s add the data, we can use postman:

or we can use robomongo instead:

The get

#02: Front End — The client Side

The steps in angular2 to consume an API REST is by using an HTTP component, that we should define as provider. If we created our project with angular-cli we already have this component defined as a provider

So, let add it to service:

Our service class have the hard components:

Next, let´s add the service, using the http module an the promises

#03: Front End — Backend Integration

It is important enable CORS origin, because the client is running on http://localhost:4200 and the server is running on http://localhost:3000

So, we should enable CORS origin with the following config on server:

and the result is the page with data from the Mongo Db through the API REST

Problems #02

CORS origin

thats the reason on Nodejs+express compponent app_users.js add the following line of code:

res.setHeader('Access-Control-Allow-Origin', '*');

Problems #02

We can observe that invocation is async, because we use a Promise. But there is a second o less that data in the front have undefinited values until the data with the promise arrive. This delay produce an error in the home page that crashed the app:

the other possibility is avoid undefined values setting an empty array when the class is created.

Closing the post:

Let´s end the post at this point. we should also implement the other methods (save User, update User, etc), also we could explore other two ways to consume the api rest:

a) without promises, and with “map”: It is very common