Was ist der Unterschied zwischen Angular-Route und Angular-UI-Router?

1080

Ich plane, AngularJS in meinen großen Anwendungen zu verwenden. Ich bin gerade dabei, die richtigen Module zu finden.

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

In vielen Artikeln wird bei Verwendung von ngRoute die Route mit $ routeProvider konfiguriert . Bei Verwendung mit UI-Router wird die Route jedoch mit $ stateProvider und $ urlRouterProvider konfiguriert .

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

Premchandra Singh
quelle
11
Ganz zu schweigen von dem Winkel neue Router in 1.4+ und 2.0
Zach Lysobey

Antworten:

1112

Der UI-Router ist ein Modul eines Drittanbieters und sehr leistungsfähig. Es unterstützt alles, was die normale ngRoute kann, sowie viele zusätzliche Funktionen.

Hier sind einige häufige Gründe, warum der UI-Router gegenüber ngRoute gewählt wird:

  • Der UI-Router ermöglicht verschachtelte Ansichten und mehrere benannte Ansichten . Dies ist sehr nützlich bei größeren Apps, bei denen Sie möglicherweise Seiten haben, die von anderen Abschnitten erben.

  • Mit dem UI-Router können Sie eine starke Verknüpfung zwischen Status basierend auf Statusnamen herstellen. Wenn Sie die URL an einer Stelle ändern, wird jeder Link in diesen Status aktualisiert, wenn Sie Ihre Links mit erstellen ui-sref. Sehr nützlich für größere Projekte, bei denen sich URLs ändern können.

  • Es gibt auch das Konzept des Dekorators, mit dem Ihre Routen basierend auf der URL, auf die zugegriffen werden soll, dynamisch erstellt werden können. Dies kann bedeuten, dass Sie nicht alle Routen vorher angeben müssen.

  • Mit Zuständen können Sie verschiedene Informationen zu verschiedenen Zuständen zuordnen und darauf zugreifen, und Sie können Informationen einfach über Zustände über übertragen $stateParams.

  • Sie können leicht feststellen , ob Sie in einem Zustand oder ein Elternteil eines Staates sind UI - Element (Hervorhebung der Navigation des aktuellen Status) innerhalb Ihrer Vorlagen über einzustellen $statedurch ui-Router zur Verfügung gestellt , die Sie über die Einstellung in belichten kann $rootScopeauf run.

Im Wesentlichen ist UI-Router ngRouter mit mehr Funktionen, unter den Blättern ist es ganz anders. Diese zusätzlichen Funktionen sind für größere Anwendungen sehr nützlich.

Mehr Informationen:

TheSharpieOne
quelle
134
Insgesamt ist dies die beste Erklärung, aber für einen wichtigen Punkt: "Insgesamt ist der UI-Router ngRouter mit mehr Funktionen". Es ist viel grundlegender als das: Sie können ngRoutelediglich URL-Routen Controller und Vorlagen zuweisen, während die grundlegende Abstraktion in ui.routerZuständen besteht, was ein leistungsfähigeres Konzept ist.
Nate Abele
23
Für einige könnte es relevant sein, in dieser Antwort auf Unterschiede in der Dateigröße hinzuweisen. Ab sofort ngRoute: 35,9 kB / 4,4 kB / 2,5 kB und ui-router: 162,9 kB / 30,4 kB / 11,6 kB (nicht minimiert / minimiert / gezippt).
Alex Ross
35
Sind wir ernsthaft besorgt über 162kb im Jahr 2015?
Wels
27
Warum nicht @Catfish? Es gibt viele Orte auf der Welt mit schlechten Internetverbindungen. Sorgen Sie sich darüber, dass dies sehr wichtig ist!
Bruno Casali
4
@tfrascaroli Ich bin anderer Meinung - Wenn ein Benutzer Ihre App zum ersten Mal lädt, korrelieren die Ladezeiten der Seiten stark mit den Absprungraten . Ich würde definitiv das Kosten-Nutzen-Verhältnis berücksichtigen, bevor ich der Seite weitere 130 KB hinzufüge.
Anthony Manning-Franklin
131

ngRoute ist ein Modul, das vom 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 die Routing-Funktionen zu verbessern und zu verbessern.

Aus der Dokumentation zum UI-Router :

AngularUI Router ist ein Routing-Framework für AngularJS, mit dem Sie die Teile Ihrer Schnittstelle in einer Zustandsmaschine organisieren können. Im Gegensatz zum $ route-Dienst im Angular-Kern, der nach URL-Routen organisiert ist, ist der UI-Router nach Status organisiert, an die optional Routen sowie anderes Verhalten angehängt werden können.

Status sind an benannte, verschachtelte und parallele Ansichten gebunden, sodass Sie die Benutzeroberfläche Ihrer Anwendung effizient verwalten können.

Keiner von beiden ist besser, Sie müssen den für Ihr Projekt am besten geeigneten auswählen.

Wenn Sie jedoch komplexe Ansichten in Ihrer Anwendung haben möchten und sich mit dem Begriff "$ state" befassen möchten. Ich empfehle Ihnen, sich für einen UI-Router zu entscheiden.

