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

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?

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:

• 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/#/

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.

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/

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

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.

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.

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

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.

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.

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

Ruhe uns alle Funktionen aus.

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 ....

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

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.

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.

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.