CODEWITHSUNDEEP
angularjsnode.jsmongodbexpressmean-stack
Rich Lake
Rich Lake

Reputation: 25

MEAN stack - display information from MongoDB in the front end

I am trying to build a basic MEAN stack app and am getting really confused about how to display information stored in mongodb in front end. What is the established process fo making a database query and then displaying that in the views. Should the server be making the db request and angular display the information? In all of the tutorials I have been looking through the interaction between mongodb and angular / front end seems to be very foggy.

At the moment (as i am setting up a tennis ladder app) I just want to display the list of players on the index page by querying the database for that information. Is this the correct approach?

Apologies for the vague question but i am really struggling to understand how this is achieved. I have been using Rails recently as comparison (though obviously very different) and in that case you could query the databse using ActiveRecord and define a variable to the result of that query, then use that variable in your view to display the data...

Upvotes: 2

Views: 1353

Answers (1)

unobf
unobf

Reputation: 7244

The first thing to understand about Angular.js is that it is a singe page framework and not a full page refresh (multi-page) framework. So if you are fetching dynamic data from the server, there are two ways to do this.

  1. You can fetch "partial" HTML snippets from the server, or
  2. You can fetch JSON from the server

Or you can do a combination of the two (use partials for the static portions of the content and JSON for the data). The latter is the most Angular.js way of doing things - you fetch JSON data and use the Angular.js data binding to update the HTML.

I would suggest that you begin by becoming very familiar with Angular.js. There are a lot of tutorials out there and this example will walk you through creating a MEAN application using Yeoman http://www.ibm.com/developerworks/library/wa-mean1/index.html. This should help you understand the concepts better.

Upvotes: 1

Related Questions