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

Proszę wyjaśnić różnicę między $routeProvider i $stateProvider w AngularJS.

Jaka jest najlepsza praktyka?
Author: Xufox, 2014-12-25
Source

3 answers

Oba wykonują tę samą pracę, ponieważ są używane do celów routingu w SPA (Single Page Application).

1. Routing kątowy-per $routeprovider docs

Adresy URL do kontrolerów i widoków (strony HTML). It watches $lokalizacja.url () i próbuje mapować ścieżkę do istniejącej trasy definicja.

HTML 

<div ng-view></div>

Powyższy znacznik wyrenderuje szablon z $routeProvider.when() warunku, o którym wspomniałeś w .config (Konfiguracja Faza) kątowa

Ograniczenia:-

  • strona może zawierać tylko pojedyncze ng-view na stronie
  • jeśli Twoje SPA ma wiele małych komponentów na stronie, które chcesz renderować na podstawie pewnych warunków, $routeProvider nie powiedzie się. (aby to osiągnąć, musimy użyć dyrektyw takich jak ng-include, ng-switch, ng-if, ng-show, co wygląda źle mieć je w SPA)
  • nie można odnosić się między dwiema drogami, takimi jak relacja rodzica i dziecka.
  • nie możesz pokazać i ukryć część widoku oparta na wzorze url.

2. ui-router-per $stateProvider docs

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

Wiele & Nazwanych Widoków

Kolejną wspaniałą cechą jest możliwość mieć wiele widoków interfejsu w szablonie.

Podczas gdy wiele równoległych widoków jest potężną funkcją, często będziesz w stanie efektywniej zarządzać interfejsami poprzez zagnieżdżanie swoich views i parowanie tych widoków 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>

Większość mocy ui-router jest w stanie zarządzać zagnieżdżonym stanem i widokami.

Plusy

  • możesz mieć wiele ui-view na jednej stronie
  • różne widoki mogą być zagnieżdżane w siebie i utrzymywane przez zdefiniowanie stanu w fazie routingu.
  • możemy mieć relację z dzieckiem i rodzicem tutaj, po prostu jak dziedziczenie w stanie, również możesz zdefiniować Stany rodzeństwa.
  • można zmienić ui-view="some" stanu po prostu używając routingu bezwzględnego używając @ z nazwą stanu.
  • innym sposobem routingu względnego jest użycie tylko @ do zmiany ui-view="some". Spowoduje to zastąpienie ui-view zamiast sprawdzania, czy jest zagnieżdżony, czy nie.
  • tutaj możesz użyj ui-sref, aby utworzyć dynamicznie adres URL href na podstawie URL wymienionego w stanie, możesz również podać params stanu w formacie json.

Więcej informacji Angular ui-router

Dla lepszej elastyczności z różnymi zagnieżdżonymi widokami ze Stanami, wolałbym, abyś wybrał ui-router

 234
Author: Pankaj Parkar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-17 12:37:02

Router ng-Router firmy Angular bierze pod uwagę URLs podczas routingu, UI-Router oprócz adresów URL pobiera states.

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

Podczas gdy w ng-routerze, musisz bardzo uważać na adresy URL przy podawaniu linków za pomocą znacznika <a href="">, w UI-routerze musisz mieć tylko state na uwadze. Podajesz linki typu <a ui-sref="">. Zauważ, że nawet jeśli używasz <a href=""> w Ui-routerze, podobnie jak w ng-routerze, nadal będzie działać.

Tak więc, nawet jeśli pewnego dnia zdecydujesz się zmienić swój adres URL, Twój state pozostanie taki sam i musisz zmienić adres URL tylko w .config.

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

 73
Author: Aniket Sinha,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-25 11:59:02

$route: służy do głębokiego łączenia adresów URL ze sterownikami i widokami (częściowymi HTML) oraz do oglądania $lokalizacji.url () w celu mapowania ścieżki z istniejącej definicji trasy.

Gdy używamy ngRoute, trasa jest skonfigurowana za pomocą $routeProvider, a gdy używamy ui-routera, trasa jest skonfigurowana 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'
        });
 0
Author: mukesh mali,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-26 10:30:44