Foro

Home Forums Frameworks y librerías Ionic ¿enrutado de vistas segun id?

This topic contains 2 replies, has 2 voices, and was last updated by  Josuer 3 dias, 2 horas .

Viendo 3 respuestas - de la 1 a 3 (de 3 en total)
  • ¿enrutado de vistas segun id?

    Intervenciones
  • Josuer 
    Participant

    Buenas esto haciendo un pequeño proyecto personal y me quede algo estancado en una parte.
    primero decir que en la app estoy trabajando en MVC y sin niguna conexion a a una base de datos externas todo en local, ahora:
    Tengo una factoría que almacena paises.

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.
    20.
    21.
    22.
    23.
    24.
    25.
    26.
    27.
    28.
    29.
    30.
    31.
    32.
    33.
    34.
    35.
    36.
    37.
    38.
    39.
    40.
    41.
    42.
    43.
    44.
    45.
    46.

    angular.module('app.services', [])

    //definicion de las factorias
        .factory("PaisesFact", function(){
          
          //almacen interno
          var paises =  [
            
            
            {id   : 0,
             titulo : "Italia",
             img : "img/paises/italia.jpg"
            
      
            },
            
            {id   : 1,
             titulo : "Argentina",
             img : "img/paises/argentina.jpg"
            
      
            }
              ....(hay mas)
        
          ];
          
            //sistema de pedidos
            return {
              //linea de produccion que devuelve todos los productos de la fabrica
              todos: function() {
                return paises;
              },
              //fin de todos
              
              //linea de produccion que devuelve todos los productos de la fabrica
              unosolo: function(Id) {
                return paises[Id];
              }
              //fin de uno solo          
            };

        });
        //fin de factoria

    //fin de servicios    
    ;    ]

    Y otras factorias separadas de la misma forma pero que una por ejemplo es italia.js almacenas las ciudades de la misma y españa.js que almacena comunidades y asi para las demas.
    Aparte otras factorias mas que estaran separadas segun las ciudades/comunidades de los paises que tendran detalles de las mismas.

    Hasta ahora tengo un template que me devuelve todos los paises, quiero que al pulsar en un pais me lleve a su respectiva vista de ciudades/comunidades y que al pulsar en una ciudad me devuelva un detalle de la misma

    Tengo un enrutado simple que seria esto:

     Code: app.js (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.
    20.
    21.
    22.
    23.
    24.
    25.
    26.
    27.
    28.
    29.
    30.
    31.
    32.
    33.
    34.
    35.
    36.
    37.
    38.
    39.
    40.
    41.
    42.
    43.
    44.
    45.
    46.
    47.
    48.
    49.
    50.
    51.
    52.
    53.
    54.
    55.
    56.
    57.
    58.
    59.
    60.
    61.
    62.
    63.
    64.
    65.

    [code]
        //Enrutado de la Aplicacion
    .config(function($stateProvider, $urlRouterProvider) {
      $stateProvider

          //Ruta del Menú
        .state('app', {
        url: '/app',
        abstract: true,
        templateUrl: 'templates/menu.html',
        controller: 'AppCtrl'
      })
        
          
       .state('app.paises', {
          url: '/paises',
          views: {
            'menuContent': {
              templateUrl: 'templates/paises.html',
              controller: 'PaisesCtrl'
            }
          }
        })
          
      .state('app.pais', {
        url: '/paises/:paisId',
        views: {
          'menuContent': {
            templateUrl: 'templates/pais.html',
            controller: 'PaisCtrl'
          }
        }
      });

      
      
      // if none of the above states are matched, use this as the fallback
      $urlRouterProvider.otherwise('/app/paises');
    });

                  SU CONTROLADOR ES ESTE

    //Controlador de la primera vista TODOS LOS PAISES
    .controller('PaisesCtrl', function($scope, PaisesFact) {
      $scope.paises = PaisesFact.todos();
      
    })

                   SU TEMPLATE

    <ion-view view-title="Países">
      <ion-content>
      
        <ion-list ng-repeat="pais in paises">
          <ion-item class="item item-image"  href="#/app/paises/{{pais.id}}">
          
            <img />
            <h2 class="titulo-pais">{{pais.titulo}}</h2>
          
        
          </ion-item>
        </ion-list>

      </ion-content>
    </ion-view>

    Pregunto: como se haria el enrutado para que pueda tener una vista general PAISES que dependiendo del pais me lleve a una lista de ciudades y que en las ciudades me lleve dependiendo tambien de la misma a un pequeño detalle de ella.
    Espero haberme explicado bien

    • This topic was modified 1 semana, 1 dia by  Josuer.
    • This topic was modified 1 semana, 1 dia by  Josuer.
    • This topic was modified 3 dias, 19 horas by Jose Jesus Perez Rivas Jose Jesus Perez Rivas. Reason: Debes utilizar el botón que te permite publicar código en el foro

    • This topic was modified 1 semana, 1 dia by  Josuer.
    • This topic was modified 1 semana, 1 dia by  Josuer.
    • This topic was modified 3 dias, 19 horas by Jose Jesus Perez Rivas Jose Jesus Perez Rivas. Reason: Debes utilizar el botón que te permite publicar código en el foro
    Jose Jesus Perez Rivas
    Jose Jesus Perez Rivas 
    Keymaster

    Hola @josuer,

    Una de las maneras sería, generar una nueva vista igual que has realizado la de paises, y pasarle el id en la url:

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.

    .state('app.ciudades', {
        url: '/ciudad/:ciudadId',
        views: {
          'menuContent': {
            templateUrl: 'templates/ciudades.html',
            controller: 'CiudadCtrl'
          }
        }

    Luego dentro del controlador, usar la factoría que tienes y listo!

    Espero te sea de ayuda :)


    CEO y Director de desarrollo en Cero y Uno Desarrollamos Aplicaciones – ¿tienes algún proyecto? ¡trabajemos juntos! contacto@ceroyuno.eshttp://www.ceroyuno.es Fundador de PhoneGap Spain http://www.phonegapspain.com Twitter: https://twitter.com/JoseJ_PR


    Josuer 
    Participant

    Buenas @Jose Jesus Perez Rivas Pimero que nada gracias por la respuesta. Ahora el hacer un sub-template de un template principal ya lo conocía,

     Code: Actual Apps (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.
    20.
    21.
    22.
    23.
    24.
    25.
    26.
    27.
    28.
    29.
    30.
    31.
    32.

    //Enrutado de la Aplicacion
    .config(function($stateProvider, $urlRouterProvider) {
      $stateProvider

          //Ruta del Menú
        .state('app', {
        url: '/app',
        abstract: true,
        templateUrl: 'templates/menu.html',
        controller: 'AppCtrl'
      })
        
          //Ruta Multiple de PAISES
       .state('app.paises', {
          url: '/paises',
          views: {
            'menuContent': {
              templateUrl: 'templates/paises.html',
              controller: 'PaisesCtrl'
            }
          }
        })
          
      .state('app.pais', {
        url: '/paises/:paisId',
        views: {
          'menuContent': {
            templateUrl: 'templates/pais.html',
            controller: 'PaisCtrl'
          }
        }
      })

    esto haria que al hacer tap en una vista me lleve a su respectivo detalle pero lo que quiero es:

    tener un un template principal(paises) que me lleve a un sub-template(italia,españa,etc) y que este ultimo me llevo a otro sub-sub-template(dentro de las factorias de ciudades cendran los detalles). serian 3 vistas obviamente dependiendo de un Id.

     Code: Posible App.js (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.
    20.
    21.
    22.
    23.
    24.
    25.
    26.
    27.
    28.
    29.
    30.
    31.
    32.
    33.
    34.
    35.
    36.
    37.
    38.
    39.
    40.
    41.
    42.

    //Enrutado de la Aplicacion
    .config(function($stateProvider, $urlRouterProvider) {
      $stateProvider

          //Ruta del Menú
        .state('app', {
        url: '/app',
        abstract: true,
        templateUrl: 'templates/menu.html',
        controller: 'AppCtrl'
      })
        
          //Ruta Multiple de PAISES
       .state('app.paises', {
          url: '/paises',
          views: {
            'menuContent': {
              templateUrl: 'templates/paises.html',
              controller: 'PaisesCtrl'
            }
          }
        })
          
      .state('app.pais', {
        url: '/paises/:paisId',
        views: {
          'menuContent': {
            templateUrl: 'templates/pais.html',
            controller: 'PaisCtrl'
          }
        }
      })

    .state('app.detalle', {
        url: '/paises/:paisId/:detalleId',
        views: {
          'menuContent': {
            templateUrl: 'templates/detalle.html',
            controller: 'DetalleCtrl'
          }
        }
      })

    Aunque no lo consigo entender del todo, pensado un poco…quizá tendría que poner un “segundo id” en la factoría de ciudades.js para “relacionar” la primera factoria con la segunda, es decir :

    PAISES.JS

    id: 0,
    nombre: italia

    id: 1,
    nombre: españa

    y todos los paises que quedan

    ITALIA.JS

    id: 0, //este id haría referencia al id de italia
    ids: 1 //este se usaria para una vista detallada de cada cuidad
    nombre: brescia

    id: 0,
    ids: 2
    nombre: venecia

    ESPAÑA.JS

    id: 1, //este id haría referencia al id de italia
    ids: 1 //este se usaria para una vista detallada de cada cuidad
    nombre: valencia

    id: 1,
    ids: 2
    nombre: madrid

    Pienso que se haría algo así pero hasta ahi llego el tema de como se haria el controlador ni el template logro entenderlo.
    Espero haberme explicado

    aqui tengo el proyecto subido por si me podrias ayudar o alguno que lo vea, Muchas gracias de antemano

    https://github.com/frjosue/ionic

    • This reply was modified 3 dias, 2 horas by  Josuer.

    • This reply was modified 3 dias, 2 horas by  Josuer.
Viendo 3 respuestas - de la 1 a 3 (de 3 en total)

You must be logged in to reply to this topic.