Was ist der Unterschied zwischen angular-route und angular-ui-router?

Question

Ich plane, AngularJS in meinen großen Anwendungen zu verwenden. Ich bin dabei, die richtigen Module herauszufinden, die ich verwenden soll.

Was ist der Unterschied zwischen den Modulen ngRoute (angular-route.js) und ui-router (angular-ui-router.js)?

In vielen Artikeln, in denen ngRoute verwendet wird, werden Routen mit $routeProvider konfiguriert. Wenn jedoch ui-router verwendet wird, werden Routen mit $stateProvider und $urlRouterProvider konfiguriert.

Welches Modul sollte ich für eine bessere Verwaltbarkeit und Erweiterbarkeit verwenden?

Answer 1

ui-router ist ein Drittanbietermodul und sehr leistungsstark. Es unterstützt alles, was normales ngRoute kann, sowie viele zusätzliche Funktionen.

Hier sind einige häufige Gründe, warum ui-router gegenüber ngRoute gewählt wird:

• ui-router ermöglicht verschachtelte Ansichten und mehrere benannte Ansichten. Dies ist sehr nützlich bei größeren Apps, in denen Seiten vorhanden sind, die von anderen Abschnitten geerbt werden.

• ui-router ermöglicht Ihnen starktypische Verknüpfungen zwischen Zuständen basierend auf Zustandsnamen. Ändern Sie die URL an einer Stelle, und alle Links zu diesem Zustand werden aktualisiert, wenn Sie Ihre Links mit ui-sref erstellen. Sehr nützlich für größere Projekte, in denen URLs geändert werden können.

• Es gibt auch das Konzept des Decorators, die verwendet werden könnten, um Ihre Routen dynamisch basierend auf der URL zu erstellen, auf die zugegriffen werden soll. Dies könnte bedeuten, dass Sie Ihre Routen nicht im Voraus spezifizieren müssen.

• Zustände ermöglichen es Ihnen, verschiedene Informationen zu verschiedenen Zuständen zu kartieren und darauf zuzugreifen, und Sie können problemlos Informationen zwischen Zuständen über $stateParams übergeben.

• Sie können leicht feststellen, ob Sie sich in einem Zustand oder Elternzustand befinden, um UI-Elemente anzupassen (Hervorheben der Navigation des aktuellen Zustands) in Ihren Vorlagen über $state, bereitgestellt von ui-router, das Sie durch Einstellung in $rootScope bei run freigeben können.

Im Wesentlichen ist ui-router ngRouter mit mehr Funktionen, unter der Oberfläche ist es jedoch recht unterschiedlich. Diese zusätzlichen Funktionen sind sehr nützlich für größere Anwendungen.

Weitere Informationen:

• Github: https://github.com/angular-ui/ui-router
• Dokumentation:
  • API-Referenz: http://angular-ui.github.io/ui-router/site/#/api
  • Anleitung: https://github.com/angular-ui/ui-router/wiki
• FAQs: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions
• Beispielanwendung: http://angular-ui.github.io/ui-router/sample/#/

Answer 2

ngRoute ist ein Modul, das von dem AngularJS-Team entwickelt wurde und früher Teil des AngularJS-Kerns war.

ui-router ist ein Framework, das außerhalb des AngularJS-Projekts entwickelt wurde, um Routing-Fähigkeiten zu verbessern und zu erweitern.

Aus der ui-router Dokumentation:

AngularUI Router ist ein Routing-Framework für AngularJS, das es Ihnen ermöglicht, die Teile Ihrer Benutzeroberfläche in eine Zustandsmaschine zu organisieren. Im Gegensatz zum $route-Dienst im Angular-Kern, der um URL-Routen organisiert ist, ist UI-Router um Zustände organisiert, die optional Routen sowie andere Verhaltensweisen enthalten können.

Zustände sind an benannte, verschachtelte und parallele Ansichten gebunden, was es Ihnen ermöglicht, die Benutzeroberfläche Ihrer Anwendung leistungsstark zu verwalten.

Keiner von beiden ist besser, Sie müssen das für Ihr Projekt am besten geeignete wählen.

Wenn Sie jedoch komplexe Ansichten in Ihrer Anwendung planen und mit dem "$state"-Konzept umgehen möchten, empfehle ich Ihnen, ui-router zu wählen.

Answer 3

ngRoute ist ein Kernmodul von Angular, das gut für grundlegende Szenarien ist. Ich glaube, dass sie in zukünftigen Versionen leistungsstärkere Funktionen hinzufügen werden.

URL: https://docs.angularjs.org/api/ngRoute

Ui-router ist ein Contributed-Modul, das die Probleme von ngRoute überwindet. Hauptsächlich verschachtelte/komplexe Ansichten.

URL: https://github.com/angular-ui/ui-router

Einige Unterschiede zwischen ui-router und ngRoute:

Answer 4

NgRoute ist Teil des Kerns des AngularJS-Frameworks.

ui-router ist eine Community-Bibliothek, die erstellt wurde, um die Standard-Routing-Fähigkeiten zu verbessern.

Hier ist ein guter Artikel zur Konfiguration/Einrichtung von ui-router:

http://www.ng-newsletter.com/posts/angular-ui-router.html

Answer 5

Wenn Sie die innerhalb des ngRoute-Paradigmas implementierte Funktionalität von nested views nutzen möchten, probieren Sie angular-route-segment aus - es zielt darauf ab, ngRoute zu erweitern anstatt es zu ersetzen.