How to display the contents of mongo db in front end?

Question

I am working on MEANSTACK and I am new to it. My requirement is that I want the contents of mongo db to be displayed on the web page. I believe this could be done using angular js. I have created a module named 'display' along with the angular modules of MEAN stack with server, client and test folders inside it. In the config folder of client, there are two files, users.client.menus.js and users.client.routes.js

The following is users.client.menus.js,

(function () {
  'use strict';

  angular
    .module('display')
    .run(menuConfig);

  menuConfig.$inject = ['menuService'];

  function menuConfig(menuService) {
  menuService.addMenuItem('topbar',{
      title: 'Display Table',
      state: 'display',
      type:'label',
      roles: ['*']
    });
  }
  }());

users.client.routes.js

(function () {
  'use strict';

   angular
    .module('display.routes')
    .config(routeConfig);

    routeConfig.$inject = ['$stateProvider'];
    function routeConfig($stateProvider) {
    $stateProvider
    .state('display',{
        url: '/display',
        templateUrl: 'modules/display/client/views/display.client.view.html',
        controller: 'DisplayController',
        controllerAs: 'vm',
        data: {
            roles: ['user','admin'],
            pageTitle: 'Display'
        }
    });

    }

  }());

The controller file is as follows: display.client.controller

(function () {
  'use strict';

  angular
    .module('display')
    .controller('DisplayController', DisplayController);

    DisplayController.$inject = ['$scope', 'displays','Authentication'];

    function DisplayController($scope,displays,Authentication) {
      $scope.authentication = Authentication;
      var vm = this;
      vm.displays = displays;
    }

  }());

display.client.view.html

<section data-ng-controller="DisplayController">
    <div class="page-header">

    <h1>Display</h1>
  </div>
<form class="col-xs-12 col-md-offset-4 col-md-4">
    <fieldset class="row">
        <div class="panel panel-default" data-ng-init="find()">
            <table class="table table-hover table stripped">
                <thead>
                    <tr>
                        <th>Details</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="displayNames in testData" data-ng-href="#!/display/{{displayNames.displayName}}">
                        <h4 data-ng-bind="displayNames.displayName"></h4>
                        <td>{{displayNames.displayName}}</td>
                    </tr>
                </tbody>
            </table>
        </div>


    </fieldset>
</form>


</section>

In the server, I have the models folder, display.server.model.js

'use strict';

var mongoose = require('mongoose'),
    Schema = mongoose.Schema;
var User = new mongoose.Schema({
    displayname:{
        type: String,
        default:''
    },
    username:{
        type: String,
        default:'',
        unique: true,
        required:'UserName Cannot be empty'
    },
    email:{
        type: String,
        default:'',
        unique: true,
        required:'Email cannot be empty'
    },
    user:{
        type: Schema.ObjectId,
        ref: 'User'
    }

});

mongoose.model('Display',User);

I just want to know the additional folders that are required to complete the task and also how can I accomplish the requirement.

Thanks, in advance.

Answer 1

For accessing data from database you need a server and some APIs to be running on that server that would get data from database and then send the response on the frontend just like native client server architecture. So to get the data from database you need to write APIs and if you are writing code in javascript you would need a nodejs application that will have interaction with the database. You can read this article on how to make REST APIs and make use of them on frontend Angularjs application. Happy Learning. Cheers:)