(Angular-ui-router) Affiche l'animation de chargement pendant le processus de résolution.

Question

C'est une deuxième partie de la question:

1. Je suis à l'aide de la détermination de la propriété à l'intérieur de $stateProvider.de l'état() pour saisir certaines données du serveur avant de charger le contrôleur. Comment puis-je obtenir une animation de chargement pour montrer au cours de ce processus?

2. J'ai de l'enfant les états qui utilisent également la détermination de la propriété. Le problème est que l'interface utilisateur du routeur semble vouloir finaliser tous les résout avant le chargement de tout contrôleur. Est-il possible que je puisse obtenir le parent contrôleurs de charge une fois que leur résout ont été résolus, sans avoir à attendre que tous les enfants se résout? Une réponse à cela devrait également résoudre le premier problème.

Answer 1

EDIT: Voici encore une solution plus facile, testé et fonctionne parfaitement:

Dans mon contrôleur principal j'ai simplement

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

Cela montre le compteur à chaque fois que nous sommes sur le point d'aller à un état qui n'a rien à résoudre et il la cache, lorsque le changement d'état est complet. Vous pouvez ajouter certains de vérifier l'état de la hiérarchie (c'est à dire aussi de montrer les spinner si l'un des parents de l'etat qui est en cours de chargement résout quelque chose), mais cette solution fonctionne très bien pour moi.

Voici mon ancien suggestion de référence et comme une alternative:

1. Dans votre contrôleur d'application, d'écouter de la stateChangeStart d'événements et de vérifier si vous êtes sur le point de basculer vers un état où vous souhaitez afficher un spinner pendant les résoudre (voir 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. Lorsque vous contrôleur reçoit enfin appelé, vous pouvez masquer le spinner

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

Vous pouvez également vérifier pour les erreurs qui peuvent survenir au cours d'résoudre par l'écoute de l' $stateChangeError événement et le masquage de l'animation tout en vous gérer l'erreur.

Ce n'est pas totalement propre que vous distribuez la logique de la touche de navigation entre les contrôleurs, mais c'est une façon. Espérons que cela aide.

Answer 2

J'ai développé la solution suivante qui fonctionne parfaitement pour moi.

1. Ajouter l'application suivante.exécuter

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. Placez l'indicateur de chargement juste au-dessus de l'ui-view. Ajouter id="ui-view" ui-view div.

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

3. ajouter ceci dans votre css

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

NOTE:

A. Le code ci-dessus affiche l'indicateur de chargement dans les deux cas 1) quand l'angle d'application est chargé première fois 2) lorsque la vue est changé.

B. Si vous ne voulez pas l'indicateur quand l'angulaire de l'app se charge en premier temps (avant de tout point de vue est chargé), puis ajouter caché classe pour le chargement de la div comme ci-dessous

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

Answer 3

Pourquoi ne pas ajouter du contenu à la div qui sera rempli par ui-router une fois les propriétés résolues?

Dans votre index.html

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

L'utilisateur verra maintenant "Loading ..." pendant que les propriétés sont résolues. Une fois que tout est prêt, le contenu sera remplacé par ui-router par le contenu de vos applications.

Answer 4

J'utilise un gif animé que je montre uniquement lorsque $http a des demandes en attente.

Dans mon modèle de page de base, j'ai un contrôleur de barre de navigation et de navigation. La partie pertinente du contrôleur ressemble à ceci:

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

Le code correspondant dans mon HTML est:

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

J'espère que ça aide!