URL-Routing für verschachtelte Zustände in UI-Router

Question

Also ich benutze UI-Router, um meine AngularJS App zu bauen. Ich bin jedoch verwirrt darüber, wie das URL-Routing im Falle von geschachtelten Zuständen funktioniert, hauptsächlich aufgrund der widersprüchlichen Ideen (nach meinem Verständnis), die im Wiki für UI-Router zur Verfügung gestellt werden.

Die erste Idee

daher vielleicht abstrakt Zustand unter

verwendet wird

Die zweite Idee

Wie in der Dokumentation (erste Idee) angegeben, wird die URL des Parent-Status demjenigen der Kinder vorangestellt, nur im Falle von 'Abstrakt': True-Eigenschaft, definiert im Eltern-Status.

Die Dokumentation (zweite Idee) erwähnt jedoch auch, wie das oben genannte eine Standardfunktion ist.

Sind die beiden obigen Ideen für dasselbe Konzept nicht widersprüchlich? Oder habe ich sie völlig missverstanden?

Answer 1

Nun, die Dokumentation Aussagen sind korrekt. Vielleicht nicht klar für jemanden - aber richtig. Es heißt einfach:

1) Keine Vererbung von url: "..url..."Einstellung. Das bedeutet, dass der untergeordnete Status nicht hat url mit den gleichen Wert wie Eltern gesetzt haben. Beide Werte sind unabhängig.

2) Es gibt implizit url Verkettung. Child state url(in der Adressleiste, nicht die Einstellung) ist von allen seinen Vorfahren url gebaut.

So ist die Dokumentation korrekt. Diese example is just for spielen ... Es zeigt, was wir wissen. Kind hat verschiedene urlEinstellung dann Elternteil. Kinder Zustand url in der Adresszeile ist von seinem urlEinstellung bauen - mit vorangestellt Eltern (n) url

// NON abstract 
    .state('parent1', { 
     abstract: false, 
     url: "/parent1", 
     templateUrl: 'tpl.html', 
    }) 
    .state('parent1.child1', { 
     url: "/child1", 
     templateUrl: 'tpl.html', 
    }) 
// abstract 
    .state('parent2', { 
     abstract: true, 
     url: "/parent2", 
     templateUrl: 'tpl.html', 
    }) 
    .state('parent2.child2', { 
     url: "/child2", 
     templateUrl: 'tpl.html', 
    }) 

url in href:

non abstract 
<a href="#/parent1"> 
<a href="#/parent1/child1"> 
abstract 
<a href="#/parent2"> - cannot navigate there - is abstract 
<a href="#/parent2/child2"> 

Answer 2

Sie versuchen, Konzept nur in diesem Dokument zu zeigen, also erwarte kein aktuelles Beispiel hier.

Dies ist ein gemeinsames Konzept für UI-Router.

Verhalten des abstrakten Zustandes.

1) Sie können nicht abstrakt Zustand direkt anrufen, also können wir hier keine Kontakte Zustand direkt anrufen

/contsacts Diese Umleitung zu unserem Standardzustand

2) Abstrakt Staat sollte immer mindestens einen Kinderstaat haben. So können wir hier nennen

/Kontakt/Liste als contacts.list Zustand

3) Eltern Zustand der Vorlage

<div ui-view></div> 

Richtlinie haben müssen, wo Kind Staat propagieren.