angularjs - ¿Por qué dar una url a un estado "abstracto: verdadero"?

ionic-framework angular-ui-router

Question

Hoy he estado jugando con el enrutador ui para tratar de comprender mejor el andamiaje en Ionic y una cosa que noté fue que dan una URL al estado abstracto de "pestañas".

Las únicas veces que utilicé estados abstractos, utilicé una cadena vacía como url y noté que si alguna vez accidentalmente intenté navegar a un estado abstracto (en oposición al estado secundario) obtengo el error:

No se puede realizar la transición al estado abstracto ''[insertAbstractStateHere]''

editar:

"Además, al experimentar, cuando trato de asignar una URL a mi estado abstracto (fuera de Ionic) y aún mostrar las vistas de estado anidado, obtengo un gran huevo de gallina. Nada aparece en absoluto".

¡la declaración citada arriba es falsa! Lo intenté nuevamente en Plunker y Plunker los estados anidados.

 angular.module(''routingExperiments'', [''ui.router''])
      .config(function($urlRouterProvider, $stateProvider) {

    $stateProvider

      .state(''abstractExperiment'', {
        abstract: true,
        url: '''', //<--- seems as if any string can go here.
        templateUrl: ''abstractExperiment.html''
      })
      .state(''abstractExperiment.test1'', {
        url: ''/test1'',
        templateUrl: ''abstractTest1.html''
      });
  });

Aparentemente lo estaba haciendo mal. Entonces mi nueva pregunta es:

¿Hay alguna razón por la que uno usaría un estado con nombre en lugar de una cadena vacía al emplear estados abstractos, o es solo una elección de estilo?

Answer 1

La razón por la que usaría un estado abstracto es para mantener su definición seca cuando tiene una parte de su URL no navegable. Por ejemplo, supongamos que tenía un esquema de URL como el siguiente:

/home/index
/home/contact

Sin embargo, por cualquier motivo en su diseño, esta URL no era válida (es decir, no tiene ningún propósito para una página):

/home

Ahora podría simplemente crear dos estados para esta situación, con las URL completas, sin embargo, estaría escribiendo /home/ dos veces, y la descripción es un poco más complicada. En cambio, la mejor idea es crear un padre abstracto en el hogar del cual los otros dos estados sean hijos (para documentos de enrutador ui):

$stateProvider
    .state(''parent'', {
        url: ''/home'',
        abstract: true,
        template: ''<ui-view/>''
    })
    .state(''parent.index'', {
        url: ''/index'',
        templateUrl: ''index.html''
    })
    .state(''parent.contact'', {
        url: ''/contact'',
        templateUrl: ''contact.html''
    })

Solo observe que dentro del estado primario, asignamos una plantilla cuyo único hijo es una ui-view . Esto garantiza que los hijos se procesen (y podría ser el motivo por el cual el suyo aparece en blanco).

A veces puede notar el uso de un estado abstracto con una URL en blanco. El mejor uso de esta configuración es cuando necesita una resolve parental. Por ejemplo, puede requerir algunos datos de servidor particulares para un subconjunto de sus estados. Por lo tanto, en lugar de poner la misma función de resolución en cada uno de sus estados, podría crear una URL principal en blanco con la resolución deseada. También podría ser útil si desea controladores jerárquicos, donde el padre no tiene uso para una vista (no estoy seguro de por qué querría esto, pero es plausible).

Answer 2

Use el estado abstracto, también habilite el enrutador ui para navegar sin recargar el controlador / página.

Answer 3

.state(''home'', {
        url: ''/home'',
        abstract:true,                        
        controller: "HomeController",
        templateUrl:"path to your html"                       
})
.state(''home.list'', {
        url:"",
        controller: "HomelistController",
        templateUrl:"path to your html" 
})