1

Estimada Comunidad, por favor espero puedan ayudar con este problema, resulta que estoy realizando un proyecto web con angularJS y angular-ui-router. Resulta que tengo el codigo del ruteo que muestro ahora.

app.config(['$stateProvider','$urlRouterProvider','$locationProvider',function($stateProvider,$urlRouterProvider,$locationProvider){
$locationProvider.html5Mode( true ).hashPrefix( '!' );
$stateProvider
            .state('main',
                    {
                        url:"/dinamic/mostrarPerfil",
                        templateUrl : CONTEXT_ROOT + "/templateAngular/body.jsp",
                        controller:"metodo1"
                    })
            .state('profile',
                    {
                        url:"/userProfile",//userProfile
                        templateUrl : CONTEXT_ROOT + "/templateAngular/perfil/headerProfile.jsp",
                        controller:"metodo2"
                    })
}])

El problema que tengo es que al dar click en un enlace me carga el template pero la data que se trae desde el servidor tiene un proceso de carga por lo que algunas imágenes se descuadran y cuando carga ,recién se acomodan. He implementado ngProgress para tal caso , pero me muestra la barra de progreso en la parte superior, pero de golpe me trae el template. Lo que quiero implementar es algo como youtube ,el estilo que tiene este es que cuando das click en un vídeo , te muestra una barra de progreso y una vez que se complete la data recién se muestra el template siguiente. Es decir hasta que no se cargue la data del servidor , no cambie el template original , una vez que se complete recien muestre el template. Este el código del controlador.

app.controller("metodo2",["$scope","$rootScope",'ngProgressFactory','$http',function($scope,$rootScope,$http,ngProgressFactory){
$scope.progressbar = ngProgressFactory.createInstance();
 $scope.progressbar.start();

http.get("${pageContext.request.contextPath}/obtenerUsuario")
    .then(function(response) {
      $scope.usuario = response.data.usuario;
      $rootScope.usuarioGlobal = response.data.usuario;
    }, function(response) {
        $scope.progressbar.complete();
        $scope.validarProfile = true;

      console.log("error message: " + response.statusText);
  });}])

2 respuestas 2

0

tu problema es en el siguiente código

.then(function(response) {
      $scope.usuario = response.data.usuario;
      $rootScope.usuarioGlobal = response.data.usuario;
    }, function(response) {
        $scope.progressbar.complete();
        $scope.validarProfile = true;

      console.log("error message: " + response.statusText);
  })

la función then tiene dos parámetros (las funciones que tienes) el primero es para cuando la respuesta es exitosa y el segundo cuando la respuesta falla (refiriéndome a la llamada al servicio) por lo tanto si tu respuesta esperada es exitosa, en la primera función es donde deberías colocar tú código

.then(function(response) {
  // servicio respondió sin errores
  $scope.usuario = response.data.usuario;
  $rootScope.usuarioGlobal = response.data.usuario;
  $scope.progressbar.complete();
  $scope.validarProfile = true;
}, function(response) {
  // Servicio respondió con errores
  console.log("error message: " + response.statusText);
})
0

Puedes utilizar la libreria angular-block-ui y configurarla para que intercepte todas las peticiones http, de modo a mostrar un loading mientras se estén obteniendo recursos del servidor.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.