Jaka jest różnica między routerem kątowym a angular-ui-routerem?

1080

Planuję używać AngularJS w moich dużych aplikacjach. Właśnie szukam odpowiednich modułów do użycia.

Jaka jest różnica między modułami ngRoute (angular-route.js) i ui-router (angular-ui-router.js) ?

W wielu artykułach, gdy używana jest ngRoute , trasa jest konfigurowana za pomocą $ routeProvider . Jednak w przypadku korzystania z routera interfejsu użytkownika trasa jest konfigurowana za pomocą $ stateProvider i $ urlRouterProvider .

Którego modułu należy użyć, aby poprawić zarządzanie i rozszerzalność?

Premchandra Singh
źródło
11
nie wspominając o nowym routerze angular w 1.4+ i 2.0
Zach Lysobey

Odpowiedzi:

1112

ui-router to moduł innej firmy i jest bardzo wydajny. Obsługuje wszystko, co może zrobić normalny ngRoute, a także wiele dodatkowych funkcji.

Oto kilka typowych powodów, dla których router-interfejs użytkownika wybierany jest przez ngRoute:

  • Interfejs ui-router pozwala na zagnieżdżone widoki i wiele nazwanych widoków . Jest to bardzo przydatne w przypadku większej aplikacji, w której możesz mieć strony dziedziczące z innych sekcji.

  • Interfejs ui-router pozwala na silne powiązanie między stanami na podstawie nazw stanów. Zmiana adresu URL w jednym miejscu spowoduje aktualizację każdego linku do tego stanu podczas tworzenia linków ui-sref. Bardzo przydatny w większych projektach, w których adresy URL mogą ulec zmianie.

  • Istnieje również koncepcja dekoratora, która może być używana do dynamicznego tworzenia tras na podstawie adresu URL, który próbuje być dostępny. Może to oznaczać, że nie będziesz musiał podawać wszystkich swoich tras wcześniej.

  • stany umożliwiają mapowanie i uzyskiwanie dostępu do różnych informacji o różnych stanach oraz łatwe przekazywanie informacji między stanami za pośrednictwem $stateParams.

  • Możesz łatwo ustalić, czy jesteś w stanie, czy nadrzędnym, aby dostosować element interfejsu użytkownika (podświetlając nawigację bieżącego stanu) w szablonach za pośrednictwem $stateinterfejsu użytkownika routera, który możesz ujawnić, ustawiając go $rootScopena run.

Zasadniczo ui-router jest routerem ngRouter z większą liczbą funkcji, pod arkuszami jest zupełnie inny. Te dodatkowe funkcje są bardzo przydatne w przypadku większych aplikacji.

Więcej informacji:

TheSharpieOne
źródło
134
Ogólnie jest to najlepsze wytłumaczenie, ale dla jednego kluczowego punktu: „Ogólnie rzecz biorąc, router ui jest routerem ngRouter z większą liczbą funkcji”. Jest to o wiele bardziej fundamentalne: ngRoutepozwala jedynie przypisywać kontrolery i szablony do tras adresów URL, podczas gdy podstawową abstrakcją w ui.routerstanach jest koncepcja bardziej wydajna.
Nate Abele
23
Dla niektórych istotne może być wskazanie różnicy w rozmiarze pliku w tej odpowiedzi. W tej chwili ngRoute: 35,9 kB / 4,4 kB / 2,5 kB i ui-router: 162,9 kB / 30,4 kB / 11,6 kB (nie zminimalizowane / zminimalizowane / gzipowane).
Alex Ross
35
Czy poważnie martwimy się o 162kb w 2015 roku?
Sum
27
Dlaczego nie @Catfish? Na świecie jest wiele miejsc o złych połączeniach internetowych, martw się o to bardzo ważne!
Bruno Casali
4
@tfrascaroli Nie zgadzam się - jeśli użytkownik ładuje aplikację po raz pierwszy, czasy ładowania strony silnie korelują z współczynnikami odrzuceń . Zdecydowanie rozważyłbym koszt / korzyść, zanim dodałem kolejne 130kB do strony.
Anthony Manning-Franklin
131

ngRoute to moduł opracowany przez zespół AngularJS, który wcześniej był częścią rdzenia AngularJS.

ui-router jest strukturą stworzoną poza projektem AngularJS w celu poprawy i ulepszenia możliwości routingu.

Z dokumentacji routera ui :

Router AngularUI jest strukturą routingu dla AngularJS, która pozwala zorganizować części interfejsu w maszynę stanu. W przeciwieństwie do usługi $ route w Angular core, która jest zorganizowana wokół tras URL, UI-Router jest zorganizowany wokół stanów, które opcjonalnie mogą mieć dołączone trasy, a także inne zachowania.

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

Żadne z nich nie jest lepsze, będziesz musiał wybrać najbardziej odpowiedni dla swojego projektu.

Jeśli jednak planujesz mieć złożone widoki w swojej aplikacji i chciałbyś poradzić sobie z pojęciem „$ state”. Polecam wybranie interfejsu użytkownika routera.

gadanina
źródło
1
FWIW Właśnie spędziłem kilka godzin waląc głową w interfejs ui-routera dla angularjs. Dokumentacja jest w BARDZO przepraszającym stanie, najwyraźniej pozostawiono ją porzuconą przez lata. Zepsute linki do ważnych przewodników, źle nazwane pakiety nugetów w samouczku, nazywacie to. W końcu poddałem się, gdy nie mogłem rozwiązać tego problemu stackoverflow.com/questions/23585065/... (wraz z pozornie wieloma innymi osobami). Wypróbowanie ngRoute teraz ...
UnionP
52

ngRoute jest częścią podstawowego frameworka AngularJS.

ui-router to biblioteka społeczności, która została stworzona w celu ulepszenia domyślnych możliwości routingu.

Oto dobry artykuł na temat konfiguracji / konfiguracji interfejsu użytkownika routera:

http://www.ng-newsletter.com/posts/angular-ui-router.html

Jake Johnson
źródło
35

Jeśli chcesz skorzystać z funkcji widoków zagnieżdżonych zaimplementowanych w paradygmacie ngRoute, wypróbuj odcinek trasy kątowej - ma on na celu rozszerzenie ngRoute, a nie zastąpienie go.

art
źródło
16
Nie widzę znaczenia twojej odpowiedzi. Autor zapytał konkretnie o różnice między routerem kątowym a angular-ui-routerem. Również oświadczenie, że jesteś twórcą, byłoby przydatne podczas promowania własnych bibliotek.
vally
23
Trafność jest prosta: angular-route + angular-route-segment = angular-ui-router. Różnica polega więc na: angular-ui-router
angular
1
myślę, że to poprawna odpowiedź. angular-route-segment.com jest zdecydowanie dobrym wyborem dla tych, którzy nie chcą narzutu związanego z używaniem interfejsu użytkownika. Również @vial ludzie ciężko pracują nad tworzeniem tych bibliotek, promowanie go nie jest niczym złym
phil
19

Ogólnie ui-router działa na mechanizmie stanowym ... Można to zrozumieć na prostym przykładzie:

Powiedzmy, że mamy dużą aplikację biblioteki muzycznej (jak ..gaana, saavan lub jakikolwiek inny). A na dole strony znajduje się odtwarzacz muzyki, który jest współużytkowany przez cały stan strony.

Powiedzmy teraz, że po prostu kliknij kilka utworów, aby je odtworzyć. W takim przypadku należy zmienić tylko stan odtwarzacza muzyki zamiast przeładowywać całą stronę. Ui-router może to łatwo obsłużyć.

W ngRoute po prostu dołączamy widok i kontroler.

UniCoder
źródło
2
można to zrobić i należy to zrobić przy użyciu usług i fabryk. Korzystanie z tego pakietu to brak zrozumienia kątowych tras, stanów i wzorców. Stany są obsługiwane przez adres URL, co jest poprawne, jeśli chcesz udostępnić aplikację w określonym stanie, ponadto możesz mieć wiele kontrolerów w tym samym widoku, które reagują na aktualizację danych usługi lub parametr adresu URL. router ui psuje wszystko i całkowicie niszczy wzór kątowy.
Pablo Ezequiel Leone
Całkowicie się zgadzam. Nadal nie mogę znaleźć wyjaśnienia, w którym konieczne jest użycie tej maszyny stanów
kushalvm,
18

Kątowy 1.x

ng-route :

ng-route został opracowany przez zespół angularJS do routingu.

ng-route: routing na podstawie adresu URL (lokalizacja).

Dawny:

$routeProvider
    .when("/home", {
        templateUrl : "home.html"
    })

trasa ui :

Interfejs ui-router jest rozwijany przez moduł innej firmy.

ui-router: routing oparty na stanie

Dawny:

 $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'home.html'
        })

-> Interfejs ui-router pozwala na zagnieżdżone widoki

-> Ui-router mocniejszy niż ng-route

ng-router , interfejs użytkownika

Mahesh K.
źródło
13

ngRoute to moduł zbudowany przez zespół Angular, który zapewnia podstawowe funkcje routingu po stronie klienta. Ten moduł stanowi dość potężną bazę do routingu i można go dość łatwo zbudować, aby zapewnić solidną funkcjonalność routingu, jak pokazano w tym poście na blogu (koniecznie przeczytaj ślad komentarza między Wardem Bellem a Benem Nadelem, autorem - są para profesjonalistów Angular)

