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

Allgemein funktioniert ui-router nach einem Zustandsmechanismus... Das kann an einem einfachen Beispiel verstanden werden:

Angenommen, wir haben eine große Anwendung einer Musikbibliothek (wie ..gaana oder saavan oder eine andere). Und am unteren Rand der Seite haben Sie einen Musikplayer, der über alle Zustände der Seite hinweg geteilt wird.

Nehmen wir nun an, Sie klicken einfach auf einige Songs, um diese abzuspielen. In diesem Fall sollte sich nur der Zustand dieses Musikplayers ändern, anstatt die gesamte Seite neu zu laden. Das kann leicht von ui-router gehandhabt werden.

Während wir bei ngRoute einfach die Ansicht und den Controller anhängen.

Answer 2

Angular 1.x

ng-route:

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

ng-route: Routing basierend auf URL (Ort).

Beispiel:

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

ui-route:

ui-router wird von einem Drittanbieter-Modul entwickelt.

ui-router : Routing basierend auf Zuständen

Beispiel:

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

--> ui-router ermöglicht verschachtelte Ansichten

--> ui-router ist leistungsfähiger als ng-route

ng-router, ui-router

Answer 3

NgRoute ist ein von dem Angular-Team entwickeltes Modul, das grundlegende clientseitige Routing-Funktionalitäten bietet. Dieses Modul liefert eine ziemlich leistungsstarke Basis für das Routing und kann recht einfach erweitert werden, um solide Routing-Funktionalitäten bereitzustellen, wie im diesem Blogbeitrag (lesen Sie unbedingt den Kommentarverlauf zwischen Ward Bell und Ben Nadel, dem Autor - sie sind ein paar Angular-Profis).

ui-router verschiebt den Fokus von url-zentrierten Routen zu Anwendungs-"Zuständen", die sich möglicherweise nicht im URL widerspiegeln.

Die Hauptfunktionen, die von ui-router hinzugefügt werden, sind verschachtelte Zustände und benannte Ansichten.

Verschachtelte Zustände ermöglichen es Ihnen, die Controller-Logik für die verschiedenen Teile der Anwendung zu trennen. Ein sehr einfaches Beispiel hierfür wäre eine App mit einer Hauptnavigation oben, einer sekundären Navigationsliste links und Inhalten rechts. Ohne verschachtelte Zustände müsste ein einzelner Controller typischerweise die Anzeigelogik sowohl für die sekundäre Navigation als auch für den Inhalt verarbeiten. Das verschachtelte Routing ermöglicht es Ihnen, diese Anliegen 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 kann jeder Zustand das Template und den Controller der benannten Ansichten beeinflussen. Ein sehr einfaches Beispiel dafür wäre, den Hauptinhalt Ihrer App als primäre Ansicht zu haben und dann auch eine Fußzeile zu haben, die eine separate ui-view ist. In diesem Szenario muss der Controller der Fußzeile nicht mehr auf Zustands-/Routenänderungen hören.

Einen guten Vergleich von ngRoute und ui-router finden Sie in dieser Podcast-Episode.

Nur um die Dinge zu komplizieren, achten Sie auf das neue "offizielle" Routing-Modul, das das Angular-Team für die Versionen 1.5 und 2.0 von Angular herausbringen möchte. Dieses wird das ngRoute-Modul ersetzen. Hier finden Sie die aktuelle Dokumentation für das neue Router-Modul - sie ist zum Zeitpunkt dieses Posts recht spärlich, da die Implementierung noch nicht abgeschlossen ist. Schauen Sie hier nach weiteren Neuigkeiten darüber, wann dieses Modul tatsächlich veröffentlicht wird.

Answer 4

NgRoute ist eine grundlegende Routing-Bibliothek, bei der Sie nur eine Ansicht und einen Controller für eine beliebige Route angeben können.

Mit ui-router können Sie mehrere Ansichten sowohl parallel als auch verschachtelt angeben. Wenn Ihre Anwendung eine Art komplexes Routing/Ansichten erfordert (oder möglicherweise in Zukunft benötigt), dann fahren Sie mit ui-router fort.

Hier finden Sie den besten Einstiegsleitfaden für AngularUI Router.

Answer 5

Grundlegende Sache, die du wissen musst: ng-router verwendet $location.path() und ui-router verwendet $state.go

Der Rest sind alles Features.