Question

所以我有一个角度的单页应用程序，它需要一些时间才能加载所有元素。

我想向用户显示加载消息，直到角度将完成引导（加上角度显示所有元素和图片的丑陋skelton在加载之前的瞬间，我想从用户保存它... ）。

我该怎么做？我喜欢在角度js中做到这一点（因为我的代码是以角度编写的）而在JQuery中是而不是。

的index.html

 <!DOCTYPE html>
 <html>
 <head>

    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="small-talkz.model.js"></script>
    <script src="components/chat/chatController.js"></script>
    <script src="components/login/loginController.js"></script>


 </head>

 <div ng-app="smallTalkzModel" ng-view>
 </div>


 </html>

小talkz.model.js

var smallTalkzModel = angular.module('smallTalkzModel', ['ngRoute']);
smallTalkzModel.config(function($routeProvider) {
  $routeProvider
  .when('/', {
    templateUrl : 'components/login/loginView.html',
    controller  : 'loginController'
  }) 
  .when('/chat', {
    templateUrl : 'components/chat/chatView.html',
    controller  : 'chatController'
  });
});


smallTalkzModel.factory('sessionInfo', function() {
 var savedInfo = {}
 var set=function (info) {
   savedInfo = info;
 } 
 function get() {
  return savedInfo;
}

return {
  set: set,
  get: get
}

});

Answer 1

为获得最佳用户体验，您应尽早显示动画。我的建议是你只需要在里面显示带有CSS动画的全屏div，然后在应用程序运行时使用angular指令删除div。

Answer 2

通常我在Angular应用程序中执行的操作是创建某种加载变量。我将此加载变量设置为＆＃39; true＆＃39;例如，每当初始化一个新的控制器时，我会将其设置为“假”＆＃39;什么都被检索/引导。使用这个变量，我可以显示和隐藏我想要的任何内容。例如：

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.loading = true;
  $scope.data = '';

  $scope.init = function () {
    $scope.loadData()
        .then(function (data) {
            $scope.data = data;
            $scope.loading = false;
        });
  };

  $scope.loadData = function () {
    //...
    return promiseData;
  };

  $scope.init();
});

然后在我看来，我可以根据该变量值隐藏和显示任何内容。

<body>
    <div class="loading-spinner" ng-show="loading"></div>
    <div class="my-content" ng-hide="loading"></div>
</body>

您也可以将此变量设置为＆＃39; true＆＃39;如果你将来加载其他东西，你可以再次显示加载微调器。

我希望这会有所帮助，并为您提供显示加载屏幕等的某种起点。如果您有任何疑问，请与我们联系。

在角度加载我的单页应用之前添加加载页面

2 个答案: