7

Estoy migrando una aplicación a angular, pero me enredado un poco con eso de las rutas, sobre todo con las sub-rutas, lo cual tengo los siguientes problemas y dudas:

Estructura de mi aplicación

aplication structure

El paso del index al loading lo realice, también el de los menús y las vistas, pero ocurre el error de cargar primero siempre el menú de los profesores, supongo que podria ser por el orden de las carpetas de los templates.

Mis dudas serian:

  1. Cuando se deben usar templates o plantillas anidadas
  2. Si la estructura de los folders o carpetas afecta la plantilla que carga

Estructura

estructura de los tmplates

Module

angular.module('unicesarApp', ['ionic'])
           .controller('formulario', formulario)
           .service('obtenerDatos', obtenerDatos)
           .config(config);

Config

config.$inject = ['$stateProvider', '$urlRouterProvider'];

    function config($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise("/login");

                 $stateProvider
                        .state('login', {
                            url: '/login',
                            templateUrl: "Templates/login.html",
                            controller: "formulario"
                        })

                        .state('Loading',{
                             url: '/loading',
                             templateUrl: "Templates/loading.html"
                        })

                        .state('menuestu',{
                             url: '/menuestu',
                             templateUrl: "Templates/Estudiante/menuestu.html"
                        })
                        .state('perfilestu',{
                             url: '/perfilestu',
                             templateUrl: "Templates/Estudiante/perfilestu.html"
                        })
                        .state('horarioestu',{
                             url: '/horarioestu',
                             templateUrl: "Templates/Estudiante/horarioestu.html"
                        })
                        .state('calificaciones',{
                             url: '/calificaciones',
                             templateUrl: "Templates/Estudiante/calificaciones.html"
                        })

                        .state('menuprof',{
                             url: '/menuprof',
                             templateUrl: "Templates/Docente/menuprof.html"
                        });                    


    };

Controller

formulario.$inject = ['$scope', 'obtenerDatos', '$state'];

    function formulario($scope, obtenerDatos, $state){

        $scope.login = function(){

            var datos, datosRespuesta;

            datos = {
                Usuario: $scope.usuariotxt,
                Password: $scope.passwordtxt
            };

            if(datos.Usuario == undefined && datos.Password == undefined){

                $scope.respuesta = "Los campos estan vacios";

            }else{

                    obtenerDatos.Autenticacion(datos).then(function (response){


                    if(response.data){  

                       datosRespuesta = response.data; 


                    if(datosRespuesta === "Usuario no registrado"){

                            $scope.respuesta = datosRespuesta;

                    }else if(datosRespuesta === "Contraseña incorrecta"){

                            $scope.respuesta = datosRespuesta;

                    }else if(datosRespuesta.estudiante){

                            obtenerDatos.getDatos(datosRespuesta);

                            $state.go('Loading');

                            setTimeout(alerta, 3000);

                            function alerta(){
                              $state.go('menuestu');
                            };

                    }else{

                            obtenerDatos.getDatos(datosRespuesta);

                            $state.go('Loading');

                            setTimeout(alerta, 3000);

                            function alerta(){
                              $state.go('menuprof');
                            };

                    }; 


                    }else{

                        console.log(response.status);
                        $scope.respuesta = response.status;

                    };

                });

            };



         };

    };

Services

obtenerDatos.$inject = ['$http', '$httpParamSerializer'];

    function obtenerDatos($http, $httpParamSerializer){

        var datosIngreso;

        function Autenticacion(datos){

            var url = 'http://190.109.185.138/Apipedro/api/login';

            return $http.post(url, $httpParamSerializer(datos), {
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
            });

        };

        function getDatos(info){
            datosIngreso = info;
        };

        function setDatos(){
           return datosIngreso;
        };

        return {
            Autenticacion: Autenticacion,
            getDatos: getDatos,
            setDatos: setDatos
        };

    };

1 respuesta 1

3

pero ocurre el error de cargar primero siempre el menú de los profesores, supongo que podria ser por el orden de las carpetas de los templates.

Lo primero que voy a decirte es que setTimeout no funciona bien con angular, salvo que invoques a $scope.apply en su callback; pues, por si solo, no dispara el ciclo de digest y angular "no se entera" que ha ocurrido el evento.

Por lo que la función alerta, debe ser así:

