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