如何在另一个页面加载时显示加载页面[AngularJS]

Question

How can I do this with Angular. 如何使用Angular做到这一点。 I wana show full page with animation while another page is loading and when that page is loaded I wana display... 我要显示带有动画的整页，而另一页正在加载，当该页面加载时，我要显示...

Edit: 编辑：

Also I have controller, I need to wait to conroller is loaded... And after controller is loaded and html added to page I need to remove loading page and show content. 我也有控制器，我需要等待控制器加载。。。在控制器加载并向页面添加html之后，我需要删除加载页面并显示内容。

 .controller('CommentsCtrl',function($scope,$http,$routeParams){
              $scope.param = $routeParams.id;
              $scope.comments = [];
              $http.get("/api/comments/"+ $scope.param)
              .success(function(data){
               //GET ALL USER AND COMMENTS TOGETHER
               $.each(data,function(index,value){
                   if(value.user){
                    $.each(value.user,function(index1,value1){
                        var new_object = $.extend({}, value, value1);
                        $scope.comments.push(new_object);

                    });
                   }
               });
});

End Edit 结束编辑

Here is my try but it will not wait till full page load It will just wait till get req is finished... 这是我的尝试，但它不会等到整个页面加载后才会等到get req完成...

Any idea? 任何想法？

angular.module('loading')
        .directive('loading', loading);


function loading($http) {
    var loadingSniper = {
        link: link,
        restrict: "AE"
    };

    return loadingSniper;

    function link(scope, elm, attrs)
    {
        scope.isLoading = function () {
//            console.log('Remaining: ' + $http.pendingRequests.length);
            return $http.pendingRequests.length > 0;
        };

        scope.$watch(scope.isLoading, function (v)
        {
            if (v) {
                elm.show();
            } else {
                elm.hide();
            }
        });
    }

}

Answer 1

You don't have to define a custom directive, you can use ngCloak . 您不必定义自定义指令，可以使用ngCloak 。 Take a look at this great turorial about ngCloak . 看看有关ngCloak的精彩文章。

This directive will hide the attributed elements when angular finished all the compilation of directives. 当angular完成所有指令的编译时，该指令将隐藏属性元素。

<html>
  <head>
    <title>My Angular App</title>
    <style type="text/css">
      .splash {}
    </style>
  </head>
  <body ng-app="myApp">
    <!-- The splash screen must be first -->
    <div id="splash" ng-cloak>
      <h2>Loading</h2>
    </div>
    <!-- The rest of our app -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
    <div ng-controller="MainController">
    </div>
    <script src="js/app.js"></script>
  </body>
</html>

Edit 编辑

You have some asynchronous task initiated in the controller code. 您在控制器代码中启动了一些异步任务。 Don't forget an asynchronous task can be a $http request (as in your case) or any code waiting or running on a WebWorker. 不要忘记异步任务可以是$ http请求（如您的情况），也可以是任何在WebWorker上等待或运行的代码。 That's why there is no generic solution. 这就是为什么没有通用解决方案的原因。 In this case I recommend you to introduce a state variable in the scope. 在这种情况下，建议您在范围中引入状态变量。 It will even allow you to have multiple loader placeholders (For example separate loader for comments, news, gallery, whatever). 它甚至可以让您拥有多个加载器占位符（例如，用于评论，新闻，图库等的单独加载器）。

You can remove the loader element when finished loading using ngIf: 您可以在使用ngIf完成加载后删除loader元素：

...
<!-- The splash screen must be first -->
<div id="splash" ng-if="!loaded_comments">
  <h2>Loading</h2>
</div>
<!-- The rest of our app -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<div ng-controller="MainController">
</div>
...

js: JS：

app.run(function($rootScope) {
  $rootScope.loaded_comments = false; // <======== Setup initial state here
});

app.controller('CommentsCtrl',function($scope,$http,$routeParams){
  $scope.param = $routeParams.id;
  $scope.comments = [];
  $http.get("/api/comments/"+ $scope.param).success(function(data) {
    $rootScope.loaded_comments = true; // <======== set loaded state explicitly.

    //GET ALL USER AND COMMENTS TOGETHER
    $.each(data,function(index,value){
      if(value.user){
        $.each(value.user,function(index1,value1){
          var new_object = $.extend({}, value, value1);
          $scope.comments.push(new_object);
        });
      }
    });
  });
});

如何在另一个页面加载时显示加载页面[AngularJS]

问题描述

1 个解决方案

解决方案1
0 2015-09-17 15:06:11

如何在另一个页面加载时显示加载页面[AngularJS]

问题描述

1 个解决方案

解决方案1 0 2015-09-17 15:06:11

解决方案1
0 2015-09-17 15:06:11