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

AngularJS - Wait to Load data to display the view

提问by QoP

I am really new to AngularJS and after reading several questions and some articles I am a little confused about the correct way to load data and wait till its loaded to display the view.

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

My controller looks like this

我的控制器看起来像这样

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

I have seen there are people who create a service for $http calls, is it necessary? Why is it better?

我看到有人为 $http 调用创建服务，有必要吗？为什么更好？

回答by JB Nizet

The appropriate way to do that is to use the resolveproperty of the route. From the documentation:

适当的方法是使用resolve路由的属性。从文档：

resolve - {Object.<string, function>=}- An optional map of dependencies which should be injected into the controller. If any of these dependencies are promises, the router will wait for them all to be resolved or one to be rejected before the controller is instantiated. If all the promises are resolved successfully, the values of the resolved promises are injected and $routeChangeSuccess event is fired. If any of the promises are rejected the $routeChangeError event is fired. The map object is:

• key – {string}: a name of a dependency to be injected into the controller.
• factory - {string|function}: If string then it is an alias for a service. Otherwise if function, then it is injected and the return value is treated as the dependency. If the result is a promise, it is resolved before its value is injected into the controller. Be aware that ngRoute.$routeParams will still refer to the previous route within these resolve functions. Use $route.current.params to access the new route parameters, instead.

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

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

So, if you want poneys to be retrieved from the backend before the router goes to the poney list page, you would have

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

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

And your controller would be defined as

你的控制器将被定义为

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

Of course, you could also put the code making the $http call and returning a list of poneys in a service, and use that service in the resolve.

当然，您也可以将进行 $http 调用并返回服务中的小马列表的代码放入并在解析中使用该服务。