Retarder AngularJS changement d'itinéraire jusqu'modèle chargé d'empêcher le scintillement

$routeProvider résoudre propriété permet de retarder la route à modifier jusqu'à ce que les données sont chargées.

D'abord définir un itinéraire avec resolve attribut de ce genre.

angular.module('phonecat', ['phonecatFilters', 'phonecatServices', 'phonecatDirectives']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html', 
        controller: PhoneListCtrl, 
        resolve: PhoneListCtrl.resolve}).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html', 
        controller: PhoneDetailCtrl, 
        resolve: PhoneDetailCtrl.resolve}).
      otherwise({redirectTo: '/phones'});
}]);

avis que le resolve propriété est définie sur la route.

function PhoneListCtrl($scope, phones) {
  $scope.phones = phones;
  $scope.orderProp = 'age';
}

PhoneListCtrl.resolve = {
  phones: function(Phone, $q) {
    //see: https://groups.google.com/forum/?fromgroups=#!topic/angular/DGf7yyD4Oc4
    var deferred = $q.defer();
    Phone.query(function(successData) {
            deferred.resolve(successData); 
    }, function(errorData) {
            deferred.reject(); //you could optionally pass error data here
    });
    return deferred.promise;
  },
  delay: function($q, $defer) {
    var delay = $q.defer();
    $defer(delay.resolve, 1000);
    return delay.promise;
  }
}

Avis que le contrôleur de définition contient une détermination de l'objet qui déclare des choses qui devraient être à la disposition du contrôleur de constructeur. Ici le phones est injecté dans le contrôleur et il est défini dans la resolve propriété.

La resolve.phones fonction est responsable du retour d'une promesse. Toutes les promesses sont recueillies et le changement d'itinéraire est retardée jusqu'à ce que toutes les promesses sont résolus.

De travail de démonstration: http://mhevery.github.com/angular-phonecat/app/#/phones
Source: https://github.com/mhevery/angular-phonecat/commit/ba33d3ec2d01b70eb5d3d531619bf90153496831

Je vois certaines personnes demandant comment faire cela à l'aide de l'angle.la méthode du contrôleur avec minification respectueux de l'injection de dépendances. Depuis que je viens de recevoir ce travail je me suis senti obligé de revenir et de les aider. Voici ma solution (adopté à partir de la question d'origine et de Misko réponse):

angular.module('phonecat', ['phonecatFilters', 'phonecatServices', 'phonecatDirectives']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html', 
        controller: PhoneListCtrl, 
        resolve: { 
            phones: ["Phone", "$q", function(Phone, $q) {
                var deferred = $q.defer();
                Phone.query(function(successData) {
                  deferred.resolve(successData); 
                }, function(errorData) {
                  deferred.reject(); //you could optionally pass error data here
                });
                return deferred.promise;
             ]
            },
            delay: ["$q","$defer", function($q, $defer) {
               var delay = $q.defer();
               $defer(delay.resolve, 1000);
               return delay.promise;
              }
            ]
        },

        }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html', 
        controller: PhoneDetailCtrl, 
        resolve: PhoneDetailCtrl.resolve}).
      otherwise({redirectTo: '/phones'});
}]);

angular.controller("PhoneListCtrl", [ "$scope", "phones", ($scope, phones) {
  $scope.phones = phones;
  $scope.orderProp = 'age';
}]);

Puisque ce code est dérivé de la question/réponse c'est non testé, mais il doit vous envoyer dans la bonne direction si vous comprenez déjà comment faire de minification amical angulaire de code. La seule partie que mon propre code ne nécessite pas été une injection de "Téléphone" dans la détermination de la fonction de 'phones', ni ai-je utiliser un "report" de l'objet à tous.

Je recommande également cette vidéo sur youtube http://www.youtube.com/watch?v=P6KITGRQujQ&list=UUKW92i7iQFuNILqQOUOCrFw&index=4&feature=plcp , qui m'a aidé un peu

Devrait vous intéresser, j'ai décidé de coller mon propre code (Écrit en coffeescript) de sorte que vous pouvez voir comment j'ai eu de travail.

Pour info, à l'avance-je utiliser un contrôleur générique qui m'aide à faire du CRUD sur plusieurs modèles:

