Angularjs: Comment faire pour afficher chargement-icône lors de l'utilisation de 'résoudre' dans $routeProvider?

Question

Le code suivant indique, via un service et des spectacles sur la page web une liste de 'page' objets pour une page "catégorie" (chaîne de caractères). À l'aide de la détermination de l'objet de la propriété dans $routeProvider.lors de la(), je suis en mesure de reporter la mise à jour de la vue jusqu'à ce que la nouvelle valeur est prêt.

Deux questions:

1. Lors de la demande d'une nouvelle page de la liste, je veux montrer un chargement icône. Comment puis-je détecter (dans un non-hackish façon) l'événement lorsque la lecture à partir du serveur démarre (et le chargement de l'icône doit être affiché)? Je suppose que je pourrais faire quelque chose comme $('.les pages de chargement icône").show() dans le service, mais trouver que trop gui dépendante trop placé dans le service.

2. Lorsque la nouvelle valeur est prêt, je voudrais que le vieux à s'estomper et que la nouvelle fondu. Qu'est-ce que le "angulaire" façon de faire cela? J'ai essayé de le faire dans le contrôleur à l'aide de $regarder, mais qui entraîne la nouvelle valeur à afficher peu de temps avant le fadeout commence.

Le code:

app.js:

$routeProvider.when('/:cat', { templateUrl: 'partials/view.html', controller: RouteCtrl, resolve: RouteCtrl.resolve});

controllers.js:

function RouteCtrl($scope, $routeParams, pages) {
        $scope.params = $routeParams;
        $scope.pages = pages;
    }

RouteCtrl.resolve={
    pages: function($routeParams, Pages){
        if($routeParams.hasOwnProperty('cat')){
            return Pages.query($routeParams.cat);
        }
    }
}

services.js: Les dernières pages de lecture est stocké dans currentPages et, dans sa catégorie, lastCat.

factory('Pages', function($resource, $q, $timeout){
    return {
        res: $resource('jsonService/cat=:cat', {}, {
            query: {method:'GET', params:{cat:'cat'}, isArray:true}
        }),
        lastCat: null,
        currentPages: null,
        query: function(cat) {
            var res = this.res;
            if(cat != this.lastCat){
                var deferred = $q.defer();
                var p = res.query({'cat':cat}, function(){
                    deferred.resolve(p);
                });
                this.lastCat = cat;
                this.currentPages = deferred.promise;
            }
            return this.currentPages;
        }
    };
})

view.html

<ul >
    <li ng-repeat="page in pages">
        <a href="#{{params.cat}}/{{page.slug}}">{{page.title}}</a>
    </li>
</ul>

Answer 1

Pas exactement sûr de savoir si cela fonctionnerait dans votre code que vous avez $l'intégration des ressources. Mais il vaut la peine de regarder dans angulaire des événements: $routeChangeStart et $routeChangeSuccess.

dans le html:

<span ng-show="isViewLoading"> loading the view... <span>

dans le contrôleur (qui définit le champ d'application du code html de ci-dessus):

$scope.isViewLoading = false;
$scope.$on('$routeChangeStart', function() {
  $scope.isViewLoading = true;
});
$scope.$on('$routeChangeSuccess', function() {
  $scope.isViewLoading = false;
});

Answer 2

Le système de routage angulaire semble être un peu limité..

Cela a résolu pour moi:
http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

Aussi, sur les événements de déclenchement à deux reprises: si vous configurez une route ne carte à "a/b/c" angulaire établit automatiquement une autre voie, "a/b/c/" (slash) pour rediriger vers le premier (et vice versa), et à la fois de déclencher des événements. Je viens de tester pour la présence de paramètres de la route.

Au sujet de la condition limite de la gamme sistem: il y a cette force de traction angulaires, et de l'étendre ses capacités.

Answer 3

J'aime l' ng-show... Mais l' ui-if de l'Angulaire de l'INTERFACE est mieux à mon humble avis.. Depuis supprimer le code HTML du DOM...

<span ui-if="isViewLoading"> loading the view... <span>

_e

Answer 4

Vous pouvez également utiliser le ng-show de la directive. Simplement de vérifier si votre modèle est vide et l'affichage d'un DOM sous-ensemble comme ceci:

    <!-- model not ready -->
    <div style="width: 200" ng-show="lines == ''">
      <div class="progress progress-striped active">
         <div class="bar" style="width: 0%;"></div>
      </div>
    </div>

    <!-- your model code -->
    <ul class="nav nav-tabs nav-stacked">
      <li ng-repeat="line in lines">
        {{line.Id}}
      </li>
    </ul>

Answer 5

Vous souhaitez utiliser l' $rootScope , car la surveillance d'un contrôleur $scope est limitée à la manette, et comme il arrive, vous êtes de commutation à partir d'un point de vue (un contrôleur) à un autre point de vue (d'un autre contrôleur). Il serait donc judicieux d'avoir un-code-fit-tous.

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

Dans ce jeu de fonctions de l' $rootScope.isLoadingState qui permettra d'afficher votre indicateur de chargement.

Ensuite, utilisez

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

Pour désactiver cette variable.

Référence complète ici