gab
quelle
1
FWIW Ich habe gerade einige Stunden damit verbracht, meinen Kopf gegen den UI-Router zu schlagen, um Winkel zu erhalten. Die Dokumentation befindet sich in einem sehr traurigen Zustand, sie ist offensichtlich seit Jahren verfallen. Defekte Links zu wichtigen Anleitungen, falsch benannte Nuget-Pakete im Tutorial, wie Sie es nennen. Schließlich gab ich auf, nachdem ich dieses Problem nicht herausfinden konnte stackoverflow.com/questions/23585065/… (zusammen mit scheinbar vielen anderen Leuten). Jetzt
ngRoute
71

ngRoute ist ein Winkelkernmodul, das sich für grundlegende Szenarien eignet. Ich glaube, dass sie in kommenden Versionen leistungsstärkere Funktionen hinzufügen werden.

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

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

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

Einige der Unterschiede zwischen UI-Router und ngRoute

http://www.amasik.com/angularjs-ngroute-vs-ui-router/

Geben Sie hier die Bildbeschreibung ein

Asik
quelle
52

ngRoute ist Teil des AngularJS-Kernframeworks.

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

Hier ist ein guter Artikel zum Konfigurieren / Einrichten des UI-Routers:

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

Jake Johnson
quelle
35

Wenn Sie die im ngRoute-Paradigma implementierten Funktionen für verschachtelte Ansichten nutzen möchten, versuchen Sie es mit dem Angle -Route-Segment. Ziel ist es, ngRoute zu erweitern, anstatt es zu ersetzen.

artch
quelle
16
Ich sehe die Relevanz Ihrer Antwort nicht. Der Autor fragte speziell nach den Unterschieden zwischen Angular-Route und Angular-UI-Router. Ein Haftungsausschluss, dass Sie der Ersteller sind, ist auch hilfreich, wenn Sie für Ihre eigenen Bibliotheken werben.
Fläschchen
23
Die Relevanz ist einfach: Angular-Route + Angular-Route-Segment = Angular-UI-Router. Der Unterschied ist also:
Angular-UI
1
Ich denke, es ist eine gültige Antwort. angular-route-segment.com ist definitiv eine gute Wahl für diejenigen, die nicht den Overhead der Verwendung von UI-Router wollen. Auch @vially, Leute arbeiten hart, um diese Bibliotheken zu erstellen, es ist keine schlechte Sache, sie zu fördern
phil
19

Im Allgemeinen arbeitet der UI-Router mit einem Zustandsmechanismus ... Dies lässt sich anhand eines einfachen Beispiels verstehen:

Nehmen wir an, wir haben eine große Anwendung einer Musikbibliothek (wie ..gaana oder saavan oder eine andere). Und am Ende der Seite befindet sich ein Musik-Player, der für den gesamten Status der Seite freigegeben ist.

Angenommen, Sie klicken einfach auf einige Songs, um sie abzuspielen. In diesem Fall sollte sich nur der Status des Musik-Players ändern, anstatt die gesamte Seite neu zu laden. Das kann leicht mit dem UI-Router erledigt werden.

In ngRoute hängen wir nur die Ansicht und den Controller an.

UniCoder
quelle
2
Dies könnte und muss mithilfe von Diensten und Fabriken erfolgen. Die Verwendung dieses Pakets ist ein Mangel an Verständnis für Winkelrouten, Zustände und Muster. Zustände werden von der URL behandelt. Dies ist korrekt, wenn Sie die App in einem bestimmten Zustand freigeben möchten. Außerdem können Sie mehrere Controller in derselben Ansicht haben, die auf eine Aktualisierung der Servicedaten oder einen URL-Parameter reagieren. Der UI-Router bringt die Dinge durcheinander und zerstört das Winkelmuster vollständig.
Pablo Ezequiel Leone
Ich stimme vollkommen zu. Ich kann immer noch keine Erklärung finden, wo es notwendig ist, diese Zustandsmaschine zu benutzen
kushalvm
18

Winkel 1.x.

ng-route :

ng-route wird vom angleJS-Team für das Routing entwickelt.

ng-route: URL-basiertes Routing.

Ex:

$routeProvider
    .when("/home", {
        templateUrl : "home.html"
    })

UI-Route :

Der UI-Router wird vom Modul eines Drittanbieters entwickelt.

UI-Router: Statusbasiertes Routing

Ex:

 $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'home.html'
        })

-> UI-Router ermöglicht verschachtelte Ansichten

-> UI-Router leistungsfähiger als ng-route

ng-router , ui-router

Mahesh K.
quelle
13

ngRoute ist ein vom Angular-Team entwickeltes Modul, das grundlegende clientseitige Routing-Funktionen bietet. Dieses Modul bietet eine ziemlich leistungsfähige Basis für das Routing und kann ziemlich einfach aufgebaut werden, um solide Routing-Funktionen bereitzustellen, wie in diesem Blog-Beitrag veranschaulicht (lesen Sie unbedingt den Kommentarpfad zwischen Ward Bell und Ben Nadel, dem Autor - sie sind a ein paar Angular-Profis)