appModule.config ['$routeProvider', ($routeProvider) ->
  genericControllers = ["boards","teachers","classrooms","students"]
  for controllerName in genericControllers
    $routeProvider
      .when "/#{controllerName}/",
        action: 'confirmLogin'
        controller: 'GenericController'
        controllerName: controllerName
        templateUrl: "/static/templates/#{controllerName}.html"
        resolve:
          items : ["$q", "$route", "$http", ($q, $route, $http) ->
             deferred = $q.defer()
             controllerName = $route.current.controllerName
             $http(
               method: "GET"
               url: "/api/#{controllerName}/"
             )
             .success (response) ->
               deferred.resolve(response.payload)
             .error (response) ->
               deferred.reject(response.message)

             return deferred.promise
          ]

  $routeProvider
    .otherwise
      redirectTo: '/'
      action: 'checkStatus'
]

appModule.controller "GenericController", ["$scope", "$route", "$http", "$cookies", "items", ($scope, $route, $http, $cookies, items) ->

  $scope.items = items
      #etc ....
    ]

Cet extrait est l'injection de dépendance sympathique (j'ai même l'utiliser en combinaison de ngmin et uglify) et c'est un plus élégant domain driven base de solution.

L'exemple ci-dessous enregistre un Téléphone ressources et un constante phoneRoutes, qui contient toutes vos informations de routage pour que (de téléphone) de domaine. Quelque chose que je n'aimais pas dans la réponse était l'emplacement de la résoudre logique-la principal module ne devrait pas savoir quoi que ce soit ou être dérangé au sujet de la façon dont la ressource arguments sont fournis au contrôleur. De cette façon, la logique reste dans le même domaine.

