Mean.js $ resource to call express RESTful API server
I'm coming from completely non-web development, but after seeing the traction that mean.js is gaining, I really wanted to give it a shot.
I followed the tutorials online, so I basically started, run and modified the sample app, but now I'm trying to do something that is tutorial-related. As a result, I have a basic understanding of expression and angular
I am trying to integrate the npm activation package ( https://www.npmjs.org/package/activator ) into my application and while I managed to fit in angular bits I am having trouble connecting express bits. This brings me to a very fundamental doubt that I really couldn't find answers to. I know in Mean, angular code connects to express code using REST API built in express. And I believe this is happening with angular services. But I don't understand how to do it. For example, a custom module has the following service:
angular.module('users').factory('Users', ['$resource',
function($resource) {
return $resource('users', {}, {
update: {
method: 'PUT'
}
});
}
]);
code>
Can anyone explain how this works?
Also if I have code on express side say:
var sayHello = function(name){
return "Hello"+name;
}
code>
How can I call this via angular? I know we are using $ resource for the ngResource module, but I really don't understand how to do this.
Any help would be much appreciated.
source to share
Putting these things together can be a little confusing. I think what needs to be understood is that when using Express on the server side, you need to model your API around the route and handle the messages with the objects req
and res
that will be passed to you.
So, client side first, using a simple example, I usually use $resource
as a way to wrap HTTP / ajax data, which I don't, I want to worry. So I will write my service as such:
"use strict";
angular.module("myModule").factory("UserService", ["$resource",
function($resource) {
var resource;
resource = $resource("/api/users", null, {
listUsers: {
method: "GET",
isArray: true
}
});
return resource;
}
]);
(Note that I am passing this parameter to isArray
this resource as I expect an array of users to return - which is not always the case for all APIs).
Then, to take advantage of this resource, perhaps in my controller I will have code like this:
"use strict";
angular.module("myModule").controller("UserCtrl", ["$scope", "UserService",
function($scope, userService) {
$scope.loadUsers = function() {
userService.listUsers(function(resource, headers) {
// this function is called on success, with the result
// stored within the `resource` variable
// ...
}, function(response) {
// this function is called on error
// ...
});
};
}
]);
Now, assuming everything is going right on the server side, we get a list of users who will play with the first function passed in as resource
.
On the server side, we need to set up our routes (wherever they are configured) to enable our custom controller that will serve as our custom API. So maybe this app has a directory routes
that contains all of our Express routes (see the app.route documentation for more information on Express routes). We also have a directory controllers
that contains all of our Express controllers that handle the logic for our routes. Following the example of the "users", we will define a route that matches the /api/users
$resource
above route in our Angular code:
"use strict";
var controller = require("../controllers/user");
module.exports = function(app) {
app.route("/api/users").get(controller.listUsers);
};
This code takes Express as an expression app
and defines one route for /api/users
as an HTTP request GET
(note the .get
called function ). The logic for this route is defined in the custom controller, which would be something like this:
"use strict";
exports.listUsers = function(req, res) {
var users;
// ...somehow populate the users to return...
res.send(users);
};
We've left information on how to populate this array of users, but hopefully this gives you the idea. This controller is passed by the req
(request) and res
(response) HTTP objects as input, so it can query the request object for details of what the user has passed in and has to send some kind of response back to the user in the request / response loop. In this example, I'm using a function res.send
to simply send back our JavaScript array (which will be passed as JSON).
It makes sense?
source to share