Por que dar uma URL “abstract: true”?

Eu estou mexendo no roteador-ui hoje para entender melhor o andaime do Ionic e uma coisa que notei é que eles dão ao estado abstraído de “abas” uma URL.

As únicas vezes em que usei estados abstratos, usei uma cadeia vazia como o URL e percebo que, se alguma vez eu acidentalmente tentei navegar para um estado abstraído (em oposição ao estado filho), recebo o erro:

Não é possível fazer a transição para o estado abstrato ‘[insertAbstractStateHere]’

editar:

“Além disso, ao experimentar, quando tento atribuir um url ao meu estado abstrato (fora do Ionic) e ainda renderizar as visualizações de estado aninhadas, recebo um grande ovo de ganso. Nada aparece.”

a afirmação citada acima é falsa! Eu tentei novamente em Plunker e os estados nesteds apareceram.

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 eu estava de fato fazendo errado. Então minha nova pergunta é:

Existe alguma razão pela qual alguém usaria um estado nomeado em oposição a uma string vazia ao empregar estados abstratos, ou é apenas uma escolha de estilo?

A razão pela qual você usaria um estado abstrato é manter sua definição seca quando você tiver uma parte do seu URL não navegável. Por exemplo, digamos que você tenha um esquema de URL como o seguinte:

 /home/index /home/contact 

No entanto, por qualquer motivo no seu design, esse URL era inválido (ou seja, sem propósito para uma página):

 /home 

Agora você poderia simplesmente criar dois estados para esta situação, com os urls completos, entretanto você estaria escrevendo /home/ duas vezes, e a descrição é um pouco mais complicada. A melhor idéia é criar um pai abstrato em casa do qual os outros dois estados sejam filhos (para documentos do roteador da interface do usuário):

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

Apenas observe que, dentro do estado pai, atribuímos um modelo cujo único filho é uma ui-view . Isso garante que os filhos sejam renderizados (e pode ser por isso que o seu está em branco).


Às vezes, você pode notar o uso de um estado abstrato com um URL em branco. O melhor uso desta configuração é quando você precisa de uma resolve parental. Por exemplo, você pode exigir alguns dados de servidor específicos para um subconjunto de seus estados. Portanto, em vez de colocar a mesma function de resolução em cada um dos seus estados, você pode criar um pai de URL em branco com a resolução desejada. Também poderia ser útil se você quiser controladores hierárquicos, onde o pai não tem uso para uma visão (não tenho certeza porque você iria querer isso, mas é plausível).

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

Use o estado abstrato, também permita que o roteador ui faça a navegação sem recarregar o controlador / página.