Javascript AngularJS-一些动态内容加载得很晚

我有一个Angular JS应用程序，其中一些动态数据行通过rest API加载。这部分html数据在整个页面加载后很晚才加载，因此看起来很糟糕

HTML

<div class="row">
    <div class="form-group" ng-repeat="rows1 in entity.pageSection1Rows">
        <!-- Around five html columns  -->
        <!-- The CONTENTS here loads very late after the whole page is loaded -->
    </div>
</div>

<div class="row">
    <div class="form-group" ng-repeat="rows2 in entity.pageSection2Rows">
        <!-- Around five html columns  -->
        <!-- The CONTENTS here loads very late after the whole page is loaded -->
    </div>
</div>  

---

您可以将这些调用添加到routeProvider，以确保在加载页面之前加载它们，或者添加一个ng show（如果尚未加载所有数据，则为false），并显示加载。。。我可以给你一个建议。在路由配置中使用解析部分。例如：

route.when（'/'，{resolve:{dropdown1:function（$http）{…}}}）

下面是一个例子

    myApp.controller('createController', function($scope, $http, $location) {

    $scope.entity = {};

    $http.get("/restapi/serviceA")
    .success(function(data, status, headers, config) {
        $scope.entity.pageSection1Rows = data;
    });

    $http.get("/restapi/serviceB")
    .success(function(data, status, headers, config) {
        $scope.entity.pageSection2Rows = data;
    });

    // Rest APIs to load data for drop downs    
    $http.get("/restapi/dropdown1")
    .success(function(data, status, headers, config) {
        $scope.dropdown1 = data;
    });

    $http.get("/restapi/dropdown2")
    .success(function(data, status, headers, config) {
        $scope.dropdown2 = data;
    });

    $http.get("/restapi/dropdown3")
    .success(function(data, status, headers, config) {
        $scope.dropdown3 = data;
    });

    $http.get("/restapi/dropdown4")
    .success(function(data, status, headers, config) {
        $scope.dropdown4 = data;
    });



    $scope.add = function() {
        $http.post("/restapi/entity", $scope.entity).success(function(data, status, headers, config, statusText) {
            $location.path('/home');    
        }).error(function(data, status, headers, config, statusText) {
            console.log("Error : " +statusText);
        });
    }

})