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

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ść?

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:

• Github: https://github.com/angular-ui/ui-router
• Dokumentacja:
  • Dokumentacja interfejsu API: http://angular-ui.github.io/ui-router/site/#/api
  • Przewodnik: https://github.com/angular-ui/ui-router/wiki
• Często zadawane pytania: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions
• Przykładowa aplikacja: http://angular-ui.github.io/ui-router/sample/#/

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.

ngRoute to moduł rdzenia kątowego, który jest dobry dla podstawowych scenariuszy. Wierzę, że dodadzą bardziej zaawansowane funkcje w nadchodzących wydaniach.

URL: https://docs.angularjs.org/api/ngRoute

Ui-router jest modułem, który rozwiązuje problemy ngRoute. Widoki głównie zagnieżdżone / złożone.

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

Niektóre różnice między interfejsem ui-routerem a ngRoute

http://www.amasik.com/angularjs-ngroute-vs-ui-router/

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

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.

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.

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

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.

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.

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

Odpocznij od nas wszystkich funkcji.

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 ....

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

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.

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.

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ą.