Retrasar el cambio de ruta AngularJS hasta que se cargue el modelo para evitar parpadeos

Me pregunto si hay una manera (similar a Gmail) para que AngularJS demore la presentación de una nueva ruta hasta después de que cada modelo y sus datos se hayan obtenido utilizando sus servicios respectivos.

Por ejemplo, si hubiera una ProjectsControllerlista de todos los Proyectos y project_index.htmlcuál fuera la plantilla que mostrara estos Proyectos, se Project.query()obtendría completamente antes de mostrar la nueva página.

Hasta entonces, la página anterior seguiría mostrándose (por ejemplo, si estuviera navegando en otra página y luego decidiera ver este índice del Proyecto).

La propiedad $ routeProvider resolve permite retrasar el cambio de ruta hasta que se carguen los datos.

Primero defina una ruta con un resolveatributo como este.

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

observe que la resolvepropiedad se define en la ruta.

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

Observe que la definición del controlador contiene un objeto de resolución que declara cosas que deberían estar disponibles para el constructor del controlador. Aquí phonesse inyecta en el controlador y se define en la resolvepropiedad.

La resolve.phonesfunción es responsable de devolver una promesa. Se recopilan todas las promesas y el cambio de ruta se retrasa hasta que se resuelvan todas las promesas.

Demostración de trabajo: http://mhevery.github.com/angular-phonecat/app/#/phones Fuente: https://github.com/mhevery/angular-phonecat/commit/ba33d3ec2d01b70eb5d3d531619bf90153496831

Aquí hay un ejemplo de trabajo mínimo que funciona para Angular 1.0.2

Modelo:

<script type="text/ng-template" id="/editor-tpl.html">
    Editor Template {{datasets}}
</script>

<div ng-view>

</div>

JavaScript:

function MyCtrl($scope, datasets) {    
    $scope.datasets = datasets;
}

MyCtrl.resolve = {
    datasets : function($q, $http) {
        var deferred = $q.defer();

        $http({method: 'GET', url: '/someUrl'})
            .success(function(data) {
                deferred.resolve(data)
            })
            .error(function(data){
                //actually you'd want deffered.reject(data) here
                //but to show what would happen on success..
                deferred.resolve("error value");
            });

        return deferred.promise;
    }
};

var myApp = angular.module('myApp', [], function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/editor-tpl.html',
        controller: MyCtrl,
        resolve: MyCtrl.resolve
    });
});​
​

http://jsfiddle.net/dTJ9N/3/

Versión simplificada:

Como $ http () ya devuelve una promesa (también conocida como diferida), en realidad no necesitamos crear la nuestra. Entonces podemos simplificar MyCtrl. resolver:

MyCtrl.resolve = {
    datasets : function($http) {
        return $http({
            method: 'GET', 
            url: 'http://fiddle.jshell.net/'
        });
    }
};

El resultado de $ http () contiene datos , estado , encabezados y objetos de configuración , por lo que debemos cambiar el cuerpo de MyCtrl a:

$scope.datasets = datasets.data;

http://jsfiddle.net/dTJ9N/5/

Veo a algunas personas preguntando cómo hacer esto usando el método angular.controller con inyección de dependencia amigable con la minificación. Desde que empecé a trabajar, me sentí obligado a volver y ayudar. Aquí está mi solución (adoptada de la pregunta original y la respuesta de Misko):

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

Dado que este código se deriva de la pregunta / respuesta más popular, no se ha probado, pero debería enviarlo en la dirección correcta si ya comprende cómo hacer un código angular amigable para la minificación. La única parte que mi propio código no requería era una inyección de "Teléfono" en la función de resolución para "teléfonos", ni utilicé ningún objeto de "retraso".

También recomiendo este video de YouTube http://www.youtube.com/watch?v=P6KITGRQujQ&list=UUKW92i7iQFuNILqQOUOCrFw&index=4&feature=plcp , que me ayudó bastante