Der UI-Router verschiebt den Fokus von URL-zentrierten Routen auf Anwendungszustände, die sich möglicherweise in der URL widerspiegeln oder nicht.

Die wichtigsten vom UI-Router hinzugefügten Funktionen sind verschachtelte Status und benannte Ansichten.

Mit verschachtelten Zuständen können Sie die Controller-Logik für die verschiedenen Teile der Anwendung trennen. Ein sehr einfaches Beispiel hierfür wäre eine App mit primärer Navigation oben, einer sekundären Navigationsliste links und Inhalten rechts. Ohne verschachtelte Zustände müsste ein einzelner Controller normalerweise die Anzeigelogik für die sekundäre Navigation sowie den Inhalt verarbeiten. Durch verschachteltes Routing können Sie diese Probleme trennen.

Benannte Ansichten sind eine weitere zusätzliche Funktion des UI-Routers. Mit ngRoute können Sie nur eine einzige ngView-Direktive auf einer Seite haben, während Sie mit benannten Ansichten in ui-router mehrere ui-view-Direktiven angeben können, und dann kann jeder Status die Vorlage und den Controller der Namensansichten beeinflussen. Ein super einfaches Beispiel hierfür wäre, dass der Hauptinhalt Ihrer App die primäre Ansicht ist und dann auch eine Fußzeilenleiste, die eine separate UI-Ansicht wäre. In diesem Szenario muss der Controller der Fußzeile nicht mehr auf Status- / Routenänderungen warten.

Einen guten Vergleich von ngRoute und UI-Router finden Sie in dieser Podcast- Episode.

Um die Sache noch verwirrender zu machen, sollten Sie das neue "offizielle" Routing-Modul im Auge behalten, das das Angular-Team voraussichtlich für die Versionen 1.5 und 2.0 von Angular veröffentlichen wird. Dadurch wird das ngRoute-Modul ersetzt. Hier ist die aktuelle Dokumentation für das neue Router-Modul - sie ist zum Zeitpunkt dieser Veröffentlichung recht spärlich, da die Implementierung noch nicht abgeschlossen ist. Sehen Sie hier, um weitere Neuigkeiten darüber zu erhalten, wann dieses Modul tatsächlich veröffentlicht wird.

Sean
quelle
11

ngRoute ist eine grundlegende Routing-Bibliothek, in der Sie für jede Route nur eine Ansicht und einen Controller angeben können.

Mit dem UI-Router können Sie mehrere Ansichten angeben, sowohl parallele als auch verschachtelte. Wenn Ihre Anwendung komplexe Routing / Ansichten erfordert (oder möglicherweise in Zukunft erfordert), fahren Sie mit dem UI-Router fort.

Dies ist die beste Anleitung für den Einstieg in AngularUI Router.

Kunal Kapadia
quelle
10

Grundlegende Dinge, die Sie wissen müssen: ng-Router verwendet $location.path()und UI-Router verwendet$state.go

Ruhe uns alle Funktionen aus.

Digish-Anzeige
quelle
8

UI-Router erleichtern Ihnen das Leben! Sie können es Ihrer AngularJS-Anwendung hinzufügen, indem Sie es in Ihre Anwendungen einfügen ...

ng-route kommt als Teil des Kerns AngularJS, ist also einfacher und bietet Ihnen weniger Optionen ...

Schauen Sie hier, um ng-route besser zu verstehen: https://docs.angularjs.org/api/ngRoute

Vergessen Sie auch bei der Verwendung nicht: ngView ..

ng-ui-router ist anders aber:

https://github.com/angular-ui/ui-router bietet Ihnen jedoch mehr Optionen ....

Alireza
quelle
6

AngularUI Router ist ein Routing-Framework für AngularJS, mit dem Sie die Teile Ihrer Schnittstelle in einer Zustandsmaschine organisieren können. Im Gegensatz zum $ route-Dienst im Angular ngRoute-Modul, der nach URL-Routen organisiert ist, ist der UI-Router nach Status organisiert, an die optional Routen sowie anderes Verhalten angehängt werden können.

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

Vaheeds
quelle
4

ngRoute ist ein Modul, das vom Angular.js-Team entwickelt wurde und früher Teil des Angular-Kerns war.

ui-router ist ein Framework, das außerhalb des Angular.js-Projekts erstellt wurde, um die Routing-Fähigkeiten zu verbessern und zu verbessern.

Rajat-Systematix
quelle
3

1-ngRoute wird von Angular Team entwickelt, während UI-Router ein Modul eines Drittanbieters ist. 2-ngRoute implementiert das Routing basierend auf der Routen-URL, während der UI-Router das Routing basierend auf dem Status der Anwendung implementiert. 3- ui-router bietet alles, was die ng-route bietet, sowie einige zusätzliche Funktionen wie verschachtelte Zustände und mehrere benannte Ansichten.


quelle
0

ng-View(vom AngularJS-Team entwickelt) kann nur einmal pro Seite verwendet werden, während ui-View(Drittanbieter-Modul) mehrmals pro Seite verwendet werden kann.

ui-View ist daher die beste Option.

Ragupathie
quelle