Warum geben Sie einem "abstract: true" -Zustand eine URL?

Question

Ich habe heute mit UI-Router herumspielen in dem Versuch, das Gerüst in Ionic besser zu verstehen und eine Sache, die ich bemerkte, war, dass sie den abstrahierten Zustand von "Tabs" eine URL geben.

Die einzigen Male, die ich jemals abstrakte Zustände verwendet habe, habe ich eine leere Zeichenfolge als URL verwendet und ich merke, dass wenn ich jemals versehentlich versucht habe, zu einem abstrahierten Zustand (im Gegensatz zum Kind-Zustand) zu navigieren der Fehler:

Cannot transition to abstract state '[insertAbstractStateHere]'

edit:

„Darüber hinaus in dem experimentieren, wenn ich versuche, eine uRL zu meinem abstrakten Zustand (außerhalb von Ionic) zuweisen und nach wie vor die verschachtelten Zustandsansichten machen, ich ein großes Gänseei. Nichts zeigt sich überhaupt. "

die oben genannte Aussage ist falsch! Ich versuchte es wieder in Plunker und die verschachtelten Zustände zeigten sich.

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

Offenbar habe ich es tatsächlich falsch gemacht. Also meine neue Frage lautet:

Gibt es einen Grund, warum man einen benannten Zustand im Gegensatz zu einer leeren Zeichenfolge in abstrakten Zuständen verwenden würde, oder ist es nur eine Stilwahl?

Answer 1

Der Grund, warum Sie einen abstrakten Zustand verwenden würden, ist, Ihre Definition trocken zu behalten, wenn Sie einen Teil Ihrer URL nicht navigierbar haben. Zum Beispiel, sagen, dass Sie ein URL-Schema wie folgt haben: aus irgendeinem Grunde in Ihrem Design, diese URL war ungültig (dh ohne Zweck für eine Seite)

/home/index 
/home/contact 

jedoch:

/home 

Jetzt könnten Sie einfach zwei Zustände für diese Situation erstellen, mit den vollständigen URLs, aber dann würden Sie zweimal /home/ schreiben, und die Beschreibung ist ein bisschen mehr verschachtelt. Die beste Idee ist stattdessen ein Haus abstrakte Elternteil zu schaffen, die beiden anderen Staaten sind Kinder (für ui-Router docs):

$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' 
    }) 

bemerken nur, dass innerhalb des übergeordneten Zustand weisen wir eine Vorlage, deren einziges Kind a ui-view. Dadurch wird sichergestellt, dass die untergeordneten Elemente gerendert werden (und möglicherweise auch, dass Ihres leer angezeigt wird).

---

Manchmal können Sie die Verwendung eines abstrakten Status mit einer leeren URL bemerken. Die beste Verwendung dieses Setups ist, wenn Sie eine parental resolve benötigen. Beispielsweise benötigen Sie möglicherweise bestimmte Serverdaten für eine Teilmenge Ihrer Status. Anstatt also die gleiche Auflösungsfunktion in jeden Ihrer Zustände zu setzen, könnten Sie ein leeres URL-Elternelement mit der gewünschten Auflösung erstellen. Es könnte auch nützlich sein, wenn Sie hierarchische Controller wollen, bei denen der Elternteil keine Verwendung für eine Ansicht hat (nicht sicher, warum Sie das wollen, aber es ist plausibel).

Answer 2

Verwenden Sie den abstrakten Status, aktivieren Sie auch den UI-Router, um die Navigation ohne Nachladen der Controller/Seite zu tun.

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" 
})