javascript - (Angular-ui-router) إظهار تحميل الرسوم المتحركة أثناء عملية الحل




angularjs (8)

هذا سؤال من قسمين:

  1. أستخدم خاصية التصميم داخل stateProvider.state () $ للاستيلاء على بيانات خادم معينة قبل تحميل وحدة التحكم. كيف أذهب للحصول على تحميل الرسوم المتحركة لتظهر خلال هذه العملية؟

  2. لدي حالات فرعية تستخدم أيضًا خاصية التصميم. المشكلة هي أن ui-router يبدو أنه يريد إنهاء جميع الـ decves قبل تحميل أي وحدة تحكم. هل هناك طريقة يمكنني من خلالها تحميل وحدات التحكم الأصلية بمجرد حلها ، دون الحاجة إلى انتظار حل كل طفل؟ من المرجح أن حل هذه المشكلة يحل المشكلة الأولى.


أفضل استخدام أي توجيه لمطابقة أي نشاط تحميل ، وذلك بشكل أساسي للحفاظ على تنسيقات التعليمات البرمجية الخاصة بي

angular.module('$utilityElements', [])
.directive('loader',['$timeout','$rootScope', function($timeout, $rootScope) {
    return {
      restrict: 'A',
      template: '<div id="oneloader" class="hiddenload">loading...</div>',
      replace: true,
      compile: function (scope, element, attrs) {
        $timeout(function(){
          $rootScope
              .$on('$stateChangeStart',
                  function(event, toState, toParams, fromState, fromParams){
                      $("#oneloader").removeClass("hiddenload");
              });

          $rootScope
              .$on('$stateChangeSuccess',
                  function(event, toState, toParams, fromState, fromParams){
                      //add a little delay
                      $timeout(function(){
                        $("#oneloader").addClass("hiddenload");
                      },500)
              });
        }, 0);
      }
    }
  }]);

أنا وضعت الحل التالي الذي يعمل تماما بالنسبة لي.

1. أضف التطبيق التالي

app.run(function($rootScope){

    $rootScope
        .$on('$stateChangeStart', 
            function(event, toState, toParams, fromState, fromParams){ 
                $("#ui-view").html("");
                $(".page-loading").removeClass("hidden");
        });

    $rootScope
        .$on('$stateChangeSuccess',
            function(event, toState, toParams, fromState, fromParams){ 
                $(".page-loading").addClass("hidden");
        });

});

2. ضع مؤشر التحميل فوق ui-view مباشرة. أضف id = "ui-view" لعرض واجهة المستخدم.

<div class="page-loading">Loading...</div>
<div ui-view id="ui-view"></div>

3. أضف ما يلي إلى css الخاص بك

.hidden {
  display: none !important;
  visibility: hidden !important;
}

ملحوظة:

A. الرمز أعلاه سيعرض مؤشر التحميل في حالتين 1) عندما يتم تحميل التطبيق الزاوي للمرة الأولى 2) عندما يتم تغيير طريقة العرض.

إذا كنت لا تريد أن يظهر المؤشر عند تحميل التطبيق الزاوي للمرة الأولى (قبل تحميل أي عرض) ، ثم إضافة فئة مخفية إلى div loading مثل أدناه

<div class="page-loading hidden">Loading...</div>

تحرير: هنا هو حل أسهل ، واختبارها والعمل بشكل جيد:

في جهاز التحكم الرئيسي لدي ببساطة

$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
    if (toState.resolve) {
        $scope.showSpinner();
    }
});
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
    if (toState.resolve) {
        $scope.hideSpinner();
    }
});

هذا يدل على الدوار كلما كنا على وشك الذهاب إلى حالة لديها أي شيء لحلها وإخفائها ، عند اكتمال تغيير الحالة. قد ترغب في إضافة بعض التحقق من التسلسل الهرمي للولاية (أي أيضًا إظهار الدوار من حالة الأصل التي يتم تحميلها تحل شيئا) لكن هذا الحل يعمل بشكل جيد بالنسبة لي.

