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

我对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调用创建服务的人，有必要吗？为什么更好

正确的方法是使用路由的

resolve

属性。发件人：

解析-

{Object.=}

-应注入控制器的可选依赖关系映射。如果这些依赖项中的任何一个是承诺，路由器将在控制器实例化之前等待它们全部被解析或一个被拒绝。如果成功解析所有承诺，则注入已解析承诺的值并触发$routeChangeSuccess事件。如果任何承诺被拒绝，将触发$routeChangeError事件。地图对象是：

• key–

  {string}

  ：要注入控制器的依赖项的名称
• 工厂-

  {string | function}

  ：如果是string，则它是服务的别名。否则，如果为函数，则注入该函数，并将返回值视为依赖项。如果结果是一个承诺，则在将其值注入控制器之前对其进行解析。请注意，ngRoute.$routeParams仍将引用这些解析功能中的上一条路由。改为使用$route.current.params访问新的路由参数

因此，如果您希望在路由器转到poney列表页面之前从后端检索poney，则必须

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调用并返回小马列表的代码放在服务中，并在解析中使用该服务。

请查看此问题的答案，并查看加载指示器。总体思路是将$http调用放在服务中，然后从控制器内部调用它，在那里，您可以相应地处理输出。尝试阅读更多关于$http、$q和angular中的factory服务的信息