0

I have an issue in my MEAN stack application. I am new in node, angular, mongoDB, express, jade... that may explain why I failed...

I didn't find a single tutorial matching all my requieremnt, so I build this application from different tutorials but they never use the same way to access/organize data. Sometimes they declare services, somtimes they use route provider...

So here is how I set up my application:

   app.js
   package.json
   routes.js

---config
       auth.js
       database.js
       passport.js

---node_modules
[...]
---public
   +---images
   +---javascripts
   |   |   CarListController.js
   |   |   
   |   \---vendor
   \---stylesheets
           style.css

---views
       index.jade
       layout.jade
       login.jade
       profile.jade

The problem is in my index.jade. Here I want to display a list of cars (and later do a search on that list).

So I create a controler (CarListController.js):

function CarListController($scope, $http) {
    console.log('Calling CarListController'));
    $http.get('/api/cars').success(function(data) {
          $scope.cars = data.cars;
        });
    });

In my routes.js I retrieve the car list in json:

module.exports = function(app, passport) {

app.get('/api/cars', function(req, res) {
// load the things we need
var mongoose = require('mongoose');

// define the schema for our user model
var carSchema = mongoose.Schema({
    marque        : String,
    modele        : String,
    desc          : String
 });

// create the model for users and expose it to our app
var Car = module.exports = mongoose.model('Car', carSchema);

    // use mongoose to get all cars in the database
        Car.find(function(err, car) {
    console.dir(car);
            // if there is an error retrieving, send the error. nothing after res.send(err) will execute
            if (err)
                res.send(err)

            res.json(car); // return all cars in JSON format
        });
    });
app.get('/', function(req, res) {       
    res.render('index.jade') // load the index.jade file
});

And finally in my index.jade:

html(lang='fr', ng-app='LocatyvModule')
head
 meta(charset='utf-8')
 title My AngularJS App
 link(rel='stylesheet', href='/stylesheets/style.css')
 script(type='text/javascript', src='/javascripts/vendor/angular/angular.js')
 script(type='text/javascript', src='/javascripts/vendor/angular-bootstrap/ui-bootstrap-tpls.js')
 script(type='text/javascript', src='/javascripts/LocatyvModule.js')
 script(type='text/javascript', src='/javascripts/CarListController.js')
body
 div.container(ng-controller="CarListController")
  div
   div.row.car(ng-repeat="car in cars")
     p A CAR!

When I call "localhost:8080/api/cars" -> it's ok I get 3 cars that I have in my DB.

When I call my index.jade I don't get 3 lines, and I don't get the trace in the controller. What did I do wrong?

Also i think my project organisation is not very good (if you have somme tips feel free to say).

10
  • Are you sure the result is $scope.cars = data.cars; not $scope.cars = data;. You project layout is good. Commented Mar 26, 2014 at 1:07
  • Not working as well, but the problem is I don't see the trace log that I put in my controller, so it's not even called. Commented Mar 26, 2014 at 2:18
  • do I need to declare my controller somewhere? Sometime I see that there are services in tutorials, is it necessary? Commented Mar 26, 2014 at 2:26
  • Did you includes all necessary JavaScripts in your index.jade? I mean the angular.js and your CarListController.js. And in your index.jade did you check the ng-app stuff was added and related JavsScript codes was includes in this page. Personally I don't agree with the way you are building your system. You are mixing server side mvc (express jade) with client side mvc (angular). You'd better choose one of them, either jade or angular, but may not both. Commented Mar 26, 2014 at 2:41
  • @ShaunXu - The OP isn't (in this example anyway) mixing MVC between (across, maybe?) server and client, but simply using Jade as a more terse alternative to writing HTML - no model is used in the Jade above. To your point however, I agree that mixing the two is probably best avoided, simply because it is a (most probably) needless complication. I can imagine some cases where doing so might be reasonable if approached very deliberately, but they would be atypical. Agree also it would be helpful to see see the included scripts for the client side, a missing one is probably the issue. Commented Mar 26, 2014 at 4:55

1 Answer 1

2

I think the problem is you didn't have angular module and your controller registered. You can try code below in your controller JavaScript.

var app = angular.module('LocatyvModule', []);
app.controllers.controller('CarListController', function ($scope, $http) {
    console.log('Calling CarListController'));
    $http.get('/api/cars').success(function(data) {
          $scope.cars = data.cars;
        });
    });
);
Sign up to request clarification or add additional context in comments.

1 Comment

it's working now. I think I will also reorganize my project to be more MVC, and getting rid of jade. tx

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.