ui-router przenosi fokus z tras zorientowanych na adres URL na „stany” aplikacji, które mogą, ale nie muszą, znajdować się w adresie URL.

Podstawowe funkcje dodane przez interfejs użytkownika to stany zagnieżdżone i nazwane widoki.

Stany zagnieżdżone pozwalają oddzielić logikę kontrolera dla różnych elementów aplikacji. Bardzo prostym przykładem może być aplikacja z podstawową nawigacją u góry, dodatkową listą nawigacyjną po lewej i treścią po prawej. Bez stanów zagnieżdżonych pojedynczy kontroler zazwyczaj musiałby obsługiwać logikę wyświetlania dla nawigacji dodatkowej, a także dla zawartości. Zagnieżdżone routing pozwala oddzielić te obawy.

Nazwane widoki to kolejna dodatkowa funkcja interfejsu użytkownika routera. Dzięki ngRoute możesz mieć tylko jedną dyrektywę ngView na stronie, podczas gdy z nazwanymi widokami w interfejsie routera możesz określić wiele dyrektyw widoku interfejsu użytkownika, a następnie każdy stan może wpływać na szablon i kontroler widoków nazw. Bardzo prostym przykładem tego byłoby posiadanie głównej zawartości aplikacji jako widoku głównego, a następnie posiadanie paska stopki, który byłby oddzielnym widokiem interfejsu użytkownika. W tym scenariuszu sterownik stopki nie musi już nasłuchiwać zmian stanu / trasy.

Dobre porównanie ngRoute i routera interfejsu użytkownika można znaleźć w tym odcinku podcastu .

Aby wszystko było bardziej mylące, miej oko na nowy „oficjalny” moduł routingu, który zespół Angular spodziewa się wydać dla wersji 1.5 i 2.0 Angular. To zastąpi moduł ngRoute. Oto aktualna dokumentacja nowego modułu routera - jest dość rzadka na ten post, ponieważ wdrożenie nie zostało jeszcze sfinalizowane. Obejrzyj tutaj, aby uzyskać więcej informacji o tym, kiedy ten moduł zostanie faktycznie wydany.

Sean
źródło
11

ngRoute to podstawowa biblioteka routingu, w której można określić tylko jeden widok i kontroler dla dowolnej trasy.

Za pomocą interfejsu użytkownika routera można określić wiele widoków, zarówno równoległych, jak i zagnieżdżonych. Więc jeśli twoja aplikacja wymaga (lub może wymagać w przyszłości) wszelkiego rodzaju skomplikowanych tras / widoków, skorzystaj z interfejsu użytkownika routera.

To jest najlepszy przewodnik dla routera AngularUI.

Kunal Kapadia
źródło
10

Podstawowa rzecz, którą musisz wiedzieć: zastosowania routera $location.path()i routera$state.go

Odpocznij od nas wszystkich funkcji.

reklama digish
źródło
8

router ui ułatwi Ci życie! Możesz dodać go do swojej aplikacji AngularJS, wstrzykując ją do swoich aplikacji ...

ng-route jest częścią podstawowego AngularJS, więc jest prostszy i daje mniej opcji ...

Spójrz tutaj, aby lepiej zrozumieć trasę ng: https://docs.angularjs.org/api/ngRoute

Również podczas korzystania z niego nie zapomnij użyć: ngView ..

router ng-ui jest inny, ale:

https://github.com/angular-ui/ui-router, ale daje więcej opcji ....

Alireza
źródło
6

Router AngularUI jest strukturą routingu dla AngularJS, która pozwala zorganizować części interfejsu w maszynę stanu. W przeciwieństwie do usługi $ route w module Angular ngRoute, która jest zorganizowana wokół tras URL, UI-Router jest zorganizowany wokół stanów, które opcjonalnie mogą mieć dołączone trasy, a także inne zachowania.

https://github.com/angular-ui/ui-router

Vaheeds
źródło
4

ngRoute to moduł opracowany przez zespół Angular.js, który wcześniej był częścią rdzenia Angular.

ui-router jest strukturą stworzoną poza projektem Angular.js w celu poprawy i zwiększenia możliwości routingu.

Rajat-Systematix
źródło
3

1- ngRoute został opracowany przez zespół Angular, podczas gdy ui-router jest modułem zewnętrznym. 2- ngRoute implementuje routing na podstawie adresu URL trasy, podczas gdy ui-router implementuje routing na podstawie stanu aplikacji. 3- ui-router zapewnia wszystko, co zapewnia trasa ng oraz dodatkowe funkcje, takie jak stany zagnieżdżone i wiele nazwanych widoków.


źródło
0

ng-View(opracowany przez zespół AngularJS) można używać tylko raz na stronę, natomiast ui-View(moduł innej firmy) można używać wielokrotnie na stronie.

ui-View jest zatem najlepszą opcją.

Ragupathy
źródło