function alerta() {
  $scope.$apply(function(){ 
     $state.go('menuestu'); // para el otro estado (menuprof) hacer lo mismo
  });
};

$apply fuerza que se ejecute el ciclo interno de Angular.

Ahora, angular cuenta con un servicio propio de timers, y sería lo mas lógico: $timeout, que ya invoca internamente al método $apply.

$timeout(function() {
    $state.go('menuestu'); // para el otro estado (menuprof) hacer lo mismo
}, 3000);

No debes olvidar inyectar $timeout en tu controller.

Q: ¿Cuándo se deben usar templates o plantillas anidadas?

Cuando los estados anidados tienen un template común entre si. Es decir, que dentro del template del estado padre, hay una ng-view la cual cambiara según el sub estado. Como A, B, C y D son sub vistas, parece confuso, pero no son sub estados. Eso seria si tienes un solo cuadro interno que puede tener solamente uno a la vez: A o B o C o D, pero no todos juntos.

Salvo que todos estos estados tengan "una parte común" (en la vista o la vista-modelo), ahí podrías refactorizarlo para exponer lo común en el estado padre y las vistas con sus detalles particulares.

Q: ¿la estructura de las carpetas afecta la plantilla que carga?

No, en lo absoluto. Solo indica adonde debe ir el navegador a buscar cada pieza.

En relación a obtenerDatos voy a decir que has utilizado los nombres getDatos y setDatos de una manera confusa, pues los nombres deberían ser a la inversa. set para establecer y get para obtener. Ademas de que no estoy seguro de para que los guardas ahí, pues no se usa en ninguna otra parte, yo lo eliminaría.


Otras sugerencias

Por otra parte, no hay necesidad de hacer eso, quiero decir: poner un timer. Mucho mejor sería cambiar a 'Loading' antes de hacer el pedido ajax... queda mas orgánico.

Si te interesa este cambio, podrías eliminar por completo el método getDatos y setDatos (que según me dices no tiene utilidad) y establecer directamente el estado correspondiente. En los casos de los errores de texto, vuelves al estado login, para que el error se muestre en la vista de login, donde debe.

Finalmente agregas el catch a tu promise. Y cierras una maquinita de estados que utiliza las bondades de angular y ui-router. Es decir que ante cualquier salida, terminara en uno u otro estado o en error pero nunca en loading.

Algo así...

// cambiamos a loading
$state.go('Loading');

// solicitamos los datos
obtenerDatos.Autenticacion(datos).then(function(response) {

  if(response.data) {
    datosRespuesta = response.data;

    if (datosRespuesta === "Usuario no registrado" || 
          datosRespuesta === "Contraseña incorrecta") {    
      $scope.respuesta = datosRespuesta;
      $state.go('login');
    } else {
      // aquí estableces el estado.
      $state.go(datosRespuesta.estudiante ? 'menuestu' : 'menuprof');
    }   

  } else {
    // probablemente esto nunca pase.. salvo que el server no mande datos.
    console.log(response.status);
    $scope.respuesta = response.status;
    $state.go('login');

    // quizá lo mejor seria cambiarlo por 
    // throw "No Data"; // esto llama automáticamente a catch.
  };      

}).catch(function(reason) {
  // ademas te facilita manejar el estado 'Error de conexion'.
  $state.go('offline'); // este lo invente yo
});

Nota: Asumo que datosRespuesta.estudiante llega y es verdadero en al menos un caso.

5
  • Muy buena tu explicacion @rnd, ya mismo pruebo y te digo, tambien estoy teniendo una seria de problemas con el css al compilar la apk usando ionic build android el 11 mar. 2016 a las 3:22
  • @PedroMiguelPimientaMorales termine. esta vez de verdad. el 11 mar. 2016 a las 3:26
  • me sale este error TypeError: Cannot read property 'then' of undefined , y tampoco me redirecciona a ninguno de los dos menus el 11 mar. 2016 a las 3:35
  • @PedroMiguelPimientaMorales por eso puse "quizá debas modificarlo para que retorne una Promise"... Si puedes editar la pregunta y poner el codigo del metodo obtenerDatos.getDatos te explicare como modificarlo. A proposito, al producirse el error, no hay forma que invoque el callback, por eso no cambia de estado. el 11 mar. 2016 a las 3:36
  • Continuemos el debate en el chat. el 11 mar. 2016 a las 3:50

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.