it-swarm.com.de

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

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

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

In vielen Artikeln, in denen ngRoute verwendet wird, wird route mit $ routeProvider konfiguriert. Bei Verwendung mit ui-router wird route jedoch mit $ stateProvider und $ urlRouterProvider konfiguriert.

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

1059

ui-router ist ein Drittanbieter-Modul und sehr leistungsfähig. Es unterstützt alles, was der normale ngRoute kann, sowie viele Zusatzfunktionen.

Hier sind einige Gründe, warum ui-router anstelle von ngRoute gewählt wird:

  • ui-router erlaubt 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 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 diesem Zustand aktualisiert, wenn Sie Ihre Links mit ui-sref erstellen. 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 dynamisch auf der Grundlage der URL erstellt werden können, auf die zugegriffen werden soll. Dies kann dazu führen, dass Sie nicht alle Routen vorab festlegen müssen.

  • states ermöglicht es Ihnen, verschiedene Informationen zu verschiedenen Zuständen abzubilden und auf diese zuzugreifen, und Sie können einfach Informationen zwischen Zuständen über $stateParams weitergeben.

  • Über $state von ui-router können Sie leicht feststellen, ob Sie sich in einem Bundesstaat oder einem übergeordneten Bundesstaat befinden, um das Oberflächenelement (das die Navigation des aktuellen Bundesstaates hervorhebt) in Ihren Vorlagen anzupassen Dies können Sie durch Setzen von $rootScope auf run anzeigen.

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:

1100
TheSharpieOne

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 erstellt wurde, um die Routing-Funktionen zu verbessern und zu verbessern.

Vom UI-Router Dokumentation :

AngularUI Router ist ein Routing-Framework für AngularJS, mit dem Sie die Teile Ihrer Schnittstelle in einem Zustandsautomaten organisieren können. Im Gegensatz zum $ route-Dienst in Angular Core, der um URL-Routen organisiert ist, ist der UI-Router um Zustände organisiert, an die optional Routen sowie anderes Verhalten angehängt sind.

Zustände 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, Ui-Router zu wählen.

128
gab

ngRoute ist ein angular Kernmodul, das für grundlegende Szenarien geeignet ist. Ich glaube, dass sie in kommenden Releases leistungsfähigere Funktionen hinzufügen werden.

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

Ui-Router ist ein Modul, das die Probleme von ngRoute behebt. 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

69
Asik

ngRoute ist Teil des AngularJS-Frameworks.

ui-router ist eine Community-Bibliothek, die erstellt wurde, um 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

50
Jake Johnson

Wenn Sie die im ngRoute-Paradigma implementierten Funktionen für verschachtelte Ansichten verwenden möchten, versuchen Sie Angular-Route-Segment -, um ngRoute zu erweitern, anstatt es zu ersetzen.

34
artch

Angular 1.x

ng-route :

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

ng-route: URL-basiertes Routing (Standort).

Ex:

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

i-route :

ui-router wird von 3rd Party Modulen entwickelt.

ui-router: zustandsbasiertes 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 , i-router

18
Mahesh K

Im Allgemeinen arbeitet ui-router mit einem Zustandsmechanismus ... Dies kann anhand eines einfachen Beispiels verstanden werden:

Nehmen wir an, wir haben eine große Anwendung einer Musikbibliothek (wie ..gaana oder saavan oder eine andere). Und unten auf 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 dieser Musik-Player-Status ändern, anstatt die gesamte Seite neu zu laden. Das kann einfach per UI-Router erledigt werden.

Während wir uns in ngRoute befinden, hängen wir nur die Ansicht und den Controller an.

18
UniCoder

ngRoute ist ein Modul, das vom Team Angular erstellt wurde und grundlegende clientseitige Routing-Funktionen bietet. Dieses Modul bietet eine ziemlich leistungsfähige Basis für das Routing und kann auf einfache Weise aufgebaut werden, um solide Routing-Funktionen bereitzustellen, wie in dieser Blog-Beitrag (Lesen Sie unbedingt den Kommentarpfad zwischen Ward Bell und Ben Nadel , der Autor - sie sind ein paar Angular Profis)

ui-router verschiebt den Fokus von url-zentrierten Routen auf "Anwendungszustände", die sich möglicherweise in der URL widerspiegeln oder nicht.

Die Hauptfunktionen, die ui-router hinzufügt, sind verschachtelte Status und benannte Ansichten.

Mit verschachtelten 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 einer Primärnavigation oben, einer Sekundärnavigationsliste 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 handhaben. Verschachteltes Routing ermöglicht es Ihnen, diese Bedenken zu trennen.

Benannte Ansichten sind ein weiteres zusätzliches Feature von UI-Router. 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 supereinfaches Beispiel hierfür wäre, dass der Hauptinhalt Ihrer App die primäre Ansicht ist und dann auch eine Fußzeile, die eine separate UI-Ansicht ist. In diesem Szenario muss der Controller der Fußzeile nicht mehr auf Status-/Routenänderungen warten.

Einen guten Vergleich von ngRoute und ui-router findet man in dieser Podcast Folge.

Behalten Sie das neue "offizielle" Routing-Modul im Auge, das das Team von Angular voraussichtlich für die Versionen 1.5 und 2.0 von Angular veröffentlicht. Dies ersetzt das ngRoute-Modul. Hier ist die aktuelle Dokumentation für das neue Router-Modul - sie ist zum Zeitpunkt dieser Veröffentlichung ziemlich spärlich, da die Implementierung noch nicht abgeschlossen ist. Schauen Sie sich hier an, um mehr darüber zu erfahren, wann dieses Modul tatsächlich veröffentlicht wird.

13
Sean

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

Mit ui-router können Sie mehrere Ansichten angeben, sowohl parallel als auch verschachtelt. Wenn Ihre Anwendung also komplexe Routing-/View-Vorgänge erfordert (oder in Zukunft erfordern könnte), setzen Sie den UI-Router ein.

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

11
Kunal Kapadia

Grundlegendes, was Sie wissen müssen: ng-router verwendet $location.path() und ui-router verwendet $state.go

Lass uns alle Funktionen.

10
digish a d

ui Router machen Ihr Leben einfacher! Sie können es zu Ihrer AngularJS-Anwendung hinzufügen, indem Sie es in Ihre Anwendungen einfügen ...

ng-route gehört zum Kern von AngularJS, ist also einfacher und bietet weniger Optionen ...

Schauen Sie hier nach, 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 gibt Ihnen aber mehr Möglichkeiten ....

8
Alireza

AngularUI Router ist ein Routing-Framework für AngularJS, mit dem Sie die Teile Ihrer Schnittstelle in einem Zustandsautomaten 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 sind.

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

6
vaheeds

ngRoute ist ein vom Angular.js-Team entwickeltes Modul, das 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.

4

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 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 Status und mehrere benannte Ansichten.

3
user2136053

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.

0
Ragupathy