В чем разница между angular -route и angular -ui-router?

Я планирую использовать AngularJS в своих больших приложениях. Таким образом, я нахожусь в поиске правильных модулей для использования.

В чем разница между ngRoute (angular -route.js) и ui-router (angular -ui-router.js).

Во многих статьях, когда используется ngRoute, маршрут настроен с помощью $routeProvider. Однако при использовании с ui-router маршрут настраивается с помощью $stateProvider и $urlRouterProvider.

Какой модуль следует использовать для лучшей управляемости и расширяемости?

1006
задан Premchandra Singh 09 янв. '14 в 18:03
источник поделиться
16 ответов

ui-router является сторонним модулем и очень мощным. Он поддерживает все, что может выполнять обычный ngRoute, а также множество дополнительных функций.

Вот общая причина, по которой ui-router выбирается над ngRoute:

  • ui-router позволяет вложенные представления и несколько именованных просмотров. Это очень полезно в более крупном приложении, где у вас могут быть страницы, которые наследуются от других разделов.

  • ui-router позволяет вам иметь привязку сильного типа между состояниями, основанными на именах состояний. Изменение URL-адреса в одном месте будет обновлять каждую ссылку на это состояние, когда вы создадите свои ссылки с помощью ui-sref. Очень полезно для больших проектов, где URL-адреса могут меняться.

  • Существует также концепция decorator, которая может использоваться, чтобы позволить вашим маршрутам динамически создаваться на основе URL, который пытается получить доступ. Это может означать, что вам не нужно будет указывать все ваши маршруты перед началом работы.

  • states позволяют вам сопоставлять и получать доступ к различной информации о разных состояниях, и вы можете легко передавать информацию между состояниями через $stateParams.

  • Вы можете легко определить, находитесь ли вы в состоянии или родительском состоянии для настройки элемента пользовательского интерфейса (выделение навигации текущего состояния) в ваших шаблонах с помощью $state, предоставленный ui-router, который вы можете открыть, установив его в $rootScope на run.

По сути, ui-router - это ngRouter с большим количеством функций, под листами это совсем другое. Эти дополнительные функции очень полезны для более крупных приложений.

Дополнительная информация:

1083
ответ дан TheSharpieOne 09 янв. '14 в 18:24
источник поделиться

ngRoute - это модуль, разработанный командой AngularJS, которая ранее была частью ядра AngularJS.

ui-router - это структура, которая была создана вне проекта AngularJS для улучшения и улучшения возможностей маршрутизации.

От ui-router документация:

AngularUI Router - это схема маршрутизации для AngularJS, которая позволяет вы можете организовать части вашего интерфейса в конечный автомат. В отличие от службы $route в ядре Angular, которая организована вокруг URL-маршруты, UI-Router организован вокруг состояний, которые могут факультативно имеют маршруты, а также другое поведение, прилагаемое.

Государства привязаны к именам, вложенным и параллельным представлениям, что позволяет мощное управление вашим интерфейсом приложений.

Ни один из них не лучше, вам нужно будет выбрать наиболее подходящий для вашего проекта.

Однако, если вы планируете иметь сложные представления в своем приложении, и вы хотели бы иметь дело с понятием "$ state". Я рекомендую вам выбрать ui-router.

125
ответ дан gab 09 янв. '14 в 18:30
источник поделиться

ngRoute - это основной модуль angular, который хорош для основных сценариев. Я считаю, что в будущих выпусках они добавят более мощные функции.

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

Ui-router - это расширенный модуль, который преодолевает проблемы ngRoute. Главным образом вложенные/сложные виды.

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

Некоторая разница между ui-router и ngRoute

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

enter image description here

64
ответ дан Asik 18 дек. '14 в 16:05
источник поделиться

Почему вы должны использовать UI-Router

Несколько просмотров:

Большинство приложений можно разбить на регионы. Как минимум, приложения обычно имеют заголовок, основную область содержимого и нижний колонтитул.

Обычно приложения могут иметь дополнительную боковую панель в левой или правой части страницы, как показано ниже.

Введите описание изображения здесь

