使用 mean.js 中的 $resource 调用 express 服务器的 RESTful API

Question

使用 mean.js 中的 $resource 调用 express 服务器的 RESTful API

node.jsrestexpressangularjs-servicemeanjs

3

我来自一个完全非Web开发背景，但看到mean.js取得的成功后，我真的想尝试一下。

我已经在网上跟着教程开始、运行和修改了示例应用程序，但现在正在尝试做一些不在教程中的事情。因此，我对express和angular有了基本的了解。

我一直在尝试将activator npm包（https://www.npmjs.org/package/activator）集成到应用程序中，虽然我已经成功地整合了angular部分，但我在插入express部分时遇到了麻烦。这带给了我一个非常根本的疑问，我还没有真正找到答案。我知道，在Mean中，angular代码使用在express中创建的REST API连接到express代码。我相信这是使用angular服务实现的。但我不明白是如何实现的。例如，用户模块定义了以下服务:

angular.module('users').factory('Users', ['$resource',
    function($resource) {
        return $resource('users', {}, {
            update: {
                method: 'PUT'
            }
        });
    }
]);

有人能解释一下这个是如何工作的吗？

此外，如果我在express端有些代码，比如：

var sayHello = function(name){
 return "Hello"+name;
}

我该如何通过Angular调用它？我知道我们可以使用ngResource模块中的$resource来实现，但我并不真正理解如何操作。

任何帮助将不胜感激。

- Karan Kapoor

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dylants · Accepted Answer

连接这些东西在一起可能会有点困惑。我认为理解的关键是，在服务器端使用Express时，您需要围绕路由对API进行建模，并处理您将要处理的req和res对象之间的通信。

因此，首先在客户端上，举个简单的例子，我通常使用 $resource 作为包装HTTP / ajax详细信息的方法，我不想担心。因此，我会编写我的服务如下：

"use strict";

angular.module("myModule").factory("UserService", ["$resource",
    function($resource) {
        var resource;

        resource = $resource("/api/users", null, {
            listUsers: {
                method: "GET",
                isArray: true
            }
        });

        return resource;
    }
]);

请注意，我向此资源传递了isArray参数，因为我希望返回用户数组，但并非所有API都是如此。

然后，为了利用该资源，也许在我的控制器中，我会有如下代码：

"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

                // ...

            });
        };
    }
]);

假设服务器端一切顺利，我们将在第一个函数中将要使用的用户列表作为资源传递过来。

在服务器端，我们需要配置我们的路由（无论这些路由在哪里配置），以包括我们的用户控制器，它将作为我们的用户API。因此，在这个应用程序中，我们可能有一个包含所有Express路由的routes目录（有关Express路由的更多信息，请参见app.route文档）。我们还有一个controllers目录，其中包含所有处理路由逻辑的Express控制器。继续使用“用户”示例，我们将定义一个路由，该路由与我们在Angular代码中上面定义的/api/users$resource路由相匹配：

"use strict";

var controller = require("../controllers/user");

module.exports = function(app) {
    app.route("/api/users").get(controller.listUsers);
};

这段代码将 Express 的“app”作为输入，并定义了一个单一路由用于“/api/users”的“GET” HTTP 请求（请注意调用的“.get”函数）。该路由的逻辑在用户控制器中定义，类似于以下内容：

"use strict";

exports.listUsers = function(req, res) {
    var users;

    // ...somehow populate the users to return...

    res.send(users);
};

我们并没有详细说明如何填充该用户数组，但希望这可以给您一个想法。该控制器将传递req（请求）和res（响应）HTTP对象作为输入，因此它可以查询请求对象以获取有关用户传入内容的详细信息，并必须向用户发送一些响应以完成请求/响应循环。在这个例子中，我使用res.send函数简单地发送回我们的JavaScript数组（将作为JSON传递）。这有意义吗？