【问题标题】:mean.js $resource to call express server RESTful APImean.js $resource 调用快速服务器 RESTful API
【发布时间】:2015-01-17 22:08:44
【问题描述】:

我完全没有 Web 开发背景,但看到 mean.js 越来越受欢迎,我真的很想试一试。

我已经在线学习了教程,所以我基本上已经开始、运行和修改了示例应用程序,但现在我正在尝试做一些教程之外的事情。结果我对express和angular有了基本的了解

我一直在尝试将激活器 npm 包 (https://www.npmjs.org/package/activator) 集成到应用程序中,虽然我已经设法适应角度位,但我无法插入快速位。这让我产生了一个非常根本的疑问,我还没有真正找到答案。我知道在平均值中,角度代码使用在 express 中创建的 REST API 连接到 express 代码。我相信使用角度服务会发生这种情况。但我不明白怎么做。例如,用户模块定义了以下服务:

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

谁能解释一下这是如何工作的?

另外,如果我在快递方面有一些代码说:

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

如何通过 Angular 调用它?我知道我们使用 ngResource 模块中的 $resource 来实现,但我真的不明白如何。

任何帮助将不胜感激。

【问题讨论】:

    标签: node.js rest express angularjs-service meanjs


    【解决方案1】:

    将这些东西联系在一起可能会有点混乱。我认为要理解的是,在服务器端使用 Express 时,您需要围绕路由建模 API,并处理与您将被交给的 reqres 对象的通信。

    首先在客户端,举一个简单的例子,我通常使用$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
    
                    // ...
    
                });
            };
        }
    ]);
    

    现在假设服务器端一切正常,我们将收到我们的用户列表,并以resource 的形式传递给第一个函数。

    在服务器端,我们需要配置我们的路由(无论在哪里配置)以包含我们的用户控制器,该控制器将用作我们的用户 API。因此,也许在这个应用程序中,我们有一个 routes 目录,其中包含我们所有的 Express 路线(有关 Express 路线的更多信息,请参阅 app.route documentation)。我们还有一个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 传递)。

    这有意义吗?

    【讨论】:

    • 这是迄今为止我在互联网上任何地方读到的最好的示例解释之一!我非常喜欢不再购买 MEAN Web 开发书!但是,既然您已经走了这么远,您能否还添加我如何在此示例中为 get 请求传递参数,例如用户 ID。
    • 谢谢,你说得真好! :) 乐意效劳!要传递参数,通常我会在路由 (/api/users/:userId) 中定义参数,然后在控制器中通过 req.params.userId 访问它。欲了解更多信息see the documentation on req.params。还有documentation on req.body 来处理POST 请求。几个月前我为帮助一些人而写的这个应用程序也可能会让你受益:github.com/dylants/colors
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-01-10
    • 2011-01-29
    • 2014-09-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多