Si le interesa, he decidido pegar también mi propio código (escrito en coffeescript) para que pueda ver cómo lo hice funcionar.

Para su información, de antemano uso un controlador genérico que me ayuda a hacer CRUD en varios modelos:

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 ....
    ]

Este commit , que es parte de la versión 1.1.5 y superior, expone el $promiseobjeto de $resource. Las versiones de ngResource que incluyen este commit permiten resolver recursos como este:

$ routeProvider

resolve: {
    data: function(Resource) {
        return Resource.get().$promise;
    }
}

controlador

app.controller('ResourceCtrl', ['$scope', 'data', function($scope, data) {

    $scope.data = data;

}]);

Este fragmento es apto para inyección de dependencias (incluso lo uso en combinación de ngmin y uglify ) y es una solución basada en dominio más elegante .

El siguiente ejemplo registra un recurso de teléfono y una ruta de teléfono constante , que contiene toda su información de enrutamiento para ese dominio (de teléfono). Algo que no me gustó en la respuesta proporcionada fue la ubicación de la lógica de resolución : el módulo principal no debe saber nada ni preocuparse por la forma en que los argumentos de los recursos se proporcionan al controlador. De esta manera, la lógica permanece en el mismo dominio.

Nota: si está usando ngmin (y si no lo está: debería) solo tiene que escribir las funciones de resolución con la convención de matriz DI.

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

La siguiente pieza es inyectar los datos de enrutamiento cuando el módulo está en el estado de configuración y aplicarlo al $ 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: '/' });

});

Probar la configuración de ruta con esta configuración también es bastante fácil:

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

Puedes verlo en toda su gloria en mi último (próximo) experimento . Aunque este método funciona bien para mí, realmente me pregunto por qué el inyector $ no está retrasando la construcción de nada cuando detecta la inyección de algo que es un objeto prometedor ; haría las cosas muuuucho más fáciles.

Editar: usado Angular v1.2 (rc2)

Retrasar la visualización de la ruta seguramente conducirá a un enredo asíncrono ... ¿por qué no simplemente rastrear el estado de carga de su entidad principal y usarlo en la vista? Por ejemplo, en su controlador, puede usar las devoluciones de llamada de éxito y error en ngResource:

$scope.httpStatus = 0; // in progress
$scope.projects = $resource.query('/projects', function() {
    $scope.httpStatus = 200;
  }, function(response) {
    $scope.httpStatus = response.status;
  });

Luego, en la vista, podrías hacer lo que sea:

<div ng-show="httpStatus == 0">
    Loading
</div>
<div ng-show="httpStatus == 200">
    Real stuff
    <div ng-repeat="project in projects">
         ...
    </div>
</div>
<div ng-show="httpStatus >= 400">
    Error, not found, etc. Could distinguish 4xx not found from 
    5xx server error even.
</div>

Trabajé desde el código de Misko anterior y esto es lo que he hecho con él. Esta es una solución más actual ya que $deferse ha cambiado a $timeout. $timeoutSin embargo, la sustitución esperará el período de tiempo de espera (en el código de Misko, 1 segundo), luego devolverá los datos con la esperanza de que se resuelva a tiempo. De esta manera, vuelve lo antes posible.

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

Usando AngularJS 1.1.5

Actualización de la función 'teléfonos' en la respuesta de Justen usando la sintaxis AngularJS 1.1.5 .

Original:

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

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

    return deferred.promise;
}

Actualizado:

phones: function(Phone) {
    return Phone.query().$promise;
}

Mucho más corto gracias al equipo de Angular y sus colaboradores. :)

Esta es también la respuesta de Maximilian Hoffmann. Al parecer, ese compromiso lo hizo en 1.1.5.

Puede usar la propiedad de resolución $ routeProvider para retrasar el cambio de ruta hasta que se carguen los datos.

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

Tenga en cuenta que la resolvepropiedad se define en la ruta.

EntitiesCtrlResolvey EntityCtrlResolvees objetos constantes definidos en el mismo archivo que EntitiesCtrly EntityCtrlcontroladores.

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