هنا اقتراحي القديم كمرجع وكبديل:

  1. في وحدة تحكم التطبيق ، استمع إلى حدث stateChangeStart وتحقق مما إذا كنت على وشك التبديل إلى الحالة التي تريد فيها إظهار زر الزيادة والنقصان أثناء الحل (راجع https://github.com/angular-ui/ui-router/wiki/Quick-Reference#wiki-events-1 )

    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
        if (toState.name == 'state.with.resolve') {
            $scope.showSpinner();  //this is a function you created to show the loading animation
        }
    })
    
  2. عندما يتم الاتصال بوحدة التحكم أخيرًا ، يمكنك إخفاء زر الزيادة والنقصان

    .controller('StateWithResolveCtrl', function($scope) {
        $scope.hideSpinner();
    })
    

قد ترغب أيضًا في التحقق من وجود أية أخطاء قد تحدث أثناء الحل عن طريق الاستماع إلى حدث $stateChangeError وإخفاء الرسم المتحرك أثناء معالجة الخطأ.

هذا ليس نظيفًا تمامًا نظرًا لأنك توزع المنطق على الدوار بين وحدات التحكم ، ولكنها طريقة. آمل أن يساعد.


فكرتي لاستخدام طريقة العرض أثناء استخدام resole في جهاز التوجيه تعمل بشكل رائع. جرب هذا.

//edit index.html file 
<ion-nav-view>
    <div ng-show="loadder" class="loddingSvg">
        <div class="svgImage"></div>
    </div>
</ion-nav-view>

// css file

.loddingSvg {
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    z-index: 99;
    left: 0;
    right: 0;
}

.svgImage {
    background: url(../img/default.svg) no-repeat;
    position: relative;
    z-index: 99;
    height: 65px;
    width: 65px;
    background-size: 56px;
    top: 50%;
    margin: 0 auto;
}

// edit app.js

 .run(function($ionicPush, $rootScope, $ionicPlatform) {




        $rootScope.$on('$stateChangeStart',
            function(event, toState, toParams, fromState, fromParams) {
                $rootScope.loadder = true;
            });

        $rootScope.$on('$stateChangeSuccess',
            function(event, toState, toParams, fromState, fromParams) {
                $rootScope.loadder = false;
            });

});

لقد وجدت باستخدام angular-loading-bar عملت بشكل جيد لفترة طويلة يحل بسبب الوصول إلى الشبكة.


ماذا عن إضافة محتوى إلى div سيتم ملؤه بواسطة موجه واجهة المستخدم بمجرد حلها؟

في your index.html

<div ui-view class="container">
    Loading....
</div>

سيرى المستخدم الآن "جارٍ التحميل ..." أثناء حل الخصائص. بمجرد أن يصبح كل شيء جاهزًا ، سيتم استبدال المحتوى من خلال واجهة المستخدم للموجه بمحتوى تطبيقاتك.


يمكنني استخدام صورة gif متحركة لا تظهر إلا عندما يكون لدى $http طلبات معلقة.

في قالب الصفحة الأساسية ، لدي تحكم في شريط التنقل وشريط التنقل. الجزء ذات الصلة من وحدة تحكم يشبه هذا:

controllers.controller('NavbarCtrl', ['$scope', '$http',
    function ($scope, $http) {
        $scope.hasPendingRequests = function () {
            return $http.pendingRequests.length > 0;
        };
    }]);

الرمز المقابل في html الخاص بي هو:

<span class="navbar-spinner" ng-show="hasPendingRequests()">
    <img src="/static/img/spinner.gif">
</span>

أتمنى أن يساعد ذلك!


هذا محمل بشكل عام عندما تنتقل الصفحة بين أي حالة (أي صفحة) ، وضعها في app.js

.run(
    ['$rootScope',
        function($rootScope) {
            $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
                $rootScope.preloader = true;
            })
            $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
                $rootScope.preloader = false;
            })
        }
    ])

في html:

<div ng-show="preloader">Loading...</div>




angular-ui-router