Hello,
I am developing an Creative Cloud Extension using AngularJS.
During the first step, I was using mocked services to display datas. This
was working great.
For the next step, I wanted my extension to consume real RESTful web
services. (Using $resrouce module).
So I created a NodeJS RESTful server, using Express and MongoDB as database
provider.
*Here it is my NodeJS server configuration (BackEnd):*
var express = require('express'),
fabrics = require('./routes/fabrics');
var app = express();
//CORS middleware
var allowCrossDomain = function(req, res, next) {
res.header('Access-Control-Allow-Origin', "*");
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
}
app.configure(function() {
app.use(express.bodyParser());
app.use(express.cookieParser());
app.use(express.session({ secret: 'cool beans' }));
app.use(express.methodOverride());
app.use(allowCrossDomain);
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
app.get('/fabrics', fabrics.findAll);
app.get('/fabrics/:id', fabrics.findById);
app.post('/fabrics', fabrics.addFabric);
app.put('/fabrics/:id', fabrics.updateFabric);
app.delete('/fabrics/:id', fabrics.deleteFabric);
app.listen(8080);
console.log('Listening on port 8080...');
*Here it iis route.js: *
var mongo = require('mongodb');
var Server = mongo.Server,
Db = mongo.Db,
BSON = mongo.BSONPure;
var server = new Server('localhost', 27017, {auto_reconnect: true});
db = new Db('fabricsdb', server);
db.open(function(err, db) {
if(!err) {
console.log("Connected to 'fabrics' database");
db.createCollection('fabrics', {strict:true}, function(err,
collection) {
if (err) {
console.log("The 'fabrics' collection doesn't exist.
Creating it with sample data...");
populateDB();
}
});
}
});
exports.findById = function(req, res) {
var id = req.params.id;
console.log('Retrieving fabric: ' + id);
db.collection('fabrics', function(err, collection) {
//collection.findOne({'_id':new BSON.ObjectID(id)}, function(err,
item) {
collection.findOne({'id':id.toString()}, function(err, item) {
res.send(JSON.stringify(item));
});
});
};
exports.findAll = function(req, res) {
console.log('Retrieving all fabric');
db.collection('fabrics', function(err, collection) {
collection.find().toArray(function(err, items) {
res.send(JSON.stringify(items));
});
});
};
exports.addFabric = function(req, res) {
var fabric = req.body;
console.log('Adding fabric: ' + JSON.stringify(fabric));
db.collection('fabrics', function(err, collection) {
collection.insert(fabric, {safe:true}, function(err, result) {
if (err) {
res.send({'error':'An error has occurred'});
} else {
console.log('Success: ' + JSON.stringify(result[0]));
res.send(JSON.stringify(result[0]));
}
});
});
}
exports.updateFabric = function(req, res) {
var id = req.params.id;
var fabric = req.body;
console.log('Updating fabric: ' + id);
console.log(JSON.stringify(fabric));
db.collection('fabrics', function(err, collection) {
collection.update({'_id':new BSON.ObjectID(id)}, fabric,
{safe:true}, function(err, result) {
if (err) {
console.log('Error updating fabric: ' + err);
res.send({'error':'An error has occurred'});
} else {
console.log('' + result + ' document(s) updated');
res.send(JSON.stringify(fabric));
}
});
});
}
exports.deleteFabric = function(req, res) {
var id = req.params.id;
console.log('Deleting fabric: ' + id);
db.collection('fabrics', function(err, collection) {
collection.remove({'_id':new BSON.ObjectID(id)}, {safe:true},
function(err, result) {
if (err) {
res.send({'error':'An error has occurred - ' + err});
} else {
console.log('' + result + ' document(s) deleted');
res.send(JSON.stringify(req.body));
}
});
});
}
/*--------------------------------------------------------------------------------------------------------------------*/
// Populate database with sample data -- Only used once: the first time the
application is started.
// You'd typically not find this code in a real-life app, since the
database would already exist.
var populateDB = function() {
var printFabrics = [
{
"name": "art-deco",
"id": "1",
"comment": "art déco print",
"url": "img/fabrics/print/art-deco.jpg"
},
{
"name": "BlackHibiscus",
"id": "2",
"comment": "hibiscusprint",
"url": "img/fabrics/print/BlackHibiscus.jpg"
},
{
"name": "flowers",
"id": "3",
"comment": "flowersprint",
"url": "img/fabrics/print/flowers.jpg"
},
{
"name": "military",
"id": "5",
"comment": "militaryprint",
"url": "img/fabrics/print/military.jpg"
},
{
"name": "paisley",
"id": "6",
"comment": "paisleyprint",
"url": "img/fabrics/print/paisley.jpg"
},
{
"name": "palominobrown",
"id": "7",
"comment": "brownpalominoprint",
"url": "img/fabrics/print/Palomino_Brown.jpg"
},
{
"name": "skull",
"id": "8",
"comment": "skullprint",
"url": "img/fabrics/print/skull.jpg"
},
{
"name": "skullbandana",
"id": "9",
"comment": "skullbandanaprint",
"url": "img/fabrics/print/skullbandana.jpg"
},
{
"name": "coloredskull",
"id": "10",
"comment": "coloredskullprint",
"url": "img/fabrics/print/skull-color.jpg"
},
{
"name": "stars",
"id": "11",
"comment": "starsprint",
"url": "img/fabrics/print/stars.jpg"
},
{
"name": "tetris",
"id": "12",
"comment": "tetrisprint",
"url": "img/fabrics/print/Tetris.jpg"
},
{
"name": "coloredzigzag",
"id": "13",
"comment": "coloredzigzagprint",
"url": "img/fabrics/print/zigzag-color.jpg"
},
{
"name": "pinkzigzag",
"id": "14",
"comment": "pinkzigzagprint",
"url": "img/fabrics/print/zigzag-pink.jpg"
}
];
db.collection('fabrics', function(err, collection) {
collection.insert(printFabrics, {safe:true}, function(err, result)
{});
});
};
*In my Extension (FrontEnd), this is how I try to consume the rest
service: *
*Service*:
var printFabricsServices = angular.module('printFabricsServices',
['ngResource']);
printFabricsServices.factory('restListService', [ '$resource',
function($resource) {
return $resource('http://toto:8080/fabrics',{}, {
query : {
method : 'GET',
isArray: true
}
});
} ]);
*Controller:*
var controllers = angular.module('printFabricControllers', []);
controllers.controller('printFabricsListController', [
'$scope',
'restListService',
function($scope, restListService) {
$scope.printFabrics = [];
$scope.layout = 'grid';
//Using Rest
$scope.getPrintFabricsUsingRest = function(){
console.log('using rest service');
$scope.printFabrics = restListService.query();
};
} ]);
*And my application module definition:*
var myApp = angular.module('myApp', [
'ngRoute',
'printFabricControllers',
'printFabricsServices'
]);
myApp.config([ '$routeProvider', '$httpProvider',
function($routeProvider, $httpProvider) {
// header stuff
$httpProvider.defaults.useXDomain = true;
$routeProvider.when('/printFabrics', {
templateUrl : 'partials/printFabricsList.html',
controller : 'printFabricsListController'
}).when('/printFabrics/:id', {
templateUrl : 'partials/printFabricsDetail.html',
controller : 'printFabricDetailController'
}).otherwise({
redirectTo : '/printFabrics'
});
} ]);
Something should be wrong with what I have done. Request sent. But I do not
know if it is correctly formatted (headers?).
Request never received by my RESTFul server.
Any ideas about what is going wrong?
Any help would be appreciated.
Thx,
Thomas.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
