AngularJS Restful Routing

Dies ist jetzt möglich mit ui-router 0.2.8:

Aber um $state.includes() Über Nav-Menüs wäre das wahrscheinlich besser:

Das Obige könnte mit einer Schleife vereinfacht werden, um das state s aus einem Array von Ressourcen aufzubauen ( $ stateProvider unterstützt das Hinzufügen von Zuständen im Grunde wann immer ):

Caveat ui-router unterstützt optionale State-Parameter nicht wirklich ( geplant für v0.4 )

Denken Sie darüber ein wenig mehr nach. Sie könnten nur einen einzigen Controller für diese generischen CRUD / REST-Typ-Operationen haben. Laden Sie dann die Vorlagen mit den Ressourcen- und Ansichtsparametern.

• Erstellen
  • # / foo / create / 0
  • Dies hat seine eigene Formularvorlage "/views/foo/create.html" und die 0 ist nur für einen Platzhalter da.
  • bei submit würden Sie eine Methode auf dem Controller aufrufen ng-click="save ()" die auf dem Server bei POST "/ rest / foo" posten würde.
• Lesen
  • # / foo / view / 1
  • Auch hier ist die Vorlage "/views/foo/view.html" nur eine Ansicht der Daten
  • Sie können eine Service-Methode aufrufen, um die Daten von Ihrem Server mit GET "/ rest / foo / 1"
  zu erhalten
• Aktualisierung - # / foo / editieren / 1
  • Sie können dieselbe Vorlage wie create verwenden oder Sie können eine andere "/views/foo/edit.html" verwenden, wenn Sie möchten.
  • Ziehen Sie die Daten auch mit GET "/ rest / foo / 1"
  • Übermitteln Sie die Daten mit PUT "/ rest / foo / 1"
• Löschen
  • # / foo / delete / 1
  Die Servicemethode
  • würde DELETE "/ rest / foo / 1"
  aufrufen
  • Ich glaube nicht, dass Sie dafür einen Hash wünschen, aber Sie könnten einen verwenden, weil der Controller tatsächlich eine Überprüfung durchführen oder alles, was Sie gerne löschen möchten. Vielleicht haben Sie eine Ansicht namens "/views/foo/delete.html", die fragt, ob Sie den Datensatz löschen möchten. Dann könntest du ng-click="delete (itemid)" auf einer Schaltfläche irgendwo haben, die den Gegenstand über Ajax löscht.

All dies kann mit einem einzigen Controller / Service erfolgen und dynamisch den Service generieren und URLs anzeigen.

Alles, was benutzerdefiniert ist, benötigen Sie einen benutzerdefinierten Controller und benutzerdefinierte Routen und Dienstmethoden für. Ich könnte vielleicht ein Beispiel zusammenstellen, aber nicht heute Nacht.

Hier ist ein Projekt auf github, das etwas tut, was dem entspricht, was Sie fragen

BEARBEITEN: Ich entdeckte etwas Interessantes, das mir noch nie in den Sinn gekommen war. Wenn Sie den Controller in der Route auslassen, wird der in der Vorlage angegebene Controller verwendet. Solange also alle Vorlagen, die Sie für einen bestimmten Controller verwenden, ng-controller="resource" haben, wird dieser Controller für die Vorlage wie erwartet geladen. Natürlich gibt es bei der aktuellen Implementierung von Routen keine optionalen Parameter. Wenn Sie also zwei oder drei Parameter haben, müssen Sie eine separate Route angeben. Das größte Problem scheint es, die Controller-Methode zweimal aufzurufen. Ich vermute, das liegt daran, dass es zwei Ansichten mit demselben Controller gibt. Jedoch sollte eine Ansicht die andere ersetzen, so dass es nicht zwei Aufrufe geben sollte. Das scheint mir ein Fehler zu sein. Ich fand auch eine Diskussion über ein mögliches neues Routing-System in den Werken, das vielleicht Ihren Bedürfnissen entspricht, aber es kann ziemlich weit entfernt sein: Ссылка . Das Beispiel auf GitHub verwendet jetzt die folgende Methode, sodass Sie diese durchsuchen können, wenn Sie möchten.

Und die Vorlagen:

Jetzt können Sie in Ihrem Controller die Methode dynamisch aufrufen.

/ BEARBEITEN

Um bestehenden Routing-Systemen wie Rails zu entsprechen, steht jetzt die Möglichkeit zur Verfügung, die Methode in der Route zu definieren. Ich habe eine super einfache Lösung erstellt, mit der Routen eine Methode aufrufen können, die auf der Routendefinition und einer Direktive in der Ansicht basiert. Ich denke, Ui-Router ist nicht konventionell und ist zu kompliziert für eine solche "sollte sein" Kernfunktion.

Das Projekt heißt ngMethod und befindet sich unter: Ссылка .

Ein Beispiel für seine Verwendung ist: Ссылка

Also wenn ich eine Route wie folgt habe:

und ich habe ng-Methode in der Kontakte / Formularvorlage:

Dann ruft die ng-Methode entweder $ scope.edit () oder $ scope.new () im ContactsController auf. Dann können die Kontakte / Formularvorlage gemeinsam genutzt werden und je nach Route die richtige Methode aufrufen um die Daten zu laden. Dieser Stil ist jetzt mehr "Angularjs" und das Laden des Codes ähnelt dem winkeligen Aufruf von Modulen und Controllern.

Die vollständige Anweisung, die dies ermöglicht, ist weniger als 20 Zeilen Code: