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).
$scope.cars = data.cars;not$scope.cars = data;. You project layout is good.index.jade? I mean theangular.jsand yourCarListController.js. And in yourindex.jadedid you check theng-appstuff 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.