(कोणीय-यूआई-राउटर) समाधान प्रक्रिया के दौरान लोडिंग एनीमेशन दिखाएं

Question 1

यह एक दो भाग प्रश्न है:

मैं नियंत्रक को लोड करने से पहले कुछ सर्वर डेटा को हथियाने के लिए $ stateProvider.state () के अंदर संकल्प संपत्ति का उपयोग कर रहा हूं। मैं इस प्रक्रिया के दौरान दिखाने के लिए लोडिंग एनीमेशन कैसे प्राप्त करूंगा?
मेरे पास बाल राज्य हैं जो संकल्प संपत्ति का उपयोग करते हैं। समस्या यह है कि यूआई-राउटर किसी भी नियंत्रक को लोड करने से पहले सभी हल को अंतिम रूप देना चाहता है । क्या कोई तरीका है कि मैं माता-पिता के नियंत्रकों को लोड करने के लिए एक बार उनके हल को हल करने के लिए प्राप्त कर सकता हूं, बिना सभी बच्चे को हल करने के लिए इंतजार किए बिना? इसका उत्तर संभवतः पहली समस्या को भी हल करेगा।

Question 2

संपादित करें: यहाँ एक और भी आसान समाधान है, परीक्षण और अच्छी तरह से काम कर रहा है:

मेरे मुख्य नियंत्रक में मेरे पास बस है

$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();
    }
});

यह स्पिनर को दिखाता है जब भी हम उस राज्य में जाने वाले होते हैं, जिसके पास समाधान करने के लिए कुछ भी होता है और इसे तब छुपाता है, जब राज्य परिवर्तन पूरा हो जाता है। आप राज्य पदानुक्रम को कुछ जांच जोड़ना चाहते हैं (यानी स्पिनर को भी दिखा सकते हैं यदि कोई मूल राज्य जो लोड किया जा रहा है, कुछ हल करता है) लेकिन यह समाधान मेरे लिए ठीक काम करता है।

यहाँ संदर्भ के लिए और एक विकल्प के रूप में मेरा पुराना सुझाव है:

