2

Ich habe den Status für meine Shop-Anwendung, aber ich bin mir nicht sicher, ich mache es richtig. Da ich mehr als einen optionalen Parameter in URL habe, bin ich nicht sicher, wie ich es implementieren soll.Angular Ui Router optional URL Params

.state('app.products', { 
    abstract: true, 
    views: { 
     '[email protected]': { 
      templateUrl: 'app/products/views/product.html' 
     }, 
     '[email protected]': { 
      templateUrl: 'app/products/views/product-header.html' 
      } 
    } 
}) 

Oben ist meine abstrakte Ansicht für Produktseite. Die Produkte werden in Mann/Frauen getrennt werden und auch Unterkategorien wie:

www.example.com/man/ 

www.example.com/man/footwear/ 

www.example.com/man/footwear/shoes 

Man, footwear und shoes sind optional, da man param woman sein kann, kann footwear sein cloth (wo zuletzt param shirts zB würde) und alle mögliche Kombinationen der oben genannten.

Ich bin mir nicht sicher, ob ich jeden Staat separat machen muss oder ich kann all dies mit einem weiteren Staat außer diesem umgehen?

Nur zu beachten, product header ist hier nicht relevant und wenn es für eine gute Struktur erforderlich ist, um es zu entfernen, kann ich sicherlich das tun.

Ich kann einfach nichts ähnliches online finden, so wäre Link auch hilfreich, wenn jemand irgendwelche hat.

Antwort

1

Ich habe in letzter Zeit etwas sehr ähnliches getan Verschachtelung jedes Unterkategorie Zustand in seine übergeordnete Kategorie Zustand. Ein Vorteil dieser Vorgehensweise besteht darin, dass Sie nicht viel Code in einem untergeordneten Status wiederholen müssen, der bereits in einem übergeordneten Status definiert wurde, und auch Daten und Ansichten neu laden müssen, die bereits im übergeordneten Status geladen wurden .

Hier ist ein Beispiel für den Einstieg:

.state('app.products', { 
    abstract: true, 
    url: '/products', 
    views: {...} 
}) 
.state('app.products.gender', { 
    url: '/:gender', 
    views: {...} 
}) 
.state('app.products.gender.category', { 
    url: '/:category', 
    views: {...} 
}) 
.state('app.products.gender.category.type', { 
    url: '/:type', 
    views: {...} 
}) 

Zuerst werden die Urls stapeln automatisch in Kinder Staaten. Das bedeutet, dass Sie nur einen URL-Parameter pro Kindstatus definieren müssen und Sie immer noch URLs wie diese erhalten /app/products/:gender/:category/:type.

Der zweite Vorteil den es auf diese Weise zu tun, ist, dass Ansichten in einem übergeordneten Zustand definiert sind, in all seinem Kind automatisch eingeschlossen heißt, sofern Sie es nicht ausdrücklich außer Kraft setzen:

.state('app.products.gender.category', { 
    url: '/:category', 
    views: { 
    '[email protected]': {templateUrl: 'foo.html'}, 
    '[email protected]': {templateUrl: 'bar.html'} 
    } 
}) 
.state('app.products.gender.category.type', { 
    url: '/:type', 
    views: { 
    // foo.html is still rendered here 
    // bar.html is replaced by baz.html 
    '[email protected]': {templateUrl: 'baz.html'} 
    } 
}) 

Ein weiterer Vorteil von diesem gesehen Beispiel ist, dass foo.html nicht neu geladen wird, wenn sich der Status zu app.products.gender.category.type ändert. Angenommen, foo.html hat eine lange Liste von Typen in dieser Kategorie. Wenn der Benutzer auf ein Element in der Liste klickt, das den Status von app.products.gender.category in den untergeordneten Status app.products.gender.category.type ändert, wird die lange Bildlaufliste von foo nicht erneut geladen, und der Benutzer kann immer noch das Objekt sehen, auf das er geklickt hat. Auf der anderen Seite, wenn dieser Klick den Status in einen Nicht-Kind-Status geändert hätte, wäre die Liste wahrscheinlich neu geladen worden (Daten und alle), und der Benutzer müsste möglicherweise scrollen, um das Element zu sehen, auf das er geklickt hat.

Einige Ratschläge:

  • verschachtelte Zustand Namen kurz halten.
  • Fügen Sie nur einen Zustand in der Hierarchie ein, wenn es absolut notwendig ist (ich sehe Ihnen app.products!).
  • Es gibt viele Möglichkeiten, dass diese Technik schief gehen kann, also überprüfen Sie die ui-router docs für Konfigurationen, die Ihnen helfen, weniger Code.
+0

Danke, großer Vorschlag, obwohl ich so viele Staaten vermeiden wollte, scheint es jetzt viel besser. Ich habe den Status von app.products als abstrakte und definierte URL hinzugefügt: '? {Page, brands}, da alle Kinder (eines, das du oben geschrieben hast) diese optionalen Parameter haben werden. Ist dies der richtige Weg, um optionale Abfrageparameter für den abstrakten Zustand zu definieren? Natürlich habe ich Params hinzugefügt: {page: {value: '1', squash: true}, Marken: {value: null, squash: true}}. – zhuber

Verwandte Themen