5

I am new to MEAN stack, I am trying to create a basic one page application at the moment.

I am trying to connect to the mongodb and then list the values in a certain collection in a controller.

However, when I looked for the answer, I came across this answer Using AngularJs and MongoDB/Mongoose

Which then confuses me as what is the point of having the code below if you can't use it between angular and mongo ? Or are there other interim steps that use it?

var mongoose = require('mongoose');
var db = mongoose.createConnection('mongodb://localhost:3000/database');
var orderSchema = new mongoose.Schema({
    routeFrom : String,
    routeTo : String,
    leaving: String
});
var Order = db.model('Order', orderSchema);
module.exports = Order;

Edit: The situation i am trying to use it in is such:

Geek.html

<div class="jumbotron text-center">
    <h1>Geek City</h1>

    <p>{{tagline}}</p>

    <ul>
        <li ng-repeat="value in dataValues">
            {{value.name}}
        </li>
    </ul>


</div>

GeekController

angular.module('GeekCtrl', []).controller('GeekController', function($scope) {

    $scope.tagline = 'The square root of life is pi!';

    $scope.dataValues = function(){

        var mongo = require('../config/db.js');

        var collectionValues = mongo.myCollection.find();

        return collectionValues;
    };
});
Improve this question

2 Answers 2

Reset to default
5

You cannot require db.js config file in Angular because it's not set to be used on the client side. What you describe is so called 'Isomorphic' approach.

What I mean by that: mongo is a database system (roughly speaking). To get data from the database, we usually don't trust the client. So we have some server-side code (PHP, Ruby, Node.js, Java, what have you) which authorizes the client, processes and filters the data and returns it to the client (in this case Angular.js). So your Mongoose models are set to be used by the server-side javascript and that part of the app. That server side should also serve data to Angular so you'd connect to Node.js from Angular, not directly to Mongo. So the same server that (usually) serves your angular files, will also serve the data it reads from mongo.

If you want server-less data with Angular, you can take a look at Firebase.js. It's angular-ready and it could help you not mess around with Mongo, mongoose and the server-side code.

You could try a hybrid approach with something like meteor.js or backbone.js set to work both on client and server, or take a look at this article for more info.

Or for what it's worth, if you want to run your own Mongo, you could start mongo with --rest, then you'd be able to connect to Angular directly to Mongo, at http://somehost:28017/mydatabase or something similar, depending on your setup.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Oh, that makes more sense now. So, to run my app, i would need to run mongod database, run my server.js which handles the server side, and then run my app.js which handles the front end. This way app.js communicates with server.js for database information? Is this correct? And app.js can communicate with server.js using $https ?
Exactly. If you have a straight-forward resources and not many authorization layers, you can use $resource instead of $http on the frontend - it does all the $http.get, .post, .put, .del methods (as in, you define a $resource, say a Post. Then you tell the $resource provider that posts are at /api/posts server path. Then in your controllers you simply make a new $post, then $post.save(), or $post.query({name: 'Something'}) etc. And on the server side, you can use something like npmjs.org/package/restify-mongoose - so that it makes your Posts on the server-side RESTful.
So when a page is refreshed or changed. It will look for a route to take in routes.js. routes.js will then send the action back to the frontend ? For example, if in my controller i have " $http.get("localhost:8080/geek").success(function(result){" This will try to get that, which will be handled by my routes.js ?
This is related to the question above, I am able to get it to read the object on the database, however now that the front end has received the object, with "res.json(docs);" through routes.js, how do i use this with angular, ie <li ng-repeat = "MailItem in app.dataValues"> - Edit Thank you very much for your help
Yes, you would basically use it with ng-repeat. Not as simple. You have angular.service('dataService', ....) which would fetch the data. You'd have an angular.controller('DataCtrl', ...) which would depend on dataService, and it would say something like $scope.docs = dataService.query();. Then on the controllers' scope, you'd do a <li ng-repeat="doc in docs"> <span>{{$index}} - {{doc.name}}</span></li>. But this is simply explained. Try doing things one at a time. Then as you get stuck, ask questions on SO on specific issues - what you ask now is I think too broad to be answered simply.
|
3

Mongoose is a node module, and as far as I know it doesn't have a front end component, so you won't be using it directly in your frontend js code. It's only going to help you on the server side of your app. If you're relatively new to Node then this stuff can get pretty confusing, since it's all end-to-end javascript and sometimes it's not clear what modules work on the server or frontend, especially since some can do both.

Node, MongoDB, Express, and Mongoose all live on the server.

Angular lives in the browser, and can't use any of the server-side components directly.

Using the MEAN stack, You will be building a node app that uses mongoose to talk to mongodb and express to expose an api to your front end. Then in in your html/js code you'll be using angular and its $http service to talk to the server to get and set data.

There is a great tutorial that walks you through the entire process on scotch.io: http://scotch.io/bar-talk/setting-up-a-mean-stack-single-page-application

Improve this answer

1 Comment

Hey, I have gone through the tutorial, but am confused on how to get data from the database, and set {{..}} values from the controllers.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.