अपने एप्लिकेशन कंट्रोलर में, stateChangeStartईवेंट को सुनें और जांचें कि क्या आप उस स्थिति में स्विच करने जा रहे हैं, जहां आप समाधान के दौरान स्पिनर दिखाना चाहते हैं (देखें https://github.com/angular-ui/ui-router/wiki/Quick -Reference # विकी-इवेंट्स -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
    }
})
```
जब आप नियंत्रक को अंततः बुलाते हैं, तो आप स्पिनर को छिपा सकते हैं
```
.controller('StateWithResolveCtrl', function($scope) {
    $scope.hideSpinner();
})
```

आप किसी भी त्रुटि के लिए भी जांच कर सकते हैं जो कि त्रुटि को हल करने के दौरान $stateChangeErrorघटना को सुनकर और एनीमेशन को छिपाकर हो सकती है।

यह पूरी तरह से साफ नहीं है क्योंकि आप स्पिनरों के लिए नियंत्रक के बीच तर्क वितरित करते हैं, लेकिन यह एक तरीका है। आशा है कि इससे सहायता मिलेगी।

Question 3

मैंने निम्नलिखित समाधान विकसित किया जो मेरे लिए पूरी तरह से काम करता है।

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 div में id = "ui-view" जोड़ें।

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

3. अपने सीएसएस में निम्नलिखित जोड़ें

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

ध्यान दें:

उ। उपरोक्त कोड दो मामलों में लोडिंग संकेतक प्रदर्शित करेगा 1) जब कोणीय ऐप पहली बार 2 लोड होता है ) जब दृश्य बदल जाता है।

ख। यदि आप नहीं चाहते हैं कि जब कोणीय ऐप पहली बार लोड हो (जब कोई दृश्य लोड होने से पहले) संकेतक दिखाया जाए, तो नीचे दिए गए लोडिंग डिव की तरह छिपा हुआ वर्ग जोड़ें

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

Question 4

मैंने पाया है कि कोणीय-लोडिंग-बार का उपयोग नेटवर्क पहुंच के कारण लंबे समय तक हल करने के लिए वास्तव में अच्छी तरह से काम करता है।

Question 5

गुण को हल करने के बाद यूआई-राउटर द्वारा भरे जाने वाले डिव में सामग्री जोड़ने के बारे में कैसे?

अपने में index.html

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

अब उपयोगकर्ता "लोड हो रहे हैं ..." देखेंगे जबकि गुणों का समाधान किया जाता है। एक बार जब सब कुछ तैयार हो जाता है तो सामग्री आपके ऐप्स सामग्री के साथ यूआई-राउटर द्वारा बदल दी जाएगी।

Question 6

मैं एक एनिमेटेड 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>

मुझे आशा है कि वह मदद करेंगे!

Question 7

मेरा विचार संक्रमण वाले राज्यों के बीच राज्य के ग्राफ पर पथ पर चलना है $stateChangeStartऔर सभी शामिल विचारों को इकट्ठा करना है। तब प्रत्येक ui-viewनिर्देश देखता है कि क्या संबंधित दृश्य संक्रमण में शामिल है और 'ui-resolving'यह तत्व पर वर्ग जोड़ता है।

Plunker डेमो दो जड़ राज्यों का परिचय: firstऔर second, बाद के दो substates है second.sub1और second.sub2। राज्य उस second.sub2लक्ष्य को भी footerदेखता है जो उसके दादा-दादी का है।

Question 8

यह किसी भी राज्य (किसी भी पेज), 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>

Question 9

मैं किसी भी लोडिंग गतिविधि से मेल खाने के निर्देश का उपयोग करना पसंद करता हूं, मुख्य रूप से अपने कोडबेस को साफ रखने के लिए

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);
      }
    }
  }]);

Question 10

के $stateChangeStartबाद से और इसके जैसे उपयोग को हटा दिया गया है और संक्रमण हुक के साथ बदल दिया गया है । तो, स्टीफन हेनज़ द्वारा जवाब के लिए, अद्यतन संस्करण होगा:

$transitions.onStart({}, function(transition) {
  if (transition.to().resolve) {
    $scope.showSpinner();
  }
});

$transitions.onSuccess({}, function(transition) {
  if (transition.to().resolve) {
    $scope.hideSpinner();
  }
});

इसका उपयोग आप पेरेंट कंट्रोलर में कर सकते हैं। इंजेक्ट करना याद रखें $transitions-

.controller('parentController',['$transitions',function($transitions){...}]);

इसके अलावा, ध्यान रखें कि resolveयह एक खाली वस्तु है जो अभी भी प्रस्तुत करेगा transition.to().resolve == true, इसलिए resolveराज्य घोषणा में एक खाली प्लेसहोल्डर न छोड़ें ।

Question 11

राउटर में रेसोल का उपयोग करते समय दृश्य का उपयोग करने के लिए मेरा आइडिया यह कमाल का काम कर रहा है। इसे इस्तेमाल करे।

//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;
            });

});

Question 12

यदि कोई उपयोग कर रहा है ngRoute, resolveतो अगले दृश्य को लोड करने से पहले प्रतीक्षा कर रहा है , और angular-bootstrap-uiयूआई का उपयोग कर रहा है, तो आप निम्न कार्य कर सकते हैं :

app.config([
  "$routeProvider", "$locationProvider", function($routeProvider, $locationProvider) {
    return $routeProvider.when("/seasons/:seasonId", {
      templateUrl: "season-manage.html",
      controller: "SeasonManageController",
      resolve: {
        season: [
          "$route", "$q", "$http", "$modal", function($route, $q, $http, $modal) {
            var modal, promise, seasonId;
            modal = $modal.open({
              backdrop: "static",
              template: "<div>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title\">\n      Loading...\n    </h3>\n  </div>\n  <div class=\"modal-body\">\n    <progressbar\n      class=\"progress-striped active\"\n      value=\"'100'\">\n    </progressbar>\n  </div>\n</div>",
              keyboard: false,
              size: "lg"
            });
            promise = $q.defer();
            seasonId = $route.current.params.seasonId;
            $http.get("/api/match/seasons/" + seasonId).success(function(data) {
              modal.close();
              promise.resolve(data);
            }).error(function(data) {
              modal.close();
              promise.reject(data);
            });

            return promise.promise;
          }
        ]
      }
    });
  }
]);