добавить страницу загрузки до угловой загрузки моего одностраничного приложения

0

поэтому у меня есть одностраничное приложение в угловом и требуется некоторое время, пока все элементы не будут загружены.

Я хочу показать пользователю сообщение о загрузке до тех пор, пока угловое будет закончено бутстрапинг (плюс угловое отображение уродливого скелета всех элементов и изображений за долю секунды до его загрузки, и я хочу сохранить его от пользователя...).

Как мне это сделать? Я предпочитаю делать это в угловых js (поскольку мой код написан угловым), а не в JQuery.

index.html

 <!DOCTYPE html>
 <html>
 <head>

    <script data-require="[email protected]" 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
}

});
  • 0
    Вы можете сделать это в своем контроллере, когда запрашиваете данные у вашего сервиса.
Теги:

2 ответа

0

Как правило, что я делаю в своих приложениях с угловыми установками, я создам какую-то загрузочную переменную. Я установил эту загружаемую переменную в значение "true", когда будет инициализирован новый контроллер, и я установлю его на "false", когда все будет восстановлено/загружено. Используя эту переменную, я могу показать и скрыть все, что захочу. Например:

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>

Вы также можете установить для этой переменной значение "true", если вы загружаете что-то еще в будущем, и вы можете снова показать загрузочный счетчик, если хотите.

Я надеюсь, что это поможет и даст вам некоторую начальную точку в показе экранов загрузки и т.д. Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы.

Поделиться
  • 0
    Спасибо! У меня есть 2 вопроса: 1. Почему вы возвращаете обещание от loadData ()? 2. как скрыть свои элементы во время загрузки анимации вращения?
  • 0
    @Matoy 1. Я просто привел пример какой-то асинхронной операции, чтобы показать промежуток времени между запросом и поиском. Вы можете интегрировать это, однако это имеет смысл в вашем приложении. 2. Я не уверен, что полностью понимаю ваш вопрос, однако вы можете использовать ng-hide = "loading", когда для $ scope.loading установлено значение "true". Это будет скрывать этот элемент до тех пор, пока вы не установите $ scope.loading = false.
Показать ещё 5 комментариев
0

Для оптимального пользовательского опыта вы должны показать анимацию как можно раньше. Моя рекомендация состоит в том, что вы просто показываете полноэкранный div с анимацией CSS внутри, а затем используйте угловую директиву для удаления div после запуска приложения.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню