CODEWITHSUNDEEP
node.jsangularjsexpressmean-stack
Tyvain
Tyvain

Reputation: 2760

Node.JS controller not called

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).

Upvotes: 0

Views: 2135

Answers (1)

Shaun Xu
Shaun Xu

Reputation: 4666

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;
        });
    });
);

Upvotes: 2

Related Questions