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

Proszę wyjaśnić różnicę między AngularJS $routeProvideri $stateProviderw.

Jaka jest najlepsza praktyka?

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

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.

$ 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'
        });