Proszę wyjaśnić różnicę między AngularJS $routeProvider
i $stateProvider
w.
Jaka jest najlepsza praktyka?
Proszę wyjaśnić różnicę między AngularJS $routeProvider
i $stateProvider
w.
Jaka jest najlepsza praktyka?
Oba wykonują taką samą pracę, jak są używane do celów routingu w SPA (aplikacja jednostronicowa).
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: -
ng-view
na stronie$routeProvider
zakoń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)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 view
i łą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
ui-view
na jednej stronieui-view="some"
stan po prostu używając routingu bezwzględnego przy użyciu @
nazwy stanu.@
do zmiany ui-view="some"
. Spowoduje to zastąpienie ui-view
zamiast sprawdzania, czy jest zagnieżdżone, czy nie.ui-sref
do href
dynamicznego tworzenia adresu URL na podstawie URL
wspomnianego w stanie, a także możesz podać parametry stanu w json
formacie.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
$stateProvider
&$routeProvider
Własny ng-Router Angulara bierze
URLs
pod uwagę podczas routingu, UI-Routerstates
oprócz adresów URL.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 tylkostate
pamię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,
state
pozostanie 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.
źródło
$ 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.
źródło