В большинстве случаев все эти области (представления) отображаются на странице одновременно. С помощью встроенного маршрутизатора AngularJS ngRoute разрешено только одно представление (ng-view) на странице. Это ограничение заставляет пользователей использовать (ng-include) или другие обходные пути для создания макета или главной страницы для их приложения. UI-Router поддерживает несколько видов, и каждый может иметь свой собственный соответствующий контроллер, чтобы каждый из этих регионов мог быть инкапсулирован и повторно использован во всем приложении, если это необходимо.

Вложенные представления:

Общий пример вложенного представления в приложениях - это мастер/деталь или, более конкретно, страница списка/подробностей. Во многих приложениях отображается список элементов, а затем, когда вы нажимаете на элемент, вы видите детали для этого элемента. Взяв этот пример дальше, вы можете щелкнуть ссылку редактирования при просмотре деталей, которые перейдут к редактируемой форме для элемента (см. Диаграмму ниже для визуализации).

Введите описание изображения здесь

Этот сценарий легко достигается с помощью встроенного маршрутизатора AngularJS ngRoute, если список и детали находятся на отдельных страницах (или представлениях, как они вызывают в AngularJS). Однако, если вы хотите, чтобы список оставался на странице, пока вы показываете детали справа или ниже списка, это становится более сложным.

Чтобы быть ясным, это требование может быть достигнуто с помощью ngRoute путем совместного использования одного представления с двумя контроллерами: один для списка и один для подробностей, а также скрытие и отображение деталей по мере необходимости.

Результат не идеален, потому что мы хотели бы, чтобы список и детали каждого из них имели свой собственный контроллер и отображали только одну ответственность (показывая список или отображая детали элемента). Инкапсулируя эти области пользовательского интерфейса в своем собственном представлении, мы можем иметь более гибкий пользовательский интерфейс, который позволяет нам объединять фрагменты или разбивать их по мере необходимости для удовлетворения требований.

Вложенные представления позволяют нам не только объединить эти представления одновременно, но также и вложить представление в другое представление.

53
ответ дан Suneet Bansal 17 мая '16 в 14:01
источник поделиться

ngRoute является частью основной структуры AngularJS.

ui-router - это библиотека сообщества, которая была создана, чтобы попытаться улучшить возможности маршрутизации по умолчанию.

Вот хорошая статья о настройке/настройке ui-router:

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

49
ответ дан Jake Johnson 09 янв. '14 в 18:28
источник поделиться

Если вы хотите использовать функциональность вложенных представлений, реализованную в парадигме ngRoute, попробуйте angular-route-segment - она ​​предназначена для расширения ngRoute, а не для его замены.

34
ответ дан artch 07 апр. '14 в 22:24
источник поделиться

Обычно ui-router работает на государственном механизме... Его можно понять с помощью простого примера:

Скажем, у нас есть большое приложение музыкальной библиотеки (например,..gaana или saavan или любой другой). И в нижней части страницы у вас есть музыкальный проигрыватель, который используется во всех состояниях страницы.

Теперь позвольте сказать, что вы просто нажимаете на некоторые песни, чтобы играть. В этом случае вместо перезагрузки полной страницы должно измениться только состояние музыкального проигрывателя. Это можно легко обработать с помощью ui-router.

Пока в ngRoute мы просто прикрепляем представление и контроллер.

18
ответ дан UniCoder 03 янв. '16 в 1:36
источник поделиться

Angular 1.x

ng-route:

ng-route разработан командой angularJS для маршрутизации.

ng-route: URL-адрес (местоположение).

Пример:

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

ui-route:

ui-router разрабатывается сторонним модулем.

ui-router: маршрутизация на основе состояния

Пример:

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

- > ui-router допускает вложенные представления

- > ui-router более мощный, чем ng-route

ng-router, ui-router

16
ответ дан Mahesh Karthu 30 авг. '16 в 15:12
источник поделиться

ngRoute - это модуль, созданный командой Angular, которая обеспечивает базовую функциональность маршрутизации на стороне клиента. Этот модуль обеспечивает довольно мощную базу для маршрутизации и может быть легко построен, чтобы обеспечить надежную маршрутизацию, как показано в этом сообщении в блоге (be обязательно прочитайте комментарий между Уордом Белл и Беном Наделем, автор - они - пара Angular профи)

ui-router переключает фокус с URL-ориентированных маршрутов на "состояния" приложения, которые могут отражаться или не отражаться в URL-адресе.

Основными функциями, добавленными ui-router, являются вложенные состояния и именованные представления.

