Question

我是AngularJS的新手，在阅读了几个问题和一些文章之后，我对加载数据的正确方法感到有点困惑，并等到加载数据以显示视图。

我的控制器看起来像这样

app.controller('ResultsController', ['$scope','$http', '$routeParams', function($scope, $http, $routeParams) {
    $scope.poll = {};
    $scope.$on('$routeChangeSuccess', function() {
        showLoader();
        $http.get("rest/visualizacion/" + $routeParams.id)
          .success(function(data) {
              $scope.poll = data;
              hideLoader();
           })
           .error(function(data) {
              // Handle error
           });
    });     
}]);

我看到有人为$ http电话创建服务，是否有必要？为什么更好？

Answer 1

这样做的恰当方法是使用路由的resolve属性。来自the documentation：

resolve - {Object.<string, function>=} - 应该注入控制器的可选依赖关系图。如果这些依赖项中的任何一个是promise，路由器将等待它们全部被解析或者在实例化控制器之前被拒绝。如果成功解决了所有promise，则会注入已解析的promise的值并触发$ routeChangeSuccess事件。如果任何promise被拒绝，则触发$ routeChangeError事件。地图对象是：


key - {string}：要注入控制器的依赖项名称。

factory - {string|function}：如果是string，则它是服务的别名。否则，如果是函数，则将其注入，并将返回值视为依赖项。如果结果是一个promise，则在将其值注入控制器之前解析它。请注意，ngRoute。$ routeParams仍将引用这些解析函数中的上一个路由。而是使用$ route.current.params来访问新的路由参数。

因此，如果您希望在路由器进入poney列表页面之前从后端检索poneys，那么您将拥有

resolve: {
    poneys: function($http) {
        return $http.get('/api/poneys').then(function(response) {
            return response.data;
        )};
    }
}

您的控制器将被定义为

app.controller('PoneyListCtrl", function($scope, poneys) {
    $scope.poneys = poneys;
    // ...
});

当然，您也可以将代码发出$ http调用并返回服务中的poneys列表，并在解析中使用该服务。

AngularJS - 等待加载数据以显示视图

1 个答案: