Frage Was ist der Unterschied zwischen Winkel-Route und Winkel-Ui-Router?


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

Was ist der Unterschied zwischen ngRoute (eckige_route.js) und Ui-Router (eckig-ui-router.js) Module?

In vielen Artikeln wann ngRoute wird verwendet, Route wird mit konfiguriert $ routeProvider. Bei Verwendung mit UI-Router, Route ist konfiguriert mit $ stateProvider und $ urlRouterProvider.

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


1005
2018-01-09 15:03


Ursprung


Antworten:


UI-Router ist ein 3rd-Party-Modul und ist sehr mächtig. Es unterstützt alles, was die normale ngRoute kann, und viele zusätzliche Funktionen.

Hier sind einige häufige Gründe, warum der UI-Router über ngRoute ausgewählt wurde:

  • Ui-Router ermöglicht verschachtelte Ansichten und mehrere benannte Ansichten. Dies ist sehr nützlich bei größeren App, wo Sie Seiten haben können, die von anderen Abschnitten erben.

  • Mit dem UI-Router können Sie basierend auf den Zustandsnamen eine starke Verknüpfung zwischen Zuständen herstellen. Wenn Sie die URL an einem Ort ändern, wird jeder Link zu diesem 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 der Dekorateur Mit dieser Option können Ihre Routen basierend auf der URL, auf die zugegriffen werden soll, dynamisch erstellt werden. Dies kann bedeuten, dass Sie nicht alle Routen vorher manuell angeben müssen.

  • Zustände ermöglichen Ihnen das Zuordnen und Zugreifen auf verschiedene Informationen zu verschiedenen Zuständen, und Sie können problemlos Informationen zwischen Zuständen übermitteln $stateParams.

  • Sie können leicht feststellen, ob Sie sich in einem Bundesstaat oder Elternteil eines Staates befinden, um das Oberflächenelement (Hervorhebung der Navigation des aktuellen Status) in Ihren Vorlagen über anzupassen $state von UI-Router zur Verfügung gestellt, die Sie über die Einstellung verfügbar machen können $rootScope auf run.

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

Mehr Informationen:


1080
2018-01-09 15:24



ngRoute ist ein vom AngularJS-Team entwickeltes Modul, das früher Teil des AngularJS-Kerns war.

UI-Router ist ein Framework, das außerhalb des AngularJS-Projekts zur Verbesserung und Verbesserung der Routing-Fähigkeiten erstellt wurde.

Vom UI-Router Dokumentation:

AngularUI Router ist ein Routing-Framework für AngularJS, das erlaubt   Sie organisieren die Teile Ihrer Schnittstelle in eine Zustandsmaschine.   Im Gegensatz zum $ route-Dienst in Angular Core, der herum organisiert ist   URL-Routen, UI-Router ist organisiert um Staaten, die optional können   haben Routen, sowie anderes Verhalten, angehängt.

Zustände sind an benannte, verschachtelte und parallele Ansichten gebunden   Verwalten Sie die Benutzeroberfläche Ihrer Anwendung.

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

Wenn Sie jedoch in Ihrer Anwendung komplexe Sichten planen, möchten Sie sich mit dem Begriff "$ state" befassen. Ich empfehle dir, einen Ui-Router zu wählen.


125
2018-01-09 15:30



ngRoute ist ein eckiges Kernmodul, das für grundlegende Szenarien geeignet ist. Ich glaube, dass sie in kommenden Releases weitere 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/

enter image description here


64
2017-12-18 13:05



ngRoute ist Teil des AngularJS-Grundgerüsts.

Ui-Router ist eine Community-Bibliothek, die erstellt wurde, um zu versuchen, die Standard-Routing-Funktionen zu verbessern.

Hier ist ein guter Artikel zum Konfigurieren / Einrichten von UI-Router:

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


49
2018-01-09 15:28



Wenn Sie die im ngRoute-Paradigma implementierten Funktionen für verschachtelte Ansichten verwenden möchten, versuchen Sie es Winkel-Routen-Segment - Es zielt darauf ab, ngRoute zu erweitern, anstatt es zu ersetzen.


34
2018-04-07 19:24



Im Allgemeinen arbeitet ui-router auf einem Zustandsmechanismus ... Es kann mit einem einfachen Beispiel verstanden werden:

Nehmen wir an, wir haben eine große Anwendung einer Musikbibliothek (wie ..gaana oder saavan oder andere). Und am Ende der Seite haben Sie einen Musik-Player, der über den gesamten Status der Seite geteilt wird.

Sagen wir, du klickst einfach auf ein paar Songs, um zu spielen. In diesem Fall sollte nur der Status des Musikplayers geändert werden, anstatt die gesamte Seite neu zu laden. Das kann von ui-router leicht gehandhabt werden.

In ngRoute fügen wir nur die Ansicht und den Controller hinzu.


17
2018-01-02 22:36



Winkel 1.x

ng-Route:

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

ng-route: URL (Standort) basiertes Routing.

Ex:

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

U-Route:

UI-Router wird von 3rd-Party-Modul entwickelt.

UI-Router: zustandsbasiertes Routing

Ex:

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

-> Ui-Router ermöglicht verschachtelte Ansichten

-> Ui-Router mächtiger als ng-Route

ng-Router, UI-Router


16
2017-08-30 12:12



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 eine solide Routing-Funktionalität zu bieten, wie in dieser Blogbeitrag (Achten Sie darauf, die Kommentarspur zwischen Ward Bell und Ben Nadel, dem Autor - sie sind ein paar Winkelprofis) zu lesen.

Der ui-Router verschiebt den Fokus von url-zentrischen Routen zu den "Zuständen" der Anwendung, die sich in der URL widerspiegeln können oder nicht.

Die primären Funktionen, die von ui-router hinzugefügt werden, sind geschachtelte Status und benannte Ansichten.

In geschachtelten Zuständen können Sie die Steuerungslogik für die verschiedenen Teile der Anwendung trennen. Ein sehr einfaches Beispiel hierfür wäre eine App mit der primären Navigation oben, einer sekundären Navigationsliste auf der linken Seite und dem Inhalt auf der rechten Seite. Ohne verschachtelte Zustände würde ein einzelner Controller typischerweise sowohl die Anzeigelogik für die sekundäre Navigation als auch den Inhalt handhaben müssen. Verschachteltes Routing ermöglicht Ihnen, diese Probleme zu trennen.

Benannte Ansichten sind ein weiteres zusätzliches Feature von UI-Router. Mit ngRoute können Sie nur eine einzelne ngView-Direktive auf einer Seite haben, während Sie mit benannten Ansichten in ui-router mehrere ui-view-Direktiven angeben können und dann jeder Zustand die Vorlage und den Controller der Namesichten beeinflussen kann. Ein sehr einfaches Beispiel hierfür wäre, dass der Hauptinhalt Ihrer App die primäre Ansicht ist und Sie dann auch eine Fußzeile haben, die eine separate ui-Ansicht darstellt. In diesem Szenario muss der Controller der Fußzeile nicht mehr auf Status- / Routenänderungen warten.

Ein guter Vergleich von ngRoute und ui-Router findet sich auf dieser Podcast Folge.

Um die Dinge noch verwirrender zu gestalten, sollten Sie das neue "offizielle" Routing-Modul im Auge behalten, das das Angular-Team für die Versionen 1.5 und 2.0 von Angular erwartet. Dies wird das ngRoute-Modul ersetzen. Hier  ist die aktuelle Dokumentation für das neue Router-Modul - es ist recht spärlich seit dieser Veröffentlichung, da die Implementierung noch nicht abgeschlossen ist. Uhr Hier für mehr Nachrichten, wenn dieses Modul tatsächlich veröffentlicht wird.


13
2018-06-27 03:58



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 parallele und verschachtelte Ansichten angeben. Wenn also Ihre Anwendung komplexe Routing / Views erfordert (oder in Zukunft erfordern kann), dann fahren Sie mit dem ui-Router fort.

Dies ist am besten Erste Schritte für AngularUI Router.


11
2017-08-28 10:06



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

Ruhe uns alle Funktionen aus.


10
2017-10-30 00:18