使用 AngularJS 在客户端执行 HTTP 请求

Question

成功完成 this tutorial 后，我开始构建我的应用程序路由来处理数据库中一些虚拟模型的创建，当我通过 Postman 应用程序请求它们时（使用以下 URL：https://lab4-roger13.c9users.io:8080/api/nerds）。

下一步是在 AngularJS 中创建一个服务，以允许用户在客户端请求这些相同的信息。在本教程结束时，我留下了这个：

angular.module('NerdService', []).factory('Nerd', ['$http', function($http) {

return {
    // call to get all nerds
    get : function() {
        return $http.get('/api/nerds');
    },

    a : 2,

            // these will work when more API routes are defined on the Node side of things
    // call to POST and create a new nerd
    create : function(nerdData) {
        return $http.post('/api/nerds', nerdData);
    },

    // call to DELETE a nerd
    delete : function(id) {
        return $http.delete('/api/nerds/' + id);
    }
}       

}]);

这是链接我所有服务和路线的模块：

angular.module('sampleApp', 
['ngRoute', 'appRoutes', 'MainCtrl', 'NerdCtrl', 'NerdService'])
.controller('nerdDB', ['$scope', 'Nerd', function($scope, Nerd) {
    $scope.a = Nerd.a;
}]);

这是我尝试访问的后端路由的示例：

module.exports = function(app) {

    // get all nerds in the database (accessed at GET https://lab4-roger13.c9users.io:8080/api/nerds)
    app.get('/api/nerds', function(req, res) {

        // use mongoose to get all nerds in the database
        Nerd.find(function(err, nerds) {

            // if there is an error retrieving, send the error. 
                            // nothing after res.send(err) will execute
            if (err)
                res.send(err);

            res.json(nerds); // return all nerds in JSON format
        });
    });

如你所想，我可以使用{{a}}表示法访问html处服务的a属性，显示2。但是当我用 get 属性尝试了同样的方法，但没有任何显示。

我不确定，教程在 $http.get 处提供的 URL 是错误的还是我错过了执行和访问 GET 响应的步骤？

（如果我遗漏了任何相关代码，它们与可以在 tutorial link 中找到的代码相同）

Answer 1

Nerd.get() 是 returns 来自 $http 服务的承诺的函数。如果你想在你的视图中显示它的结果，你可以像这样将结果绑定到你的视图：

.controller('nerdDB', ['$scope', 'Nerd', function($scope, Nerd) {
    Nerd.get().then(function(nerds) {
        $scope.nerds = nerds;
    });
}]);

Answer 2

喜欢这个 post 我在使用工厂时遇到了一些问题并在这里找到了解决方案书呆子控制器

angular.module('NerdCtrl', []).controller('NerdController', function($scope, Nerd) {


    $scope.tagline = 'bla bla';

    $scope.nerds = {};
    Nerd.getNerd()
        .then(function (components) {
            $scope.nerds = components;
        }, function (error) {
            console.error(error);
        });

});

作为服务

angular.module('NerdService', []).factory('Nerd', function ($q, $http) {
    return {
      getNerd: function () {
        var deferred = $q.defer(),
          httpPromise = $http.get('/api/nerds');

        httpPromise.success(function (components) {
          deferred.resolve(components);
        })
          .error(function (error) {
            console.error('Error: ' + error);
          });

        return deferred.promise;
      }
   };
});

在 NerdHTML 中使用控制器循环记录

<table ng-controller="NerdController" >
    <tbody>
        <tr ng-repeat="nerd in nerds">
            <td>{{nerd.name}}</td>
            <td>{{nerd.type}}</td>
        </tr>
    </tbody>
</table>

使用 AngularJS 在客户端执行 HTTP 请求

Doing HTTP request on client-side using AngularJS

http

crud

node.js

angularjs