AngularJS, résoudre des données avant d'afficher la vue

Ce sujet a déjà été posée mais je n'arrivais pas à savoir quoi faire dans mon cas.

À L'Aide De AngularJS 1.0.5:

Avant de montrer le point de vue "login", je veux obtenir des données et de retarder le rendu de l'affichage, tandis que les données n'est pas chargé à partir d'une requête AJAX.

Voici le code principal. Est-ce la bonne manière?

angular.module('tfc', ['tfc.config', 'tfc.services', 'tfc.controllers']).config([
 '$routeProvider', '$locationProvider', '$httpProvider',
 function($routeProvider, $locationProvider, $httpProvider) {
  $routeProvider.when('/login', {
    templateUrl: 'views/login.html',
    controller: "RouteController",
    resolve: {
      data: function(DataResolver) {
        return DataResolver();
      }
    }
  });
}
]);

module_services = angular.module("tfc.services", []);

module_services.factory("DataResolver", [
 "$route", function($route) {
  console.log("init");
  return function() {
    //Tabletop is a lib to get data from google spreadsheets
    //basically this is an ajax request
    return Tabletop.init({
      key: "xxxxx",
      callback: function(data, tabletop) {
        console.log("[Debug][DataResolver] Data received!");
        return data;
      }
    });
  };
 }
]);
  • Peut-être la réponse d'AngularJS " créateur peut vous aide: stackoverflow.com/a/11972028/449162
  • Vous pouvez également affecter le résultat de la requête AJAX pour quelque chose dans votre $champ d'application et l'utilisation juste ng-show dans le code HTML.
  • C'est un bon moyen de le faire. c'est beaucoup mieux que d'utiliser ng-show ou ng-hide parce que dans votre contrôleur, vous aurez vos données et déjà peut écrire plus de code synchrone. Cela dit, le plus de procès pour un code d'examen site que SI, parce que vous n'avez pas de problème mais à la recherche d'améliorations dans votre code.
  • Drôle que Misko aussi posé la question.
  • double possible de Retarder AngularJS changement d'itinéraire jusqu'modèle chargé d'empêcher le scintillement
InformationsquelleAutor Laurent | 2013-03-06
  1. 1

    Le point d'AngularJS est que vous pouvez charger jusqu'les modèles et tout et puis attendre que les données de la charge, il est destiné à être asynchrone.

    Votre vue doit être à l'aide de ng-hide, ng-show pour vérifier la portée de la manette de sorte que lorsque les données dans le champ d'application est mise à jour, la vue s'affiche. Vous pouvez également afficher un compteur de sorte que l'utilisateur ne se sent pas comme le site est tombé en panne.

    • Je comprends votre point lorsque vous chargez les données à afficher sur une vue, mais vous devez annuler un itinéraire en fonction de chargement asynchrone
    InformationsquelleAutor Rudolf Olah
  2. 1

    Répondre à la question, la façon dont vous chargez des données explicitement avant la vue est rendue semble droit. Rappelez-vous qu'il ne peut pas donner la meilleure expérience en tant qu'il y aura un certain temps à résoudre que, peut-être donner l'impression que votre application est arrêté pendant quelques instants.

    Voir un exemple de Jean Pappa blog de charger des données avant que la route est résolu à l'aide angulaire du routeur par défaut:

    //route-config.js
angular
    .module('app')
    .config(config);

function config($routeProvider) {
    $routeProvider
        .when('/avengers', {
            templateUrl: 'avengers.html',
            controller: 'Avengers',
            controllerAs: 'vm',
            resolve: {
                moviesPrepService: function(movieService) {
                    return movieService.getMovies();
                }
            }
        });
}

//avengers.js
angular
    .module('app')
    .controller('Avengers', Avengers);

Avengers.$inject = ['moviesPrepService'];
function Avengers(moviesPrepService) {
    var vm = this;
    vm.movies = moviesPrepService.movies;
}

    Fondamentalement, vous utilisez le resolve paramètres sur la route, de sorte que routeProvider attend toutes les promesses d'être résolu avant l'instanciation de la manette. Voir la docs pour plus d'info.

    InformationsquelleAutor Bruno Peres