Remarque: si vous utilisez ngmin (et si vous n'êtes pas: vous devez vous n'avez qu'à écrire le résoudre fonctions avec la DI tableau convention.

angular.module('myApp').factory('Phone',function ($resource) {
  return $resource('/api/phone/:id', {id: '@id'});
}).constant('phoneRoutes', {
    '/phone': {
      templateUrl: 'app/phone/index.tmpl.html',
      controller: 'PhoneIndexController'
    },
    '/phone/create': {
      templateUrl: 'app/phone/edit.tmpl.html',
      controller: 'PhoneEditController',
      resolve: {
        phone: ['$route', 'Phone', function ($route, Phone) {
          return new Phone();
        }]
      }
    },
    '/phone/edit/:id': {
      templateUrl: 'app/phone/edit.tmpl.html',
      controller: 'PhoneEditController',
      resolve: {
        form: ['$route', 'Phone', function ($route, Phone) {
          return Phone.get({ id: $route.current.params.id }).$promise;
        }]
      }
    }
  });

Le morceau suivant est d'injecter de l'acheminement des données lorsque le module est dans la configuration de l'état et de l'appliquer à la $routeProvider.

angular.module('myApp').config(function ($routeProvider, 
                                         phoneRoutes, 
                                         /* ... otherRoutes ... */) {

  $routeProvider.when('/', { templateUrl: 'app/main/index.tmpl.html' });

  //Loop through all paths provided by the injected route data.

  angular.forEach(phoneRoutes, function(routeData, path) {
    $routeProvider.when(path, routeData);
  });

  $routeProvider.otherwise({ redirectTo: '/' });

});

Test de la route de configuration avec ce programme d'installation est également assez facile:

describe('phoneRoutes', function() {

  it('should match route configuration', function() {

    module('myApp');

    //Mock the Phone resource
    function PhoneMock() {}
    PhoneMock.get = function() { return {}; };

    module(function($provide) {
      $provide.value('Phone', FormMock);
    });

    inject(function($route, $location, $rootScope, phoneRoutes) {
      angular.forEach(phoneRoutes, function (routeData, path) {

        $location.path(path);
        $rootScope.$digest();

        expect($route.current.templateUrl).toBe(routeData.templateUrl);
        expect($route.current.controller).toBe(routeData.controller);
      });
    });
  });
});

Vous pouvez le voir dans toute sa gloire dans mon dernier (à venir) expérience.
Bien que cette méthode fonctionne très bien pour moi, je me demande vraiment pourquoi le $injecteur n'est pas de retarder la construction de rien lorsqu'il détecte l'injection de rien qui est un promesse objet; il rendrait les choses soooOOOOOooOOOOO beaucoup plus facile.

Edit: utilisé Angulaire v1.2(rc2)

J'ai travaillé à partir de Misko du code ci-dessus et c'est ce que j'ai fait avec elle. C'est une solution en cours depuis $defer a été modifié pour $timeout. La substitution $timeout cependant attendre le délai d'attente (en Misko code, à 1 seconde), puis renvoyer les données en espérant que c'est résolu dans le temps. Avec cette façon, il retourne le plus vite possible.

function PhoneListCtrl($scope, phones) {
  $scope.phones = phones;
  $scope.orderProp = 'age';
}

PhoneListCtrl.resolve = {

  phones: function($q, Phone) {
    var deferred = $q.defer();

    Phone.query(function(phones) {
        deferred.resolve(phones);
    });

    return deferred.promise;
  }
}

Vous pouvez utiliser $routeProvider résoudre propriété de retarder la route à modifier jusqu'à ce que les données sont chargées.

angular.module('app', ['ngRoute']).
  config(['$routeProvider', function($routeProvider, EntitiesCtrlResolve, EntityCtrlResolve) {
    $routeProvider.
      when('/entities', {
        templateUrl: 'entities.html', 
        controller: 'EntitiesCtrl', 
        resolve: EntitiesCtrlResolve
      }).
      when('/entity/:entityId', {
        templateUrl: 'entity.html', 
        controller: 'EntityCtrl', 
        resolve: EntityCtrlResolve
      }).
      otherwise({redirectTo: '/entities'});
}]);

Avis que le resolve propriété est définie sur la route.

EntitiesCtrlResolve et EntityCtrlResolve est constant les objets définis dans le même fichier que EntitiesCtrl et EntityCtrl contrôleurs.

//EntitiesCtrl.js

angular.module('app').constant('EntitiesCtrlResolve', {
  Entities: function(EntitiesService) {
    return EntitiesService.getAll();
  }
});

angular.module('app').controller('EntitiesCtrl', function(Entities) {
  $scope.entities = Entities;

  //some code..
});

//EntityCtrl.js

angular.module('app').constant('EntityCtrlResolve', {
  Entity: function($route, EntitiesService) {
    return EntitiesService.getById($route.current.params.projectId);
  }
});

angular.module('app').controller('EntityCtrl', function(Entity) {
  $scope.entity = Entity;

  //some code..
});

J'ai aimé les réponses ci-dessus, et beaucoup appris d'eux, mais il y a quelque chose qui manque dans la plupart des réponses ci-dessus.

J'ai été coincé dans un scénario similaire, où j'ai été la résolution des url avec certaines données qui sont extraites dans le premier demande à partir du serveur. Problème que j'ai été confrontés était que si la promesse est rejected.

J'ai été en utilisant un fournisseur personnalisé qui permet de retourner une Promise qui a été résolu par la resolve de $routeProvider au moment de l'étape de configuration.

Ce que je veux souligner ici, c'est le concept de when il fait quelque chose comme ça.

Il voit l'url dans la barre d'adresse url et puis respectifs when bloc appelé contrôleur et la vue est appelé so far so good.

Permet de dire que j'ai la configuration suivante de la phase de code.

App.when('/', {
   templateUrl: '/assets/campaigns/index.html',
   controller: 'CampaignListCtr',
   resolve : {
      Auth : function(){
         return AuthServiceProvider.auth('campaign');
      }
   }
})
//Default route
.otherwise({
   redirectTo: '/segments'
});

Sur la racine de l'url dans le navigateur premier bloc de la course appelée autrement otherwise est appelée.

Imaginons un scénario que j'ai frappé rootUrl dans la barre d'adresse AuthServicePrivider.auth() fonction est appelée.

Permet de dire que la Promesse est retourné dans rejeter état alors, quoi???

Rien ne sera rendu à tous.

Otherwise bloc ne sera exécutée comme pour toutes les url qui n'est pas défini dans le fichier de configuration de bloc et est inconnu à angularJs étape de configuration.

Nous aurons à gérer l'événement qui obtient déclenché lorsque cette promesse n'est pas résolu. En cas d'échec $routeChangeErorr obtient le feu sur $rootScope.

Il peut être capturé comme indiqué dans le code ci-dessous.

$rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
    //Use params in redirection logic.
    //event is the routeChangeEvent
    //current is the current url
    //previous is the previous url
    $location.path($rootScope.rootPath);
});

De l'OMI, Il est généralement une bonne idée de mettre le code de suivi des événements dans l'exécution du bloc d'application. Ce code exécuté juste après l'étape de configuration de l'application.

App.run(['$routeParams', '$rootScope', '$location', function($routeParams, $rootScope, $location){
   $rootScope.rootPath = "my custom path";
   //Event to listen to all the routeChangeErrors raised
   //by the resolve in config part of application
   $rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
       //I am redirecting to rootPath I have set above.
       $location.path($rootScope.rootPath);
   });
}]);

De cette façon, nous pouvons nous occuper de la promesse de l'échec au moment de l'étape de configuration.

Une solution possible pourrait être d'utiliser le ng-manteau de la directive avec l'élément où nous utilisons les modèles par exemple

<div ng-cloak="">
  Value in  myModel is: {{myModel}}
</div>

Je pense que celui-ci prend moins d'efforts.