Was ist der Unterschied zwischen $ routeProvider und $ stateProvider?

Bitte erläutern Sie den Unterschied zwischen $routeProviderund $stateProviderin AngularJS.

Welches ist die beste Vorgehensweise?

Beide erledigen die gleiche Arbeit, wie sie für Routingzwecke in SPA (Single Page Application) verwendet werden.

1. Angular Routing - gemäß $ routeProvider-Dokumenten

URLs zu Controllern und Ansichten (HTML-Partials). Es überwacht $ location.url () und versucht, den Pfad einer vorhandenen Routendefinition zuzuordnen.

HTML

<div ng-view></div>

Das obige Tag rendert die Vorlage aus dem $routeProvider.when()Zustand, den Sie in .config(Konfigurationsphase) von eckig erwähnt haben

Einschränkungen:-

• Die Seite kann nur einzelne ng-viewSeiten enthalten
• Wenn Ihr SPA mehrere kleine Komponenten auf der Seite enthält, die Sie unter bestimmten Bedingungen rendern möchten, $routeProviderschlägt dies fehl. (erreichen , dass müssen wir Richtlinien verwenden , wie ng-include, ng-switch, ng-if, ng-show, das sieht schlecht aus sie in SPA haben)
• Sie können keine Beziehung zwischen zwei Routen wie Eltern- und Kinderbeziehung herstellen.
• Sie können einen Teil der Ansicht basierend auf dem URL-Muster nicht ein- und ausblenden.

2. UI -Router - gemäß $ stateProvider-Dokumenten

AngularUI Router ist ein Routing-Framework für AngularJS, mit dem Sie die Teile Ihrer Schnittstelle in einer Zustandsmaschine organisieren können. UI-Router ist nach Zuständen organisiert, an die optional Routen sowie anderes Verhalten angehängt werden können.

Mehrere und benannte Ansichten

Ein weiteres großartiges Feature ist die Möglichkeit, mehrere UI-Ansichten in einer Vorlage zu haben.

Während mehrere parallele Ansichten eine leistungsstarke Funktion sind, können Sie Ihre Schnittstellen häufig effektiver verwalten, indem Sie Ihre views verschachteln und diese Ansichten mit verschachtelten Status koppeln.

HTML

<div ui-view>
    <div ui-view='header'></div>
    <div ui-view='content'></div>
    <div ui-view='footer'></div>
</div>

Der Großteil der ui-routerLeistung besteht darin, verschachtelte Status und Ansichten zu verwalten.

Vorteile

• Sie können mehrere ui-viewauf einer Seite haben
• Verschiedene Ansichten können ineinander verschachtelt und verwaltet werden, indem der Status in der Routing-Phase definiert wird.
• Wir können hier eine Kind-Eltern-Beziehung haben, einfach wie die Vererbung im Staat, und Sie können auch Geschwisterzustände definieren.
• Sie können den ui-view="some"Status ändern, indem Sie das absolute Routing mit dem Statusnamen verwenden @.
• Eine andere Möglichkeit, relatives Routing durchzuführen, besteht darin, nur @Änderungen vorzunehmen ui-view="some". Dies ersetzt das, ui-viewanstatt zu prüfen, ob es verschachtelt ist oder nicht.
• Hier können Sie ui-srefeine hrefURL dynamisch auf der Grundlage der URLin einem Status genannten erstellen. Außerdem können Sie Statusparameter im jsonFormat angeben .

Weitere Informationen Angular UI-Router

Für eine bessere Flexibilität mit verschiedenen verschachtelten Ansichten mit Status würde ich es vorziehen, wenn Sie sich dafür entscheiden ui-router

Angulars eigener ng-Router URLsberücksichtigt beim Routing, UI-Router stateszusätzlich zu URLs.

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

Während Sie in ng-router sehr vorsichtig mit URLs umgehen müssen, wenn Sie Links über <a href="">Tags bereitstellen , müssen Sie in UI-Router nur stateberücksichtigen. Sie bieten Links wie <a ui-sref="">. Beachten Sie, dass es auch dann <a href="">funktioniert , wenn Sie es in UI-Router verwenden, genau wie Sie es in ng-router tun würden.

Selbst wenn Sie sich eines Tages dazu entschließen, Ihre URL zu ändern, statebleibt Ihre URL unverändert und Sie müssen die URL nur um ändern .config.

Während mit ngRouter einfache Apps erstellt werden können, erleichtert UI-Router die Entwicklung komplexer Apps erheblich. Hier ist sein Wiki.

$ route: Dies wird zum Deep-Linking von URLs mit Controllern und Ansichten (HTML-Partials) verwendet und überwacht $ location.url (), um den Pfad von einer vorhandenen Routendefinition abzubilden.

Wenn wir ngRoute verwenden, wird die Route mit $ routeProvider konfiguriert, und wenn wir ui-router verwenden, wird die Route mit $ stateProvider und $ urlRouterProvider konfiguriert.

<div ng-view></div>
    $routeProvider
        .when('/contact/', {
            templateUrl: 'app/views/core/contact/contact.html',
            controller: 'ContactCtrl'
        });


<div ui-view>
    <div ui-view='abc'></div>
    <div ui-view='abc'></div>
   </div>
    $stateProvider
        .state("contact", {
            url: "/contact/",
            templateUrl: '/app/Aisel/Contact/views/contact.html',
            controller: 'ContactCtrl'
        });