Вложенные состояния позволяют разделить логику контроллера на различные части приложения. Очень простым примером этого может быть приложение с основной навигацией по верхней части, дополнительный навигационный список слева и контент справа. Без вложенных состояний один контроллер, как правило, должен обрабатывать логику отображения для вторичной навигации, а также контента. Вложенная маршрутизация позволяет отделить эти проблемы.

Именованные виды - еще одна дополнительная функция ui-router. С ngRoute вы можете иметь только одну директиву ngView на странице, тогда как с именованными представлениями в ui-router вы можете указать несколько директив ui-view, а затем каждое состояние может влиять на шаблон и контроллер представлений имен. Супер простым примером этого будет то, что основной контент вашего приложения будет основным видом, а затем также иметь нижний колонтитул, который будет отдельным ui-view. В этом случае контроллер нижнего колонтитула больше не должен прослушивать изменения состояния/маршрута.

Хорошее сравнение ngRoute и ui-router можно найти на этом эпизоде ​​подкаста.

Чтобы сделать вещи более запутанными, следите за новым "официальным" модулем маршрутизации, который команда Angular ожидает выпуска для версий 1.5 и 2.0 Angular. Это заменит модуль ngRoute. Здесь - текущая документация для нового модуля Router - она ​​довольно скудная по сравнению с этой публикацией, так как реализация еще не завершена. Смотрите здесь для получения дополнительных новостей о том, когда этот модуль действительно будет выпущен.

13
ответ дан Sean 27 июня '15 в 6:58
источник поделиться

ngRoute - это базовая библиотека маршрутизации, где вы можете указать только один вид и контроллер для любого маршрута.

С помощью ui-router вы можете указать несколько видов, как параллельных, так и вложенных. Поэтому, если вашему приложению требуется (или может потребоваться в будущем) любая сложная маршрутизация/просмотр, тогда идите с ui-router.

Это лучший способ начать работу с маршрутизатором AngularUI.

11
ответ дан Kunal Kapadia 28 авг. '14 в 13:06
источник поделиться

Основная вещь, которую вы должны знать: ng-router использует $location.path(), а ui-router использует $state.go

Предоставьте нам все возможности.

10
ответ дан digish a d 30 окт. '16 в 3:18
источник поделиться

ui router упрощает вашу жизнь! Вы можете добавить его в приложение AngularJS, введя его в свои приложения...

ng-route входит в состав ядра AngularJS, поэтому он проще и дает вам меньше возможностей...

Посмотрите здесь, чтобы лучше понять ng-route: https://docs.angularjs.org/api/ngRoute

Также при использовании, не забудьте использовать: ngView..

ng-ui-router отличается, но

https://github.com/angular-ui/ui-router, но дает больше возможностей....

8
ответ дан Alireza 16 окт. '15 в 16:34
источник поделиться

AngularUI Router - это структура маршрутизации для AngularJS, которая позволяет вам организовать части вашего интерфейса в конечный автомат. В отличие от службы $route в модуле Angular ngRoute, который организован вокруг маршрутов URL, UI-Router организован вокруг состояний, которые могут необязательно иметь маршруты, а также другое поведение, прикрепленное.

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

6
ответ дан vaheeds 08 февр. '16 в 8:16
источник поделиться

ngRoute - это модуль, разработанный командой Angular.js, которая ранее была частью ядра Angular.

ui-router - это структура, которая была создана вне проекта Angular.js для улучшения и улучшения возможностей маршрутизации.

4
ответ дан Rajat-Systematix 08 марта '17 в 12:51
источник поделиться

1- ngRoute разрабатывается командой angular, тогда как ui-router является сторонним модулем. 2- ngRoute реализует маршрутизацию на основе URL маршрута, тогда как ui-router реализует маршрутизацию на основе состояния приложения. 3- ui-router обеспечивает все, что обеспечивает ng-route, плюс некоторые дополнительные функции, такие как вложенные состояния и несколько именованных представлений.

3
ответ дан user2136053 19 янв. '17 в 12:32
источник поделиться

ng-View (разработанный командой AngularJS) можно использовать только один раз на страницу, тогда как ui-View (сторонний модуль) можно использовать несколько раз на странице.

ui-View - лучший вариант.

0
ответ дан Ragupathy 16 авг. '17 в 15:12
источник поделиться