Me gusta la idea de darkporter porque será fácil para un equipo de desarrollo nuevo en AngularJS entender y trabajar de inmediato.

Creé esta adaptación que usa 2 divs, uno para la barra de carga y otro para el contenido real que se muestra después de cargar los datos. El manejo de errores se haría en otro lugar.

Agregue un indicador 'listo' a $ scope:

$http({method: 'GET', url: '...'}).
    success(function(data, status, headers, config) {
        $scope.dataForView = data;      
        $scope.ready = true;  // <-- set true after loaded
    })
});

En vista html:

<div ng-show="!ready">

    <!-- Show loading graphic, e.g. Twitter Boostrap progress bar -->
    <div class="progress progress-striped active">
        <div class="bar" style="width: 100%;"></div>
    </div>

</div>

<div ng-show="ready">

    <!-- Real content goes here and will appear after loading -->

</div>

Ver también: Documentos de la barra de progreso de Boostrap

Me gustaron las respuestas anteriores y aprendí mucho de ellas, pero hay algo que falta en la mayoría de las respuestas anteriores.

Estaba atrapado en un escenario similar donde estaba resolviendo la URL con algunos datos que se obtienen en la primera solicitud del servidor. El problema que enfrenté fue qué pasa si la promesa es rejected.

Estaba usando un proveedor personalizado que solía devolver uno Promiseque fue resuelto por el resolvede$routeProvider en el momento de la fase de configuración.

Lo que quiero enfatizar aquí es el concepto de when que hace algo como esto.

Ve la url en la barra de url y luego el whenbloque respectivo en el controlador llamado y la vista se refiere hasta ahora muy bien.

Digamos que tengo el siguiente código de fase de configuración.

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

En la URL raíz del navegador, se llama al primer bloque de ejecución; de lo contrario, otherwisese llama.

Imaginemos que se llama a un escenario en el que golpeé rootUrl en la AuthServicePrivider.auth()función de barra de direcciones .

Digamos que la promesa devuelta está en estado de rechazo , ¿entonces qué?

Nada se representa en absoluto.

Otherwise el bloque no se ejecutará como lo es para cualquier url que no esté definida en el bloque de configuración y que sea desconocida para la fase de configuración de angularJs.

Tendremos que manejar el evento que se dispara cuando esta promesa no se resuelve. En caso de fallo $routeChangeErorrse dispara $rootScope.

Se puede capturar como se muestra en el código a continuación.

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

En general, es una buena idea poner el código de seguimiento de eventos en el bloque de ejecución de la aplicación. Este código se ejecuta justo después de la fase de configuración de la aplicación.

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 esta manera podemos manejar el fracaso de la promesa en el momento de la fase de configuración.

He tenido una interfaz de panel deslizante multinivel compleja, con capa de pantalla deshabilitada. Crear una directiva sobre la capa de pantalla de desactivación que crearía un evento de clic para ejecutar el estado como

$state.go('account.stream.social.view');

estaban produciendo un efecto de parpadeo. history.back () en lugar de que funcionó bien, sin embargo, no siempre está de vuelta en la historia en mi caso. Entonces, lo que descubrí es que si simplemente creo el atributo href en mi pantalla de desactivación en lugar de state.go, funcionaría de maravilla.

<a class="disable-screen" back></a>

Directiva 'atrás'

app.directive('back', [ '$rootScope', function($rootScope) {

    return {
        restrict : 'A',
        link : function(scope, element, attrs) {
            element.attr('href', $rootScope.previousState.replace(/\./gi, '/'));
        }
    };

} ]);

app.js acabo de guardar el estado anterior

app.run(function($rootScope, $state) {      

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

        $rootScope.previousState = fromState.name;
        $rootScope.currentState = toState.name;


    });
});

Una posible solución podría ser usar la directiva ng-cloak con el elemento donde estamos usando los modelos, por ejemplo

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

Creo que este requiere menos esfuerzo.