Jaka jest różnica między $ routeProvider a $ stateProvider?

Odpowiedzi:

248

Oba wykonują taką samą pracę, jak są używane do celów routingu w SPA (aplikacja jednostronicowa).

1. Routing kątowy - za dokumentację $ routeProvider

Adresy URL do kontrolerów i widoków (częściowe HTML). Obserwuje $ location.url () i próbuje zmapować ścieżkę do istniejącej definicji trasy.

HTML

<div ng-view></div>

Powyższy tag wyrenderuje szablon ze $routeProvider.when()stanu, o którym wspomniałeś w .config(fazie konfiguracji) angular

Ograniczenia: -

  • Strona może zawierać tylko jeden ng-viewna stronie
  • Jeśli SPA ma wiele małych komponentów na stronie, które chcesz renderować na podstawie pewnych warunków, $routeProviderzakończy się niepowodzeniem. (aby to osiągnąć, musimy użyć dyrektyw jak ng-include, ng-switch, ng-if, ng-show, który wygląda źle je mieć w SPA)
  • Nie możesz tworzyć powiązań między dwiema ścieżkami, takimi jak relacja rodzic i dziecko.
  • Nie możesz pokazać i ukryć części widoku opartej na wzorcu adresu URL.

2. ui-router - per $ stateProvider docs

AngularUI Router jest frameworkiem routingu dla AngularJS, który pozwala na zorganizowanie części interfejsu w maszynę stanu. UI-Router jest zorganizowany wokół stanów, które mogą opcjonalnie mieć dołączone trasy, a także inne zachowania.

Wiele & nazwanych widoków

Kolejną świetną funkcją jest możliwość posiadania wielu widoków interfejsu użytkownika w szablonie.

Chociaż wiele równoległych widoków to potężna funkcja, często będziesz w stanie efektywniej zarządzać swoimi interfejsami, zagnieżdżając je viewi łącząc te widoki ze stanami zagnieżdżonymi.

HTML

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

Wiekszosc z ui-router jego możliwości polega na tym, że może zarządzać zagnieżdżonymi stanami i widokami.

Plusy

  • Możesz mieć wiele plików ui-view na jednej stronie
  • Różne widoki mogą być zagnieżdżane w sobie i utrzymywane poprzez zdefiniowanie stanu w fazie routingu.
  • Możemy mieć tutaj relację dziecko-rodzic, po prostu jak dziedziczenie w stanie, a także możesz zdefiniować stany rodzeństwa.
  • Możesz zmienić ui-view="some"stan po prostu używając routingu bezwzględnego przy użyciu @nazwy stanu.
  • Innym sposobem rutowania względnego jest użycie tylko @do zmiany ui-view="some". Spowoduje to zastąpienie ui-viewzamiast sprawdzania, czy jest zagnieżdżone, czy nie.
  • Tutaj możesz użyć ui-srefdo hrefdynamicznego tworzenia adresu URL na podstawie URLwspomnianego w stanie, a także możesz podać parametry stanu w jsonformacie.

Więcej informacji Angular ui-router

Aby uzyskać lepszą elastyczność z różnymi zagnieżdżonymi widokami ze stanami, wolałbym, abyś to zrobił ui-router

Pankaj Parkar
źródło
Czy ktoś może mi pokazać różnicę i równoważność tego dostawcy trasy i dostawcy stanu w kodach?
bleyk
@bleykFaust, co masz na myśli w kodach? odpowiedź, którą wyjaśniłem, jest prostymi słowami… której części nie rozumiesz?
Pankaj Parkar
@PankajParkar, używam routeprovider, zastanawiam się, jak mogę to zmienić na stateprovider?
bleyk
@bleykFaust, to nie jest odpowiedź, na którą powinieneś spojrzeć .. ta odpowiedź wskazuje na różnicę $stateProvider&$routeProvider
Pankaj Parkar
Czy może rozwiązać potrzebę wstępnego ładowania strony za pomocą tras?
Martian2049
74

Własny ng-Router Angulara bierze URLspod uwagę podczas routingu, UI-Router statesoprócz adresów URL.

Stany są powiązane z nazwanymi, zagnieżdżonymi i równoległymi widokami, co pozwala na efektywne zarządzanie interfejsem aplikacji.

Będąc w ng-router, musisz bardzo uważać na adresy URL podczas dostarczania linków za pośrednictwem <a href="">tagu, w UI-Router musisz tylko statepamiętać. Podajesz linki takie jak <a ui-sref="">. Zwróć uwagę, że nawet jeśli używasz<a href=""> w UI-Router, tak jak w ng-router, to nadal będzie działać.

Tak więc, nawet jeśli pewnego dnia zdecydujesz się zmienić adres URL, statepozostanie on taki sam i będziesz musiał zmienić adres URL tylko pod adresem.config .

Podczas gdy ngRouter może być używany do tworzenia prostych aplikacji, UI-Router znacznie ułatwia tworzenie złożonych aplikacji. Tutaj jego wiki.

Aniket Sinha
źródło
0

$ route: Służy do głębokiego linkowania adresów URL do kontrolerów i widoków (częściowe HTML) i obserwuje $ location.url () w celu zmapowania ścieżki z istniejącej definicji trasy.

Kiedy używamy ngRoute, trasa jest konfigurowana za pomocą $ routeProvider, a gdy używamy ui-router, trasa jest konfigurowana za pomocą $ stateProvider i $ urlRouterProvider.

<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'
        });
mukesh mali
źródło