web-dev-qa-db-de.com

Was ist der Unterschied zwischen $ routeProvider und $ stateProvider?

Bitte erläutern Sie den Unterschied zwischen $routeProvider und $stateProvider in AngularJS.

Welches ist die beste Praxis?

javascriptangularjsangular-ui-routerangularjs-routing
168
YYY

Beide machen dieselbe Arbeit, wie sie für das Routing in SPA (Single Page Application) verwendet werden.

1. Angular Routing - pro $ routeProvider-Dokumente

URLs zu Controllern und Views (HTML-Partials). Es beobachtet $ location.url () und versucht, den Pfad einer vorhandenen Route zuzuordnen Definition.

HTML 

<div ng-view></div>

Das obige Tag rendert die Vorlage aus der $routeProvider.when()-Bedingung, die Sie in .config (Konfigurationsphase) von angle erwähnt hatten

Einschränkungen:- 

  • Die Seite kann nur einen einzelnen ng-view auf der Seite enthalten
  • Wenn Ihr SPA mehrere kleine Komponenten auf der Seite enthält, die Sie basierend auf bestimmten Bedingungen rendern möchten, schlägt $routeProvider fehl. (Um dies zu erreichen, müssen wir Direktiven wie ng-include, ng-switch, ng-if, ng-show verwenden, die schlecht aussehen, um sie in SPA zu haben.)
  • Sie können keine Verbindung zwischen zwei Routen herstellen, z. B. einer Eltern- und einer Kindbeziehung.
  • Sie können keinen Teil der Ansicht basierend auf einem URL-Muster anzeigen und ausblenden.

2. ui-router - per $ stateProvider docs

AngularUI Router ist ein Routing-Framework für AngularJS, mit dem Sie organisieren die Teile Ihrer Schnittstelle in einer Zustandsmaschine . Der UI-Router ist um Zustände herum organisiert, die optional .__ haben können. Routen, sowie anderes Verhalten, verbunden.

Mehrere und benannte Ansichten

Eine weitere großartige Funktion 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 Zuständen verbinden.

HTML 

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

Die Mehrheit der Möglichkeiten von ui-router besteht darin, verschachtelte Zustände und Ansichten zu verwalten.

Pros

  • Sie können mehrere ui-views auf einer Seite haben
  • Verschiedene Ansichten können ineinander verschachtelt und beibehalten werden, indem der Status in der Routing-Phase definiert wird.
  • Wir können hier eine Kind-Eltern-Beziehung haben, einfach wie Vererbung im Bundesstaat, auch Sie könnten Geschwisterzustände definieren.
  • Sie können den ui-view="some" des Status einfach ändern, indem Sie absolutes Routing verwenden, wobei @ mit dem Statusnamen verwendet wird.
  • Sie können auch relatives Routing verwenden, indem Sie nur @ zum Ändern von ui-view="some" verwenden. Dadurch wird ui-view ersetzt, anstatt zu prüfen, ob es verschachtelt ist oder nicht.
  • Hier können Sie ui-sref verwenden, um dynamisch eine href-URL auf der Grundlage von URL in einem Bundesstaat zu erstellen, und Sie können auch einen Zustandsparameter im json-Format angeben.

Weitere Informationen Angular ui-router

Um die Flexibilität bei verschachtelten Ansichten mit Status zu verbessern, würde ich Sie lieber für ui-router entscheiden.

242
Pankaj Parkar

Angulars eigener ng-Router berücksichtigt URLs beim Routing, UI-Router berücksichtigt states zusätzlich zu URLs.

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

Während Sie sich in ng-router befinden, müssen Sie bei der Bereitstellung von Links über <a href="">-Tag sehr vorsichtig mit URLs umgehen. In UI-Router müssen Sie nur state beachten. Sie bieten Links wie <a ui-sref="">. Beachten Sie, dass selbst wenn Sie <a href=""> im UI-Router verwenden, genau wie Sie es in ng-router tun würden, es trotzdem funktioniert. 

Selbst wenn Sie sich entscheiden, Ihre URL eines Tages zu ändern, bleibt Ihr state gleich und Sie müssen die URL nur unter .config ändern.

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

73
Aniket Sinha

$ route: Wird verwendet, um URLs mit Controllern und Ansichten (HTML-Partials) zu verknüpfen und überwacht $ location.url (), um den Pfad aus einer vorhandenen Routendefinition zuzuordnen. 

Wenn Sie ngRoute verwenden, wird die Route mit $ routeProvider konfiguriert. Wenn Sie 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'
        });
0
mukesh mali