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.但是当我尝试使用{{1}时没有显示任何东西。

我不确定，教程在get错误提供的网址是错误的，还是我错过了要做的步骤并访问GET响应？

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

Answer 1

Nerd.get()是一个从$http服务返回承诺的函数。如果您想在视图中显示结果，可以将结果绑定到您的视图，如下所示：

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

Answer 2

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

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;
      }
   };
});

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

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

使用AngularJS

2 个答案: