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

Ich habe heute mit dem UI-Router herumgespielt, um das Gerüst in Ionic besser zu verstehen, und eine Sache, die mir aufgefallen ist, war, dass sie dem abstrahierten Zustand von "Tabs" eine URL geben.

Das einzige Mal, dass ich jemals abstrakte Zustände verwendet habe, habe ich eine leere Zeichenfolge als URL verwendet und festgestellt, dass bei einem versehentlichen Versuch, zu einem abstrahierten Zustand zu navigieren (im Gegensatz zum untergeordneten Zustand), folgende Fehlermeldung angezeigt wird:

Übergang zum abstrakten Status '[insertAbstractStateHere]' nicht möglich

bearbeiten:

"Außerdem bekomme ich beim Experimentieren ein großes Gänseei, wenn ich versuche, meinem abstrakten Zustand (außerhalb von Ionic) eine URL zuzuweisen und trotzdem die verschachtelten Zustandsansichten zu rendern. Es wird überhaupt nichts angezeigt."

Die oben zitierte Aussage ist falsch! Ich habe es in Plunker erneut versucht und die verschachtelten Zustände sind aufgetaucht .

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

Anscheinend habe ich es tatsächlich falsch gemacht. Meine neue Frage lautet also:

Gibt es einen Grund, warum man bei der Verwendung abstrakter Zustände einen benannten Zustand anstelle einer leeren Zeichenfolge verwenden würde, oder ist es nur eine Stilwahl?

Der Grund, warum Sie einen abstrakten Status verwenden würden, besteht darin, Ihre Definition trocken zu halten, wenn ein Teil Ihrer URL nicht navigierbar ist. Angenommen, Sie hatten ein URL-Schema wie das folgende:

/home/index
/home/contact

Aus irgendeinem Grund in Ihrem Design war diese URL jedoch ungültig (dh kein Zweck für eine Seite):

/home

Jetzt könnten Sie einfach zwei Zustände für diese Situation mit den vollständigen URLs erstellen, dann würden Sie jedoch /home/zweimal schreiben , und die Beschreibung ist etwas komplizierter. Die beste Idee ist stattdessen, ein abstraktes übergeordnetes Element zu erstellen, dessen zwei andere Status untergeordnete Elemente sind (für UI-Router-Dokumente):

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

Beachten Sie nur, dass wir im übergeordneten Status eine Vorlage zuweisen, deren einziges untergeordnetes Element a ist ui-view. Dies stellt sicher, dass die untergeordneten Elemente gerendert werden (und möglicherweise auch, warum Ihre leer erscheinen).

Manchmal bemerken Sie möglicherweise die Verwendung eines abstrakten Status mit einer leeren URL. Die beste Verwendung dieses Setups ist, wenn Sie einen Elternteil benötigen resolve. Beispielsweise benötigen Sie möglicherweise bestimmte Serverdaten für eine Teilmenge Ihrer Status. Anstatt also in jedem Ihrer Zustände dieselbe Auflösungsfunktion zu verwenden, können Sie ein leeres übergeordnetes URL-URL mit der gewünschten Auflösung erstellen. Dies kann auch nützlich sein, wenn Sie hierarchische Controller wünschen, bei denen das übergeordnete Element keine Verwendung für eine Ansicht hat (nicht sicher, warum Sie dies möchten, aber es ist plausibel).

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

Verwenden Sie den abstrakten Status und aktivieren Sie den UI-Router für die Navigation, ohne den Controller / die Seite neu zu laden.