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

【问题标题】：AngularJS - Wait to Load data to display the viewAngularJS - 等待加载数据以显示视图
【发布时间】：2016-07-16 17:50:55
【问题描述】：

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

【问题讨论】：

请查看SO question 的答案，并查看here 的加载指示器。
一般的想法是你把你的 $http 调用放在一个服务中，然后从你的控制器内部调用它，在那里你可以相应地处理输出。尝试阅读更多关于 Angular 中的 $http、$q 和工厂服务

标签： javascript angularjs

【解决方案1】：

执行此操作的适当方法是使用路由的resolve 属性。来自the documentation：

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

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

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

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

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

【讨论】：